:root {
    /* Light theme -- the app's existing, unchanged colors */
    --bg-page: #eef3ef;
    --bg-surface: #fff;
    --bg-surface-alt: #fafcfa;
    --bg-subtle: #f3f8f4;
    --text-primary: #1e2b22;
    --text-secondary: #667;
    --text-muted: #889;
    --border-color: #e2e6ea;

    --brand-green: #1e5631;
    --brand-green-dark: #164025;
    --brand-green-light: #227a45;
    --brand-green-tint: #e3f0e7;
    --brand-green-muted: #8a9a90;

    --accent-yellow: #f8b103;
    --accent-yellow-light: #ffc933;
    --accent-yellow-tint: #fdefc8;
    --warning-text: #8a6d00;

    --danger-bg: #fdecea;
    --danger-text: #c0392b;
    --danger-text-dark: #611a15;

    --info-blue: #2b5f8a;
    --info-blue-dark: #1f4666;
    --info-blue-tint: #e3ecf9;

    /* RGB triplets (no # or rgba wrapper) for use inside existing
       rgba(var(--x), opacity) shadow/glow declarations. */
    --shadow-rgb: 20,45,30;
    --shadow-dark-rgb: 15,40,25;
    --brand-rgb: 30,86,49;
    --brand-dark-rgb: 20,64,36;
    --overlay-light-rgb: 255,255,255;
    --overlay-dark-rgb: 0,0,0;
    --info-rgb: 43,95,138;
}

/* Dark theme -- deliberately re-tuned, not an inversion of the light
   values. A few real principles behind these choices:
   - Soft dark grey backgrounds, never pure black (#000) -- easier on
     the eyes, reads as more premium than true black.
   - Surfaces get progressively LIGHTER than the page background
     (the reverse of light mode, where cards are white against a
     tinted page) -- that's what actually reads as "elevated" on dark.
   - The brand green is far too dark to read on a dark background as-is,
     so dark mode gets its own brighter, more saturated green -- same
     brand color family, tuned for contrast rather than reused verbatim.
   - Text is a soft off-white, not pure white -- pure white on dark
     backgrounds is harsh and causes real eye strain over time. */
[data-theme="dark"] {
    --bg-page: #14181a;
    --bg-surface: #1c2124;
    --bg-surface-alt: #21262a;
    --bg-subtle: #1a2620;
    --text-primary: #e8ece9;
    --text-secondary: #a8b0ac;
    --text-muted: #868f8a;
    --border-color: #2c3430;

    --brand-green: #3fa06a;
    --brand-green-dark: #2d7a4f;
    --brand-green-light: #4db67d;
    --brand-green-tint: #1a2f22;
    --brand-green-muted: #5a6b5f;

    --accent-yellow: #ffc107;
    --accent-yellow-light: #ffd54f;
    --accent-yellow-tint: #3d3419;
    --warning-text: #f8d97a;

    --danger-bg: #3d1f1c;
    --danger-text: #e57373;
    --danger-text-dark: #ffab91;

    --info-blue: #64b5f6;
    --info-blue-dark: #90caf9;
    --info-blue-tint: #1a2733;

    /* Shadows shift to a black base -- a dark-green shadow would be
       nearly invisible against a dark background, but a soft black
       one still reads as real elevation. Glows/highlights use the
       brighter dark-mode green instead of the light theme's darker
       brand RGB, so buttons and active states still visibly glow. */
    --shadow-rgb: 0,0,0;
    --shadow-dark-rgb: 0,0,0;
    --brand-rgb: 63,160,106;
    --brand-dark-rgb: 45,122,79;
    --overlay-light-rgb: 255,255,255;
    --overlay-dark-rgb: 0,0,0;
    --info-rgb: 100,181,246;
}

/* Scrollbars never adapt to a site's own theme on their own -- every
   browser just uses its plain OS default (usually a light grey
   track) regardless of dark mode, unless explicitly styled. WebKit
   browsers (Chrome/Safari/Edge) and Firefox need separate syntax for
   the same result. Uses the app's own theme variables so this
   automatically follows light/dark like everything else, rather
   than a second, separate set of colors to keep in sync by hand. */
* {
    scrollbar-color: var(--border-color) var(--bg-subtle);
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--bg-subtle);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
    border: 3px solid var(--bg-subtle);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--bg-page);
    margin: 0;
    padding: 20px;
    color: var(--text-primary);
    overflow-x: hidden;
}

/* Explicit link color, both states -- without this, browsers fall
   back to their own defaults (blue unvisited, purple visited), which
   is jarring and off-brand, especially the purple in dark mode. Any
   more specific selector elsewhere (nav links, button-styled links)
   still wins over this by normal CSS specificity. */
