/* ============================================================================
   MOBILE RESPONSIVE
   ============================================================================ */

/* Narrower desktops — hide Type column to save space */
@media (max-width: 1400px) {

    .tournaments-table .tt-type,
    .tournaments-table thead th:nth-child(6) {
        display: none;
    }
}

/* Tablets and smaller desktops */
@media (max-width: 1024px) {
    .container {
        padding: var(--space-6);
    }

    .nav-user {
        gap: var(--space-3);
    }

    .nav-user .btn {
        min-height: 0;
        font-size: 0.85rem;
        padding: var(--space-1-5) var(--space-3);
    }

    .tournaments-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--space-4);
    }

    .tournament-filters {
        flex-direction: column;
        gap: var(--space-4);
    }

    .filter-group {
        min-width: 100%;
    }

    .players-roster {
        grid-template-columns: 1fr;
    }

    .tabs {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        flex-shrink: 0;
    }
}

/* ── Tablet-only (portrait iPads sit at 820–834px, above the 768 drawer
   breakpoint, so they get the full horizontal desktop nav). Keep that nav on a
   single row instead of letting it wrap to an ugly second line, and protect the
   layout against long school names. ── */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Reclaim horizontal room so the single-row nav fits on portrait tablets */
    .navbar {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .nav-brand .brand-logo-full {
        height: 28px;
    }

    .nav-user {
        flex-wrap: nowrap;
        gap: var(--space-1-5);
    }

    .nav-user .nav-link,
    .nav-user .btn-sm {
        padding: var(--space-1-5) var(--space-2);
        font-size: 0.78rem;
    }

    .nav-dropdown-trigger {
        padding: var(--space-1-5) var(--space-2);
        font-size: 0.78rem;
    }

    /* Long school names must not push the nav into wrapping */
    .nav-school-name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* Mobile phones */
@media (max-width: 768px) {
    .navbar {
        padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1rem 0.75rem;
        min-height: auto;
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    .hamburger-toggle {
        display: flex;
    }

    .nav-main {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-brand {
        padding-bottom: 0;
    }

    .nav-brand .brand-logo {
        height: 35px;
    }

    .nav-brand .brand-logo-full {
        height: 31px;
    }

    .nav-brand h2 {
        font-size: 1.1rem;
    }

    /* Overlay not needed for full-screen drawer */
    .nav-drawer-overlay {
        display: none !important;
    }

    /* ── Mobile Slide-out Drawer ── */
    .nav-user {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        background: var(--bg-primary);
        z-index: var(--z-fullscreen);
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform var(--motion-slower) var(--ease-decelerate);
        box-shadow: none;
    }

    [data-theme="light"] .nav-user {
        background: var(--surface-solid);
        box-shadow: none;
    }

    .navbar.menu-open .nav-user,
    .nav-user.drawer-active {
        transform: translateX(0);
    }

    /* Subtle staggered fade-in of drawer contents for a more polished open */
    .navbar.menu-open .nav-user>*,
    .nav-user.drawer-active>* {
        animation: navDrawerFadeIn 0.32s ease both;
        animation-delay: 0.08s;
    }

    @keyframes navDrawerFadeIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Drawer header */
    .nav-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--border-subtle);
        flex-shrink: 0;
        background: var(--raise-1);
    }

    .nav-drawer-header .drawer-user-name {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    [data-theme="light"] .nav-drawer-header .drawer-user-name {
        color: var(--card-text);
    }

    [data-theme="light"] .nav-drawer-header {
        border-bottom-color: var(--border-subtle);
        background: var(--raise-2);
    }

    .nav-drawer-close {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: var(--space-1);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-drawer-close:hover {
        color: var(--text-primary);
        background: var(--raise-4);
    }

    [data-theme="light"] .nav-drawer-close {
        color: var(--text-muted);
    }

    [data-theme="light"] .nav-drawer-close:hover {
        color: var(--card-text);
        background: var(--raise-3);
    }

    /* Drawer nav content */
    .nav-drawer-links {
        flex: 1;
        padding: var(--space-2) 0;
        overflow-y: auto;
    }

    .nav-drawer-links>.nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        padding: var(--space-3) var(--space-5);
        font-size: 0.9rem;
        text-align: left;
        box-sizing: border-box;
        border: none;
        background: none;
        color: var(--text-primary);
        cursor: pointer;
        transition: background var(--motion-fast);
    }

    .nav-drawer-links>.nav-link:hover {
        background: var(--raise-2);
    }

    .nav-drawer-links>.nav-link.active {
        color: var(--brand-ink);
        background: rgba(var(--gsx-brand-rgb), 0.08);
    }

    [data-theme="light"] .nav-drawer-links>.nav-link {
        color: var(--text-secondary);
    }

    [data-theme="light"] .nav-drawer-links>.nav-link:hover {
        background: var(--raise-2);
    }

    [data-theme="light"] .nav-drawer-links>.nav-link.active {
        color: var(--brand-ink);
        background: rgba(var(--gsx-brand-rgb), 0.06);
    }

    /* ── Drawer Dropdown Sections ── */
    .nav-dropdown {
        width: 100%;
        border-bottom: 1px solid var(--hairline-faint);
    }

    [data-theme="light"] .nav-dropdown {
        border-bottom-color: var(--hairline-faint);
    }

    .nav-dropdown-trigger {
        width: 100%;
        justify-content: space-between;
        padding: var(--space-3) var(--space-5);
        font-size: 0.9rem;
        border-radius: 0;
    }

    .nav-dropdown-trigger:hover {
        background: var(--raise-2);
    }

    [data-theme="light"] .nav-dropdown-trigger:hover {
        background: var(--raise-2);
    }

    .nav-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--raise-2);
        padding: 0 0 var(--space-1-5);
        margin: 0;
        min-width: 0;
    }

    [data-theme="light"] .nav-dropdown-menu {
        background: var(--raise-1);
    }

    .nav-dropdown-item {
        padding: var(--space-2-5) var(--space-5) var(--space-2-5) var(--space-8);
        font-size: 0.85rem;
        border-radius: 0;
    }

    .nav-dropdown-item:hover {
        background: rgba(var(--gsx-brand-rgb), 0.1);
    }

    [data-theme="light"] .nav-dropdown-item:hover {
        background: rgba(var(--gsx-brand-rgb), 0.06);
    }

    /* ── Drawer Footer (Profile/Logout/Theme) ── */
    .nav-right-group {
        width: 100%;
        margin: 0;
        padding: var(--space-3-5) var(--space-5);
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        background: var(--raise-1);
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex-shrink: 0;
        margin-top: auto;
    }

    .nav-right-group .nav-link {
        flex: 1;
        text-align: center;
        padding: var(--space-2-5) var(--space-2);
        font-size: 0.85rem;
        border-radius: var(--radius-sm);
    }

    .nav-right-group .theme-toggle {
        width: 36px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--radius-sm);
        flex-shrink: 0;
    }

    [data-theme="light"] .nav-right-group {
        border-top-color: var(--border-subtle);
    }

    /* Clean up nav items in drawer */
    .nav-user .btn,
    .nav-user .btn-sm,
    .nav-user a.btn,
    .nav-user .btn-go-live,
    .nav-user .btn-release-results {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        margin: var(--space-1) var(--space-5);
        width: calc(100% - 2.5rem);
    }

    .nav-user .theme-toggle {
        width: 36px;
        height: 36px;
    }

    /* Logout in drawer footer */
    .nav-user .btn-logout,
    .nav-user .nav-logout {
        margin-top: 0;
        border-top: none;
        padding-top: var(--space-2-5);
        border-left: none;
        color: var(--danger-ink);
    }

    .nav-user .nav-logout:hover {
        color: var(--danger-ink);
        background: rgba(239, 68, 68, 0.08); /* tokens-allow: danger tint at 0.08 alpha; --danger-wash is 0.12 and visually changes the hover */
    }

    [data-theme="light"] .nav-user .btn-logout,
    [data-theme="light"] .nav-user .nav-logout {
        border-top-color: transparent;
    }

    /* Show LIVE button in mobile drawer */
    .nav-user .btn-live {
        display: flex !important;
        align-items: center;
        gap: var(--space-1-5);
        margin: var(--space-2) var(--space-4);
        border-radius: var(--radius-md);
        padding: var(--space-2-5) var(--space-4);
        justify-content: center;
    }

    .nav-user .btn-live.btn-live-hidden {
        display: none !important;
    }

    /* Icons inside drawer nav links */
    .nav-drawer-links>.nav-link {
        gap: var(--space-3);
    }

    .nav-drawer-links>.nav-link svg {
        flex-shrink: 0;
        opacity: 0.85;
    }

    /* ── Player drawer footer: clearly visible theme + logout ── */
    .nav-drawer-footer {
        margin-top: auto;
        flex-shrink: 0;
        padding: var(--space-2) var(--space-4);
        border-top: 1px solid var(--border-subtle);
        background: var(--surface-sunken);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    [data-theme="light"] .nav-drawer-footer {
        border-top-color: var(--border-subtle);
        background: var(--raise-2);
    }

    .nav-theme-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-3) var(--space-3-5);
        background: var(--raise-2);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        cursor: pointer;
        color: var(--text-primary);
        font-size: 0.88rem;
        font-weight: 600;
    }

    .nav-theme-row .nav-theme-label {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    [data-theme="light"] .nav-theme-row {
        background: var(--raise-2);
        border-color: var(--border-subtle);
        color: var(--text-primary);
    }

    /* Show the correct theme icon in the footer toggle */
    .nav-theme-row .icon-moon {
        display: none;
    }

    .nav-theme-row .icon-sun {
        display: inline;
    }

    [data-theme="light"] .nav-theme-row .icon-sun {
        display: none;
    }

    [data-theme="light"] .nav-theme-row .icon-moon {
        display: inline;
    }

    .nav-drawer-footer .nav-logout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        width: 100%;
        padding: var(--space-3);
        background: var(--danger-wash);
        border: 1px solid var(--danger-wash-border);
        border-radius: var(--radius-md);
        color: var(--danger-ink);
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
    }

    .nav-drawer-footer .nav-logout:hover {
        background: rgba(239, 68, 68, 0.22); /* tokens-allow: danger tint at 0.22 alpha; between --danger-wash (0.12) and --danger-wash-border (0.30), no matching token */
        color: var(--on-danger);
    }

    /* Body scroll lock when drawer open */
    body.drawer-open {
        overflow: hidden;
    }

    /* Player dashboard top tabs are redundant on mobile — the bottom nav drives
       tab switching there, so hide the segmented control. */
    .pdash-tabs {
        display: none !important;
    }

    .container {
        padding: var(--space-4);
    }

    .tournament-info-bar {
        padding: var(--space-3) var(--space-4);
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .tournament-info-actions {
        width: 100%;
        justify-content: flex-start;
        gap: var(--space-1-5);
        flex-wrap: wrap;
    }

    .header-golive-countdown {
        order: -1;
        width: 100%;
        justify-content: center;
    }

    .tournament-host-logo {
        width: 38px;
        height: 38px;
    }

    .tournament-info-name {
        font-size: 1.05rem;
    }

    .tournament-info-details {
        gap: var(--space-1-5) var(--space-3);
    }

    .tournament-info-detail {
        font-size: 0.75rem;
    }

    .player-reg-zones {
        grid-template-columns: 1fr;
    }

    .reg-player-card {
        padding: var(--space-1) var(--space-2);
    }

    .reg-drag-handle {
        display: none;
    }

    .action-btn {
        font-size: 0.78rem;
        padding: var(--space-1-5) var(--space-3);
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .dashboard-header h1 {
        font-size: 1.5rem;
    }

    .tournaments-grid {
        grid-template-columns: 1fr;
    }

    .tournament-card {
        padding: var(--space-4);
    }

    /* Table view: hide less important columns on mobile */
    .tournaments-table .tt-type,
    .tournaments-table thead th:nth-child(6),
    .tournaments-table .tt-host,
    .tournaments-table thead th:nth-child(5) {
        display: none;
    }

    .tournaments-table thead th,
    .tournament-table-row td {
        padding: var(--space-2) var(--space-2-5);
        font-size: 0.82rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 1rem auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-large .modal-content {
        width: 95%;
        max-width: 95%;
    }

    .modal-footer {
        flex-direction: column-reverse;
        gap: var(--space-3);
    }

    .modal-footer .btn {
        width: 100%;
        text-align: center;
    }

    /* Footer responsive — hidden on mobile; the bottom-nav takes its place */
    .app-footer {
        padding: 0.35rem 1rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
        display: none;
    }

    /* Mobile bottom quick-nav */
    .bottom-nav:not(.hidden) {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-sticky-bar, 950);
        background: var(--footer-bg);
        border-top: 1px solid var(--border-subtle, #2a2a2e);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        animation: bottomNavUp 0.35s cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    @keyframes bottomNavUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    [data-theme="light"] .bottom-nav:not(.hidden) {
        background: var(--footer-bg);
        border-top-color: var(--border-subtle);
    }

    .bottom-nav-item {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-0-5);
        padding: var(--space-2) var(--space-0-5);
        background: none;
        border: none;
        color: var(--text-secondary, #999);
        font-size: 0.64rem;
        font-weight: 600;
        cursor: pointer;
        min-height: 52px;
    }

    .bottom-nav-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bottom-nav-item svg {
        width: 22px;
        height: 22px;
    }

    .bottom-nav-item.active {
        color: var(--brand-ink);
    }

    .bottom-nav-item.active svg {
        transform: translateY(-1px) scale(1.08);
        transition: transform var(--motion-base) var(--ease-decelerate);
    }

    .bottom-nav-item:active {
        background: rgba(var(--gsx-brand-rgb), 0.08);
    }

    /* Keep page content clear of the fixed bottom nav */
    body:not(.login-active) .container {
        padding-bottom: var(--space-16);
    }

    .footer-content {
        gap: var(--space-2);
    }

    .footer-left {
        display: none;
    }

    /* Show Help link and hide floating button on mobile */
    .footer-help-link {
        display: inline;
    }

    #floatingHelpBtn {
        display: none !important;
    }

    /* Show info drawer tab on mobile — only when a tournament is in context
       (JS adds .show on the tournament screen; never on login/dashboard). */
    .info-drawer-tab.show {
        display: flex;
    }

    .info-drawer-panel {
        display: block;
    }

    /* Tables become card-like on mobile */
    .players-table {
        font-size: 0.85rem;
    }

    .players-table th,
    .players-table td {
        padding: var(--space-2);
    }

    /* Hide less critical columns on mobile */
    .players-table th:nth-child(4),
    .players-table th:nth-child(5),
    .players-table td:nth-child(4),
    .players-table td:nth-child(5) {
        display: none;
    }

    /* Scoring on mobile - show minimal info */
    .scoring-grid {
        grid-template-columns: 1fr;
    }

    .scorecard-grid {
        grid-template-columns: repeat(3, 1fr);
        font-size: 0.8rem;
    }

    .roster-player-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .stat-item {
        flex-direction: row;
        gap: var(--space-2);
    }

    /* .btn sizing is unified in 01-foundation (gsx metrics at every
       breakpoint) — no per-breakpoint geometry overrides. */

    .scoring-filters select {
        font-size: 0.85rem;
        padding: var(--space-2) var(--space-3);
    }

    /* Tournament gender badge adjustment */
    .tournament-gender-badge {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    /* Login box mobile */
    .login-box {
        min-width: auto;
        width: 100%;
        padding: var(--space-8) var(--space-6);
    }

    /* Results table mobile scrolling */
    .results-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .results-table {
        min-width: 600px;
    }
}

/* Small mobile phones */
@media (max-width: 480px) {
    .navbar h2 {
        font-size: 1.2rem;
    }

    .tournament-card h3 {
        font-size: 1.1rem;
    }

    /* Table view: also hide course column on very small screens */
    .tournaments-table .tt-course,
    .tournaments-table thead th:nth-child(2),
    .tournaments-table .tt-gender,
    .tournaments-table thead th:nth-child(4) {
        display: none;
    }

    .tournaments-table .tt-name {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tab-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tab-header .button-group,
    .tab-header .scoring-filters {
        width: 100%;
    }

    .button-group .btn {
        flex: 1;
        text-align: center;
    }

    .positions-presets {
        width: 100%;
    }

    .positions-presets .btn {
        flex: 1;
        min-width: 0;
        min-height: var(--gsx-control-height-sm);
        padding: 0 var(--space-2);
        font-size: 0.78rem;
    }

    .action-btn {
        font-size: 0.72rem;
        padding: var(--space-1-5) var(--space-2-5);
    }

    .action-btn span {
        display: none;
    }

    .tournament-info-actions {
        justify-content: center;
    }

    .dashboard-header {
        gap: var(--space-3);
    }

    .dashboard-header .btn,
    .dashboard-header .gsx-btn {
        width: 100%;
    }

    .modal-header h2 {
        font-size: 1.3rem;
    }

    .login-box {
        padding: var(--space-6) var(--space-4);
        min-width: unset;
    }

    .login-logo {
        width: 72px;
        margin-bottom: var(--space-2);
    }

    .login-title {
        height: 28px;
        margin-bottom: var(--space-1);
    }

    .login-box h1 {
        font-size: 1.5rem;
    }

    .login-box .subtitle {
        font-size: 1rem;
        margin-top: var(--space-2);
        margin-bottom: var(--space-4);
    }

    .register-divider {
        margin: var(--space-3) 0;
    }

    .scorecard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .roster-player-card {
        padding: var(--space-2) var(--space-2-5);
    }

    .roster-player-name {
        font-size: 0.88rem;
    }

    .roster-player-meta {
        font-size: 0.68rem;
    }

    .roster-remove-btn {
        opacity: 0.5;
    }
}

/* ============================================================================
   EDGE-TO-EDGE MOBILE APP SHELL
   Full-bleed content cards + directional menu slide (Squabbit-style)
   ============================================================================ */
@media (max-width: 768px) {

    /* Full-bleed the primary content cards so their background runs to the
       screen edges like a native app. The .container keeps its 1rem side
       padding for plain text/controls; cards cancel it with a matching
       negative margin and rely on their own internal padding to keep
       content comfortably inset. */
    .dash-card,
    .gsx-card,
    .tournament-card,
    .settings-card,
    .settings-section,
    .director-settings-card,
    .default-docs-section,
    .profile-hero,
    .profile-card {
        margin-left: -1rem;
        margin-right: -1rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-left-width: 0;
        border-right-width: 0;
        box-shadow: none;
    }

    /* Keep the tournament-card colored accent rail flush at the screen edge */
    .tournament-card {
        border-left-width: 4px;
    }

    /* Profile page: tighten the bulky desktop padding for mobile and let the
       hero banner span the full width. */
    .profile-hero {
        padding: 0 var(--space-4) var(--space-5);
        gap: var(--space-2-5);
    }

    .profile-card {
        padding: var(--space-4) var(--space-4);
    }

    .profile-hero-info h1 {
        font-size: 1.3rem;
    }

    /* Compact the Account Details / password forms on mobile — the desktop
       1.5rem field spacing + 1rem inputs feel oversized on a phone. */
    #profileScreen .form-group {
        margin-bottom: var(--space-3-5);
    }

    #profileScreen .form-group label {
        margin-bottom: var(--space-1);
        font-size: 0.82rem;
    }

    #profileScreen .form-group input,
    #profileScreen .form-group select,
    #profileScreen .form-group textarea {
        padding: var(--space-2) var(--space-2-5);
        font-size: 0.92rem;
        border-radius: var(--radius-md);
    }

    #profileScreen .profile-section-title {
        font-size: 1rem;
        margin-bottom: var(--space-2-5);
    }

    #profileScreen .profile-section-divider {
        margin: var(--space-4) 0;
    }

    #profileScreen .profile-section-subtitle {
        margin: -0.3rem 0 0.65rem;
    }

    #profileScreen .form-row-2col {
        gap: var(--space-2-5);
    }

    #profileScreen .profile-form-actions {
        padding-top: var(--space-2-5);
    }

    .profile-avatar {
        width: 88px;
        height: 88px;
    }

    .profile-avatar-wrap {
        margin-top: var(--space-10);
    }

    /* Never bleed nested cards or cards inside width-constrained containers.
       (A .gsx-card/.dash-card rendered inside another bled card, a modal, or
       a KPI/stat cell must stay put so it doesn't double-offset.) */
    .modal .dash-card,
    .modal .gsx-card,
    .modal .tournament-card,
    .modal .settings-card,
    .modal .settings-section,
    .modal-content .dash-card,
    .modal-content .gsx-card,
    .modal-content .settings-card,
    .modal-content .settings-section,
    .dash-card .dash-card,
    .dash-card .gsx-card,
    .gsx-card .gsx-card,
    .gsx-card .dash-card,
    .settings-card .gsx-card,
    .settings-section .gsx-card,
    .dash-stat-card,
    .gsx-kpi-cell {
        margin-left: 0;
        margin-right: 0;
    }

    /* ── Directional menu slide ──
       Tapping a bottom-nav item to the RIGHT of the current one slides the new
       view in from the right ("forward"); tapping one to the LEFT slides it in
       from the left ("back"). Clip at the full-width dashboard container (not
       the padded inner overview) and travel a full viewport so the content
       pages in edge-to-edge like a native app. */
    #dashboardScreen .container {
        overflow-x: clip;
    }

    /* Solid slide — no opacity fade. Fading both panels makes the seam show the
       page background through two translucent layers, which reads as a
       fade-out/fade-in rather than a clean page push. */
    @keyframes navSlideForward {
        from {
            transform: translateX(100vw);
        }

        to {
            transform: translateX(0);
        }
    }

    @keyframes navSlideBack {
        from {
            transform: translateX(-100vw);
        }

        to {
            transform: translateX(0);
        }
    }

    .nav-slide-fwd {
        animation: navSlideForward 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    .nav-slide-back {
        animation: navSlideBack 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    /* ── Cross-slide (outgoing panel) ──
       While the incoming panel slides in, the outgoing panel is lifted out of
       flow and slid off the opposite edge so the two move together — a single
       seamless page transition rather than a hard swap. `#pdashPanels` wraps
       ONLY the swappable panels (not the welcome header / tab bar), so the
       absolute overlay anchors to the panels' own top edge and stays aligned
       with the incoming panel instead of jumping up under the header. We do
       NOT clip overflow here — the cards inside break out of the container
       padding (negative side margins) to sit flush at the screen edge for a
       full-bleed look, and clipping here would pull them back in. The
       off-screen slide travel is instead clipped by `#dashboardScreen
       .container` above. The box is held open during the swap via an inline
       min-height set in JS (cleared when the slide ends) so there's no
       permanent empty gap. */
    #pdashPanels {
        position: relative;
    }

    @keyframes navSlideForwardOut {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-100vw);
        }
    }

    @keyframes navSlideBackOut {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(100vw);
        }
    }

    .nav-slide-fwd-out,
    .nav-slide-back-out {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        pointer-events: none;
    }

    .nav-slide-fwd-out {
        animation: navSlideForwardOut 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    .nav-slide-back-out {
        animation: navSlideBackOut 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {

    .nav-slide-fwd,
    .nav-slide-back,
    .nav-slide-fwd-out,
    .nav-slide-back-out {
        animation: none;
    }

    /* Without animation there's no animationend to clean up the overlay, so
       keep the outgoing panel out of the way immediately. */
    .nav-slide-fwd-out,
    .nav-slide-back-out {
        display: none !important;
    }
}

/* Print styles */
@media print {

    .navbar,
    .dashboard-header button,
    .modal,
    .btn {
        display: none !important;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    .screen {
        background: white !important; /* tokens-allow: @media print — literal white forces paper background regardless of active theme; --surface-solid and --white both flip in dark mode */
    }

    .screen::before {
        display: none !important;
    }
}