/* ============================================================
   Google Fonts — Inter (body and headings)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   CSS VARIABLES — Light Theme (Google Drive inspired)
   ============================================================ */
:root {
    /* Primary brand blues */
    --primary: #1A73E8;
    --primary-color: #1A73E8;        /* legacy alias */
    --primary-dark: #1557B0;
    --primary-hover: #1557B0;        /* legacy alias */
    --primary-light: #E8F0FE;

    /* Secondary / accent */
    --secondary-color: #2c3e50;
    --accent-color: #e74c3c;
    --success-color: #2ecc71;
    --warning-color: #f1c40f;

    /* Text */
    --text-primary: #202124;
    --text-color: #202124;           /* legacy alias */
    --text-secondary: #5F6368;
    --light-text: #5F6368;           /* legacy alias */
    --text-on-primary: #FFFFFF;

    /* Backgrounds */
    --bg: #F8F9FA;
    --background-color: #F8F9FA;     /* legacy alias */
    --card-bg: #FFFFFF;
    --accent: #FFFFFF;
    --inner-bg: #F1F3F4;
    --border: #E0E0E0;
    --border-color: #E0E0E0;         /* legacy alias */

    /* Sidebar */
    --sidebar-bg: #1A56C4;
    --sidebar-width: 240px;

    /* Shadows */
    --shadow-card: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-hover: 0 6px 20px rgba(26,115,232,0.18);

    /* Radii */
    --radius-card: 16px;
    --radius-btn: 10px;
    --radius-pill: 50px;
    --border-radius: 16px;           /* legacy alias */
    --btn-border-radius: 10px;       /* legacy alias */

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Typography */
    --font-family: 'Inter', sans-serif;
    --font-heading: 'Inter', sans-serif;
    --font-size-base: 16px;

    /* Neumorphism legacy — mapped to flat shadows for backward compat */
    --neu-bg: #F8F9FA;
    --neu-shadow-light: transparent;
    --neu-shadow-dark: rgba(0,0,0,0.06);
    --neu-shadow-inset-light: inset 0 1px 3px rgba(0,0,0,0.08);
    --neu-shadow-out: var(--shadow-card);
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
    /* Backgrounds — layered depth */
    --bg: #0F1117;
    --background-color: #0F1117;
    --card-bg: #1A1D27;
    --inner-bg: #22263A;
    --accent: #1A1D27;

    /* Dark mode surface layers */
    --dm-surface: #1A1D27;
    --dm-surface-2: #22263A;
    --dm-surface-3: #2C3150;

    /* Sidebar */
    --sidebar-bg: #111827;

    /* Primary brand blue — slightly brightened */
    --primary: #4D8EF0;
    --primary-color: #4D8EF0;
    --primary-dark: #1A73E8;
    --primary-hover: #1A73E8;
    --primary-light: #1E2D4A;

    /* Text */
    --text-primary: #E8EAED;
    --text-color: #E8EAED;
    --text-secondary: #9AA0AC;
    --light-text: #9AA0AC;
    --text-on-primary: #FFFFFF;

    /* Borders */
    --border: #2E3347;
    --border-color: #2E3347;

    /* Secondary */
    --secondary-color: #E8EAED;

    /* Shadows — glow-based */
    --shadow-card: 0 2px 12px rgba(0,0,0,0.4);
    --shadow-hover: 0 6px 24px rgba(77,142,240,0.2);

    /* Status colors */
    --success-color: #34A853;
    --warning-color: #F9AB00;
    --accent-color: #EA4335;

    /* Neumorphism legacy — flat in dark mode */
    --neu-bg: #1A1D27;
    --neu-shadow-light: transparent;
    --neu-shadow-dark: rgba(0,0,0,0.3);
    --neu-shadow-inset-light: inset 0 1px 3px rgba(0,0,0,0.3);
    --neu-shadow-out: var(--shadow-card);
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

[data-theme="dark"] * {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    height: 100vh;
    overflow: hidden;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Headings use DM Sans */
h1, h2, h3, h4, h5, h6,
.section-title,
.exam-title,
.stat-number {
    font-family: var(--font-heading);
}

/* ============================================================
   APP CONTAINER — Sidebar layout
   ============================================================ */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Pages WITHOUT sidebar (login, register, take-exam) use column layout */
.app-container.no-sidebar {
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
    min-height: 100vh;
}

/* Allow body scroll for no-sidebar pages (auth, results, create-exam) */
body:has(.app-container.no-sidebar) {
    overflow: auto;
    height: auto;
}

.app-container.no-sidebar .app-main-wrapper {
    margin-left: 0;
    height: auto;
    flex: 1;
}

/* ============================================================
   APP SIDEBAR (Navigation)
   ============================================================ */
.app-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Scrollable area — everything above the fixed profile footer */
.sidebar-scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.sidebar-scrollable::-webkit-scrollbar {
    width: 4px;
}

.sidebar-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-scrollable::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}

.sidebar-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

.sidebar-brand {
    padding: 20px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sidebar-brand > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sidebar-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-brand-text {
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
}

.sidebar-brand-subtitle {
    color: rgba(255,255,255,0.6);
    font-size: 0.7rem;
    display: block;
    margin-top: 2px;
}

/* CTA Button in sidebar */
.sidebar-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 16px 16px;
    padding: 12px 16px;
    background: transparent;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 3px;
    border: 1px solid #FFFFFF;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-cta:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-1px);
}

[data-theme="dark"] .sidebar-cta {
    background: transparent;
    color: #FFFFFF;
    border-color: #FFFFFF;
}

/* Sidebar Navigation */
.sidebar-nav {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Utility row — the dark-mode toggle and the Feed link share one line, so the
   feed is reachable from every page without spending a full nav slot on it. */
.sidebar-utility-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px 8px;
}

.sidebar-utility-row #sidebar-theme-toggle {
    flex-shrink: 0;
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-utility-row #sidebar-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

.sidebar-feed-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* grow factor 0.8, not 1: the row's free space is shared out at 80%, so the
       pill renders a fifth narrower than it would filling the row. margin-left
       auto then absorbs the leftover 20% BEFORE the pill instead of after it,
       pinning it to the right edge so it lines up with the sidebar's gutter. */
    flex: 0.8;
    margin-left: auto;
    min-width: 0;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-family);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-feed-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.sidebar-feed-link.active {
    background: #FFFFFF;
    color: var(--sidebar-bg);
}