a, a:visited {
    color: var(--brand-green);
}

/* The global a:visited rule above has higher CSS specificity than a
   single class selector (element+pseudo-class beats a lone class),
   so once someone actually clicks any of these button-styled links,
   :visited would silently override their intended color -- correct
   before the first click, wrong after. Every button-styled <a> in
   the shared stylesheet needs its own :visited override re-asserting
   its real color so it doesn't quietly change over time. */
.button-link:visited { color: #fff; }
.feature-actions a.button-link:visited { color: #fff; }
.feature-actions a.button-link.secondary:visited { color: var(--brand-green); }
.welcome-topbar-actions a.primary:visited { color: var(--brand-green); }
.welcome-topbar-actions a.secondary:visited { color: #fff; }
.doc-download-btn.pdf:visited { color: var(--danger-text); }
.doc-download-btn.word:visited { color: var(--info-blue-dark); }
.doc-download-btn.view:visited { color: var(--text-secondary); }
.cookie-btn.primary:visited { color: #fff; }
.cookie-btn.secondary:visited { color: #c8d3cc; }
.sidebar-link:visited { color: var(--text-secondary); }
.sidebar-link.active:visited { color: #fff; }
.create-sheet-item:visited { color: var(--text-primary); }

.container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-surface);
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(var(--shadow-rgb),0.07);
}

@media (max-width: 768px) {
    /* 40px of padding on each side eats a disproportionate chunk of
       a narrow phone's actual width before any content even starts
       -- reasonable against a 900px desktop container, genuinely
       wasteful against a ~360-412px screen. */
    .container {
        padding: 20px 16px;
    }

    /* Dashboard only, per explicit scope -- the inner pieces here
       (term-banner, account-status-card, feature-card) already have
       their own distinct card styling. Stripping the outer wrapper's
       own background/radius/shadow lets them read as independent
       cards sitting directly on the page, rather than one card
       nested inside another. */
    .dashboard-container {
        background: none;
        border-radius: 0;
        box-shadow: none;
        padding-left: 0;
        padding-right: 0;
    }

    /* Compact two-column feature cards, Dashboard only -- verified
       against a real prototype at 360px in both themes before this
       was built, all nine document types, including the two longest
       labels (Weekly Forecast, Record of Work), hold up cleanly. */
    .dashboard-container .feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .dashboard-container .feature-card {
        padding: 12px;
    }
    .dashboard-container .feature-card-top {
        gap: 8px;
        margin-bottom: 6px;
    }
    .dashboard-container .feature-card .icon-chip.lg {
        width: 24px;
        height: 24px;
        border-radius: 7px;
    }
    .dashboard-container .feature-card .icon-chip.lg svg {
        width: 14px;
        height: 14px;
    }
    .dashboard-container .feature-name {
        font-size: 13px;
    }
    .dashboard-container .feature-stat {
        font-size: 11px;
        margin-bottom: 10px;
    }
    .dashboard-container .feature-stat strong {
        font-size: 14px;
    }
    .dashboard-container .feature-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }
    .dashboard-container .feature-actions a.button-link {
        padding: 6px 10px;
        font-size: 12px;
        flex: 1;
        white-space: nowrap;
    }
    .dashboard-container .feature-actions a.button-link.secondary {
        background: none;
        border: none;
        color: var(--brand-green);
        padding: 0;
        font-size: 11px;
        flex: 0 0 auto;
    }
    /* Full button text ("+ New Scheme of Work") swaps for a short,
       generic one ("+ New") -- the card's own title already says
       what type it is, so the long version is pure redundancy once
       the card is this narrow. */
    .dashboard-container .btn-text-full { display: none; }
    .dashboard-container .btn-text-short { display: inline; }
}

@media (min-width: 769px) {
    .btn-text-short { display: none; }
}

h1 {
    font-size: 22px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 3px solid var(--brand-green);
    padding-bottom: 12px;
    margin-bottom: 25px;
}

fieldset {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 16px 20px 20px;
    background: var(--bg-surface-alt);
    min-width: 0;
}

legend {
    font-weight: 600;
    color: var(--brand-green);
    padding: 0 8px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.field {
    flex: 1 1 220px;
    margin-bottom: 14px;
}

.field.full {
    flex: 1 1 100%;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=number], select, textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    font-size: 14px;
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=tel]:focus,
input[type=date]:focus, input[type=number]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.12);
}

textarea {
    resize: vertical;
}

.password-field-wrap {
    position: relative;
}
.password-field-wrap input[type="password"], .password-field-wrap input[type="text"] {
    padding-right: 40px;
}
.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}
.password-toggle-btn:hover { color: var(--text-primary); }

