/* ============================================================
   Membership Management System – app.css
   Custom styles layered on top of Bootstrap 5
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --primary:       #4f46e5;
    --primary-dark:  #4338ca;
    --primary-light: #ede9fe;
    --primary-2:     #7c3aed;   /* brand gradient companion */
    --gradient:      linear-gradient(135deg, var(--primary), var(--primary-2));
    --sidebar-bg:    #1a1a2e;
    --sidebar-hover: #16213e;
    --sidebar-width: 260px;
    --top-nav-h:     60px;
    --radius:        12px;
    --shadow:        0 2px 15px rgba(0,0,0,0.08);
    --shadow-md:     0 4px 24px rgba(0,0,0,0.12);

    /* ── Baseline design tokens (added — non-breaking, additive) ──────── */
    /* Semantic colours */
    --success:        #16a34a;  --success-bg: #dcfce7;  --success-fg: #166534;
    --danger:         #dc2626;  --danger-bg:  #fee2e2;  --danger-fg:  #991b1b;
    --warning:        #d97706;  --warning-bg: #fef9c3;  --warning-fg: #854d0e;
    --info:           #0284c7;  --info-bg:    #e0f2fe;  --info-fg:    #075985;
    /* Surfaces & text */
    --surface:        #ffffff;
    --surface-2:      #f8fafc;
    --bg:             #f3f4f6;
    --border:         #e5e7eb;
    --border-strong:  #d1d5db;
    --text:           #1f2937;
    --text-muted:     #6b7280;
    --text-subtle:    #94a3b8;
    /* Radius scale */
    --radius-sm:      8px;
    --radius-lg:      16px;
    --radius-pill:    999px;
    /* Spacing scale (4px base) */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    /* Type scale */
    --fs-xs: .72rem; --fs-sm: .8rem; --fs-base: .9rem;
    --fs-md: 1rem;   --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.75rem;
    /* Elevation + motion */
    --shadow-sm:      0 1px 2px rgba(0,0,0,.06);
    --shadow-lg:      0 12px 32px rgba(0,0,0,.16);
    --ring:           0 0 0 3px rgba(79,70,229,.30);
    --transition:     .18s cubic-bezier(.4,0,.2,1);
}

/* ── Base ───────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:   0.9rem;
    color:       #1f2937;
    background:  #f3f4f6;
}

a { text-decoration: none; }

/* ── Layout Wrapper ─────────────────────────────────────────── */
.wrapper {
    display:    flex;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
    width:          var(--sidebar-width);
    min-height:     100vh;
    background:     var(--sidebar-bg);
    display:        flex;
    flex-direction: column;
    flex-shrink:    0;
    position:       relative;
    z-index:        100;
    transition:     width .3s ease, transform .3s ease;
}

.sidebar-brand {
    padding:     18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display:     flex;
    align-items: center;
    gap:         10px;
    color:       #fff;
    font-weight: 700;
    font-size:   1rem;
    text-decoration: none;
}

.sidebar-brand .brand-icon {
    width:           36px;
    height:          36px;
    border-radius:   10px;
    background:      var(--gradient);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       16px;
    color:           #fff;
    flex-shrink:     0;
}

.sidebar .nav-section {
    padding:     16px 12px 4px;
    font-size:   0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:       rgba(255,255,255,0.3);
}

.sidebar .nav-link {
    color:         rgba(255,255,255,0.65);
    padding:       9px 14px;
    border-radius: 8px;
    margin:        2px 8px;
    display:       flex;
    align-items:   center;
    gap:           10px;
    font-size:     0.86rem;
    font-weight:   500;
    transition:    all .18s ease;
    white-space:   nowrap;
    overflow:      hidden;
}

.sidebar .nav-link:hover {
    background: var(--sidebar-hover);
    color:      #fff;
    transform:  translateX(2px);
}

.sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(79,70,229,0.35), rgba(124,58,237,0.25));
    color:      #fff;
    border-left: 3px solid var(--primary);
}

.sidebar .nav-link i {
    width:     18px;
    font-size: 0.88rem;
    flex-shrink: 0;
    text-align: center;
}

.sidebar-footer {
    margin-top:    auto;
    padding:       16px;
    border-top:    1px solid rgba(255,255,255,0.06);
    font-size:     0.82rem;
    color:         rgba(255,255,255,0.5);
}