.sidebar-feed-link .nav-icon {
    display: inline-flex;
    flex-shrink: 0;
}

.sidebar-feed-link svg { width: 18px; height: 18px; }

/* Dashboard link sits above everything else in the nav — it is the way home
   from the feed, which is now where people land. */
.sidebar-top-nav { padding-bottom: 0; }

.sidebar-dashboard-link {
    font-weight: 700;
    color: #FFFFFF;
}

/* Count badge — the admin's pending-fee notification. */
.sidebar-nav-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: #EA4335;
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: var(--radius-btn);
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.sidebar-nav-item:hover {
    background: rgba(255,255,255,0.1);
    color: #FFFFFF;
}

.sidebar-nav-item.active {
    background: transparent;
    color: #FFFFFF;
    font-weight: 700;
    border-bottom: 2px solid #FFFFFF;
    border-radius: 0;
    box-shadow: none;
}

.sidebar-nav-item svg,
.sidebar-nav-item .nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* A second-level nav entry that scopes a view within the page above it, rather than
   linking somewhere else — e.g. "My Subjects" under "My Attendance". Indented and a
   shade quieter so the parent still reads as the section.
   The icon deliberately keeps the standard 20px: the collapsed and mobile breakpoints
   stack these icon-only with no size override of their own, so a smaller icon here
   would sit unevenly beside its siblings. The indent below is overridden in those
   breakpoints by the more specific `padding: 10px 4px` shorthand, which is what keeps
   the icon centred when the labels are hidden. */
.sidebar-nav-subitem {
    padding-left: 34px;
    font-size: 0.84rem;
    color: rgba(255,255,255,0.6);
}

.sidebar-nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar Divider */
.sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: 8px 16px;
}

/* Sidebar Stats */
.sidebar-stats {
    padding: 12px 16px;
    margin: 0 12px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-btn);
}

.sidebar-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
}

.sidebar-stat-value {
    font-weight: 700;
    color: #FFFFFF;
    font-family: var(--font-heading);
}

/* Sidebar Profile — pinned at bottom of sidebar */
.sidebar-profile {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.sidebar-profile-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
}

.sidebar-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #FFFFFF;
    flex-shrink: 0;
}

.sidebar-profile-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-profile-role {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.visible {
    display: block;
    opacity: 1;
}

/* ============================================================
   MAIN CONTENT WRAPPER (offset by sidebar)
   ============================================================ */
.app-main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: var(--sidebar-width);
    height: 100vh;
    overflow: hidden;
    transition: margin-left 0.3s ease;
}

/* ============================================================
   TOP BAR (Header)
   ============================================================ */
.main-header {
    background-color: var(--card-bg);
    height: 64px;
    min-height: 64px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
    position: relative;
}

/* Logo in header — only visible on pages without sidebar */
.logo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0;
}

.logo-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.logo img,
.logo-image {
    height: 36px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.logo h1 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.2;
}

.logo p {
    margin: 0;
    line-height: 1;
    font-size: 0.75rem;
    color: var(--light-text);
}

/* Search Bar (pill) in topbar */
.topbar-search {
    flex: 1;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.topbar-search-input {
    width: 100%;
    padding: 10px 20px 10px 44px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--inner-bg);
    font-family: var(--font-family);
    font-size: 0.9rem;
    color: var(--text-color);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.topbar-search-input::placeholder {
    color: var(--light-text);
}

.topbar-search-input:focus {
    outline: none;
    background: var(--card-bg);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.topbar-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-text);
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* Topbar Actions (right side icons) */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.topbar-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--inner-bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    font-size: 1.1rem;
}

.topbar-icon-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
}

/* ---- Topbar notification bell + dropdown ---- */

.topbar-bell-wrap {
    position: relative;
    display: inline-flex;
}

/* The `hidden` attribute is only `display: none` in the UA stylesheet, so ANY
   author display rule outranks it — .topbar-bell-badge sets `display: flex`,
   which left an empty 18px red dot sitting there whenever the count was zero.
   Scoped to the bell so it fixes every hidden element in this component (badge,
   menu, empty note) without imposing an !important on the whole app. */
.topbar-bell-wrap [hidden] {
    display: none !important;
}

.topbar-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: #EA4335;
    color: #FFFFFF;
    font-family: var(--font-family);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card-bg);
    pointer-events: none;
}

.topbar-bell-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 600;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
    padding: 6px;
    overflow: hidden;
}