input[readonly], textarea[readonly] {
    background: var(--bg-subtle);
    color: var(--brand-green);
}

/* Browser autofill (an already-typed/remembered value in a field)
   forces its own hardcoded background via an internal style that a
   normal `background` declaration can't override -- this showed up
   as a broadcast message field staying white in dark mode specifically
   once it had text in it. background-color itself can't be overridden
   directly here; box-shadow inset is the standard, reliable trick to
   visually paint over the browser's forced color instead. Also pins
   the text color, since autofill can force dark text too, which would
   be unreadable against a dark background even with this fix alone. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-surface) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary);
    transition: background-color 0s 600000s, color 0s 600000s;
}

.stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-surface);
    max-width: 220px;
}
.stepper-btn {
    background: var(--bg-subtle);
    border: none;
    width: 40px;
    height: 40px;
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-green);
    cursor: pointer;
    flex-shrink: 0;
}
.stepper-btn:hover { background: var(--brand-green-tint); }
.stepper input[type="number"] {
    border: none;
    text-align: center;
    width: 100%;
    -moz-appearance: textfield;
    padding: 8px 0;
}
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.stepper-suffix {
    font-size: 12px;
    color: var(--text-secondary);
    padding-right: 10px;
    white-space: nowrap;
}

.hint {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 3px;
}

#learning_activities_reference {
    background: var(--bg-surface-alt);
    border: 1px dashed var(--brand-green-muted);
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--text-primary);
}

#learning_activities_reference ul {
    margin: 0;
    padding-left: 18px;
}

.submit-row {
    text-align: center;
    margin-top: 25px;
}

button {
    background: linear-gradient(135deg, var(--brand-green-light) 0%, var(--brand-green-dark) 100%);
    color: #fff;
    border: none;
    padding: 12px 32px;
    font-size: 15px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(var(--brand-rgb),0.20), 0 1px 3px rgba(var(--brand-rgb),0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(var(--brand-rgb),0.28), 0 3px 6px rgba(var(--brand-rgb),0.15);
}

button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--brand-rgb),0.15);
}

.ai-btn {
    background: var(--info-blue);
}

.ai-btn:hover {
    background: var(--info-blue-dark);
    box-shadow: 0 4px 12px rgba(var(--info-rgb),0.25);
}

.ai-btn:disabled {
    background: var(--info-blue);
    cursor: wait;
    transform: none;
    box-shadow: none;
}

.error-box {
    background: var(--danger-bg);
    border: 1px solid var(--danger-bg);
    color: var(--danger-text-dark);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.success-btn {
    display: inline-block; padding: 11px 20px; border-radius: 8px;
    font-size: 14px; font-weight: 600; text-decoration: none;
}
.success-btn.primary { background: var(--brand-green); color: #fff; }
.success-btn.primary:visited { color: #fff; }
.success-btn.primary:hover { background: var(--brand-green-dark); }
.success-btn.secondary { background: var(--bg-surface); color: var(--brand-green); border: 1px solid var(--border-color); }
.success-btn.secondary:visited { color: var(--brand-green); }
.success-btn.secondary:hover { background: var(--bg-subtle); }

.error-box p {
    margin: 4px 0;
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto 12px;
    padding: 0 4px;
    font-size: 14px;
}

.top-nav a {
    color: var(--brand-green);
    text-decoration: none;
    margin-left: 14px;
}

.top-nav a:hover {
    text-decoration: underline;
}

/* ---- App layout: fixed top bar + grouped sidebar ---- */

body {
    padding-top: 76px; /* 20px original spacing + 56px topbar height */
}

@media (min-width: 769px) {
    body {
        padding-left: 240px; /* 20px original spacing + 220px sidebar width */
    }
}

.app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--brand-green);
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb),0.18);
    z-index: 110;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 14px;
}

.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #fff;
    padding: 4px 8px;
    line-height: 1;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.app-brand-badge {
    background: var(--bg-surface);
    color: var(--brand-green);
    font-weight: 700;
    font-size: 13px;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}

.app-brand-badge-img {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: block;
    object-fit: contain;
}

.app-brand-name {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    white-space: nowrap;
}

.app-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notification-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
}

.notification-bell:visited {
    color: #fff;
}

.notification-bell:hover {
    background: rgba(var(--overlay-light-rgb),0.15);
}

.theme-switch.topbar-theme-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
}

.theme-switch.topbar-theme-toggle:hover {
    background: rgba(var(--overlay-light-rgb),0.15);
}

.topbar-theme-toggle .theme-switch-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .topbar-theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .topbar-theme-toggle .theme-icon-moon { display: flex; }