.sidebar-footer .user-info {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.sidebar-footer .user-avatar {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      var(--gradient);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.85rem;
    font-weight:     700;
    color:           #fff;
    flex-shrink:     0;
}

/* ── Top Navbar ─────────────────────────────────────────────── */
.top-navbar {
    height:       var(--top-nav-h);
    background:   #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow:   0 1px 4px rgba(0,0,0,0.05);
    display:      flex;
    align-items:  center;
    padding:      0 20px;
    gap:          12px;
    position:     sticky;
    top:          0;
    z-index:      50;
}

.top-navbar .page-title {
    font-size:   1rem;
    font-weight: 600;
    color:       #1f2937;
}

.top-navbar .notification-btn {
    position: relative;
    width:    36px;
    height:   36px;
    display:  flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    background:      #f3f4f6;
    color:           #6b7280;
    border:          none;
    transition:      all .2s;
}

.top-navbar .notification-btn:hover { background: var(--primary-light); color: var(--primary); }

.notification-badge {
    position:   absolute;
    top:        -2px;
    right:      -2px;
    width:      16px;
    height:     16px;
    background: #dc2626;
    border-radius: 50%;
    font-size:  0.6rem;
    font-weight: 700;
    color:      #fff;
    display:    flex;
    align-items:     center;
    justify-content: center;
    border:     2px solid #fff;
}

/* ── Main Content ───────────────────────────────────────────── */
.main-content {
    flex:       1;
    min-width:  0;
    display:    flex;
    flex-direction: column;
    background: #f3f4f6;
    min-height: 100vh;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    border-radius: var(--radius) !important;
    box-shadow:    var(--shadow);
}

.stat-card .icon {
    width:           52px;
    height:          52px;
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       20px;
    flex-shrink:     0;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th {
    font-size:   0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:       #6b7280;
    border-bottom: 1px solid #e5e7eb;
}
.table-hover > tbody > tr:hover { background: #f9fafb; }

/* ── Status Badges ──────────────────────────────────────────── */
.badge-active   { background: #dcfce7 !important; color: #166534 !important; }
.badge-expired  { background: #fee2e2 !important; color: #991b1b !important; }
.badge-pending  { background: #fef9c3 !important; color: #854d0e !important; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(79,70,229,0.12);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    border-radius: 8px;
    font-weight:   500;
    font-size:     0.875rem;
    transition:    all .2s;
}
.btn-xs { padding: .2rem .55rem; font-size: .75rem; }

.btn[style*="background:#4f46e5"]:hover {
    background: var(--primary-dark) !important;
    transform:  translateY(-1px);
    box-shadow: 0 4px 12px rgba(79,70,229,0.35);
}

/* ── Member Cards ───────────────────────────────────────────── */
.member-card {
    transition: box-shadow .2s, transform .2s;
}
.member-card:hover {
    box-shadow: 0 8px 25px rgba(79,70,229,0.15) !important;
    transform:  translateY(-3px);
}

/* ── Notifications ──────────────────────────────────────────── */
.notification-item { transition: background .15s; }
.notification-item:hover { background: #f9fafb; }

/* ── Calendar ───────────────────────────────────────────────── */
.fc .fc-button-primary {
    background:    var(--primary) !important;
    border-color:  var(--primary) !important;
    border-radius: 6px !important;
    font-size:     0.82rem !important;
}
.fc .fc-button-primary:hover { background: var(--primary-dark) !important; }
.fc .fc-button-active         { background: #312e81 !important; }
.fc .fc-toolbar-title         { font-size: 1rem !important; font-weight: 700; }
.fc .fc-daygrid-event         { border-radius: 4px !important; font-size: 0.75rem; }

/* ── Sidebar mobile ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* The sidebar is fixed off-screen on mobile */
    .sidebar {
        position:   fixed !important;
        top:        0 !important;
        left:       0 !important;
        height:     100% !important;
        transform:  translateX(-100%) !important;
        transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
        z-index:    1050 !important;
        box-shadow: none;
    }
    .sidebar.show {
        transform:  translateX(0) !important;
        box-shadow: 4px 0 28px rgba(0,0,0,0.35) !important;
    }
    .sidebar-overlay {
        display:    none;
        position:   fixed;
        inset:      0;
        background: rgba(0,0,0,0.45);
        z-index:    1040;
        backdrop-filter: blur(2px);
    }
    .sidebar-overlay.show { display: block; }

    /* Main content fills full width */
    .main-content { margin-left: 0 !important; }

    /* Page padding reduced */
    .page-content { padding: 16px 14px 100px !important; }

    /* Tables scroll horizontally */
    .table-container,
    .card-body .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Stat cards stack nicely */
    .row.g-3 > [class*="col-"] { margin-bottom: 0; }

    /* Reduce hero padding on mobile */
    .profile-hero { padding: 24px 20px !important; }
}

/* ── Global table responsiveness ─────────────────────────────── */
.card-body { overflow-x: auto; }
/* But not for special card bodies like chat */
.chat-shell .card-body { overflow-x: visible; }

/* ── Mobile bottom navigation ───────────────────────────────── */
/* All mobile-only nav elements are hidden on desktop by default.
   The media query below enables them on small screens.  Without
   these rules the drawer and backdrop would render as plain block
   elements and their content would appear directly in the page body. */
.mob-tab-bar,
.mob-drawer,
.mob-drawer-backdrop {
    display: none;
}
@media (max-width: 991.98px) {
    /* Tab bar -------------------------------------------------------- */
    .mob-tab-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 16px rgba(0,0,0,.10);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        -webkit-tap-highlight-color: transparent;
        will-change: transform;
        transform: translateZ(0);
    }
    .mob-tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 9px 2px 7px;
        color: #94a3b8;
        text-decoration: none;
        font-size: .6rem;
        font-weight: 600;
        letter-spacing: .01em;
        gap: 3px;
        position: relative;
        cursor: pointer;
        background: none;
        border: none;
        outline: none;
        transition: color .18s ease;
    }
    .mob-tab-item i { font-size: 1.15rem; line-height: 1; }
    .mob-tab-item.active { color: #4f46e5; }
    .mob-tab-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 3px;
        background: #4f46e5;
        border-radius: 0 0 3px 3px;
    }
    .mob-tab-item:active { opacity: .7; }

    /* Unread badge */
    .mob-tab-badge {
        position: absolute;
        top: 7px;
        left: calc(50% + 4px);
        background: #dc2626;
        color: #fff;
        font-size: .58rem;
        font-weight: 700;
        border-radius: 10px;
        padding: 1px 5px;
        min-width: 16px;
        text-align: center;
        border: 2px solid #fff;
        line-height: 1.4;
        pointer-events: none;
    }

    /* Drawer overlay ------------------------------------------------- */
    .mob-drawer-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1041;
        background: rgba(0,0,0,.45);
        -webkit-tap-highlight-color: transparent;
    }
    .mob-drawer-backdrop.show { display: block; }

    /* Slide-up drawer ------------------------------------------------ */
    .mob-drawer {
        display: block; /* override the desktop display:none */
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1042;
        background: #fff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 32px rgba(0,0,0,.18);
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.4,0,.2,1);
        will-change: transform;
        max-height: 75vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    }
    .mob-drawer.open { transform: translateY(0); }

    /* Drag handle */
    .mob-drawer-handle {
        width: 36px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 12px auto 8px;
    }

    /* Drawer title */
    .mob-drawer-title {
        font-size: .72rem;
        font-weight: 700;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: .07em;
        padding: 4px 20px 8px;
    }

    /* Drawer nav items */
    .mob-drawer-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 20px;
        color: #374151;
        text-decoration: none;
        font-size: .9rem;
        font-weight: 500;
        transition: background .15s;
        border-radius: 10px;
        margin: 1px 8px;
    }
    .mob-drawer-item:active,
    .mob-drawer-item:hover { background: #f5f3ff; color: #4f46e5; }
    .mob-drawer-item.active { color: #4f46e5; background: #eef2ff; font-weight: 600; }
    .mob-drawer-item i {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #f3f4f6;
        font-size: .9rem;
        flex-shrink: 0;
        transition: background .15s, color .15s;
    }
    .mob-drawer-item.active i { background: #4f46e5; color: #fff; }

    /* Drawer section divider */
    .mob-drawer-divider {
        height: 1px;
        background: #f3f4f6;
        margin: 8px 20px;
    }

    /* Keep page content from being hidden behind tab bar */
    .page-content { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

}

/* ─────────────────────────────────────────────────────────────────────
   Drawer tree (rewritten sidebar content)
   The mobile drawer renders the sidebar partial with all sidebar-* class
   names rewritten to mdrawer-* so NO .sidebar CSS rules apply. Brand /
   user-row / credit are hidden because the mobile top nav already shows
   identity. Items use .mob-drawer-item which already has working styles.
   ───────────────────────────────────────────────────────────────────── */
#mobDrawer .mdrawer-brand,
#mobDrawer .mdrawer-userrow,
#mobDrawer .mdrawer-credit { display: none !important; }
#mobDrawer .mdrawer-tree,
#mobDrawer .mdrawer-list {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
}
#mobDrawer .mob-drawer-title { padding: 12px 20px 6px; }

/* Inline-styled nav-links from the sidebar (e.g. orange "Choose a Plan"
   highlight) have their inline color win, which can clash with the
   drawer's grey text. Force inline-styled drawer items back to the
   neutral drawer colour unless they're hovered/active. */
#mobDrawer .mob-drawer-item[style*="color:"] { color: #374151 !important; }
#mobDrawer .mob-drawer-item[style*="color:"]:hover,
#mobDrawer .mob-drawer-item[style*="color:"].active { color: #4f46e5 !important; }

/* Legacy bridge — kept here ONLY to neutralise any stray .sidebar /
   .nav-link / .sidebar-section-label that might appear elsewhere
   inside the drawer. Defensive but typically not exercised now that
   the transform rewrites classes. */
#mobDrawer .sidebar,
#mobDrawer nav.sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    display: block !important;
    transform: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: auto !important;
    top: auto !important;
    left: auto !important;
}
#mobDrawer .sidebar-brand,
#mobDrawer .sidebar-user,
#mobDrawer .sidebar-credit,
#mobDrawer .sidebar-toggle,
#mobDrawer .sidebar-overlay,
#mobDrawer .sidebar-footer { display: none !important; }
#mobDrawer .sidebar-nav {
    padding: 4px 0 16px !important;
    overflow: visible !important;
    flex: none !important;
}
#mobDrawer .sidebar-section-label,
#mobDrawer .nav-section {
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    padding: 14px 20px 6px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}
#mobDrawer .sidebar .nav-link,
#mobDrawer a.nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 16px !important;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    transition: background .15s, color .15s !important;
    border-radius: 10px !important;
    margin: 1px 8px !important;
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    white-space: normal !important;
    overflow: visible !important;
    transform: none !important;
}
#mobDrawer .sidebar .nav-link:hover,
#mobDrawer .sidebar .nav-link:active,
#mobDrawer a.nav-link:hover,
#mobDrawer a.nav-link:active {
    background: #f5f3ff !important;
    color: #4f46e5 !important;
    transform: none !important;
}
#mobDrawer .sidebar .nav-link.active,
#mobDrawer a.nav-link.active {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    font-weight: 600 !important;
    border-left: none !important;
}
#mobDrawer .sidebar .nav-link i,
#mobDrawer a.nav-link i,
#mobDrawer .sidebar .nav-link .fa,
#mobDrawer .sidebar .nav-link [class^="fa-"],
#mobDrawer .sidebar .nav-link [class*=" fa-"] {
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: #f3f4f6 !important;
    font-size: .85rem !important;
    flex-shrink: 0 !important;
    color: #6b7280 !important;
    margin: 0 !important;
    text-align: center !important;
    transition: background .15s, color .15s !important;
}
#mobDrawer .sidebar .nav-link:hover i,
#mobDrawer .sidebar .nav-link.active i,
#mobDrawer a.nav-link:hover i,
#mobDrawer a.nav-link.active i {
    background: #4f46e5 !important;
    color: #fff !important;
}
#mobDrawer .sidebar .nav-link .badge,
#mobDrawer a.nav-link .badge {
    margin-left: auto !important;
    font-size: .65rem !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: #4f46e5 !important;
    color: #fff !important;
}