[data-theme="dark"] .topbar-bell-menu {
    background: var(--dm-surface-2, #22263A);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.topbar-bell-head {
    padding: 10px 12px 8px;
    font-family: var(--font-family);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.topbar-bell-group {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.topbar-bell-group:hover { background: var(--primary-light); }

.bell-group-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--inner-bg);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* A group with something in it reads as actionable; an empty one stays quiet. */
.topbar-bell-group.has-items .bell-group-icon {
    background: var(--primary-light);
    color: var(--primary);
}

.bell-group-text { flex: 1; min-width: 0; }

.bell-group-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.bell-group-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

.bell-group-count {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--radius-pill);
    background: #EA4335;
    color: #FFFFFF;
    font-family: var(--font-family);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.topbar-bell-empty {
    padding: 4px 12px 12px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

@media (max-width: 480px) {
    /* Anchored to the viewport rather than the button: at phone width a 300px
       menu hanging off a right-aligned icon runs past the screen edge. */
    .topbar-bell-menu {
        position: fixed;
        top: 60px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}

[data-theme="dark"] .topbar-icon-btn {
    background: var(--dm-surface-2, #22263A);
}

[data-theme="dark"] .topbar-icon-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.topbar-icon-btn .badge-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    background: var(--accent-color);
    border-radius: 50%;
    border: 2px solid var(--card-bg);
}

.topbar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.topbar-avatar:hover {
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.main-content {
    flex: 1;
    padding: var(--spacing-xl);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--background-color);
}

.welcome-container {
    text-align: center;
    background: var(--card-bg);
    padding: var(--spacing-xl);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* ============================================================
   FOOTER
   ============================================================ */
.main-footer {
    text-align: center;
    padding: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--light-text);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-btn);
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    text-decoration: none;
    line-height: 1.4;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 2px 8px rgba(26,115,232,0.3);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

[data-theme="dark"] .btn-secondary {
    color: #0F1117;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--inner-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
}

.btn-block {
    display: block;
    width: 100%;
}

/* Pill button */
.btn-pill {
    border-radius: var(--radius-pill);
    padding: 10px 24px;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.9rem;
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--font-family);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--card-bg);
    color: var(--text-color);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* ============================================================
   MODALS
   ============================================================ */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    overflow: auto;
}

/* Media modal must stack above other modals (e.g. Add Question) */
#media-modal {
    z-index: 1100;
}

.modal-content {
    background-color: var(--card-bg);
    margin: 10% auto;
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    width: 80%;
    max-width: 600px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.3s;
}

[data-theme="dark"] .modal-content {
    background-color: var(--dm-surface, #1A1D27);
    border-color: var(--border-color);
    color: var(--text-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-sm);
}

.modal-header h3 {
    font-family: var(--font-heading);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-sm);
}

.modal-body .question-text,
.modal-content .question-text,
.flag-item,
#flag-review-body,
#edit-q-text,
.q-text {
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-width: 100%;
}

.question-item .form-group,
.question-item .q-text {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

.flag-item {
    background: var(--inner-bg);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid var(--accent-color);
}

.flag-item div[style*="font-style: italic"] {
    overflow-wrap: break-word;
    line-height: 1.6;
}

#edit-q-text {
    min-height: 100px;
    resize: vertical;
}

.question-item input.q-text,
.question-item input.form-control.q-text {
    height: auto;
    min-height: 40px;
    padding: 10px 12px;
}

.close-btn {
    color: var(--light-text);
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
}

.close-btn:hover {
    color: var(--accent-color);
}

/* Flag Review Modal — distinct close button */
.flag-modal-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--bg-color, #F8F9FA);
    color: var(--text-secondary, #5F6368);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.flag-modal-close-btn:hover {
    background: #EA4335;
    border-color: #EA4335;
    color: #fff;
}

[data-theme="dark"] .flag-modal-close-btn {
    background: var(--dm-surface-2, #22263A);
    border-color: var(--border-color);
    color: var(--text-secondary, #9AA0AC);
}

[data-theme="dark"] .flag-modal-close-btn:hover {
    background: #EA4335;
    border-color: #EA4335;
    color: #fff;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HAMBURGER & MOBILE MENU (legacy — used on some pages)
   ============================================================ */
.hamburger-btn,
.mobile-menu-btn,
.topbar-hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    z-index: 200;
    background: var(--card-bg);
    padding: 20px;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    flex-direction: column;
}

.mobile-menu.show {
    display: flex;
    transform: translateX(0);
}

.mobile-user-info {
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.mobile-filter-group {
    margin-bottom: 15px;
}

.mobile-filter-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: var(--light-text);
}

.desktop-filter {
    display: block;
}

.desktop-only {
    display: flex;
}

.mobile-only {
    display: none;
}

/* ============================================================
   CREDENTIALS DROPDOWN
   ============================================================ */
.credentials-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: var(--radius-btn);
    background: var(--inner-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font-family);
    font-size: 0.85rem;
    transition: all 0.2s;
}

.dropdown-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--card-bg);
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 8px 0;
    z-index: 4000;
    border: 1px solid var(--border-color);
    animation: slideUp 0.2s ease-out;
}

[data-theme="dark"] .dropdown-content {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.dropdown-content.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    text-decoration: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: var(--font-family);
    transition: background 0.15s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-weight: 500;
}

.dropdown-item:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--dm-surface-3, #2C3150);
}

.dropdown-item.danger {
    color: var(--accent-color);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MOBILE BOTTOM-SHEET MODALS
   Add .modal-sheet-mobile to any .modal and on phones its card
   docks to the bottom edge and slides in from below — the app's
   one canonical mobile modal presentation. Desktop is untouched.
   The !importants are required: modal-content elements commonly
   carry inline width/margin styles that would win otherwise.
   ============================================================ */
@keyframes modal-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (max-width: 768px) {
    .modal.modal-sheet-mobile .modal-content {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
        animation: modal-sheet-in 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        /* No !important: modals that set their own inline max-height keep it;
           this only catches ones with none, so a sheet can't overflow the
           screen upward. */
        max-height: 92vh;
        overflow-y: auto;
    }
}

/* Responsive Text Visibility */
.mobile-text {
    display: none;
}

.desktop-text {
    display: inline;
}

/* ============================================================
   ADD MEDIA BUTTON
   ============================================================ */
.add-media-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 0.85rem;
    background: transparent;
    border: 1px dashed var(--primary-color);
    color: var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.add-media-btn:hover {
    background: rgba(26, 115, 232, 0.08);
    border-style: solid;
}

/* ============================================================
   FORM SECTIONS (create-exam, etc.)
   ============================================================ */
.form-section {
    background: var(--card-bg);
    padding: var(--spacing-lg);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.form-col {
    flex: 1;
    min-width: 200px;
}

/* Question Editor */
.question-item {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background: var(--inner-bg);
}

.question-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.answer-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    background: var(--card-bg);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.answer-option input[type="radio"],
.answer-option input[type="checkbox"] {
    margin-top: 12px;
}

.answer-option textarea.form-control {
    flex: 1;
    min-height: 40px;
    height: 40px;
    resize: none;
    overflow: hidden;
    line-height: 1.5;
    padding: 8px 12px;
}

.auto-expand {
    min-height: 43px;
    height: auto;
    overflow-y: hidden;
    resize: none;
    line-height: 1.5;
}

/* ============================================================
   PAGE TITLE BAR (Create Exam, etc.)
   ============================================================ */
.page-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.page-title-bar h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    flex: 1;
}

.page-title-bar .actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

/* ============================================================
   QUESTION SUMMARY CARDS
   ============================================================ */
.question-summary-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.question-summary-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.question-summary-card:active {
    transform: scale(0.99);
}

/* Card header row — clickable to toggle options */
.q-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    min-height: 64px;
}