.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger-text);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    box-shadow: 0 0 0 2px var(--brand-green);
}

.app-avatar-wrap {
    position: relative;
}

.app-avatar-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.app-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--info-blue);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(var(--overlay-light-rgb),0.5);
}

.avatar-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 44px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(var(--overlay-dark-rgb),0.12);
    min-width: 190px;
    z-index: 120;
    overflow: hidden;
}

.avatar-dropdown.open {
    display: block;
}

.avatar-dropdown-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--bg-subtle);
    display: flex;
    flex-direction: column;
}

.avatar-dropdown-header strong {
    font-size: 13px;
    color: var(--text-primary);
}

.avatar-dropdown-header span {
    font-size: 12px;
    color: var(--text-secondary);
}

.avatar-dropdown a {
    display: block;
    padding: 10px 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
}

.avatar-dropdown a:hover {
    background: var(--bg-subtle);
}

.avatar-dropdown a.logout-link {
    color: var(--danger-text);
    border-top: 1px solid var(--bg-subtle);
}

/* ---- Sidebar ---- */

.app-sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    width: 220px;
    height: calc(100vh - 56px);
    background: var(--bg-subtle);
    border-right: 1px solid var(--border-color);
    z-index: 90;
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
}

.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px 10px;
}

.sidebar-theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
    margin: 0 10px;
    padding-top: 12px;
}

.sidebar-theme-toggle span:nth-child(2) { flex: 1; }

.theme-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--border-color);
    border-radius: 22px;
    transition: background 0.2s ease;
}

.theme-switch-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: var(--bg-surface);
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(var(--overlay-dark-rgb), 0.25);
}

.theme-switch input:checked + .theme-switch-slider {
    background: var(--brand-green);
}

.theme-switch input:checked + .theme-switch-slider::before {
    transform: translateX(16px);
}

.theme-switch-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
}

/* Welcome's top bar uses a plain icon toggle at every screen width,
   matching the logged-in top bar's own icon-only approach -- both the
   switch visual and the icon share the same underlying checkbox, so
   this is purely a visual swap, the actual toggle logic is untouched.
   Scoped to welcome-topbar-actions specifically, not applied globally
   -- the sidebar's own theme toggle (now removed) used to share these
   same base classes without an icon span to fall back on, so an
   earlier, unscoped version of this rule accidentally hid it there. */
.welcome-topbar-actions .theme-switch {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.welcome-topbar-actions .theme-switch-slider { display: none; }
.welcome-topbar-actions .theme-switch-icon { display: flex; }

/* Sun shows by default (light mode), moon shows once dark mode is
   active -- the icon reflects current state, matching the reference
   design where light theme shows a sun and dark theme shows a moon. */
.welcome-topbar-actions .theme-icon-moon { display: none; }
[data-theme="dark"] .welcome-topbar-actions .theme-icon-sun { display: none; }
[data-theme="dark"] .welcome-topbar-actions .theme-icon-moon { display: flex; }

.sidebar-admin-pinned {
    flex-shrink: 0;
    padding: 10px 10px 16px;
    border-top: 1px solid var(--border-color);
}

.sidebar-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--brand-green-muted);
    padding: 16px 10px 6px;
}

/* Thin separator between the utility rows (Dashboard, My Documents)
   and the document-type rows below -- replaces the old per-feature
   group labels now that every group has collapsed to a single row. */
.sidebar-divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 6px;
}

/* Small tinted badge that every sidebar/dashboard/table icon sits
   inside, so a raw emoji (which brings its own uncontrolled colors)
   reads as one deliberate icon language instead of a loose sticker
   floating on a plain background. Sizes below for different contexts. */
.icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--brand-green-tint);
    color: var(--brand-green);
    line-height: 1;
}

.icon-chip svg { width: 16px; height: 16px; }