/* Legacy class kept for backward compatibility — hidden on all screens now */
.mobile-bottom-nav { display: none !important; }

/* ── Scrollbar (webkit) ─────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── Toast ──────────────────────────────────────────────────── */
.toast-container { z-index: 9999; }

/* ── Loading spinner overlay ───────────────────────────────── */
.page-loader {
    position:   fixed;
    inset:      0;
    background: rgba(255,255,255,0.7);
    display:    flex;
    align-items:     center;
    justify-content: center;
    z-index:    9998;
}

/* ── Print styles ───────────────────────────────────────────── */
@media print {
    .sidebar, .top-navbar, .btn, .no-print { display: none !important; }
    .main-content { margin: 0; padding: 0; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    body { background: #fff; font-size: 11pt; }
}

/* ── Utility ────────────────────────────────────────────────── */
.min-width-0   { min-width: 0; }
.cursor-pointer { cursor: pointer; }
.font-monospace { font-family: 'Courier New', Courier, monospace; }
.text-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.border-dashed  { border-style: dashed !important; }

/* Bootstrap subtle color backfill (for older BS5 versions) */
.bg-success-subtle { background-color: #dcfce7 !important; }
.bg-danger-subtle  { background-color: #fee2e2 !important; }
.bg-warning-subtle { background-color: #fef9c3 !important; }
.bg-primary-subtle { background-color: #ede9fe !important; }
.bg-info-subtle    { background-color: #e0f2fe !important; }
.text-success      { color: #166534 !important; }
.text-danger       { color: #991b1b !important; }
.text-warning      { color: #854d0e !important; }
.text-primary      { color: #4f46e5 !important; }
.text-info         { color: #0284c7 !important; }

/* ============================================================
   Global polish & accessibility layer (added)
   Subtle, additive refinements — no structural overrides.
   ============================================================ */

/* ── Accessibility: visible keyboard focus everywhere ──────────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.cp-nav-link:focus-visible,
.page-link:focus-visible,
[tabindex]:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: var(--ring) !important;
    border-radius: var(--radius-sm);
}
.btn:focus:not(:focus-visible) { box-shadow: none; }

/* ── Buttons: consistent micro-interactions (not inline-hack dependent) */
.btn { letter-spacing: .005em; }
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark { box-shadow: var(--shadow-sm); }
.btn-primary:hover { box-shadow: 0 4px 14px rgba(79,70,229,.32); }
.btn-success:hover { box-shadow: 0 4px 14px rgba(22,163,74,.30); }
.btn-danger:hover  { box-shadow: 0 4px 14px rgba(220,38,38,.28); }
.btn-outline-secondary:hover { color: var(--text); }
.btn:disabled, .btn.disabled { opacity: .55; transform: none !important; box-shadow: none !important; }

/* ── Cards: unified elevation + optional hover lift ────────────── */
.card { border: 1px solid var(--border); transition: box-shadow var(--transition), transform var(--transition); }
.cp-card {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: box-shadow var(--transition), transform var(--transition);
}
.card-hover:hover,
.card.is-clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ── Tables: readability ───────────────────────────────────────── */
.table > :not(caption) > * > * { vertical-align: middle; }
.table-hover > tbody > tr { transition: background var(--transition); }
.table thead th { white-space: nowrap; }

/* ── Forms: clearer labels & help text ─────────────────────────── */
.form-label { font-weight: 600; font-size: var(--fs-sm); color: var(--text); margin-bottom: .3rem; }
.form-text  { color: var(--text-muted); }
.input-group-text { background: var(--surface-2); border-color: var(--border); }

/* ── Badges: consistent pill shape ─────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .02em; padding: .4em .7em; }
.badge.rounded-pill { padding: .42em .8em; }

/* ── Reusable empty / loading states ───────────────────────────── */
.ui-empty {
    text-align: center; padding: var(--space-10) var(--space-6);
    color: var(--text-muted);
}
.ui-empty .ui-empty-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--surface-2); color: var(--text-subtle);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin: 0 auto var(--space-4);
}
.ui-empty h6 { color: var(--text); font-weight: 700; margin-bottom: .25rem; }
.ui-skel {
    background: linear-gradient(90deg,#eef0f3 25%,#f6f7f9 37%,#eef0f3 63%);
    background-size: 400% 100%;
    animation: uiShimmer 1.3s ease infinite;
    border-radius: var(--radius-sm); min-height: 14px;
}
@keyframes uiShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── Tile hover (replaces inline onmouseover opacity/bg hacks) ──── */
.qa-tile { transition: transform var(--transition), box-shadow var(--transition), filter var(--transition); }
.qa-tile:hover { transform: translateY(-2px); filter: brightness(.97); box-shadow: var(--shadow-sm); }
.tile-hover { transition: background var(--transition), border-color var(--transition); }
.tile-hover:hover { background: var(--surface-2) !important; border-color: var(--border-strong) !important; }

/* ── Global toast / flash notifications ────────────────────────── */
.toast-stack {
    position: fixed; top: 18px; right: 18px; z-index: 11000;
    display: flex; flex-direction: column; gap: 10px;
    width: 360px; max-width: calc(100vw - 32px);
    pointer-events: none;
}
.app-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border);
    border-left: 4px solid var(--info);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 13px 14px; font-size: var(--fs-sm); line-height: 1.45;
    opacity: 0; transform: translateX(16px);
    transition: opacity var(--transition), transform var(--transition);
}
.app-toast.show   { opacity: 1; transform: translateX(0); }
.app-toast.hide   { opacity: 0; transform: translateX(16px); }
.app-toast .at-ic { flex-shrink: 0; font-size: 1rem; margin-top: 1px; }
.app-toast .at-msg{ flex: 1; min-width: 0; word-wrap: break-word; }
.app-toast .at-x  {
    flex-shrink: 0; background: none; border: 0; cursor: pointer;
    color: var(--text-subtle); font-size: .9rem; padding: 0 2px; line-height: 1;
}
.app-toast .at-x:hover { color: var(--text); }
.app-toast.t-success { border-left-color: var(--success); }
.app-toast.t-success .at-ic { color: var(--success); }
.app-toast.t-danger  { border-left-color: var(--danger); }
.app-toast.t-danger  .at-ic { color: var(--danger); }
.app-toast.t-warning { border-left-color: var(--warning); }
.app-toast.t-warning .at-ic { color: var(--warning); }
.app-toast.t-info    { border-left-color: var(--info); }
.app-toast.t-info    .at-ic { color: var(--info); }
@media (max-width: 575.98px) {
    .toast-stack { left: 16px; right: 16px; width: auto; top: 12px; }
}

/* ── Refined scrollbars (desktop) ──────────────────────────────── */
@media (pointer: fine) {
    * { scrollbar-width: thin; scrollbar-color: #c7ccd6 transparent; }
    *::-webkit-scrollbar { width: 9px; height: 9px; }
    *::-webkit-scrollbar-thumb { background: #c7ccd6; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
    *::-webkit-scrollbar-thumb:hover { background: #a8b0bd; background-clip: content-box; }
    *::-webkit-scrollbar-track { background: transparent; }
}

/* ── Larger touch targets on small screens ─────────────────────── */
@media (max-width: 575.98px) {
    .btn { padding-top: .5rem; padding-bottom: .5rem; }
    .btn-sm { padding-top: .4rem; padding-bottom: .4rem; }
    .table > :not(caption) > * > * { padding: .7rem .6rem; }
}

/* ── Respect reduced-motion preference ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .card-hover:hover, .card.is-clickable:hover { transform: none; }
}

/* ── Brand utility layer ───────────────────────────────────────────────────
   Use these instead of inline hex so the palette stays single-sourced and a
   future rebrand is one change in :root. Additive — overrides nothing. */
.bg-brand           { background: var(--primary) !important; color: #fff !important; }
.bg-brand-gradient  { background: var(--gradient) !important; color: #fff !important; }
.text-brand         { color: var(--primary) !important; }
.border-brand       { border-color: var(--primary) !important; }
.btn-brand          { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-brand:hover,
.btn-brand:focus    { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-outline-brand  { color: var(--primary); border: 1px solid var(--primary); background: transparent; }
.btn-outline-brand:hover { background: var(--primary); color: #fff; }

/* Normalise the legacy inline-hex brand buttons to the token so the brand
   colour is visually identical everywhere and rebrandable centrally. */
[style*="background:#4f46e5"],
[style*="background: #4f46e5"] { background: var(--primary) !important; }
[style*="color:#4f46e5"],
[style*="color: #4f46e5"]      { color: var(--primary) !important; }

/* ─────────────────────────────────────────────────────────────────────
   Quorum helper-class fallbacks
   Define minimal defaults so the rewritten dashboards remain legible
   when the Quorum theme is NOT active. quorum.css overrides these
   when the editorial theme is selected.
   ───────────────────────────────────────────────────────────────────── */
.q-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
.q-display {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #0f172a;
}
.q-mono {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    letter-spacing: -.01em;
}
.q-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #334155;
}
.q-pill-accent { background: #fee2e2; color: #b91c1c; }
.q-pill-sage   { background: #dcfce7; color: #166534; }
.q-pill-gold   { background: #fef3c7; color: #92400e; }
.q-pill-ink    { background: #1e293b; color: #f1f5f9; }
.q-statusdot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #94a3b8;
}
.q-statusdot.accent { background: var(--primary, #4f46e5); }
.q-statusdot.sage   { background: #16a34a; }
.q-statusdot.gold   { background: #ca8a04; }
.q-brief {
    background: linear-gradient(135deg, rgba(79,70,229,.06), rgba(124,58,237,.04));
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 24px;
}
.q-brief .q-brief-eyebrow { color: var(--primary, #4f46e5); }
.q-brief .q-brief-body {
    font-size: 1.05rem;
    line-height: 1.55;
    color: #0f172a;
}
.q-brief .q-brief-body em {
    font-style: normal;
    font-weight: 600;
    color: var(--primary, #4f46e5);
}
.q-member-card {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #f1f5f9;
    border: none;
}
.q-member-card .card-body { color: #f1f5f9; }
.tile-hover { transition: transform .15s ease, box-shadow .15s ease; }
.tile-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(0,0,0,.18); }

/* ─────────────────────────────────────────────────────────────────────
   Liveliness layer
   Subtle, low-risk motion + responsive type. Honours
   prefers-reduced-motion so users who opt out see no animation.
   ───────────────────────────────────────────────────────────────────── */

/* ── 1. Page entrance fade ─────────────────────────────────────────── */
.page-wrap, .page-content > * {
    animation: appFadeIn .35s ease-out both;
}
@keyframes appFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 2. Card hover lift (applies to every Bootstrap card) ──────────── */
.card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card.card-hover:hover,
.card.is-clickable:hover,
a:hover > .card,
a:hover > .card.stat-card {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -14px rgba(15,23,42,.18), 0 4px 10px -6px rgba(15,23,42,.10);
}

/* Stat-card icon chip — gentle bounce on parent hover */
.stat-card .icon {
    transition: transform .25s cubic-bezier(.4,1.6,.6,1), box-shadow .2s ease;
}
.card-hover:hover .stat-card .icon,
.is-clickable:hover .icon,
a:hover .stat-card .icon {
    transform: scale(1.08) rotate(-3deg);
}

/* ── 3. Animated status / accent dot ───────────────────────────────── */
.q-statusdot.accent,
.q-statusdot.sage,
.q-statusdot.gold,
.status-dot-pulse {
    position: relative;
}
.q-statusdot.accent::after,
.q-statusdot.sage::after,
.q-statusdot.gold::after,
.status-dot-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    opacity: .55;
    animation: statusPulse 2s ease-out infinite;
}
@keyframes statusPulse {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(2.4);  opacity: 0; }
    100% { transform: scale(2.4);  opacity: 0; }
}

/* ── 4. Subtle sheen on dark gradient cards (e.g. membership card) ── */
.card[style*="linear-gradient(135deg,#1a1a2e"],
.card[style*="linear-gradient(135deg, #1a1a2e"],
.card.q-member-card {
    position: relative;
    overflow: hidden;
}
.card[style*="linear-gradient(135deg,#1a1a2e"]::before,
.card[style*="linear-gradient(135deg, #1a1a2e"]::before,
.card.q-member-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .9s ease;
    pointer-events: none;
}
.card[style*="linear-gradient(135deg,#1a1a2e"]:hover::before,
.card[style*="linear-gradient(135deg, #1a1a2e"]:hover::before,
.card.q-member-card:hover::before {
    transform: translateX(100%);
}

/* ── 5. Section header with subtitle ───────────────────────────────── */
.section-head {
    margin-bottom: 14px;
}
.section-head__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text, #0f172a);
    margin: 0 0 4px;
}
.section-head__title .section-head__icon-chip {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-light, #ede9fe);
    color: var(--primary, #4f46e5);
    font-size: 13px;
}
.section-head__sub {
    font-size: .8rem;
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: 1.45;
}

/* Compact card-header subtitle helper (sits inside .card-header) */
.card-header .ch-sub {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    margin-top: 2px;
    line-height: 1.35;
}

/* ── 6. Responsive type for big monospace IDs ──────────────────────── */
/* The big membership-ID and similar mono numerals shrink on small
   screens and never overflow their container. */
.mono-id,
.font-monospace,
[style*="font-family:monospace"],
[style*="font-family: monospace"],
[style*="font-family:ui-monospace"],
[style*="font-family: ui-monospace"] {
    word-break: break-all;
    overflow-wrap: anywhere;
}
.mono-id {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: clamp(.95rem, 2.6vw + .4rem, 1.25rem);
    letter-spacing: clamp(.02em, .15vw, .1em);
    line-height: 1.2;
}

/* Tighten big inline IDs the dashboard uses without the helper class */
@media (max-width: 575.98px) {
    /* Anything explicitly set to 1.25rem with monospace + letter-spacing
       gets capped to a phone-friendly size. */
    [style*="font-size:1.25rem"][style*="monospace"],
    [style*="font-size: 1.25rem"][style*="monospace"],
    [style*="font-size:1.25rem"][style*="letter-spacing:0.1em"],
    [style*="font-size: 1.25rem"][style*="letter-spacing: 0.1em"] {
        font-size: 1rem !important;
        letter-spacing: .04em !important;
        word-break: break-all;
    }
    /* Wide letter-spacing on Bootstrap font-monospace overflows on phones */
    .font-monospace[style*="letter-spacing"] {
        letter-spacing: .04em !important;
        font-size: .85rem !important;
        word-break: break-all;
    }
    /* Common big numerals across stat cards keep their hierarchy but
       shrink one step on phones. */
    .fs-5 { font-size: 1.05rem !important; }
    .fs-4 { font-size: 1.2rem !important; }
    .stat-card .icon { width: 38px; height: 38px; font-size: .9rem; }
    .page-wrap h4 { font-size: 1.25rem; }
    .page-wrap h5 { font-size: 1.1rem; }
    .section-head__title { font-size: .92rem; }
}

/* ── 7. Reduce-motion respect ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .page-wrap, .page-content > *,
    .card, .stat-card .icon,
    .q-statusdot.accent::after, .q-statusdot.sage::after, .q-statusdot.gold::after,
    .status-dot-pulse::after,
    .card[style*="linear-gradient(135deg,#1a1a2e"]::before,
    .card.q-member-card::before {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   System-wide mobile polish (≤ 575.98px)
   Catches the common patterns that look cluttered or oversized on
   phones across every page, without having to edit each view.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {

    /* ── Page chrome ──────────────────────────────────────────────── */
    .page-wrap,
    .page-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ── Cards: tighten Bootstrap p-3/p-4/p-5 padding ─────────────── */
    .card-body.p-5  { padding: 18px !important; }
    .card-body.p-4  { padding: 16px !important; }
    .card-body.p-3  { padding: 14px !important; }
    .card-header.py-4,
    .card-header.py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
    .card-header.px-4,
    .card-header.px-5 { padding-left: 14px !important; padding-right: 14px !important; }

    /* ── Row gutters: g-4 / g-5 are too wide on phones ────────────── */
    .row.g-5,
    .row.gx-5 { --bs-gutter-x: 1rem !important; }
    .row.g-5,
    .row.gy-5 { --bs-gutter-y: 1rem !important; }
    .row.g-4,
    .row.gx-4 { --bs-gutter-x: .85rem !important; }
    .row.g-4,
    .row.gy-4 { --bs-gutter-y: .85rem !important; }

    /* ── Headings & display sizes ─────────────────────────────────── */
    h1, .h1, .display-1, .display-2 { font-size: 1.6rem !important; line-height: 1.2 !important; }
    h2, .h2, .display-3, .display-4 { font-size: 1.4rem !important; line-height: 1.25 !important; }
    h3, .h3, .display-5             { font-size: 1.2rem !important; line-height: 1.3 !important; }
    h4, .h4, .display-6             { font-size: 1.1rem !important; }
    h5, .h5                         { font-size: 1.02rem !important; }
    h6, .h6                         { font-size: .92rem !important; }
    .fs-1 { font-size: 1.5rem !important; }
    .fs-2 { font-size: 1.3rem !important; }
    .fs-3 { font-size: 1.15rem !important; }

    /* ── Inline padding that's too generous ───────────────────────── */
    [style*="padding:40px"],
    [style*="padding: 40px"]                          { padding: 20px !important; }
    [style*="padding:48px"], [style*="padding: 48px"] { padding: 22px !important; }
    [style*="padding:60px"], [style*="padding: 60px"] { padding: 24px !important; }

    /* ── Tables: force horizontal scroll if they overflow ─────────── */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    table.table { font-size: .85rem; }
    table.table th,
    table.table td { padding: 8px 10px !important; }
    table.table th:first-child,
    table.table td:first-child { padding-left: 12px !important; }

    /* ── Button groups: wrap so they don't overflow ──────────────── */
    .btn-group,
    .btn-toolbar { flex-wrap: wrap !important; gap: 6px; }
    .btn-group .btn { border-radius: 6px !important; }

    /* ── Action rows: when buttons sit margin-left:auto next to text,
          let them flow below on phones. ─────────────────────────────── */
    .d-flex.justify-content-between { flex-wrap: wrap !important; }
    .d-flex.justify-content-between > .ms-auto,
    .d-flex.justify-content-between > .ml-auto {
        margin-left: 0 !important;
        margin-top: 8px !important;
        width: 100%;
    }

    /* ── Avatars / circular tiles often inline-styled too big ────── */
    [style*="width:80px"][style*="height:80px"],
    [style*="width: 80px"][style*="height: 80px"],
    [style*="width:90px"][style*="height:90px"],
    [style*="width: 90px"][style*="height: 90px"],
    [style*="width:100px"][style*="height:100px"],
    [style*="width: 100px"][style*="height: 100px"],
    [style*="width:110px"][style*="height:110px"],
    [style*="width: 110px"][style*="height: 110px"] {
        width: 64px !important;
        height: 64px !important;
        font-size: 1.6rem !important;
    }

    /* ── Modals / off-canvas: tighter ─────────────────────────────── */
    .modal-dialog { margin: 8px !important; }
    .modal-body   { padding: 16px !important; }
    .modal-header,
    .modal-footer { padding: 12px 16px !important; }

    /* ── Hero / gradient panels (common in detail pages) ──────────── */
    [class*="-hero"],
    .profile-hero,
    .lp-hero,
    .ch-cover { border-radius: 12px !important; }

    /* ── Long inline-styled large font-sizes get capped ───────────── */
    [style*="font-size:2rem"],
    [style*="font-size: 2rem"]     { font-size: 1.35rem !important; }
    [style*="font-size:2.5rem"],
    [style*="font-size: 2.5rem"]   { font-size: 1.5rem !important; }
    [style*="font-size:3rem"],
    [style*="font-size: 3rem"]     { font-size: 1.75rem !important; }
    [style*="font-size:1.8rem"],
    [style*="font-size: 1.8rem"]   { font-size: 1.25rem !important; }
    [style*="font-size:1.7rem"],
    [style*="font-size: 1.7rem"]   { font-size: 1.25rem !important; }
    [style*="font-size:1.6rem"],
    [style*="font-size: 1.6rem"]   { font-size: 1.2rem !important; }
    [style*="font-size:1.5rem"],
    [style*="font-size: 1.5rem"]   { font-size: 1.15rem !important; }
    [style*="font-size:1.4rem"],
    [style*="font-size: 1.4rem"]   { font-size: 1.1rem !important; }

    /* ── Forms ───────────────────────────────────────────────────── */
    .form-label { font-size: .82rem !important; margin-bottom: 4px !important; }
    .form-text  { font-size: .72rem !important; }
    .form-control,
    .form-select { font-size: .92rem !important; }
    .input-group-text { font-size: .82rem !important; }

    /* ── Pagination / breadcrumbs ────────────────────────────────── */
    .pagination .page-link { padding: 6px 9px !important; font-size: .82rem !important; }
    .breadcrumb-item { font-size: .8rem !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   Global search (top-nav) — pill-shaped, layout-stable on reload.
   Notes:
    • box-sizing forced everywhere so padding doesn't push width around.
    • Icon + kbd are absolutely positioned → the input width is reserved
      by padding only, so the layout cannot shift while FA / web fonts load.
    • Explicit input height + line-height stop Bootstrap's [type=search]
      reset (used in some skins) from changing dimensions briefly.
   ───────────────────────────────────────────────────────────────────── */
.global-search,
.global-search *,
.global-search *::before,
.global-search *::after { box-sizing: border-box; }

.global-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 520px;
    margin: 0 16px;
}
.global-search__field {
    position: relative;
    display: block;
    width: 100%;
    height: 40px;
}
.global-search__icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: .9rem;
    line-height: 1;
}
.global-search__input {
    /* Hard-locked dimensions and inner spacing so the input never reflows. */
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 40px;
    line-height: 1.2;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0 60px 0 42px;     /* left = icon column, right = kbd column */
    font-size: .9rem;
    font-family: inherit;
    color: #0f172a;
    /* Include height/padding/font-size so the .is-stuck grow animates smoothly. */
    transition: background .15s, border-color .15s, box-shadow .2s,
                height .25s ease, padding .25s ease, font-size .25s ease;
    outline: none;
    margin: 0;
    box-shadow: none;
}
.global-search,
.global-search__field { transition: max-width .25s ease, height .25s ease; }
.global-search__input:hover { background: #fff; border-color: #cbd5e1; }
.global-search__input:focus {
    background: #fff;
    border-color: var(--primary, #4f46e5);
    box-shadow: 0 0 0 4px rgba(79,70,229,.14);
}
.global-search__input::placeholder { color: #94a3b8; opacity: 1; }
/* Strip the WebKit search clear-button (the little × that pops in) */
.global-search__input::-webkit-search-decoration,
.global-search__input::-webkit-search-cancel-button,
.global-search__input::-webkit-search-results-button,
.global-search__input::-webkit-search-results-decoration { display: none; }

.global-search__kbd {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    min-width: 22px;
    padding: 0 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    font-size: .72rem;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
    line-height: 1;
    pointer-events: none;
}
.global-search__field:focus-within .global-search__kbd { opacity: 0; }

.global-search__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 480px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(15,23,42,.15), 0 4px 12px rgba(15,23,42,.06);
    z-index: 1100;
}
.global-search__dropdown.is-open { display: block; }

.gs-section { border-bottom: 1px solid #f1f5f9; }
.gs-section:last-child { border-bottom: none; }
.gs-section__hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 5px;
    font-size: .68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: linear-gradient(180deg, #f8fafc, #fff);
}
.gs-section__hdr-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
}
.gs-item {
    display: block;
    padding: 9px 14px;
    color: #0f172a;
    text-decoration: none;
    transition: background .12s;
    border-left: 3px solid transparent;
}
.gs-item:hover,
.gs-item.is-active {
    background: #f5f3ff;
    color: #4f46e5;
    border-left-color: #4f46e5;
}
.gs-item__title {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gs-item__sub {
    font-size: .74rem;
    color: #94a3b8;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gs-item__meta {
    font-size: .65rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gs-empty,
.gs-loading {
    padding: 22px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: .85rem;
}
.gs-empty i,
.gs-loading i { font-size: 1.4rem; display: block; margin-bottom: 6px; opacity: .55; }
.gs-footer {
    display: block;
    padding: 10px 14px;
    text-align: center;
    background: #f8fafc;
    color: #4f46e5;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    border-top: 1px solid #f1f5f9;
    border-radius: 0 0 14px 14px;
}
.gs-footer:hover { background: #ede9fe; color: #4338ca; }
.gs-mark { background: #fef3c7; color: inherit; padding: 0 2px; border-radius: 3px; }

/* ── Mobile: search drops to its own full-width row below the navbar ───
   The .top-navbar flex-wraps so the search sits on row 2 without a visual
   break — same background, no divider line, sticks together as one unit. */
@media (max-width: 767.98px) {
    .top-navbar {
        flex-wrap: wrap;
        height: auto;
        min-height: 56px;
        row-gap: 0;
        padding-bottom: 8px !important;
        /* Edge-to-edge background so row 1 and row 2 merge seamlessly */
        padding-left: 14px;
        padding-right: 14px;
    }
    .global-search {
        order: 99;
        flex: 0 0 100%;
        max-width: none;
        /* Edge-to-edge: cancel navbar's 14px side padding so the field
           visually reaches both screen edges with breathing room inside. */
        margin: 4px -14px 0;
        padding: 0 12px;
        /* No border, no different background — inherit the navbar's frosted
           backdrop so the two rows feel like ONE surface. */
        background: transparent;
        border-top: none;
    }
    .global-search__field  { height: 42px; }
    .global-search__input {
        height: 42px;
        font-size: .92rem;
        padding: 0 16px 0 42px;
        border-radius: 999px;
        background: rgba(241, 245, 249, 0.85);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04) inset;
    }
    .global-search__input:focus { background: #fff; }
    .global-search__icon  { left: 16px; font-size: .9rem; }
    .global-search__kbd   { display: none !important; }
    .global-search__dropdown {
        left: 12px;
        right: 12px;
        top: calc(100% + 4px);
    }

    /* Awake state — slight lift, no layout shift */
    .top-navbar.is-stuck .global-search__field { height: 44px; }
    .top-navbar.is-stuck .global-search__input {
        height: 44px;
        font-size: .94rem;
        background: #fff;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   Motion polish — subtle, fast, opt-out via prefers-reduced-motion.
   Layers on top of existing styles without changing markup.
   ═════════════════════════════════════════════════════════════════════ */

/* 1. Staggered card entrance on page load (CSS-only, no JS required).
      First 8 cards in the page-wrap fade-up sequentially. Older cards
      after that just appear instantly — no overhead. */
.page-wrap .card,
.page-wrap .rpt-stat-card,
.page-wrap .rpt-chart-card {
    animation: cardRise .45s cubic-bezier(.4, 0, .2, 1) both;
}
.page-wrap > *:nth-child(1) .card:nth-of-type(1) { animation-delay: 0ms; }
.page-wrap .card:nth-of-type(2) { animation-delay: 50ms; }
.page-wrap .card:nth-of-type(3) { animation-delay: 100ms; }
.page-wrap .card:nth-of-type(4) { animation-delay: 150ms; }
.page-wrap .card:nth-of-type(5) { animation-delay: 200ms; }
.page-wrap .card:nth-of-type(6) { animation-delay: 250ms; }
.page-wrap .card:nth-of-type(7) { animation-delay: 300ms; }
.page-wrap .card:nth-of-type(8) { animation-delay: 350ms; }
@keyframes cardRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 2. Primary CTA shine — a slow diagonal sheen on hover. Only the
      branded buttons (primary/success/danger/warning), so neutral
      buttons stay calm. */
.btn-primary, .btn-success, .btn-danger, .btn-warning {
    position: relative;
    overflow: hidden;
}
.btn-primary::after, .btn-success::after,
.btn-danger::after,  .btn-warning::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 80%; height: 100%;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
    transform: skewX(-18deg);
    transition: left .65s ease;
    pointer-events: none;
}
.btn-primary:hover::after, .btn-success:hover::after,
.btn-danger:hover::after,  .btn-warning:hover::after { left: 130%; }

/* 3. Icon-chip pulse — the colored circular icons inside cards (stat
      tiles, dashboard widgets) get a gentle scale-pop when their parent
      card is hovered. Already partially defined; tighten timing here. */
.card:hover [class*="border-radius:50%"][style*="background"],
.card:hover .icon,
.card:hover .stat-card .icon { animation: iconPop .35s ease both; }
@keyframes iconPop {
    0%   { transform: scale(1); }
    55%  { transform: scale(1.12); }
    100% { transform: scale(1.06); }
}

/* 4. Link arrow nudge — "Continue learning →" style links get a
      forward push on hover so the arrow feels responsive. */
a[href]:hover > .fa-arrow-right,
a[href]:hover .fa-arrow-right.ms-1,
.btn:hover .fa-arrow-right { transform: translateX(3px); transition: transform .2s ease; }

/* 5. Nav-link active indicator slide — when an active sidebar item is
      first highlighted (page load), its left accent slides in. */
.sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--primary, #4f46e5), var(--primary-2, #7c3aed));
    animation: activeSlide .35s cubic-bezier(.4, 0, .2, 1) both;
}
.sidebar .nav-link { position: relative; }
@keyframes activeSlide {
    from { transform: scaleY(.2); opacity: 0; }
    to   { transform: scaleY(1);  opacity: 1; }
}

/* 6. Toast-style entrance for flash messages */
.alert {
    animation: flashIn .35s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes flashIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 7. Skeleton loader — shimmer for placeholder content. Apply class
      .skeleton to any div that's waiting for AJAX to populate. */
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s linear infinite;
    border-radius: 6px;
    color: transparent;
}
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 8. Big-number count-up emphasis — number elements with [data-countup]
      get a soft pop when they finish animating (JS sets .is-counted). */
[data-countup].is-counted {
    animation: numberPop .3s ease both;
    transform-origin: left center;
}
@keyframes numberPop {
    0%   { transform: scale(1); }
    60%  { transform: scale(1.08); color: var(--primary, #4f46e5); }
    100% { transform: scale(1); color: inherit; }
}

/* 9. Quick-action tile hover — lifts AND rotates the icon a hair */
.qa-tile { transition: transform .18s ease, box-shadow .18s ease; }
.qa-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(15, 23, 42, .22);
}
.qa-tile:hover i { transform: rotate(-4deg) scale(1.08); transition: transform .2s ease; }

/* 10. Honour the user's preference */
@media (prefers-reduced-motion: reduce) {
    .page-wrap .card,
    .page-wrap .rpt-stat-card,
    .page-wrap .rpt-chart-card,
    .alert,
    .skeleton,
    [data-countup].is-counted,
    .btn-primary::after, .btn-success::after,
    .btn-danger::after,  .btn-warning::after,
    .qa-tile,
    .qa-tile i,
    .sidebar .nav-link.active::before { animation: none !important; transition: none !important; }
}


/* ============================================================
   Mobile UX — minimal, scroll-safe
   Stops iOS zoom-on-focus only. Nothing here may break body
   scrolling on any device.
   ============================================================ */
html {
    -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
}
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea { font-size: 16px; }
}