/* Chevron toggle icon */
.q-chevron {
    flex-shrink: 0;
    color: var(--light-text);
    transition: transform 0.25s ease;
    margin-left: 4px;
}

.question-summary-card.q-collapsed .q-chevron {
    transform: rotate(-90deg);
}

/* Options detail panel */
.q-card-options {
    padding: 0 var(--spacing-lg) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
    margin-top: 0;
    padding-top: var(--spacing-sm);
}

.question-summary-card.q-collapsed .q-card-options {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
}

/* Individual option row */
.q-option-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--inner-bg, #F5F2ED);
    border: 1px solid transparent;
    font-size: 0.85rem;
    color: var(--text-color);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.q-option-item.q-option-clickable {
    cursor: pointer;
}

.q-option-item.q-option-clickable:hover {
    background: var(--primary-light, #E8F0FE);
    border-color: var(--primary-color, #1A73E8);
}

.q-option-item.q-option-clickable:active {
    transform: scale(0.98);
}

.q-option-item.q-option-correct {
    background: rgba(52, 168, 83, 0.1);
    border: 1px solid rgba(52, 168, 83, 0.25);
}

.q-option-item.q-option-clickable.q-option-correct:hover {
    background: rgba(52, 168, 83, 0.18);
}

.q-option-letter {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

.q-option-correct .q-option-letter {
    background: #34A853;
    color: #fff;
}

.q-option-check {
    margin-left: auto;
    color: #34A853;
    flex-shrink: 0;
}

.q-option-empty {
    font-size: 0.82rem;
    color: var(--light-text);
    font-style: italic;
    padding: 6px 0;
}

/* Dark mode for options */
[data-theme="dark"] .q-option-item {
    background: var(--dm-surface-2, #22263A);
    color: var(--text-primary, #E8EAED);
}

[data-theme="dark"] .q-option-item.q-option-clickable:hover {
    background: var(--primary-light, #1E2D4A);
    border-color: var(--primary-color);
}

[data-theme="dark"] .q-option-item.q-option-correct {
    background: rgba(52, 168, 83, 0.12);
    border-color: rgba(52, 168, 83, 0.3);
}

[data-theme="dark"] .q-option-item.q-option-clickable.q-option-correct:hover {
    background: rgba(52, 168, 83, 0.2);
}

[data-theme="dark"] .q-option-letter {
    background: var(--dm-surface-3, #2C3150);
    color: var(--text-primary, #E8EAED);
}

[data-theme="dark"] .q-option-correct .q-option-letter {
    background: #34A853;
    color: #fff;
}

.question-number-badge {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
}

.question-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

[data-theme="dark"] .question-type-pill {
    background: var(--dm-surface-3, #2C3150);
    color: var(--primary);
}

.question-summary-text {
    flex: 1;
    min-width: 0;
}

/* Header top row: [number badge + type pill] on the left, [edit/delete] on
   the right, spread across the card's full width. */
.q-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.q-head-ident {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.question-summary-text .q-preview {
    font-size: 0.9rem;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.question-summary-text .q-meta {
    font-size: 0.78rem;
    color: var(--light-text);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.question-summary-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.question-summary-actions .btn-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--light-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}

.question-summary-actions .btn-icon:hover {
    background: var(--inner-bg);
    color: var(--primary);
}

.question-summary-actions .btn-icon.btn-icon-danger:hover {
    background: rgba(234, 67, 53, 0.1);
    color: #EA4335;
}

[data-theme="dark"] .question-summary-actions .btn-icon:hover {
    background: var(--dm-surface-3);
}

/* Question action buttons (edit/delete) */
.q-action-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--bg-color, #F8F9FA);
    color: var(--text-secondary, #5F6368);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}

.q-action-btn svg {
    width: 15px;
    height: 15px;
}

.q-action-edit:hover {
    background: var(--primary-light, #E8F0FE);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: scale(1.1);
}

.q-action-delete:hover {
    background: rgba(234, 67, 53, 0.1);
    border-color: #EA4335;
    color: #EA4335;
    transform: scale(1.1);
}

[data-theme="dark"] .q-action-btn {
    background: var(--dm-surface-2, #22263A);
    border-color: var(--border-color);
    color: var(--text-secondary, #9AA0AC);
}

[data-theme="dark"] .q-action-edit:hover {
    background: var(--primary-light, #1E2D4A);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .q-action-delete:hover {
    background: rgba(234, 67, 53, 0.15);
    border-color: #EA4335;
    color: #EA4335;
}

/* Points badge on summary card */
.points-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--inner-bg);
    color: var(--light-text);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   ADD QUESTION MODAL — Question Type Selector
   ============================================================ */
.question-type-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--spacing-md);
}

.question-type-selector .type-btn {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.question-type-selector .type-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.question-type-selector .type-btn.active {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
}

[data-theme="dark"] .question-type-selector .type-btn {
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .question-type-selector .type-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

[data-theme="dark"] .question-type-selector .type-btn.active {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
}

/* Modal editor container */
.modal-editor-container {
    min-height: 180px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    background: var(--card-bg);
    overflow: hidden;
}

[data-theme="dark"] .modal-editor-container {
    background: var(--dm-surface-2);
    border-color: var(--border-color);
}

/* Modal options list */
.modal-options-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.modal-options-list .answer-option {
    margin-bottom: 0;
}

/* ============================================================
   STICKY ACTIONS BAR (Frosted Glass)
   ============================================================ */
.sticky-actions-bar {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
    z-index: 50;
    transition: left 0.3s ease;
}

[data-theme="dark"] .sticky-actions-bar {
    background: rgba(15, 17, 23, 0.9);
}

.sticky-actions-bar .btn {
    border-radius: var(--radius-pill);
    padding: 10px 28px;
    font-weight: 700;
}

/* ============================================================
   CREATE EXAM PAGE — Specific Styles
   ============================================================ */
.create-exam-page .form-section {
    transition: box-shadow 0.2s ease;
}

.create-exam-page .section-header h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
}

.create-exam-page .section-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    color: var(--light-text);
    font-weight: 700;
    margin-bottom: 4px;
    display: block;
}

/* Question section header with actions */
.create-exam-page .section-header-questions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.create-exam-page .section-header-questions .actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Section divider headers for objective/theory */
.question-section-divider {
    margin: var(--spacing-lg) 0 var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--inner-bg);
    border-radius: 4px;
}

.question-section-divider h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
}

/* ============================================================
   GHOST CTAs — Icon + Text Actions (no button backgrounds)
   ============================================================ */
.ghost-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    color: var(--cta-color, var(--primary-color));
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    transition: opacity 0.15s ease;
    font-family: var(--font-family);
}
.ghost-cta:hover { opacity: 0.75; }
.ghost-cta svg { width: 16px; height: 16px; stroke-width: 2.5; flex-shrink: 0; }

.ghost-cta.ghost-cta-danger { --cta-color: #EA4335; }

/* ============================================================
   CREATE EXAM — Dark mode for modal card shell
   ============================================================ */
[data-theme="dark"] .create-exam-modal-shell {
    background: var(--bg-color, #0F1117);
}

[data-theme="dark"] .create-exam-card {
    background: var(--dm-surface, #1A1D27);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

[data-theme="dark"] .create-exam-card-header {
    border-color: var(--border-color);
}

[data-theme="dark"] .create-exam-card-header .close-modal-btn {
    background: var(--dm-surface-2, #22263A);
    color: var(--text-color);
}
[data-theme="dark"] .create-exam-card-header .close-modal-btn:hover {
    background: var(--dm-surface-3, #2C3150);
}

[data-theme="dark"] .create-exam-card-footer {
    background: var(--dm-surface, #1A1D27);
    border-color: var(--border-color);
}

[data-theme="dark"] .create-exam-divider {
    background: var(--border-color);
}

/* Steps Chain — Dark mode */
[data-theme="dark"] .steps-chain-icon {
    background: var(--dm-surface-2, #22263A);
    color: var(--light-text);
}

[data-theme="dark"] .steps-chain-item.active .steps-chain-icon,
[data-theme="dark"] .steps-chain-item.completed .steps-chain-icon {
    background: var(--primary-light, #1E2D4A);
    color: var(--primary-color);
}

[data-theme="dark"] .steps-chain-connector {
    background: var(--border-color);
}

[data-theme="dark"] .steps-chain-connector.filled {
    background: var(--primary-color);
}

[data-theme="dark"] .steps-chain-dropdown {
    background: var(--dm-surface-2, #22263A);
    border-color: var(--border-color);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

[data-theme="dark"] .steps-chain-dropdown-item:hover {
    background: var(--dm-surface-3, #2C3150);
}

/* Scramble Radio — Dark mode */
[data-theme="dark"] .scramble-radio-group input[type="radio"] {
    border-color: var(--border-color);
}

[data-theme="dark"] .scramble-radio-group input[type="radio"]:checked {
    border-color: var(--primary-color);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes slideDown {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.offline-notice,
#offline-notice,
#exam-notice {
    animation: slideDown 0.3s ease;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg,
            var(--inner-bg) 25%,
            var(--card-bg) 50%,
            var(--inner-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* ============================================================
   RESPONSIVE — MOBILE (< 768px)
   ============================================================ */
@media (max-width: 768px) {
    .mobile-text {
        display: inline;
    }

    .desktop-text {
        display: none;
    }

    .app-sidebar {
        transform: translateX(100%);
        left: auto;
        right: 0;
        width: 280px;
        min-width: 280px;
    }

    .app-sidebar.open {
        transform: translateX(0);
    }

    .app-main-wrapper {
        margin-left: 0;
    }

    .main-header {
        height: 56px;
        padding: 0 16px;
    }

    .hamburger-btn,
    .mobile-menu-btn,
    .topbar-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-search-input {
        flex: 1;
        padding: 8px 14px;
        border-radius: var(--radius-pill, 50px);
        border: none;
        background: var(--inner-bg);
        color: var(--text-color);
        font-size: 0.85rem;
        outline: none;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    .desktop-filter {
        display: none;
    }

    .main-content {
        padding: var(--spacing-md);
    }

    .topbar-search {
        display: none;
    }

    /* Show the close button inside the sidebar on mobile */
    .sidebar-close-btn {
        display: flex !important;
    }

    /* Show mobile Create Exam button */
    .mobile-create-exam-btn {
        display: flex !important;
    }

    /* Page title bar — stack on mobile */
    .page-title-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .page-title-bar .actions {
        width: 100%;
    }

    .page-title-bar .actions .btn {
        flex: 1;
        text-align: center;
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    /* Question summary cards — mobile layout */
    .q-card-header {
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
        flex-wrap: wrap;
        position: relative;
    }

    .question-number-badge {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.72rem;
    }

    /* Edit/delete live inline in the header top row now (q-head-row spreads
       them right via space-between) — no absolute positioning needed. */

    /* Hide chevron on mobile — card still toggles on tap */
    .q-card-header .q-chevron {
        display: none;
    }

    /* Summary text spans the card's full width */
    .question-summary-text {
        flex: 1;
        min-width: 0;
    }

    /* Question preview text — show full, allow wrapping */
    .question-summary-text .q-preview {
        font-size: 0.82rem;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    /* Meta row — single line, no wrapping */
    .question-summary-text .q-meta {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        font-size: 0.74rem;
    }

    /* Options align flush with the header content above them — the card
       header uses spacing-md horizontal padding on mobile, so the options
       panel uses the same (the old badge-column indent is gone). */
    .q-card-options {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* Sticky actions bar — full width on mobile */
    .sticky-actions-bar {
        left: 0;
        padding: 12px 16px;
    }

    /* Question type selector in modal */
    .question-type-selector {
        gap: 4px;
    }

    .question-type-selector .type-btn {
        font-size: 0.72rem;
        padding: 5px 10px;
    }

    /* Flag Review & Edit Question Modals — full width on mobile */
    #flag-review-modal .modal-content,
    #edit-question-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh;
        padding: 12px 10px !important;
    }
}

/* ============================================================
   RESPONSIVE — TABLET (768px – 1024px)
   ============================================================ */

/* Sidebar collapse toggle button — hidden on mobile, visible on desktop & tablet */
.sidebar-expand-toggle {
    display: none;
}

/* Desktop: show toggle and support collapsed state */
@media (min-width: 1025px) {
    .sidebar-expand-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -14px;
        width: 28px;
        height: 28px;
        background: var(--sidebar-bg, #1A56C4);
        border: 1.5px solid rgba(255,255,255,0.25);
        border-radius: 50%;
        color: rgba(255,255,255,0.8);
        cursor: pointer;
        z-index: 200;
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
        transition: color 0.2s, background 0.2s, opacity 0.2s;
        opacity: 0;
    }

    .app-sidebar:hover .sidebar-expand-toggle,
    .sidebar-expand-toggle:focus {
        opacity: 1;
    }

    .sidebar-expand-toggle:hover {
        color: #fff;
        background: rgba(255,255,255,0.15);
    }

    /* Collapsed sidebar on desktop */
    .app-sidebar.sidebar-collapsed {
        width: 80px;
        min-width: 80px;
        overflow: visible;
        align-items: center;
    }

    .app-sidebar.sidebar-collapsed .sidebar-expand-toggle {
        opacity: 1;
    }

    .app-sidebar.sidebar-collapsed .sidebar-brand {
        justify-content: center;
        padding: 16px 8px 8px;
    }

    .app-sidebar.sidebar-collapsed .sidebar-brand > div {
        justify-content: center;
    }

    .app-sidebar.sidebar-collapsed .sidebar-brand-text {
        display: none;
    }

    .app-sidebar.sidebar-collapsed .sidebar-brand-subtitle,
    .app-sidebar.sidebar-collapsed .sidebar-profile-name,
    .app-sidebar.sidebar-collapsed .sidebar-profile-role,
    .app-sidebar.sidebar-collapsed .sidebar-stat-row span:first-child {
        display: none;
    }

    .app-sidebar.sidebar-collapsed .sidebar-logout-btn {
        display: none;
    }

    .app-sidebar.sidebar-collapsed .sidebar-cta {
        padding: 10px;
        margin: 0 8px 12px;
        font-size: 1.1rem;
    }

    .app-sidebar.sidebar-collapsed .sidebar-cta .cta-text {
        display: none;
    }

    .app-sidebar.sidebar-collapsed .sidebar-nav {
        padding: 8px 0;
        align-items: center;
    }

    /* Collapsed: the utility row stacks, and the Feed link drops its label so
       it stays a square target like every other collapsed nav item. */
    .app-sidebar.sidebar-collapsed .sidebar-utility-row {
        flex-direction: column;
        gap: 6px;
        padding: 4px 8px 8px;
    }

    .app-sidebar.sidebar-collapsed .sidebar-feed-link {
        flex: none;
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        border-radius: 10px;
        /* The row is a COLUMN when collapsed, so the right-pinning auto margin
           from the expanded layout would shunt this icon off the cross axis and
           out of line with the theme toggle above it. */
        margin-left: 0;
    }

    .app-sidebar.sidebar-collapsed .sidebar-feed-link span:not(.nav-icon) {
        display: none;
    }

    /* The badge would overflow a 40px collapsed item, so pin it to the corner. */
    .app-sidebar.sidebar-collapsed .sidebar-nav-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        margin-left: 0;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 0.6rem;
    }

    .app-sidebar.sidebar-collapsed .sidebar-nav-item {
        position: relative;
    }

    .app-sidebar.sidebar-collapsed .sidebar-nav-item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 10px 4px;
        text-align: center;
        border-radius: 8px;
        width: auto;
        min-width: 64px;
    }

    .app-sidebar.sidebar-collapsed .sidebar-nav-label {
        display: block;
        font-size: 0.6rem;
        text-align: center;
        max-width: 72px;
        line-height: 1.2;
    }

    .app-sidebar.sidebar-collapsed .sidebar-school-id {
        display: none;
    }

    .app-sidebar.sidebar-collapsed .sidebar-divider {
        width: 48px;
        margin: 4px auto;
    }

    .app-sidebar.sidebar-collapsed #sidebar-theme-toggle {
        margin: 4px auto 4px;
        display: flex;
        justify-content: center;
    }

    .app-sidebar.sidebar-collapsed .sidebar-nav-item > span[id] {
        display: none;
    }

    .app-sidebar.sidebar-collapsed .sidebar-profile {
        padding: 8px 0;
    }

    .app-sidebar.sidebar-collapsed .sidebar-profile-info {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 8px;
    }

    .app-sidebar.sidebar-collapsed .sidebar-profile-info > div[style] {
        display: none;
    }

    .app-sidebar.sidebar-collapsed .sidebar-profile-info > button[title="Logout"] {
        display: none;
    }

    /* Hide the arrow indicator when collapsed */
    .app-sidebar.sidebar-collapsed .sidebar-profile-info > span {
        display: none;
    }

    /* Profile dropdown — pop out to the right when sidebar is collapsed */
    .app-sidebar.sidebar-collapsed #sidebar-profile-dropdown {
        left: 80px !important;
        right: auto !important;
        bottom: 0 !important;
        top: auto !important;
        width: 200px;
        margin-bottom: 0 !important;
        border-radius: 10px;
        box-shadow: 4px 0 24px rgba(0,0,0,0.35) !important;
    }

    .app-main-wrapper.sidebar-collapsed {
        margin-left: 80px;
    }

    /* Add transition for smooth collapse + allow toggle button to overflow */
    .app-sidebar {
        transition: width 0.25s ease, min-width 0.25s ease, transform 0.3s ease;
        overflow: visible;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .app-sidebar {
        width: 80px;
        min-width: 80px;
        transition: width 0.25s ease;
        overflow: visible;
        align-items: center;
    }

    /* Brand: center, hide text when collapsed */
    .app-sidebar .sidebar-brand {
        justify-content: center;
        padding: 16px 8px 8px;
    }

    .app-sidebar .sidebar-brand > div {
        justify-content: center;
    }

    .app-sidebar .sidebar-brand-text {
        display: none;
    }

    .app-sidebar .sidebar-brand-subtitle,
    .app-sidebar .sidebar-profile-name,
    .app-sidebar .sidebar-profile-role,
    .app-sidebar .sidebar-stat-row span:first-child {
        display: none;
    }

    /* CTA button: icon only, centered */
    .app-sidebar .sidebar-cta {
        padding: 10px;
        margin: 0 8px 12px;
        font-size: 1.1rem;
    }

    .app-sidebar .sidebar-cta .cta-text {
        display: none;
    }

    /* Nav: vertical icon + small label layout (Zoom-style) */
    .app-sidebar .sidebar-nav {
        padding: 8px 0;
        align-items: center;
    }

    .app-sidebar .sidebar-nav-item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 10px 4px;
        text-align: center;
        border-radius: 8px;
        width: auto;
        min-width: 64px;
    }

    .app-sidebar .sidebar-nav-label {
        display: block;
        font-size: 0.6rem;
        text-align: center;
        max-width: 72px;
        line-height: 1.2;
    }

    /* Hide elements that don't fit in collapsed sidebar */
    .app-sidebar .sidebar-school-id {
        display: none;
    }

    .app-sidebar .sidebar-divider {
        width: 48px;
        margin: 4px auto;
    }

    .app-sidebar #sidebar-theme-toggle {
        margin: 4px auto 4px;
        display: flex;
        justify-content: center;
    }

    .app-sidebar .sidebar-nav-item > span[id] {
        display: none;
    }

    /* Profile: avatar only, centered */
    .app-sidebar .sidebar-profile {
        padding: 8px 0;
    }

    .app-sidebar .sidebar-profile-info {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 8px;
    }

    .app-sidebar .sidebar-profile-info > div[style] {
        display: none;
    }

    .app-sidebar .sidebar-profile-info > button[title="Logout"] {
        display: none;
    }

    .app-main-wrapper {
        margin-left: 80px;
        transition: margin-left 0.25s ease;
    }

    .main-header {
        padding: 0 var(--spacing-md);
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    /* Tablet expand toggle button */
    .sidebar-expand-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -24px;
        width: 48px;
        height: 48px;
        background: var(--sidebar-bg, #1A56C4);
        border: 1.5px solid rgba(255,255,255,0.25);
        border-radius: 50%;
        color: rgba(255,255,255,0.8);
        cursor: pointer;
        z-index: 200;
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
        transition: color 0.2s, background 0.2s;
    }

    .sidebar-expand-toggle:hover {
        color: #fff;
        background: rgba(255,255,255,0.15);
    }

    /* Expanded state — back to full sidebar layout */
    .app-sidebar.sidebar-expanded {
        width: 240px;
        min-width: 240px;
        overflow: visible;
        align-items: stretch;
    }

    .app-sidebar.sidebar-expanded .sidebar-brand {
        justify-content: flex-start;
        padding: 20px 20px 16px;
    }

    .app-sidebar.sidebar-expanded .sidebar-brand > div {
        justify-content: flex-start;
    }

    .app-sidebar.sidebar-expanded .sidebar-brand-text {
        display: inline;
        font-size: 1.2rem;
        text-align: left;
    }

    .app-sidebar.sidebar-expanded .sidebar-brand-subtitle,
    .app-sidebar.sidebar-expanded .sidebar-profile-name,
    .app-sidebar.sidebar-expanded .sidebar-profile-role {
        display: block;
    }

    .app-sidebar.sidebar-expanded .sidebar-cta .cta-text {
        display: inline;
    }

    .app-sidebar.sidebar-expanded .sidebar-nav {
        padding: 8px 12px;
        align-items: stretch;
    }

    .app-sidebar.sidebar-expanded .sidebar-nav-item {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 16px;
        text-align: left;
        width: 100%;
        min-width: auto;
    }

    .app-sidebar.sidebar-expanded .sidebar-nav-label {
        font-size: 0.9rem;
        text-align: left;
        max-width: none;
    }

    .app-sidebar.sidebar-expanded .sidebar-school-id {
        display: block;
    }

    .app-sidebar.sidebar-expanded .sidebar-divider {
        width: auto;
        margin: 8px 16px;
    }

    .app-sidebar.sidebar-expanded .sidebar-nav-item > span[id] {
        display: inline;
    }

    .app-sidebar.sidebar-expanded .sidebar-profile {
        padding: 0;
    }

    .app-sidebar.sidebar-expanded .sidebar-profile-info {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 16px;
    }

    .app-sidebar.sidebar-expanded .sidebar-profile-info > div[style] {
        display: block;
    }

    .app-sidebar.sidebar-expanded .sidebar-profile-info > button[title="Logout"] {
        display: inline-flex;
    }

    .app-main-wrapper.sidebar-expanded {
        margin-left: 240px;
    }

    /* Sticky actions bar — adjust for collapsed sidebar */
    .sticky-actions-bar {
        left: 80px;
    }
}

/* Mobile-only header (hamburger for student dashboard with no full header) */
.mobile-header-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-header-only {
        display: flex !important;
        align-items: center;
        height: 56px;
        padding: 0 16px;
        background: var(--card-bg);
        border-bottom: 1px solid var(--border-color);
        position: sticky;
        top: 0;
        z-index: 90;
    }
}

/* ============================================================
   RESPONSIVE — DESKTOP (> 1024px)
   ============================================================ */
@media (min-width: 1025px) {
    .tabs {
        justify-content: space-between;
        align-items: center;
    }

    .tab-group {
        display: flex;
        gap: 20px;
    }
}

/* ============================================================
   BOTTOM NAVIGATION BAR (Mobile only)
   ============================================================ */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    z-index: 90;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 12px;
    color: var(--light-text);
    font-size: 0.65rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    transition: color 0.15s ease;
}

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

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

/* ---- Contextual bottom nav ------------------------------------------------
   A page whose bottom nav swaps items to match the actions available on the
   current view marks its <nav> with .bottom-nav-dynamic. Items then share the
   width evenly so an extra action slot still fits on a small phone, and an
   action item can be tinted (primary) or reddened (destructive) in place of
   the view item it replaced. */
/* Contextual labels vary in length ("Auto Generate", "Seed Exam"), so the bar
   grows a little rather than truncating them. */
.bottom-nav-dynamic {
    height: auto;
    min-height: 56px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.bottom-nav-dynamic .bottom-nav-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 2px;
    gap: 3px;
}

.bottom-nav-dynamic .bottom-nav-item > span:last-child {
    max-width: 100%;
    line-height: 1.15;
    overflow-wrap: anywhere;
    /* Two lines maximum, then ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The action that replaces the current view's item keeps that item's emphasis,
   plus a tinted pill so it reads as the page's primary verb. */
.bottom-nav-item.nav-action-primary {
    color: var(--primary);
    background: var(--primary-light, rgba(26, 115, 232, 0.12));
    border-radius: 12px;
}

.bottom-nav-item.nav-action-danger {
    color: var(--danger, #e74c3c);
}

.bottom-nav-item:disabled {
    opacity: 0.45;
    cursor: default;
}

.bottom-nav-item:active {
    transform: scale(0.97);
}

/* ---- Floating bottom nav (desktop too) ------------------------------------
   The normal .bottom-nav is a mobile-only edge-to-edge bar. A page whose
   actions are worth keeping within reach on a large screen adds
   .bottom-nav-floating: the bar detaches from the edge and becomes a centred
   pill that floats above the content, sized to its items instead of the
   viewport. Mobile is untouched — there it stays the full-width bar, because
   a floating pill on a phone just steals thumb room.

   Being fixed, it overlaps the end of the page: give the scroll container
   room with `padding-bottom` (see .has-floating-nav below). */
@media (min-width: 769px) {
    .bottom-nav-floating {
        display: flex;
        left: 50%;
        right: auto;
        bottom: 24px;
        transform: translateX(-50%);
        width: auto;
        max-width: calc(100vw - 48px);
        height: auto;
        min-height: 0;
        padding: 8px;
        gap: 4px;
        justify-content: center;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-pill, 50px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    }

    [data-theme="dark"] .bottom-nav-floating {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    }

    /* Items sit side by side as pills rather than sharing the width evenly */
    .bottom-nav-floating .bottom-nav-item {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 8px;
        padding: 10px 18px;
        border-radius: var(--radius-pill, 50px);
        font-size: 0.85rem;
        font-weight: 700;
        white-space: nowrap;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .bottom-nav-floating .bottom-nav-item > span:last-child {
        -webkit-line-clamp: none;
        display: inline;
        overflow: visible;
    }

    .bottom-nav-floating .bottom-nav-item:hover {
        background: var(--primary-light, rgba(26, 115, 232, 0.1));
        color: var(--primary);
    }

    /* Pages that mount a floating nav add this so it never covers the last row */
    body.has-floating-nav .main-content {
        padding-bottom: 96px;
    }
}

.bottom-nav-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #EA4335;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.bottom-nav-badge.has-count {
    display: flex;
}

@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
    }

    /* Add padding at bottom of main content for bottom nav */
    .main-content {
        padding-bottom: 72px;
    }
}

/* ============================================================
   MOBILE ACTION BAR (Mobile only) — reusable convention
   Contextual page/modal actions rendered as icon + sub-label,
   styled to match the bottom nav. The primary verb is tinted;
   secondary/destructive actions collapse into a "More" popup.
   Desktop keeps its existing buttons (this bar stays hidden).
   ============================================================ */
.mobile-action-bar { display: none; }
.mab-more-menu { display: none; }
/* Higher-specificity hide so a bar can be toggled off (e.g. no selection)
   without a JS inline style that would leak onto desktop. */
.mobile-action-bar.mab-hidden { display: none; }

@media (max-width: 768px) {
    .mobile-action-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 60px;
        background: var(--card-bg, #fff);
        border-top: 1px solid var(--border-color, #e0e0e0);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.07);
        z-index: 95;
        align-items: stretch;
        justify-content: space-around;
        gap: 4px;
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
    }

    /* When the bar and the bottom nav coexist, the bar sits above the nav */
    .bottom-nav ~ .mobile-action-bar,
    .mobile-action-bar.above-nav {
        bottom: 56px;
    }

    .mab-item {
        flex: 1;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 44px;
        padding: 6px 4px;
        background: none;
        border: none;
        border-radius: 12px;
        color: var(--light-text, #5F6368);
        font-family: inherit;
        font-size: 0.66rem;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
        cursor: pointer;
    }

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

    .mab-item:active {
        transform: scale(0.95);
    }

    /* Primary verb — tinted pill so it reads as THE action */
    .mab-item.mab-primary {
        color: var(--primary-color, var(--primary, #1A73E8));
        background: var(--primary-light, rgba(26, 115, 232, 0.12));
    }

    .mab-item.mab-danger {
        color: var(--danger, #e74c3c);
    }

    .mab-item:disabled {
        opacity: 0.5;
        cursor: default;
    }

    /* Overflow ("More") popup — opens above the bar */
    .mab-more-wrap {
        position: relative;
        flex: 1;
        display: inline-flex;
    }

    .mab-more-menu.open {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: fixed;
        right: 10px;
        bottom: 70px;
        min-width: 210px;
        background: var(--card-bg, #fff);
        border: 1px solid var(--border-color, #e0e0e0);
        border-radius: 14px;
        padding: 8px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
        z-index: 96;
    }

    .mab-more-menu.open button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 11px 14px;
        background: none;
        border: none;
        border-radius: 10px;
        color: var(--text-color, #202124);
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }

    .mab-more-menu.open button svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .mab-more-menu.open button:active {
        background: var(--primary-light, rgba(74, 144, 226, 0.12));
    }

    .mab-more-menu.open button.mab-danger {
        color: var(--danger, #e74c3c);
    }

    /* Pages that mount an action bar add this to clear the fixed bar */
    body.has-action-bar .main-content {
        padding-bottom: 84px;
    }
}

[data-theme="dark"] .mobile-action-bar {
    background: var(--dm-surface, #1A1D27);
}

[data-theme="dark"] .mab-more-menu.open {
    background: var(--dm-surface-2, #22263A);
    border-color: var(--border, #2E3347);
}