.icon-chip.lg {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.icon-chip.lg svg { width: 22px; height: 22px; }

.icon-chip.sm {
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

.icon-chip.sm svg { width: 13px; height: 13px; }

/* ---- Compact download icon buttons (My Documents rows) ---- */
/* ---- My Documents: responsive card layout for narrow screens ---- */
/* Table stays the default (desktop already worked fine); below
   768px, the table hides and these cards take over instead --
   avoids squeezing a 6-column table into a phone screen, which is
   what actually looks unprofessional, rather than adapting the
   layout to the device the way a real app would. */
.doc-table-wrapper { display: none !important; }
.doc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

body.list-view .doc-cards {
    grid-template-columns: 1fr;
    max-width: 700px;
}

.view-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

.view-toggle-btn:hover {
    background: var(--bg-subtle);
    color: var(--brand-green);
    transform: none;
    box-shadow: none;
}

.view-toggle-btn.active {
    background: linear-gradient(135deg, var(--brand-green-light) 0%, var(--brand-green-dark) 100%);
    color: #fff;
    border-color: transparent;
}

@media (max-width: 768px) {
    /* On mobile the choice is moot -- grid is the only sensible
       layout for a narrow screen, so the toggle itself is hidden
       rather than offering a List option that immediately gets
       overridden anyway. */
    .view-toggle { display: none; }
}

.doc-card {
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb),0.05), 0 1px 2px rgba(var(--shadow-rgb),0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.doc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(var(--shadow-rgb),0.09), 0 3px 6px rgba(var(--shadow-rgb),0.05);
}

.doc-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.doc-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--brand-green-tint);
    color: var(--brand-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.doc-card-icon svg { width: 18px; height: 18px; }

.doc-card-title { font-weight: 700; font-size: 14px; color: var(--text-primary); }

.doc-card-date {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.doc-card-meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.doc-card-detail { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }

.doc-card-actions {
    display: flex;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--bg-subtle);
}

/* ---- Lesson Plan's stage-by-stage input table: restacks on mobile
   so each textarea gets full width to type into, instead of being
   squeezed into one of 4 columns ---- */
.mobile-field-label { display: none; }

@media (max-width: 768px) {
    .stage-table, .stage-table thead, .stage-table tbody,
    .stage-table tr, .stage-table th, .stage-table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    .stage-table thead { display: none; }
    .stage-table td {
        border: none !important;
        padding: 6px 0 !important;
    }
    .stage-table tr {
        margin-bottom: 20px;
        padding-bottom: 14px;
        border-bottom: 2px solid var(--border-color) !important;
    }
    .stage-table .stage-name-cell {
        font-size: 15px !important;
        color: var(--brand-green);
        border: none !important;
        padding: 0 0 8px 0 !important;
    }
    .mobile-field-label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }
}

.add-notes-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 15px;
    border: 1px dashed var(--brand-green-muted);
    color: var(--brand-green);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    background: var(--bg-surface-alt);
}

/* ---- Shared topbar/brand/button styles, usable by any public-facing
   page (welcome.php, pricing.php, etc.) -- welcome.php also has its
   own copies of these in its inline <style> block, which take
   priority there since they're declared later in the page; this is
   what any OTHER page falls back to. ---- */
.welcome-topbar {
    background: linear-gradient(135deg, rgba(var(--brand-rgb),0.92) 0%, rgba(var(--brand-dark-rgb),0.92) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 4px 20px rgba(var(--shadow-dark-rgb),0.15);
}
.welcome-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; }
.welcome-brand-badge {
    width: 32px; height: 32px; border-radius: 7px;
    display: block; object-fit: contain;
}
.welcome-nav-links {
    display: flex; align-items: center; gap: 22px;
    position: absolute; left: 50%; transform: translateX(-50%);
}
.welcome-nav-links a.nav-anchor {
    color: rgba(var(--overlay-light-rgb),0.85); text-decoration: none; font-size: 13px; font-weight: 600;
}
.welcome-nav-links a.nav-anchor:hover { color: #fff; }
.welcome-topbar-actions { display: flex; align-items: center; flex-shrink: 0; }
.welcome-topbar-actions a {
    color: #fff; text-decoration: none; font-weight: 600; font-size: 14px;
    margin-left: 16px; padding: 8px 16px; border-radius: 6px;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.welcome-topbar-actions a.primary {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-subtle) 100%);
    color: var(--brand-green);
    box-shadow: 0 4px 14px rgba(var(--overlay-dark-rgb),0.12);
}
.welcome-topbar-actions a.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--overlay-dark-rgb),0.16); }
.welcome-topbar-actions a.secondary { border: 1px solid rgba(var(--overlay-light-rgb),0.6); }

.button-link {
    display: inline-block;
    background: linear-gradient(135deg, var(--brand-green-light) 0%, var(--brand-green-dark) 100%);
    color: #fff; text-decoration: none;
    padding: 12px 32px; border-radius: 8px; font-weight: 600; font-size: 15px;
    box-shadow: 0 4px 10px rgba(var(--brand-rgb),0.20);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(var(--brand-rgb),0.25);
}

@media (max-width: 768px) {
    .welcome-topbar { position: relative; padding: 12px 14px; gap: 8px; }
    .welcome-brand { font-size: 14px; gap: 6px; }
    .welcome-brand-badge { width: 28px; height: 28px; }
    .welcome-nav-links { display: none; }

    /* Pricing only -- the cards below already have a Get Started
       action taking someone straight to registration, so the top bar
       doesn't need Log In, Create Account, or the theme toggle
       competing for space too. Just the logo. */
    .pricing-topbar .welcome-topbar-actions { display: none; }

    /* Create Account moves into the dropdown on mobile (its
       mobile-only duplicate there), Log In stays visible on the top
       bar itself. */
    .desktop-only-link { display: none; }
}

@media (min-width: 769px) {
    .mobile-only-link { display: none; }
}


.add-notes-chip:hover {
    background: var(--bg-page);
    border-style: solid;
}

/* ---- Pricing cards ---- */
.pricing-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 640px;
    margin: 0 auto;
}

.price-card {
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px;
    width: 290px;
    position: relative;
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb),0.05), 0 1px 2px rgba(var(--shadow-rgb),0.04);
}

.price-card.popular {
    border: 2px solid var(--brand-green);
    box-shadow: 0 12px 28px rgba(var(--shadow-rgb),0.10), 0 3px 8px rgba(var(--shadow-rgb),0.06);
}

.price-card .popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-yellow);
    color: #3d2f00;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 12px;
    white-space: nowrap;
}

.price-card .tier-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-green);
    margin-top: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.price-card .price {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 8px 0 2px;
}

.price-card .price span {
    font-size: 15px;
    font-weight: 600;
}

.price-card .price-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.price-card .price-features {
    border-top: 1px solid var(--bg-subtle);
    padding-top: 16px;
}

.price-card .price-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.45;
}

.price-card .check-circle {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-green-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.notes-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface-alt);
    vertical-align: middle;
}

.notes-chip-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-green);
}

.doc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Small rotating spinner shown alongside "Generating..." status text
   -- gives real visual feedback that something is actively happening,
   instead of a static line of text sitting there unchanged for several
   seconds while the AI drafts content. */
.ai-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid var(--border-color);
    border-top-color: var(--brand-green);
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
    animation: ai-spin 0.7s linear infinite;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

.doc-actions .view-link {
    font-size: 13px;
    margin-right: 4px;
}

.doc-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    flex-shrink: 0;
}

.doc-download-btn svg { width: 15px; height: 15px; }

.doc-download-btn.lg { width: 48px; height: 48px; border-radius: 10px; }
.doc-download-btn.lg svg { width: 22px; height: 22px; }

.doc-download-btn.pdf {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.doc-download-btn.pdf:hover {
    background: var(--danger-bg);
}

.doc-download-btn.word {
    background: var(--info-blue-tint);
    color: var(--info-blue-dark);
}

.doc-download-btn.word:hover {
    background: var(--info-blue-tint);
}

.doc-download-btn.view {
    background: var(--bg-page);
    color: var(--text-secondary);
}

.doc-download-btn.view:hover {
    background: var(--border-color);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 0;
    padding: 5px 10px;
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.sidebar-link:hover {
    background: var(--brand-green-tint);
    color: var(--brand-green);
    transform: translateX(2px);
    box-shadow: 0 3px 10px rgba(var(--shadow-rgb),0.08);
}

.sidebar-link:hover .icon-chip {
    background: var(--brand-green-tint);
}

.sidebar-link.active {
    background: linear-gradient(135deg, var(--brand-green-light) 0%, var(--brand-green-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--brand-rgb),0.25);
}

.sidebar-link.active .icon-chip {
    background: rgba(var(--overlay-light-rgb),0.22);
    color: #fff;
}

.sidebar-link.highlight {
    color: var(--warning-text);
    background: linear-gradient(135deg, var(--accent-yellow-tint) 0%, var(--accent-yellow-tint) 100%);
}

.sidebar-link.highlight .icon-chip {
    background: var(--accent-yellow);
    color: #fff;
}

.sidebar-link.highlight:hover {
    background: linear-gradient(135deg, var(--accent-yellow-tint) 0%, var(--accent-yellow-light) 100%);
}

.sidebar-overlay {
    display: none;
}

.bottom-nav {
    display: none;
}

.create-sheet {
    display: none;
}

/* ---- Cookie consent banner ---- */
.cookie-banner {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    background: #14201a;
    color: #c8d3cc;
    padding: 16px 20px;
    box-shadow: 0 -2px 12px rgba(var(--overlay-dark-rgb),0.2);
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cookie-banner.visible {
    display: flex;
}

.cookie-banner p {
    margin: 0;
    font-size: 13px;
    max-width: 640px;
    line-height: 1.5;
}

.cookie-banner-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.cookie-btn.primary {
    background: var(--brand-green);
    color: #fff;
}

.cookie-btn.primary:hover {
    background: var(--brand-green-dark);
}

.cookie-btn.secondary {
    background: transparent;
    color: #c8d3cc;
    border: 1px solid #5a6b5f;
}

.cookie-btn.secondary:hover {
    background: rgba(var(--overlay-light-rgb),0.08);
}

@media (max-width: 600px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .cookie-banner-actions {
        justify-content: center;
    }
}

/* ---- Shared: Dashboard feature cards ---- */
/* Previously defined inline, separately, in both dashboard.php and
   my_documents.php -- centralized here so there's one definition to
   maintain, same "one place, not divergent copies" principle as the
   School Management System's letterhead functions. */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 20px 0 30px;
}

.feature-card {
    position: relative;
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px 20px 18px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb),0.05), 0 1px 2px rgba(var(--shadow-rgb),0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(var(--shadow-rgb),0.10), 0 3px 8px rgba(var(--shadow-rgb),0.06);
}

.feature-card .icon-chip.lg {
    background: linear-gradient(135deg, var(--brand-green-tint) 0%, var(--brand-green-tint) 100%);
}

/* Thin colored top edge -- the one deliberate accent that makes a
   feature card feel like Dashboard's home-base treatment rather than
   an ordinary list-page card. */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-yellow) 0%, var(--accent-yellow-light) 100%);
}

/* Dashboard only, per explicit scope -- brand green carries the
   identity, a short gold segment marks it as a premium accent, and
   the remainder stays transparent so it reads as a signature line,
   not a decorative border. Same proportions in both themes so the
   light/dark switch feels like the same product. */
.dashboard-container .feature-card::before {
    background: linear-gradient(90deg,
        #1E5631 0%, #1E5631 72%,
        #F8B103 72%, #F8B103 83%,
        transparent 83%, transparent 100%);
}

[data-theme="dark"] .dashboard-container .feature-card::before {
    background: linear-gradient(90deg,
        #227A45 0%, #227A45 72%,
        #F8B103 72%, #F8B103 83%,
        transparent 83%, transparent 100%);
}

.term-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb),0.05);
}

.term-banner svg { flex-shrink: 0; }

.term-banner-footnote { color: var(--text-secondary); font-size: 13px; }

.term-banner.in-term {
    background: linear-gradient(135deg, var(--brand-green-tint) 0%, var(--brand-green-tint) 100%);
    color: var(--brand-green);
}

.term-banner.zero-week {
    background: linear-gradient(135deg, var(--accent-yellow-tint) 0%, var(--accent-yellow-tint) 100%);
    color: var(--warning-text);
}

.term-banner.holiday {
    background: linear-gradient(135deg, var(--bg-subtle) 0%, var(--border-color) 100%);
    color: var(--text-secondary);
}

.term-banner.teachers-day {
    background: linear-gradient(135deg, var(--brand-green-light) 0%, var(--brand-green-dark) 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--brand-rgb),0.25);
}

.account-status-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb),0.05);
}
.account-status-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tier-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}
.tier-badge.premium { background: var(--brand-green-tint); color: var(--brand-green); }
.tier-badge.free { background: var(--bg-subtle); color: var(--text-secondary); }
.account-status-expiry { font-size: 13px; color: var(--text-secondary); }
.account-status-upgrade { font-size: 13px; color: var(--brand-green); font-weight: 600; text-decoration: none; }
.account-status-upgrade:visited { color: var(--brand-green); }
.account-status-upgrade:hover { text-decoration: underline; }

.usage-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.usage-pill { flex: 1 1 140px; min-width: 140px; }
.usage-pill-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.usage-pill-label { font-size: 12px; color: var(--text-secondary); flex: 1; }
.usage-pill-count { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.usage-pill-count.near-cap { color: var(--warning-text); }
.usage-pill-count.at-cap { color: var(--danger-text); }
.usage-pill-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--bg-subtle);
    overflow: hidden;
}
.usage-pill-fill { height: 100%; background: var(--brand-green); border-radius: 3px; }
.usage-pill-fill.near-cap { background: var(--accent-yellow); }
.usage-pill-fill.at-cap { background: var(--danger-text); }

.feature-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.feature-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: break-word;
}

.feature-stat {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.feature-stat strong {
    color: var(--brand-green);
    font-size: 16px;
}

.feature-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-actions a.button-link {
    background: var(--brand-green);
    color: #fff;
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.feature-actions a.button-link:hover {
    background: var(--brand-green-dark);
}

.feature-actions a.button-link.secondary {
    background: var(--bg-surface);
    color: var(--brand-green);
    border: 1px solid var(--brand-green);
}

.feature-actions a.button-link.secondary:hover {
    background: var(--bg-subtle);
}

/* ---- Shared: document tables (Dashboard Recent Activity, My Documents) ---- */

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
}

th, td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

th {
    color: var(--brand-green);
    font-weight: 600;
}

tr:hover {
    background: var(--bg-surface-alt);
}

td a {
    margin-right: 4px;
}

.type-badge {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.empty-state {
    text-align: center;
    padding: 30px 0;
    color: var(--text-secondary);
}

/* ---- Shared: My Documents filter tabs ---- */

.doc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 20px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 28px 0 8px;
}

.pagination-link {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: var(--brand-green);
}

.pagination-status {
    font-size: 13px;
    color: var(--text-secondary);
}

.doc-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-green);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.doc-tab .count {
    color: var(--text-secondary);
    font-weight: 400;
}

.doc-tab.active {
    background: var(--brand-green);
    color: #fff;
    border-color: var(--brand-green);
}

.doc-tab.active .count {
    color: var(--border-color);
}

@media (max-width: 768px) {
    /* A wrapping row looks fine on a wide desktop screen, but on a
       narrow phone only one or two tabs fit per row, often leaving a
       long label (like "Schemes of Work") sitting alone with a lot
       of wasted space beside it. A single, horizontally-scrollable
       row instead eliminates that entirely -- nothing wraps, tabs
       sit compactly, and the row just scrolls left/right. */
    .doc-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .doc-tabs::-webkit-scrollbar {
        display: none;
    }
    .doc-tab {
        flex-shrink: 0;
    }
}

@media (max-width: 600px) {
    th, td {
        font-size: 13px;
        padding: 6px 8px;
    }
}

@media (max-width: 768px) {
    /* Absorbed into the bottom nav's "Menu" button below -- running
       both the old top-bar hamburger and the new bottom nav at once
       would be two separate navigation triggers doing the same job. */
    .sidebar-toggle {
        display: none;
    }

    body {
        padding-top: 76px;
        padding-bottom: 64px; /* room for the fixed bottom nav */
        padding-left: 10px;
        padding-right: 10px;
    }

    .app-sidebar {
        transform: translateX(-100%);
        z-index: 200;
        box-shadow: 2px 0 12px rgba(var(--overlay-dark-rgb),0.15);
        /* Also subtract the fixed bottom nav's own height (60px) --
           without this, the sidebar extends behind it, and its
           lowest items (Admin, Edit Account, Log Out) end up
           genuinely covered and unreachable rather than just visually
           tucked behind it. */
        height: calc(100vh - 56px - 60px);
    }

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

    /* The full "Lesson Plan Generator" text was competing for space
       with the bell and avatar on narrow screens, squeezing
       everything together. Below this width, the badge alone is
       enough for brand recognition -- the rest of the row gets the
       room it needs. */
    .app-brand-name {
        display: none;
    }

    .app-topbar {
        gap: 8px;
        padding: 0 12px;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(var(--overlay-dark-rgb),0.3);
        z-index: 150;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .sidebar-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* ---- Bottom nav: Home / My Documents / +Create / Menu ---- */
    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 60px;
        background: var(--bg-surface);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 10px rgba(var(--shadow-rgb),0.08);
        z-index: 210; /* above the sidebar (200) -- Menu must stay tappable to close it again */
        padding: 0 4px;
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 10px;
        cursor: pointer;
        padding: 6px 2px;
    }

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

    .bottom-nav-create {
        position: relative;
    }

    .bottom-nav-create-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--brand-green);
        color: #fff;
        font-size: 24px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -18px;
        box-shadow: 0 3px 10px rgba(var(--brand-rgb),0.35);
    }

    /* ---- Create sheet: same 9 document types the sidebar already
       lists, reused rather than duplicated as a second source of
       truth, just laid out as a compact grid for a quick tap. ---- */
    .create-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-surface);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(var(--shadow-rgb),0.15);
        z-index: 220;
        padding: 10px 20px 24px;
        transform: translateY(100%);
        transition: transform 0.25s ease;
        max-height: 70vh;
        overflow-y: auto;
    }

    .create-sheet.open {
        transform: translateY(0);
    }

    .create-sheet-handle {
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--border-color);
        margin: 0 auto 14px;
    }

    .create-sheet-title {
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 14px;
        color: var(--text-primary);
    }

    .create-sheet-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .create-sheet-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
        font-size: 11px;
        color: var(--text-primary);
        text-decoration: none;
        padding: 10px 4px;
        border-radius: 10px;
    }

    .create-sheet-item:hover {
        background: var(--bg-subtle);
    }

    #create-sheet-overlay {
        z-index: 215; /* below the sheet (220), above the bottom nav (210) */
    }
}