/* ==========================================================================
   CSS RESET & MODERN DESIGN VARIABLES (LIQUID GLASS THEME - HIGH-FIDELITY REFERENCE MATCH)
   ========================================================================== */
:root {
    /* ====================================================================
       DARK THEME (default) — Crystal Design System v3.0 token values.
       Navy lifts to periwinkle in dark mode (design-system rule: keeps
       contrast against a navy-black background); amber never changes.
       ==================================================================== */
    --bg-main: #0b1330;

    --bg-glass: #131b3e;
    --bg-glass-hover: #1b2450;
    --bg-glass-secondary: #101835;

    --bg-input: #131b3e;
    --bg-input-focus: #1b2450;

    /* Brand navy → periwinkle in dark mode */
    --color-primary: #6e86d6;
    --color-primary-hover: #8298df;

    /* Brand gold accent — unchanged across themes */
    --color-accent: #fbc213;
    --color-accent-soft: rgba(251, 194, 19, 0.16);
    --color-accent-text: #010101;

    --color-success: #81c995;
    --color-success-bg: rgba(30, 142, 62, 0.18);
    --color-success-border: rgba(129, 201, 149, 0.4);

    --color-danger: #f28b82;
    --color-danger-bg: rgba(217, 48, 37, 0.18);
    --color-danger-border: rgba(242, 139, 130, 0.4);

    --color-warning: #fdd663;
    --color-warning-bg: rgba(251, 194, 19, 0.15);

    /* Fourth status color — design system has success/error/warn/info; only
       the first three existed here. Added for completeness; nothing consumes
       it yet, picked up as informational states are built in later stages. */
    --color-info: #8ab4f8;
    --color-info-bg: rgba(26, 115, 232, 0.18);

    --text-primary: #f2f4fa;
    --text-secondary: rgba(242, 244, 250, 0.64);
    --text-muted: rgba(242, 244, 250, 0.40);
    --text-disabled: rgba(242, 244, 250, 0.28);

    --border-color: rgba(255, 255, 255, 0.11);
    --border-hover: rgba(255, 255, 255, 0.22);
    --border-focus: #8da2e8;

    /* Semantic surface tints & hairlines (flip per theme) */
    --surface: rgba(255, 255, 255, 0.05);
    --surface-strong: rgba(255, 255, 255, 0.09);
    --surface-hover: rgba(255, 255, 255, 0.14);
    --hairline: rgba(255, 255, 255, 0.10);
    --hairline-strong: rgba(255, 255, 255, 0.18);

    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-code: 'JetBrains Mono', monospace;

    /* ===== FLAT SURFACE ENGINE (sharp, no blur) ===== */
    --glass-blur: none;
    --glass-blur-strong: none;

    --glass-fill: transparent;
    --glass-fill-hover: transparent;

    /* Solid panel fills (navy theme) */
    --panel: #131b3e;
    --panel-hover: #1b2450;

    --glass-rim: transparent;
    --glass-inset: inset 0 0 0 0 rgba(0, 0, 0, 0);
    --glass-sheen: transparent;

    --color-live: #6e86d6;
    --color-live-soft: rgba(110, 134, 214, 0.17);
    --color-live-glow: rgba(110, 134, 214, 0.5);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), var(--glass-inset);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.40), var(--glass-inset);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55), var(--glass-inset);

    --modal-bg: #131b3e;

    --transition-fast: 0.14s cubic-bezier(0.22, 0.75, 0.28, 1);
    --transition-normal: 0.22s cubic-bezier(0.22, 0.75, 0.28, 1);

    /* Design-system radius scale: 3 steps + pill (was a 5-step scale) */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 14px;
    --r-xl: 14px;
    --r-pill: 999px;

    /* Note-card palette — all four now white with a visible fixed border (was four
       cycled brand tints). Both bg AND border are fixed (not theme --border-color)
       because the card stays white in dark theme too, where --border-color is a
       near-white translucent line that would vanish on a white card just like
       --text-primary would if used for the text below. Fixed medium-grey border
       gives the card an edge against both a near-white page (light theme) and a
       dark navy page (dark theme). */
    --card-1-bg: #ffffff;
    --card-1-fg: #000100;
    --card-1-bd: #d6dae4;
    --card-2-bg: #ffffff;
    --card-2-fg: #000100;
    --card-2-bd: #d6dae4;
    --card-3-bg: #ffffff;
    --card-3-fg: #000100;
    --card-3-bd: #d6dae4;
    --card-4-bg: #ffffff;
    --card-4-fg: #000100;
    --card-4-bd: #d6dae4;

    /* Shared select-dropdown chevron — was duplicated verbatim in two
       separate rule blocks (.form-group select, .tb-select select); one
       source of truth now. */
    --chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237a8398'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");

    /* Motion */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    /* Design-system duration scale. --transition-fast/-normal already matched
       dur-fast/dur-base exactly (140ms/220ms) — instant and slow were the two
       missing rungs. Additive; existing consumers of -fast/-normal are
       unaffected, picked up token-by-token as each component is touched. */
    --dur-instant: 80ms;
    --dur-slow: 340ms;

    /* Design-system z-index scale (7 fixed layers) — no shared scale existed
       before, every stacking context picked its own raw number ad hoc.
       Additive: existing raw z-index values get remapped to these as each
       component is touched in later stages, not all at once here, since
       verifying every stacking context needs a live check per component. */
    --z-base: 0;
    --z-sticky: 100;
    --z-dropdown: 400;
    --z-drawer: 700;
    --z-modal: 800;
    --z-toast: 900;
    --z-tooltip: 1000;

    /* Design-system 8px spacing scale. No spacing scale existed before —
       every component picked its own rem value by eye (0.45rem vs 0.48rem
       vs 0.5rem all doing the same "small gap" job). Not a mechanical
       find-replace of every existing value (too large a change to verify
       without a browser); used going forward and applied to the top-level
       page/section layout below, where it's most visible. */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
}

/* ========================================================================
   LIGHT THEME OVERRIDES (body.light-theme) — same liquid glass, light frost
   ======================================================================== */
body.light-theme {
    --bg-main: #f7f8fb;

    --bg-glass: #ffffff;
    --bg-glass-hover: #f2f4f8;
    --bg-glass-secondary: #f2f4f8;

    --bg-input: #ffffff;
    --bg-input-focus: #ffffff;

    --color-primary: #052379;
    --color-primary-hover: #031a5c;

    /* Brand gold accent */
    --color-accent: #fbc213;
    --color-accent-soft: rgba(251, 194, 19, 0.16);
    --color-accent-text: #010101;

    --color-success: #1e8e3e;
    --color-success-bg: rgba(30, 142, 62, 0.1);
    --color-success-border: rgba(30, 142, 62, 0.35);

    --color-danger: #d93025;
    --color-danger-bg: rgba(217, 48, 37, 0.08);
    --color-danger-border: rgba(217, 48, 37, 0.3);

    --color-warning: #b8860b;
    --color-warning-bg: rgba(251, 194, 19, 0.16);

    --color-info: #1a73e8;
    --color-info-bg: rgba(26, 115, 232, 0.1);

    --text-primary: #010101;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-disabled: #b0b6c4;

    --border-color: #e4e7ee;
    --border-hover: #c9cfdc;
    --border-focus: #052379;

    --surface: #f2f4f8;
    --surface-strong: #eaecf2;
    --surface-hover: #e4e8f2;
    --hairline: #e4e7ee;
    --hairline-strong: #c9cfdc;

    /* Flat surface engine (light) */
    --glass-blur: none;
    --glass-blur-strong: none;

    --glass-fill: transparent;
    --glass-fill-hover: transparent;

    --panel: #ffffff;
    --panel-hover: #f2f4f8;

    --glass-rim: transparent;
    --glass-inset: inset 0 0 0 0 rgba(0, 0, 0, 0);
    --glass-sheen: transparent;

    --color-live: #052379;
    --color-live-soft: rgba(5, 35, 121, 0.10);
    --color-live-glow: rgba(5, 35, 121, 0.4);

    --shadow-sm: 0 1px 2px rgba(5, 35, 121, 0.06), var(--glass-inset);
    --shadow-md: 0 2px 8px rgba(5, 35, 121, 0.08), var(--glass-inset);
    --shadow-lg: 0 12px 28px rgba(5, 35, 121, 0.16), var(--glass-inset);

    --modal-bg: #ffffff;
}

/* Logo: invert to white on dark, keep black on light */
body:not(.light-theme) .login-logo img,
body:not(.light-theme) .sidebar-brand img {
    filter: invert(1) brightness(2.5) contrast(1.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global focus-visible ring (design system rule #10 — everything focusable
   shows a ring, never removed without a replacement). Deliberately low
   specificity: text inputs already carry their own border+ring focus
   treatment further down, which simply wins over this on specificity, so
   this is the fallback that catches every button/link/checkbox/tab/etc.
   that had no focus treatment at all before. Only :focus-visible (not
   :focus), so a mouse click doesn't show a ring, only keyboard/AT focus. */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bg-main), 0 0 0 5px var(--border-focus);
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-main);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
    font-size: 0.875rem;
    letter-spacing: -0.011em;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Design system: Manrope carries every heading and every number that matters;
   Inter (the body font above) carries body/table text. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Design system icon sprite (section 06): outline only, 1.7px stroke,
   currentColor — icons take the color of the text/button around them,
   never their own hardcoded color. Replaces per-instance FontAwesome
   styling (was a second, inconsistent "icon language" alongside emoji). */
.ic {
    width: 1.25em;
    height: 1.25em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
    vertical-align: -0.2em;
}

.ic.spin {
    animation: spin 0.9s linear infinite;
}

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

/* ==========================================================================
   DYNAMIC LIQUID BACKDROP ORBS WITH DIGITAL GRID OVERLAY
   ========================================================================== */
.global-liquid-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    /* Flat professional backdrop (navy theme) */
    background: var(--bg-main);
}

/* LIGHT theme: flat lavender backdrop */
body.light-theme .global-liquid-bg {
    background: var(--bg-main);
}

/* ==========================================================================
   SHARED LIQUID GLASS SURFACE ENGINE
   Every glass pane gets: a gradient specular rim that follows its rounded
   corners (::before) + a top-down sheen reflection (::after).
   ========================================================================== */
.login-card-wrapper,
.system-card,
.modal-card {
    position: relative;
    isolation: isolate;
}

/* The wrapping specular rim — a true edge of glass that catches light all the
   way around, brightest top-left, glinting again bottom-right. */
.login-card-wrapper::before,
.system-card::before,
.modal-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    /* hairline rim thickness */
    background: var(--glass-rim);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* The surface sheen — a soft reflection sliding off the top of the pane. */
.login-card-wrapper::after,
.system-card::after,
.modal-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-sheen);
    pointer-events: none;
    z-index: -1;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--hairline-strong);
    border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(5, 35, 121, 0.55);
}

/* ==========================================================================
   UTILITY & BADGES
   ========================================================================== */
.hidden {
    display: none !important;
}

/* Visually hidden but still readable by screen readers — unlike .hidden this
   isn't display:none, so it survives contexts (like the collapsible sidebar)
   that fade/shrink child <span> elements via opacity or max-width. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.6875rem;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--r-pill);
    text-transform: capitalize;
}

.badge-admin {
    background-color: var(--color-live-soft);
    color: var(--color-primary);
    border: 1px solid var(--color-live-glow);
}

.badge-user {
    background-color: var(--surface-strong);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   BUTTONS (CAPSULE / ROUNDED CAPSULE STYLING)
   ========================================================================== */
.btn {
    font-family: var(--font-display);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6875rem 1.0625rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-radius: var(--r-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    user-select: none;
    text-decoration: none;
    height: 40px;
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

/* Primary — solid navy fill, flat (no gradient: design system rule, no
   gradients/glassmorphism anywhere). */
.btn-primary {
    background: var(--color-primary);
    color: #ffffff;
    font-weight: 700;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    background: var(--color-primary-hover);
    filter: brightness(0.9);
}

/* Secondary — transparent fill, navy border + text (design system's
   btn-secondary), used for the app's non-primary-but-still-visible actions. */
.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-live-soft);
}

/* Outline — ghost variant (borderless, tinted hover), for lower-emphasis
   actions that sit alongside a secondary button. */
.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 1.5px solid transparent;
}

.btn-outline:hover {
    background-color: var(--color-live-soft);
}

/* Danger — solid at rest (design system: destructive actions read as
   destructive immediately, not just on hover). */
.btn-danger {
    background-color: var(--color-danger);
    color: #ffffff;
    border: 1.5px solid transparent;
}

.btn-danger:hover {
    filter: brightness(0.93);
    box-shadow: var(--shadow-md);
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    padding: 0;
    cursor: pointer;
    font-weight: 700;
    height: auto;
}

.btn-link:hover {
    color: var(--color-primary-hover);
}

.btn-small {
    padding: 0.5rem 0.8125rem;
    font-size: 0.75rem;
    height: 32px;
}

.dg-deliverable-upload {
    margin-top: 0.5rem;
}

.btn-block {
    width: 100%;
}

/* Icon-only button — consolidated single implementation (was two separate
   systems: .btn-icon-only at two conflicting sizes, plus a parallel
   .glass-icon-btn). Design system spec: 38x38px, 10px radius (a rounded
   square, not a circle), the smallest touch target in the system. */
.btn-icon-only {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--r-sm);
    gap: 0;
    font-size: 0.8125rem;
    color: var(--color-primary);
    background: var(--panel);
    border: 1.5px solid var(--border-color);
}

.btn-icon-only:hover {
    border-color: var(--color-primary);
    background-color: var(--color-live-soft);
}

.btn-icon-only.sm {
    width: 32px;
    height: 32px;
}

/* Disabled — every .btn variant, design system spec: surface-2 fill (here,
   --surface, the app's equivalent token), no shadow, no pointer, dimmed
   text. Was entirely undrawn before (rule #11: every clickable thing needs
   every state drawn). */
.btn:disabled,
.btn.disabled {
    background: var(--surface);
    color: var(--text-disabled);
    border-color: var(--border-color);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.btn-icon-only:disabled,
.btn-icon-only.disabled {
    color: var(--text-disabled);
    background: var(--surface);
    border-color: var(--border-color);
}

/* Loading — label hides (not removed, so width doesn't reflow) behind a
   centered spinner, same technique as the design system's own .btn.loading. */
.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.btn-secondary.loading::after,
.btn-outline.loading::after,
.btn-link.loading::after {
    border: 2px solid var(--color-live-soft);
    border-top-color: var(--color-primary);
}

/* ==========================================================================
   REFERENCE CONTROL PRIMITIVES (icon buttons + toggle switches)
   ========================================================================== */
/* .glass-icon-btn is now a thin alias over the single .btn-icon-only system
   above (was a fully parallel circular implementation) — kept as a class
   name since it's referenced in several places, but no longer has its own
   visual identity. */
.glass-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: 0.95rem;
    cursor: pointer;
    background: var(--panel);
    border: 1.5px solid var(--border-color);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.glass-icon-btn:hover {
    background: var(--color-live-soft);
    border-color: var(--color-primary);
}

.glass-icon-btn:active {
    transform: translateY(1px);
}

.glass-icon-btn.sm {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
}

/* Floating theme toggle — always reachable (login + dashboard) */
.theme-toggle {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 300;
    width: 44px;
    height: 44px;
}

.theme-toggle .ic {
    transition: transform var(--transition-normal);
}

.theme-toggle:hover .ic {
    transform: rotate(-20deg);
}

/* ==========================================================================
   APP SHELL LAYOUT & LOADERS
   ========================================================================== */
#app-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.view-section {
    display: none;
    width: 100%;
    min-height: 100vh;
}

.view-section.active {
    display: flex;
    flex-direction: column;
}

/* Spinner Loader */
#view-loading {
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

.spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.spinner-container p {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
}

.double-bounce1,
.double-bounce2 {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-primary);
    opacity: 0.5;
    animation: sk-bounce 1.6s infinite ease-in-out;
}

.double-bounce2 {
    animation-delay: -0.8s;
}

@keyframes sk-bounce {

    0%,
    100% {
        transform: scale(0.0)
    }

    50% {
        transform: scale(1.0)
    }
}

/* ==========================================================================
   LOGIN SCREEN (LIQUID GLASS IMPLEMENTATION)
   ========================================================================== */
#view-login {
    justify-content: stretch;
    align-items: stretch;
    background-color: transparent;
    padding: 0;
    position: relative;
    z-index: 5;
}

#view-change-password {
    justify-content: center;
    align-items: center;
    background-color: transparent;
    padding: 1rem;
    position: relative;
    z-index: 5;
}

.login-card-wrapper {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 420px;
    padding: var(--s-7) var(--s-6);
    box-shadow: var(--shadow-lg);
}

/* Set-a-new-password card: centred, tidy logo */
#view-change-password .login-logo img {
    height: 32px !important;
}

#view-change-password .login-header {
    text-align: center;
    margin-bottom: var(--s-5);
}

#view-change-password .login-footer {
    text-align: center;
    margin-top: var(--s-5);
}

.login-header {
    text-align: center;
    margin-bottom: var(--s-5);
}

.login-logo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.875rem;
}

/* Keep the black Crystal logo as-is on the light theme */
.login-logo img {
    filter: none;
}

.login-header h1 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    text-shadow: none;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.login-form .form-group {
    margin-bottom: 1.125rem;
}

.form-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    letter-spacing: -0.005em;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input,
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background-color: var(--bg-input);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    font-family: var(--font-main);
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    letter-spacing: -0.005em;
    border-radius: var(--r-xs);
    outline: none;
    box-shadow: none;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.input-wrapper input::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-disabled);
}

/* Textarea used to be a full radius step rounder than a regular input with
   no design-system basis for the difference — same radius as every other
   field now. */
.form-group textarea {
    border-radius: var(--r-xs);
}

.form-group select {
    border-radius: var(--r-xs);
    padding-right: 2rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--chevron-icon);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

.input-wrapper input {
    padding-left: 2rem;
}

.input-wrapper .input-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    pointer-events: none;
}

.password-toggle-btn {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.75rem;
}

.password-toggle-btn:hover {
    color: var(--text-primary);
}

.input-wrapper input:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--border-focus);
    background-color: var(--bg-input-focus);
    box-shadow: 0 0 0 3px var(--color-live-soft);
}

.form-group select option {
    background-color: var(--bg-main);
    color: var(--text-primary);
}

.form-help {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    padding-left: 0.5rem;
}

.login-footer {
    margin-top: 1.75rem;
    text-align: center;
    border-top: 1px solid var(--hairline);
    padding-top: 1.125rem;
}

.login-footer p {
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
}

.user-badge {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.user-badge .ic {
    color: var(--color-primary);
}

.user-badge #nav-username {
    font-weight: 700;
    color: var(--text-primary);
}

/* ==========================================================================
   DASHBOARD / VIEW SUBPORTALS
   ========================================================================== */
.dashboard-content {
    flex: 1;
    padding: 1.5rem 1.5rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.subview {
    display: none;
    animation: fade-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.subview.active {
    display: block;
}

/* Delegation module — a self-contained prototype page embedded in an iframe so its
   own styles (light-theme design-system tokens) never clash with the app shell */
.delegation-frame {
    width: 100%;
    height: calc(100vh - 4rem);
    min-height: 640px;
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    background: #f4f6fb;
}

@media (max-width: 768px) {
    .delegation-frame { height: calc(100vh - 7rem); border-radius: var(--r-md); }
}

.subview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-5);
    gap: var(--s-4);
    flex-wrap: wrap;
}

.subview-header h2 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-shadow: none;
}

.subtitle {
    color: var(--text-muted);
    font-size: 0.75rem;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

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

/* ==========================================================================
   A. USER PORTAL VIEW: CARD DESIGN (LIQUID GLASS CAPSULE STYLING)
   ========================================================================== */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 240px;
}

/* The 3 admin-table search boxes (Systems/Media/Users) all repeated the same
   inline style="max-width:460px;margin-bottom:1rem" — one modifier now. */
.search-box.search-box-wide {
    max-width: 460px;
    margin-bottom: 1rem;
}

.search-box input {
    width: 100%;
    background: var(--panel);
    border: 1.5px solid var(--hairline);
    color: var(--text-primary);
    padding: 0.45rem 0.75rem 0.45rem 1.875rem;
    font-size: 0.75rem;
    border-radius: var(--r-xs);
    outline: none;
    box-shadow: var(--glass-inset);
    transition: all var(--transition-fast);
}

.search-box input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-live-soft), var(--glass-inset);
}

.search-box .search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Card Grid layout */
.systems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
    min-width: 0;
}

/* Application Hub grid — one flex column per department (folder), cards stacked
   vertically within their own column, side by side with no text label. Overrides
   #portal-grid's own .systems-grid (CSS grid) just for this one element; .systems-grid
   itself stays untouched since it's shared with other grids elsewhere in the app. */
#portal-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.portal-dept-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 260px;
    min-width: 260px;
}

/* Regular users' Hub: single flat grid, cards fill each row left-to-right with no
   holes — replaces the per-department columns just for them (admin/CEO/Mansi keep
   the fixed 4-column layout above). */
.portal-flat-grid {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}


/* Rounded Frosted Liquid Glass Cards */
.system-card {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    height: 100%;
    scroll-margin-top: 5rem;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
    box-shadow: var(--shadow-md);
    contain: layout paint style;
}

.system-card:hover {
    transform: translateY(-4px);
    background: var(--panel-hover);
    box-shadow: var(--shadow-lg),
        0 0 22px var(--color-live-glow);
}

/* Brighten the rim to a green-tinted glint on hover (reference live-glow) */
.system-card:hover::before {
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(5, 35, 121, 0.5) 30%,
            rgba(255, 255, 255, 0.05) 55%,
            rgba(5, 35, 121, 0.35) 100%);
}

/* Circular icon envelope */
.card-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--color-live);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--glass-inset);
    transition: all var(--transition-fast);
}

/* Real colour emoji instead of the thin outline glyph — sized up since emoji render
   small at the sprite icon's 0.95rem. */
.card-icon-emoji {
    font-size: 1.15rem;
    line-height: 1;
}

.system-card:hover .card-icon-wrapper {
    background: var(--color-live-soft);
    border-color: rgba(5, 35, 121, 0.5);
    color: var(--color-primary);
    box-shadow: 0 0 12px rgba(5, 35, 121, 0.4);
}

.system-card h3 {
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.375rem;
    color: var(--text-primary);
}

.system-card p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 1.125rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--hairline);
    padding-top: 0.75rem;
    margin-top: auto;
}

/* System cards on the cards/systems page — same compact horizontal shape as the
   To-Do List's KPI tiles (icon left, text right, whole card clickable), same icon/
   header/colour as before, just reshaped instead of the tall vertical card. */
.kpi-shaped-card {
    flex-direction: row;
    align-items: center;
    height: auto;
    padding: 0.9rem 1rem;
    gap: 0.75rem;
    text-decoration: none;
}

.kpi-shaped-card .card-icon-wrapper {
    margin-bottom: 0;
}

.card-body-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.kpi-shaped-card h3 {
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-shaped-card p {
    margin-bottom: 0;
    flex-grow: 0;
    -webkit-line-clamp: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The favourite heart normally floats absolute in the corner, which works for the tall
   card but overlaps the launch arrow on this compact shape — here it joins the same
   flex row instead, sitting beside the arrow rather than on top of it. */
.kpi-shaped-card .card-fav {
    position: static;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}


.card-link-preview {
    font-family: var(--font-code);
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    font-weight: 500;
}

/* Empty View */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    max-width: 420px;
    margin: 3rem auto 0 auto;
    box-shadow: var(--shadow-md);
}

.empty-icon {
    font-size: 2rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.empty-state h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.empty-state p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ==========================================================================
   B. ADMIN CONTROL PANEL TABS & TABLES
   ========================================================================== */
/* Was a boxed, padded, shadowed pill-tray — leftover from before .tab-btn
   itself became an underline tab (Phase 2a/3). The container needs to
   match: a plain row with one shared baseline rule, not its own panel. */
.admin-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    margin-bottom: var(--s-5);
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 1.5px solid var(--hairline);
    box-shadow: none;
    overflow-x: auto;
}

/* Design system's underline tab pattern (section 22) — was a frosted,
   glowing pill treatment; tabs switch a view, they don't need a fill. */
.tab-btn {
    font-family: var(--font-display);
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    border-radius: 0;
    color: var(--text-secondary);
    padding: 0.6875rem 0;
    margin: 0 0.6875rem;
    font-size: 0.78125rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tab-btn:hover {
    color: var(--text-primary);
    background: transparent;
}

.tab-btn.active {
    color: var(--color-primary);
    background: transparent;
    border-bottom-color: var(--color-primary);
    box-shadow: none;
}

.tab-btn.active .ic {
    color: var(--color-primary);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-4);
}

.tab-panel-header h3 {
    font-size: 0.875rem;
    font-weight: 700;
}

/* Admin Table Design */
.table-container {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow-x: auto;
    /* never clip the Actions column; scroll if a row is too wide */
    box-shadow: var(--shadow-md);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.75rem;
}

.admin-table th {
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--hairline);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    user-select: none;
}

.admin-table th.sortable {
    cursor: pointer;
}

.admin-table th.sortable:hover {
    color: var(--color-primary);
}

.admin-table th .sortic {
    display: inline-flex;
    flex-direction: column;
    margin-left: 0.3rem;
    vertical-align: -2px;
    gap: 1px;
}

.admin-table th .sortic i {
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    display: block;
    opacity: 0.3;
    font-style: normal;
}

.admin-table th .sortic i.up {
    border-bottom: 4px solid currentColor;
}

.admin-table th .sortic i.dn {
    border-top: 4px solid currentColor;
}

.admin-table th[data-dir="asc"] .sortic i.up,
.admin-table th[data-dir="desc"] .sortic i.dn {
    opacity: 1;
}

.admin-table th[data-dir] {
    color: var(--color-primary);
}

/* Pagination footer — same pattern across every admin table */
.table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--hairline);
    flex-wrap: wrap;
}

.table-pager.hidden {
    display: none;
}

.table-pager-info {
    font-family: var(--font-code);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.table-pager-controls {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.table-pager-controls button {
    min-width: 28px;
    height: 28px;
    padding: 0 0.4rem;
    border-radius: var(--r-xs);
    border: 1.5px solid var(--hairline);
    background: var(--panel);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.table-pager-controls button:hover:not(:disabled):not(.on) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.table-pager-controls button.on {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.table-pager-controls button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.admin-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--hairline);
    color: var(--text-secondary);
    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr {
    transition: background-color var(--transition-fast);
}

/* Shared empty-state table row (design system's .empty, adapted to fit inside
   a <td> instead of an open dashed-border box — the box+CTA-button treatment
   doesn't fit a single table row). Was 6 near-identical inline-styled blocks
   with drifting padding; one rule now. */
.table-empty-cell {
    text-align: center;
    color: var(--text-muted);
    padding: 2.75rem 0;
}

.table-empty-cell .ic {
    display: block;
    margin: 0 auto 0.5rem;
    font-size: 1.75rem;
    opacity: 0.5;
}

.admin-table tbody tr:hover {
    background-color: var(--surface);
}

/* System specific fields */
.admin-table td .system-name-wrapper {
    font-weight: 700;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
}

.admin-table td .system-desc {
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-table td .system-link {
    font-family: var(--font-code);
    font-size: 0.7rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    /* Keep long Apps Script URLs from pushing the Actions column off-screen */
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Pin the Actions column to a sane width so its buttons always stay visible */
.admin-table th:last-child,
.admin-table td:last-child {
    white-space: nowrap;
}

.admin-table td .system-link:hover {
    text-decoration: underline;
    color: var(--color-primary-hover);
}

/* Users badge tags list */
.permitted-users-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 280px;
}

.permitted-users-list .user-tag {
    background: var(--surface);
    border: 1px solid var(--border-color);
    font-size: 0.6875rem;
    color: var(--text-secondary);
    padding: 0.05rem 0.5rem;
    border-radius: var(--r-pill);
    font-weight: 600;
}

.table-actions {
    display: flex;
    gap: 0.25rem;
}

/* ==========================================================================
   MODAL SYSTEMS (LIQUID GLASS CARDS)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    /* Design system's own scrim uses a subtle 2px blur to shift focus onto
       the modal — this was 16px, a much heavier effect than the spec. */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: var(--z-modal);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
    padding: 1rem;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    background: var(--modal-bg);
    border: 1px solid var(--hairline);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
    transform: scale(0.95);
    transition: transform var(--transition-normal);
    overflow: hidden;
}

.modal-overlay.active .modal-card {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
}

.modal-header h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.15rem;
    padding: 0.25rem;
    transition: color var(--transition-fast);
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-form {
    padding: 1.5rem;
}

.modal-form .form-group {
    margin-bottom: 1rem;
}

.modal-body {
    padding: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Destructive confirm dialog — smaller than a form modal, icon in the
   header instead of a title-only row (design system section 32). */
.modal-sm {
    max-width: 370px;
}

/* Fourth size step, between the default (420px) and .modal-wide (820px) —
   the design system only defines three; this one's genuinely needed for
   content the default is too narrow for but .modal-wide is overkill for
   (here: the bulk CSV/XLSX upload preview table). Was a bespoke inline
   max-width; promoted to a real step since nothing else needs 820px either. */
.modal-md {
    max-width: 620px;
}

.modal-sm .modal-header {
    border-bottom: none;
    padding-bottom: 0;
    gap: 0.75rem;
}

.warn-mark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-danger-bg);
    color: var(--color-danger);
    display: grid;
    place-items: center;
    flex: none;
}

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

/* ==========================================================================
   CHOICE CARDS FOR ACCESS PERMISSIONS (LIQUID GLASS ROWS)
   ========================================================================== */
.permission-selector-wrapper {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 0.5rem;
    margin-top: 0.375rem;
}

.selector-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--hairline);
}

.checkbox-scroll-list {
    max-height: 140px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-right: 0.25rem;
}

/* Glass choice card row */
.checkbox-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.checkbox-label:hover {
    border-color: var(--hairline-strong);
    background-color: var(--surface-strong);
}

.checkbox-label input[type="checkbox"]:checked+span {
    color: var(--text-primary);
}

/* Checkbox visual structure */
.checkbox-label-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--hairline-strong);
    border-radius: 4px;
    background-color: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

/* Flat fill, no gradient — same design-system rule already applied to
   .btn-primary ("no gradients/glassmorphism anywhere"); this was a leftover
   from the pre-migration Liquid Glass theme that the earlier pass missed. */
.checkbox-label input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-live);
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #ffffff;
    font-size: 0.55rem;
}

.checkbox-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.checkbox-username {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.checkbox-role-badge {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Highlighted Choice Card border when selected */
.checkbox-label.selected {
    border-color: var(--color-primary);
    background-color: var(--color-live-soft);
}

/* ==========================================================================
   TOAST NOTIFICATION SYSTEM (LIQUID GLASS STYLE)
   ========================================================================== */
.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 300px;
    width: 100%;
    pointer-events: none;
}

/* Was rgba(18,22,30,.72) + backdrop-filter:blur(24px) — a real, active
   glassmorphism effect, and forced dark regardless of theme. Design system
   rule: no blur/glassmorphism anywhere, and the toast is a themed surface
   like everything else, not a special-cased dark popup. */
.toast {
    background: var(--panel);
    border-left: 3px solid var(--color-live);
    padding: 0.8rem 1rem;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    transform: translateX(120%);
    opacity: 0;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
    border-top: 1px solid var(--hairline);
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-icon {
    font-size: 0.875rem;
    margin-top: 0.1rem;
}

.toast-content {
    flex-grow: 1;
}

.toast-title {
    font-weight: 700;
    font-size: 0.75rem;
    margin-bottom: 0.1rem;
    color: var(--text-primary);
}

.toast-msg {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    margin-left: 0.25rem;
}

.toast-close:hover {
    color: var(--text-primary);
}

/* Drain bar — visual countdown to auto-dismiss, so disappearing isn't a
   surprise (design system section 31). Width is animated from JS to match
   the real timeout, not a fixed CSS animation, since a manual close should
   leave no bar mid-drain behind. */
.toast-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--color-live);
    transform-origin: left;
    transition: transform linear;
}

/* Toast modifiers */
.toast-success {
    border-left-color: var(--color-success);
}

.toast-success .toast-icon {
    color: var(--color-success);
}

.toast-success .toast-bar {
    background: var(--color-success);
}

.toast-error {
    border-left-color: var(--color-danger);
}

.toast-error .toast-icon {
    color: var(--color-danger);
}

.toast-error .toast-bar {
    background: var(--color-danger);
}

.toast-warning {
    border-left-color: var(--color-warning);
}

.toast-warning .toast-icon {
    color: var(--color-warning);
}

.toast-warning .toast-bar {
    background: var(--color-warning);
}

/* ==========================================================================
   DEPARTMENT SIDEBAR (Windows-explorer style folder tree) + PORTAL LAYOUT
   ========================================================================== */
.portal-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* Prevent grid/flex children from forcing horizontal overflow */
.portal-main,
.portal-sidebar,
.system-card,
.systems-grid,
.dashboard-content {
    min-width: 0;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.portal-sidebar {
    position: sticky;
    top: 80px;
    background: var(--panel);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 0.6rem 0.55rem;
    isolation: isolate;
    overflow: hidden;
}

.portal-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Subtle top sheen reflection on the panel */
.portal-sidebar::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 40%;
    border-radius: inherit;
    background: var(--glass-sheen);
    pointer-events: none;
    z-index: -1;
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    padding: 0.5rem 0.6rem 0.7rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--hairline);
}

.sidebar-title .ic {
    color: var(--color-live);
    font-size: 0.85rem;
}

.folder-tree {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* A row in the tree */
.tree-node {
    display: flex;
    flex-direction: column;
}

.tree-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.55rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    user-select: none;
}

/* Left accent indicator bar (revealed on hover / active) */
.tree-row::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: var(--r-pill);
    background: var(--color-accent);
    transform: translateY(-50%);
    transition: height var(--transition-fast);
}

.tree-row:hover {
    background: var(--surface);
    color: var(--text-primary);
}

.tree-row:hover::before {
    height: 40%;
}

.tree-row:active {
    transform: scale(0.985);
}

.tree-row.active {
    background: var(--color-live-soft);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--color-live-glow);
}

.tree-row.active::before {
    height: 56%;
}

.tree-row .twisty {
    width: 14px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.58rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.tree-row:hover .twisty {
    color: var(--text-secondary);
}

.tree-row .twisty.spacer {
    visibility: hidden;
}

.tree-node.collapsed>.tree-children {
    display: none;
}

.tree-node:not(.collapsed)>.tree-row>.twisty.open {
    transform: rotate(90deg);
}

.tree-row .folder-ico {
    width: 17px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: color var(--transition-fast);
}

.tree-row:hover .folder-ico,
.tree-row.active .folder-ico {
    color: var(--color-live);
}

.tree-row .tree-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-row .tree-count {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-strong);
    border-radius: var(--r-pill);
    padding: 0.1rem 0.42rem;
    min-width: 20px;
    text-align: center;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tree-row.active .tree-count {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.tree-children {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Refined scrollbar for the sidebar when it scrolls */
.folder-tree {
    scrollbar-width: thin;
    scrollbar-color: var(--hairline-strong) transparent;
}

.portal-sidebar ::-webkit-scrollbar {
    width: 6px;
}

.portal-sidebar ::-webkit-scrollbar-thumb {
    background: var(--hairline-strong);
    border-radius: var(--r-pill);
}

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

/* ==========================================================================
   ADMIN DEPARTMENT TREE (manage folders)
   ========================================================================== */
.admin-folder-tree {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-folder-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--r-sm);
    transition: background var(--transition-fast);
}

.admin-folder-row:hover {
    background: var(--surface);
}

.admin-folder-row .folder-ico {
    color: var(--color-live);
    width: 18px;
    text-align: center;
}

.admin-folder-row .af-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.admin-folder-row .af-count {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.admin-folder-row .af-actions {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.admin-folder-row:hover .af-actions {
    opacity: 1;
}

.admin-folder-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 2rem 0;
}

@media (max-width: 820px) {

    /* Stack the department sidebar above the grid, full width */
    .portal-layout {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .portal-sidebar {
        position: static;
        top: 0;
        max-height: 260px;
        overflow-y: auto;
    }
}

/* ==========================================================================
   RESPONSIVE DESIGN MEDIA QUERIES
   ========================================================================== */
@media (max-width: 900px) {
    .subview-header {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        max-width: 100%;
    }
}

/* ---- Tablets & small laptops ---- */
@media (max-width: 768px) {
    .user-badge .badge {
        display: none;
    }

    .dashboard-content {
        padding: 1rem;
    }

    .admin-tabs {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        padding: 0.5rem 0.85rem;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* Allow wide admin tables to scroll horizontally — stays a real table
       (row/column form), never reflows into stacked one-field-per-line
       cards. */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        min-width: 560px;
    }

    /* Modals fit the viewport and scroll internally */
    .modal-card {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ---- Phones ---- */
@media (max-width: 560px) {
    .systems-grid {
        grid-template-columns: 1fr;
    }

    .user-badge #nav-username {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .subview-header h2 {
        font-size: 1.05rem;
    }

    .dashboard-content {
        padding: 0.85rem;
    }

    .login-card-wrapper {
        padding: 2rem 1.5rem;
    }

    /* Modal padding tightens on phones */
    .modal-form {
        padding: 1.1rem;
    }

    .modal-header {
        padding: 0.85rem 1.1rem;
    }

    .theme-toggle {
        bottom: 12px;
        left: 12px;
        width: 40px;
        height: 40px;
    }

    .toast-container {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}

/* ---- Very small phones ---- */
@media (max-width: 360px) {
    .user-badge {
        padding: 0.2rem 0.45rem;
    }

    .btn {
        padding: 0.4rem 0.8rem;
    }
}

/* ==========================================================================
   USER MANAGEMENT ADD-ONS — status badges, requests tab, bulk upload
   ========================================================================== */

/* Status badges (reuse .badge sizing) */
.badge-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning);
}

.badge-success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
}

.badge-danger {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger-border);
}

/* "Forgot password?" link row under the login button */
.login-aux {
    display: flex;
    justify-content: center;
    margin-top: 0.6rem;
}

/* Group of buttons in a tab panel header */
.tab-panel-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Pending-count badge on the Access Requests tab */
.tab-count-badge {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    height: 12px;
    padding: 4px 6px;
    margin-left: 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-accent-text);
    background: var(--color-accent);
    border-radius: var(--r-pill);
}

/* Bulk upload dropzone */
.bulk-dropzone {
    border: 1.5px dashed var(--hairline-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 1.6rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.bulk-dropzone:hover {
    background: var(--surface-hover);
    border-color: var(--color-live-glow);
}

.bulk-dropzone.dragging {
    background: var(--color-live-soft);
    border-color: var(--color-live);
}

.bulk-dropzone .ic {
    font-size: 1.6rem;
    color: var(--color-live);
    margin-bottom: 0.5rem;
}

.bulk-dropzone p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.bulk-filename {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: var(--font-code);
}

.bulk-actions-row {
    display: flex;
    justify-content: flex-end;
    margin: 0.5rem 0;
}

.bulk-preview-summary {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.bulk-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.bulk-stat.ok {
    color: var(--color-success);
}

.bulk-stat.warn {
    color: var(--color-warning);
}

.bulk-preview-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--hairline);
}

.bulk-preview-row:last-child {
    border-bottom: none;
}

.bulk-issues {
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-top: 1px dashed var(--hairline-strong);
    color: var(--color-warning);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* ==========================================================================
   MEDIA LIBRARY — admin table thumbs, portal cards, upload modal preview
   ========================================================================== */

/* Admin table thumbnail */
.media-table-thumb {
    width: 40px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.media-table-icon {
    background: var(--surface-strong);
    color: var(--color-live);
}

/* Portal media card preview area */
.media-card-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface-strong);
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-card-preview img,
.media-card-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-card-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Upload vs link source toggle in the media modal */
.media-mode-tabs {
    display: flex;
    gap: 0.4rem;
    background: var(--surface);
    padding: 0.25rem;
    border-radius: var(--r-md);
    margin-bottom: 1rem;
}

.media-mode-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.media-mode-btn:hover {
    color: var(--text-primary);
}

.media-mode-btn.active {
    background: var(--panel);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   BULK OPERATIONS — selection toolbar + row checkboxes
   ========================================================================== */
.bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.85rem;
    margin-bottom: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.bulk-bar.has-selection {
    background: var(--color-live-soft);
    border-color: var(--color-live-glow);
}

.bulk-all-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.bulk-bar-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.bulk-bar-count strong {
    color: var(--text-primary);
}

.bulk-bar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bulk-bar-actions button:disabled,
.bulk-move-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.bulk-move-select {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--r-sm);
    max-width: 200px;
}

/* Two form fields side by side (e.g. designation + department) */
.form-row {
    display: flex;
    gap: 0.75rem;
}

.form-row .form-group {
    flex: 1;
    min-width: 0;
}

@media (max-width: 480px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* Checkbox column in tables + folder rows */
.bulk-col {
    width: 36px;
}

.bulk-cell {
    width: 36px;
    text-align: center;
}

.bulk-check,
.bulk-all {
    width: 16px;
    height: 16px;
    accent-color: var(--color-live);
    cursor: pointer;
}

.bulk-check:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.admin-folder-row .bulk-cell {
    width: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.media-card-fileicon {
    font-size: 2.4rem;
    color: var(--color-live);
    background: linear-gradient(180deg, var(--surface-strong), var(--surface));
}

.media-card .card-link-preview {
    cursor: default;
}

/* Upload progress bar */
.media-progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.media-progress-bar {
    flex: 1;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--surface-strong);
    overflow: hidden;
}

.media-progress-bar span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--color-primary);
    transition: width 0.2s ease;
}

.media-progress-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Upload modal preview */
.media-modal-preview {
    margin-top: 0.7rem;
    padding: 0.7rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    text-align: center;
}

.media-modal-preview img,
.media-modal-preview video {
    max-width: 100%;
    max-height: 220px;
    border-radius: var(--r-sm);
    display: block;
    margin: 0 auto;
}

.media-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.media-file-chip .ic {
    font-size: 1.6rem;
    color: var(--color-live);
}

.media-preview-meta {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-code);
}

/* ==========================================================================
   SPLIT LOGIN — floating card on a tinted backdrop: QORE wordmark panel
   (left) + white sign-in form (right)
   ========================================================================== */

/* Page backdrop behind the floating card — soft brand-tinted wash + a few
   plain-CSS decorative circles (no illustration asset available, so this
   stands in for one). */
#view-login {
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: var(--s-6);
    position: relative;
    overflow: hidden;
    z-index: 5;
}

.auth-page-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.auth-page-shape-1 { width: 460px; height: 460px; top: -160px; right: -140px; background: radial-gradient(circle, rgba(5, 35, 121, 0.12), transparent 70%); }
.auth-page-shape-2 { width: 340px; height: 340px; bottom: -120px; left: -110px; background: radial-gradient(circle, rgba(251, 194, 19, 0.18), transparent 70%); }
.auth-page-shape-3 { width: 220px; height: 220px; bottom: 14%; right: 10%; background: radial-gradient(circle, rgba(5, 35, 121, 0.08), transparent 70%); }

/* ---- The floating card itself ---- */
.auth-split {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    width: 100%;
    max-width: 960px;
    min-height: 0;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 70px -22px rgba(5, 35, 121, 0.35), 0 8px 20px rgba(5, 35, 121, 0.1);
}

/* ---- Left: QORE wordmark panel (illustration stand-in) ---- */
.auth-brand {
    position: relative;
    overflow: hidden;
    background: #f3f6ff;
    color: #5b6472;
    padding: var(--s-8) var(--s-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.15rem;
    /* Fixed navy, same reasoning as .auth-panel's own forced tokens — the QORE
       wordmark must read the same regardless of which app theme is active. */
    --color-primary: #052379;
}

.auth-brand-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.auth-brand-shape-1 { width: 190px; height: 190px; top: -55px; left: -55px; background: rgba(5, 35, 121, 0.07); }
.auth-brand-shape-2 { width: 140px; height: 140px; bottom: -45px; right: -35px; background: rgba(251, 194, 19, 0.18); }

.auth-brand-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.auth-brand-wordmark {
    position: relative;
    z-index: 1;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #000;
    white-space: nowrap;
}

.auth-brand-wordmark .brand-q,
.auth-brand-wordmark .brand-ore {
    font-size: 2.6rem;
}

.auth-brand-tagline {
    position: relative;
    z-index: 1;
    max-width: 300px;
    font-size: 0.92rem;
    line-height: 1.55;
}

.auth-brand-foot {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: #9aa3b5;
}

/* ---- Right: sign-in form panel ---- */
.auth-panel {
    background: #fff;
    padding: var(--s-7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Force light tokens so the form looks right in BOTH app themes
       (deliberate, pre-existing choice, kept as-is) — values below just
       updated to match the light theme's actual retuned palette, since
       these predated that pass and had drifted from it. */
    --text-primary: #010101;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-disabled: #b0b6c4;
    --bg-input: #ffffff;
    --bg-input-focus: #ffffff;
    --border-color: #e4e7ee;
    --border-hover: #c9cfdc;
    --surface: #f2f4f8;
    --panel: #ffffff;
    --color-primary: #052379;
}

.auth-panel-inner {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.auth-panel .login-header {
    text-align: left;
    margin-bottom: 1.75rem;
}

.auth-panel .login-header h1 {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.auth-panel .login-header p {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 0.3rem;
}

.auth-panel .form-group label {
    color: var(--text-primary);
}

.auth-panel .btn-primary {
    background: var(--color-primary);
    color: #fff;
}

.auth-panel .btn-primary:hover {
    background: #031a5c;
}

.auth-panel .btn-outline {
    background: #fff;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.auth-panel .btn-outline:hover {
    background: var(--surface);
}

.auth-panel-foot {
    margin-top: var(--s-6);
    font-size: 0.72rem;
    color: var(--text-disabled);
    text-align: left;
}

@media (max-width: 760px) {
    #view-login {
        padding: 0;
    }

    .auth-split {
        grid-template-columns: 1fr;
        max-width: 100%;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-brand {
        display: none;
    }

    .auth-panel {
        padding: 2rem 1.5rem;
        min-height: 100vh;
    }
}

/* ==========================================================================
   APP SHELL — fixed left sidebar + content (replaces floating navbar/sidebar)
   ========================================================================== */
.app-shell {
    display: grid;
    /* 72px reserved gutter — matches the sidebar's own collapsed (default) width,
       so the fixed-positioned sidebar below never overlaps .app-main at rest. The
       sidebar grows past this on hover as an overlay (fixed positioning takes it
       out of grid flow), rather than pushing/reflowing the main content. */
    grid-template-columns: 72px 1fr;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /* shell is exactly the viewport; each column scrolls itself */
}

.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 72px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem 0.85rem;
    background: var(--panel);
    border-right: 1px solid var(--hairline);
    overflow: hidden;
    z-index: 10;
    transition: width 0.22s var(--ease-out, ease);
}

.app-sidebar:hover {
    width: 208px;
    overflow-y: auto;
    box-shadow: var(--shadow-lg, 0 12px 28px rgba(0, 0, 0, 0.3));
}

/* Nav labels, badges and the account row's text are hidden while collapsed (icon-only
   rail) and fade in once the sidebar has room — none of the icons are <span> elements,
   so this only ever targets text/badges, never the svg icons themselves. max-width (not
   just opacity) actually removes their footprint from the row, so a hidden label can't
   push its icon off-centre — every icon shares one true centre line while collapsed.
   padding/border are zeroed too: max-width alone doesn't shrink a padded/bordered
   element to true zero width (confirmed live — the To-Do List count badge and the
   "Admin" role pill both have their own padding, which persisted even at max-width:0
   and was enough to visibly skew that row off-centre / push the profile icon out of
   its own circle). */
.app-sidebar span {
    opacity: 0;
    max-width: 0;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-width: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.15s ease, max-width 0.2s ease;
}

.app-sidebar:hover span {
    opacity: 1;
    max-width: 160px;
    transition: opacity 0.2s ease 0.08s, max-width 0.22s ease;
}

/* Collapsed: every row (nav items, logout, footer) centres its one visible icon on the
   same axis instead of each using its own default alignment (which is what produced the
   "everything at a slightly different x-position" look). Expanded (hover): restore the
   original left-aligned, icon-then-label layout. */
.app-sidebar .sidebar-nav-item {
    justify-content: center;
    gap: 0;
}

.app-sidebar:hover .sidebar-nav-item {
    justify-content: flex-start;
    gap: 0.65rem;
}

/* Restore each badge's own real min-width/padding/margin on hover — the blanket
   .app-sidebar:hover span rule above only resets opacity/max-width, not these. */
.app-sidebar:hover .tab-count-badge {
    min-width: 18px !important;
    padding: 0 5px !important;
    margin-left: 0.4rem !important;
}

.app-sidebar:hover .badge {
    padding: 0.3125rem 0.6875rem !important;
}

.app-sidebar:hover .user-badge {
    gap: 0.375rem;
}

/* Footer: profile chip + theme toggle share one row (chip on the left, toggle on
   the right) once the rail is expanded; collapsed, they stack as two centred
   icons like every other row above them. */
.app-sidebar .sidebar-foot-row {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.app-sidebar:hover .sidebar-foot-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.app-sidebar .sidebar-foot-account {
    /* .sidebar-foot-account is itself a <span> (.user-badge), so the blanket
       ".app-sidebar span { opacity: 0; max-width: 0 }" collapse rule above
       matches this container too, not just the text labels it wraps — without
       overriding both properties here, the chip is either invisible (opacity)
       or clamped to zero width (max-width) even though width:36px is set,
       since max-width still caps the rendered box regardless of width. */
    opacity: 1;
    max-width: none;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
    margin: 0;
}

.app-sidebar:hover .sidebar-foot-account {
    justify-content: flex-start;
    flex: 1;
    width: auto;
    height: auto;
    padding: 0.25rem 0.625rem;
    gap: 0.375rem;
    margin: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.25rem 0.5rem 0.9rem;
    border-bottom: 1px solid var(--hairline);
}

.sidebar-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-nav-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-nav-section + .sidebar-nav-section {
    margin-top: 0.9rem;
}

.sidebar-nav-heading {
    padding: 0 0.7rem;
    margin-bottom: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: none;
    background: transparent;
    border-radius: var(--r-xs);
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-nav-item .ic {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.sidebar-nav-item:hover {
    background: var(--surface);
    color: var(--text-primary);
}

.sidebar-nav-item:hover .ic {
    color: var(--text-secondary);
}

/* Design system rule: the sidebar stays white, the active item takes a
   light tint, never a solid navy fill — this used to be a solid
   var(--color-primary) block with white text. */
.sidebar-nav-item.active {
    background: var(--color-live-soft);
    color: var(--color-primary);
    box-shadow: inset 3px 0 0 var(--color-accent);
}

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

/* Departments section grows and scrolls within the rail */
.sidebar-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    margin-top: 0.25rem;
}

.sidebar-section .folder-tree {
    overflow-y: auto;
    min-height: 0;
}

.sidebar-section .sidebar-title {
    padding: 0.5rem 0.6rem 0.6rem;
    margin-bottom: 0.1rem;
    border-bottom: 1px solid var(--hairline);
}

.sidebar-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--hairline);
}

.sidebar-foot-row {
    display: flex;
    width: 100%;
}

.sidebar-foot-account {
    justify-content: flex-start;
    border-radius: var(--r-sm);
    min-width: 0;
}

.sidebar-foot-account #nav-username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Theme toggle sits beside the profile chip in the footer row — icon-only button
   (glass-icon-btn sm), so drop the old floating-button fixed positioning; its
   label span is .sr-only (kept for a11y, never shown). */
.sidebar-foot .theme-toggle {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    flex-shrink: 0;
}

.logout-item:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.logout-item:hover .ic {
    color: var(--color-danger);
}

.app-main {
    /* Must be explicit — .app-sidebar is position:fixed (out of grid flow), so
       without this .app-main auto-places into the shell's first (72px gutter)
       track instead of the second (1fr) one, collapsing the entire page to
       72px wide. This was the whole "blank page" bug. */
    grid-column: 2;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.app-main .dashboard-content {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--s-6) var(--s-6);
    width: 100%;
}

/* Mobile top bar + drawer backdrop — hidden on desktop */
.mobile-topbar {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

.mobile-menu-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    border: 1px solid var(--hairline);
    background: var(--panel);
    color: var(--text-primary);
    font-size: 1.1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.mobile-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.mobile-brand img {
    height: 20px;
    width: auto;
}

body:not(.light-theme) .mobile-brand img {
    filter: invert(1) brightness(2.5) contrast(1.2);
}

/* The new layout drops the inner portal grid-sidebar — main fills full width */
.portal-main {
    width: 100%;
}

@media (max-width: 820px) {
    .app-shell {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .app-main {
        height: auto;
        overflow: visible;
    }

    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
        padding: 0.6rem 0.9rem;
        background: var(--panel);
        border-bottom: 1px solid var(--hairline);
    }

    /* Sidebar becomes an off-canvas drawer — design-system-worthy pattern (the
       reference file only has a static reflow for this breakpoint, no slide-in);
       ported back into crystal-design-system.html as the mobile-sidebar example. */
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 84%;
        max-width: 300px;
        height: 100vh;
        border-right: 1px solid var(--hairline);
        transform: translateX(-100%);
        transition: transform var(--dur-slow) var(--ease-out);
        z-index: var(--z-drawer);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    }

    .app-shell.drawer-open .app-sidebar {
        transform: none;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-slow) ease;
        z-index: calc(var(--z-drawer) - 1);
    }

    .app-shell.drawer-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar-section {
        flex: 1;
    }

    .app-main .dashboard-content {
        padding: 1.1rem;
    }
}

/* ==========================================================================
   WIDE TWO-COLUMN USER MODAL (desktop) + admin table search
   ========================================================================== */
/* Cap every modal to the viewport so tall content scrolls inside, never overflows */
.modal-card {
    max-height: 92vh;
    overflow-y: auto;
}

.modal-card.modal-wide {
    max-width: 820px;
}

.user-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.user-form-col {
    display: flex;
    flex-direction: column;
}

/* Right column: System Authorizations list is tall but scrolls, matching the left column */
.perm-group {
    display: flex;
    flex-direction: column;
}

.perm-group .checkbox-scroll-list {
    max-height: 340px;
    min-height: 300px;
}

@media (max-width: 720px) {
    .modal-card.modal-wide {
        max-width: 460px;
    }

    .user-form-grid {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .perm-group .checkbox-scroll-list {
        min-height: 180px;
        max-height: 240px;
    }
}

/* Search box inside permission / authorization checklists */
.perm-search {
    position: relative;
    margin: 0.4rem 0 0.5rem;
}

.perm-search .ic {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.72rem;
    pointer-events: none;
}

.perm-search-input {
    width: 100%;
    padding: 0.45rem 0.7rem 0.45rem 1.9rem;
    background: var(--bg-input);
    border: 1.5px solid var(--border-color);
    border-radius: var(--r-xs);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.8rem;
}

.perm-search-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--color-live-soft);
}

/* ==========================================================================
   NOTE-BOARD UI — brand-coloured cards, hearts, bold display type, motion
   ========================================================================== */

/* --- Bold display headings (the "My Notes" energy) --- */
#portal-heading,
.subview-header h2,
.login-header h1,
.modal-header h3 {
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.03;
    text-shadow: none;
    /* kill the old 3D drop-shadow */
}

.login-header h1,
.modal-header h3 {
    font-size: 1.4rem;
    letter-spacing: -0.02em;
}

#portal-heading {
    font-size: clamp(1.35rem, 1.8vw, 1.6rem);
    letter-spacing: -0.02em;
}

.subview-header .subtitle {
    font-size: 0.9rem;
    margin-top: 0.35rem;
}

/* --- Note cards: four brand colours, cycled --- */
.note-card {
    position: relative;
    background: var(--nc-bg);
    color: var(--nc-fg);
    border: 1px solid var(--nc-bd);
    border-radius: var(--r-sm);
    /* Fixed (not theme --shadow-sm, which is only a 0.06-alpha tint too faint to
       read against a fixed-white card) — needs to be visible on both a near-white
       light-theme page and a dark navy dark-theme page. */
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
    transition: transform 0.38s var(--ease-out), box-shadow 0.38s var(--ease-out);
    animation: note-in 0.5s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
}

/* Card body stays a fixed white/light-border (see --card-N-bg above) across all
   four — the colour now lives only on the icon square (--nc-icon-bg/-fg), cycled
   per card same as the reference design: white card, colourful icon chip. */
.note-1 {
    --nc-bg: var(--card-1-bg);
    --nc-fg: var(--card-1-fg);
    --nc-bd: var(--card-1-bd);
    --nc-tint: rgba(0, 0, 0, 0.08);
    --nc-icon-bg: #ece7fb;
    --nc-icon-fg: #6c4fd1;
}

.note-2 {
    --nc-bg: var(--card-2-bg);
    --nc-fg: var(--card-2-fg);
    --nc-bd: var(--card-2-bd);
    --nc-tint: rgba(0, 0, 0, 0.10);
    --nc-icon-bg: #fdf1d6;
    --nc-icon-fg: #b8860b;
}

.note-3 {
    --nc-bg: var(--card-3-bg);
    --nc-fg: var(--card-3-fg);
    --nc-bd: var(--card-3-bd);
    --nc-tint: rgba(0, 0, 0, 0.08);
    --nc-icon-bg: #e2ecfd;
    --nc-icon-fg: #3b5fd9;
}

.note-4 {
    --nc-bg: var(--card-4-bg);
    --nc-fg: var(--card-4-fg);
    --nc-bd: var(--card-4-bd);
    --nc-tint: rgba(0, 0, 0, 0.07);
    --nc-icon-bg: #e3f7ea;
    --nc-icon-fg: #1e9b56;
}

/* Hover must KEEP the card's own colour — the legacy .system-card:hover rules
   swapped the background to the light panel colour, hiding the white text. */
.note-card:hover {
    transform: translateY(-7px);
    background: var(--nc-bg);
    border-color: var(--nc-bd);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.20);
}

.note-card:hover::before {
    background: transparent;
}

.note-card:hover .card-icon-wrapper {
    background: var(--nc-icon-bg);
    border-color: transparent;
    box-shadow: none;
}

.note-card:hover .card-icon-wrapper .ic {
    color: var(--nc-icon-fg);
}

.note-card:hover h3,
.note-card:hover p,
.note-card:hover .card-link-preview {
    color: var(--nc-fg);
}

/* Inner elements adopt the card's own colour */
.note-card h3 {
    color: var(--nc-fg);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.note-card p {
    color: var(--nc-fg);
    opacity: 0.74;
}

.note-card .card-link-preview {
    color: var(--nc-fg);
    opacity: 0.62;
}

.note-card .card-footer {
    border-top-color: var(--nc-tint);
}

.note-card .card-icon-wrapper {
    background: var(--nc-icon-bg);
    border: none;
    border-radius: var(--r-sm);
}

.note-card .card-icon-wrapper .ic {
    color: var(--nc-icon-fg);
}

/* Launch button inverts against the card (reference style) */
.note-card .btn-primary {
    background: var(--nc-fg);
    color: var(--nc-bg);
    border: none;
    box-shadow: none;
}

.note-card .btn-primary:hover {
    background: var(--nc-fg);
    opacity: 0.86;
    transform: translateY(-1px);
    box-shadow: none;
}

/* --- Favourite heart --- */
.card-fav {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--nc-tint);
    color: var(--nc-fg);
    cursor: pointer;
    font-size: 0.85rem;
    z-index: 3;
    transition: transform 0.25s var(--ease-spring), background 0.2s ease;
}

.card-fav:hover {
    transform: scale(1.14);
}

.card-fav.faved {
    color: var(--color-accent);
}

.card-fav.faved svg.ic {
    fill: currentColor;
}

.card-fav.pop {
    animation: heart-pop 0.4s var(--ease-spring);
}

/* --- Motion --- */
@keyframes note-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes heart-pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.modal-overlay.active .modal-card {
    animation: modal-in 0.42s var(--ease-spring);
}

/* Softer, springier interactions across the app */
.sidebar-nav-item,
.tree-row,
.tab-btn,
.system-card,
.btn {
    transition: transform 0.25s var(--ease-out), background 0.2s ease, color 0.2s ease, box-shadow 0.25s var(--ease-out);
}

.tab-btn:hover,
.sidebar-nav-item:hover {
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   MY PENDING TASKS PANEL (Service Portal integration)
   ========================================================================== */
.my-tasks {
    margin-bottom: var(--s-5);
}

.tasks-panel {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 1.1rem 1.25rem 1.25rem;
    box-shadow: var(--shadow-sm);
}

.tasks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    gap: 0.75rem;
}

.tasks-head h3 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.tasks-head h3 i {
    color: var(--color-primary);
}

.tasks-count {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: var(--r-pill);
    background: var(--color-primary);
    color: #fff;
    margin-left: 0.15rem;
}

.tasks-count.overdue {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.task-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: var(--r-pill);
    background: var(--surface-strong);
    color: var(--text-muted);
}

/* Consolidated onto the theme's real --color-warning token — this same
   "overdue" tint used to be redefined independently in four places
   (here, todo-card, todo-row, trow), each with its own hardcoded amber
   and its own separate dark-mode override. One token, no per-component
   dark override needed since the token itself already flips per theme. */
.task-badge.overdue {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}


/* ==========================================================================
   TASK SUMMARY CARD (hub) + MY TASKS TO-DO PAGE — brand colours only
   ========================================================================== */
.my-tasks {
    margin-bottom: var(--s-5);
}

.tasks-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Fixed brand navy (same value as the login hero panel), not the shared --card-1-bg
       variable — that variable is also used by the unrelated .note-1 component, so
       overriding it here would have recolored that too. */
    background: #052379;
    color: #e8ecfb;
    border-radius: var(--r-sm);
    padding: 1.2rem 1.5rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}

.tasks-summary-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Approvals card stacked below the main pending-tasks card (CEO/Mansi/Pushpalata) */
.tasks-summary-card + .tasks-summary-card {
    margin-top: 0.75rem;
}

.tasks-summary-card.loading,
.tasks-summary-card.muted {
    background: var(--panel);
    color: var(--text-secondary);
    cursor: default;
    border: 1px solid var(--hairline);
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.9rem;
}

.tasks-summary-card.muted strong {
    color: var(--text-primary);
}

.tasks-summary-card.ok {
    background: var(--panel);
    color: var(--text-secondary);
    cursor: default;
    border: 1px solid var(--hairline);
    gap: 0.85rem;
}

.tasks-summary-card.ok strong {
    color: var(--text-primary);
}

.sum-emoji {
    font-size: 1.6rem;
}

.sum-left {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.sum-num {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-accent);
}

.sum-text strong {
    font-size: 1.05rem;
    font-weight: 800;
}

.sum-text p {
    font-size: 0.82rem;
    opacity: 0.82;
    margin-top: 0.2rem;
}

.sum-overdue {
    color: var(--color-accent);
    font-weight: 700;
}

.sum-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

.tasks-summary-card:hover .sum-cta {
    gap: 0.65rem;
}

/* --- My Tasks page --- */
#subview-tasks {
    max-width: 1200px;
    margin: 0 auto;
}

/* Task cards grid (rich, fills the space) */
.todo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 0.9rem;
}

.todo-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--r-md);
    padding: 1rem 1.1rem;
    animation: note-in 0.42s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 35ms);
    transition: transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out);
}

.todo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.todo-card.is-overdue {
    border-left-color: var(--color-warning);
}

.tc-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.tc-ico {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--color-live-soft);
    color: var(--color-primary);
}

.todo-card.is-overdue .tc-ico {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.tc-kind {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.tc-spacer {
    flex: 1;
}

.tc-title {
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    line-height: 1.25;
}

.tc-meta {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-family: var(--font-code);
}

.tc-breakdown {
    margin-top: 0.4rem;
}

.tc-breakdown-heading {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.tc-breakdown + .tc-breakdown {
    margin-top: 0.6rem;
}

.tc-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    /* Fixed layout so the count/value columns land at the SAME x-position across every
       stacked breakdown table (Order Type/Product/By User) — with auto layout, each table
       sized its label column independently based on its own longest label, so the numeric
       columns drifted left/right between sections. */
    table-layout: fixed;
}

.tc-breakdown-table tr {
    border-bottom: 1px solid var(--hairline);
}

.tc-breakdown-table tr:last-child {
    border-bottom: none;
}

.tc-breakdown-table td {
    padding: 0.3rem 0;
    color: var(--text-secondary, var(--text-primary));
}

.tc-bd-label {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-bd-count {
    text-align: right;
    padding-left: 0.5rem;
    /* Gap before the value column lives HERE (padding-right on count), not as padding-left
       on value — a value column narrower than its longest content (e.g. "₹1,25,29,735")
       overflows leftward under text-align:right, eating any left-padding meant to space it
       from count and making the two look jammed together with no gap. */
    padding-right: 0.6rem;
    color: var(--text-muted);
    width: 2.4rem;
}

.tc-bd-value {
    text-align: right;
    font-weight: 700;
    font-family: var(--font-code);
    white-space: nowrap;
    /* Generous fixed width (not ch, which under-measured this monospace font) so amounts
       up to 8 figures with commas ("₹1,25,29,735") fit without overflowing into the count
       column. */
    width: 7.5rem;
}

.tc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.2rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--hairline);
}

.tc-by {
    font-size: 0.74rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-open {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--color-primary);
    background: var(--color-live-soft);
    border-radius: 50%;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.tc-open:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.tc-open-disabled, .tr-open-disabled {
    color: var(--text-muted, #8a8f98);
    background: transparent;
    cursor: default;
}
.tc-open-disabled:hover { transform: none; opacity: 1; }

/* Skeleton loading placeholders — shown before real data arrives, using each view's
   real card/row markup with shimmer blocks instead of content, so the layout doesn't
   jump once data lands. */
.skeleton {
    position: relative;
    overflow: hidden;
    display: inline-block;
    min-width: 3em;
    background: var(--surface-strong);
    border-radius: var(--r-xs);
    color: transparent !important;
    pointer-events: none;
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--surface-hover), transparent);
    animation: sk-shimmer 1.4s infinite;
}
@keyframes sk-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.tasks-hero {
    margin-bottom: var(--s-5);
}

.tasks-hero h2 {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.tasks-hero .subtitle {
    font-size: 0.92rem;
    margin-top: 0.35rem;
    color: var(--text-secondary);
}

.tasks-hero .wave {
    display: inline-block;
}

.streaming-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--r-pill, 999px);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.tasks-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}

/* Design system's .segmented control (section 11): a tinted track, the
   selected option is a raised chip, never a solid fill block. */
.todo-group {
    margin-bottom: var(--s-5);
}

.todo-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: 0.6rem;
    padding: 0 0.25rem;
}

.todo-person {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
}

.todo-group-meta {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.todo-group-meta .od {
    color: var(--color-warning);
    font-weight: 700;
}

.todo-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.todo-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 0.85rem 1rem;
    animation: note-in 0.4s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 35ms);
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s ease;
}

.todo-row:hover {
    transform: translateX(3px);
    box-shadow: var(--shadow-sm);
    border-color: var(--border-hover);
}

.todo-row.is-overdue {
    border-left: 4px solid var(--color-warning);
}

.todo-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-live-soft);
    color: var(--color-primary);
}

.todo-row.is-overdue .todo-ico {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.todo-body {
    flex: 1;
    min-width: 0;
}

.todo-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
}

.todo-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.todo-right {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}

.todo-open {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-primary);
    white-space: nowrap;
}

.todo-open:hover {
    gap: 0.6rem;
}

.tasks-state {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 1.5rem;
}

@media (max-width: 640px) {
    .tasks-summary-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .todo-sub {
        white-space: normal;
    }

    .todo-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.4rem;
    }
}

/* ==========================================================================
   TASKS: view toggle + sort + Kanban board
   ========================================================================== */
.tasks-toolbar .tb-left,
.tasks-toolbar .tb-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.view-toggle {
    display: inline-flex;
    gap: 0.125rem;
    background: var(--surface);
    border: none;
    border-radius: var(--r-sm);
    padding: 0.1875rem;
}

.view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0.5rem 0.875rem;
    border-radius: var(--r-xs);
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.view-btn:hover {
    color: var(--text-primary);
}

.view-btn.active {
    background: var(--panel);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.tb-select {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-muted);
}

.tb-select select {
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1.5px solid var(--border-color);
    border-radius: var(--r-xs);
    padding: 0.35rem 1.6rem 0.35rem 0.6rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--chevron-icon);
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    background-size: 1.1rem;
}

.tb-select select:focus {
    outline: none;
    border-color: var(--border-focus);
}

/* Person tag on board cards */
.tc-person {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.12rem 0.5rem;
    border-radius: var(--r-pill);
    background: var(--color-live-soft);
    color: var(--color-primary);
}

/* Kanban */
.kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    align-items: start;
    scrollbar-width: thin;
}

.kanban-col {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 120px;
}

.kanban-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.35rem 0.4rem;
}

.kh-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.kh-count {
    font-size: 0.68rem;
    font-weight: 800;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--r-pill);
    padding: 0.05rem 0.45rem;
    min-width: 18px;
    text-align: center;
}

.kh-od {
    font-size: 0.68rem;
    font-weight: 800;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-radius: var(--r-pill);
    padding: 0.05rem 0.45rem;
}

.kanban-stack {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kanban .todo-card {
    animation-delay: 0ms;
}

/* ---- KPI cards (one per source system) + selected-system Kanban ---- */
.kpi-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 220px);
    justify-content: start;
    gap: var(--s-3);
    overflow-x: auto;
    padding: 0.15rem 0.15rem 0.6rem;
    margin-bottom: var(--s-4);
    scrollbar-width: thin;
}
.kpi-card {
    --kpi: var(--color-primary);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-align: left;
    padding: 0.9rem 1rem 1.6rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--hairline);
    background: var(--panel);
    cursor: pointer;
    transition: transform 0.15s var(--ease-out, ease), box-shadow 0.15s ease, border-color 0.15s ease;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,0.12)); }
.kpi-card.active {
    border-color: var(--kpi);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpi) 35%, transparent);
    background: color-mix(in srgb, var(--kpi) 8%, var(--panel));
}
.kpi-ico {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--r-xs);
    font-size: 1rem;
    color: #fff;
    background: var(--kpi);
}
.kpi-body { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.kpi-count { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.kpi-label { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-od {
    /* Plain icon + number, no pill/background — pinned to the card's own bottom-right
       corner (the card is position:relative) so it never sits beside .kpi-count, no
       matter how close the two numbers are (e.g. "2669" total vs "2668" overdue). */
    position: absolute;
    right: 0.8rem;
    bottom: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--color-warning);
}
.kpi-od .ic { color: var(--color-warning); width: 12px; }

.kanban-wrap-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    flex-wrap: nowrap;
}
.kanban-wrap-head h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 0.5rem;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kanban-wrap-head h3 i { color: var(--color-primary); }
.kanban-wrap-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.tasks-search-box {
    max-width: 170px;
    min-width: 90px;
}

.tasks-person-select select {
    max-width: 140px;
}

/* List/Board toggle + Refresh always wrap together as one unit, never split apart */
.tasks-view-refresh {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.kh-title.kcol-overdue { color: var(--color-warning); }
.kh-title.kcol-pending { color: var(--color-primary); }
.kh-title.kcol-waiting { color: var(--text-muted); }
.kanban-col:has(.kcol-overdue) { border-color: color-mix(in srgb, var(--color-warning) 45%, var(--hairline)); }

/* Board Container with Category Cards */
.board-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.category-cards-grid {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.15rem 0.15rem 0.6rem;
    margin-bottom: 0.25rem;
    width: 100%;
    scrollbar-width: thin;
}
.category-cards-grid .category-card { min-width: 150px; }

.category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    width: 190px;
    padding: 1rem 1.25rem;
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 0.25s var(--ease-out, ease);
    font-family: var(--font-main);
    color: var(--cat-text, #23262f);
    position: relative;
    overflow: hidden;
    background: var(--cat-bg, #eef0f4);
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-card.active {
    box-shadow: 0 4px 16px rgba(29, 59, 180, 0.2);
    border-color: var(--cat-border, var(--color-primary));
}

.card-icon {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--r-xs);
    background: rgba(255, 255, 255, 0.6);
    color: var(--cat-text, #23262f);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.card-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.01em;
    color: var(--cat-text, #23262f);
    opacity: 0.85;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.card-count {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--cat-text, #23262f);
    line-height: 1.1;
    position: relative;
    z-index: 10;
    display: block;
    visibility: visible;
}

.card-overdue {
    font-size: 0.72rem;
    color: var(--color-warning);
    font-weight: 600;
    position: relative;
    z-index: 1;
}

/* Category colour — consolidated from 17 hardcoded, non-theme-aware hues
   down to the 3 the design system actually allows for decoration (navy /
   amber / neutral). Semantic colours (success/error/warning/info) are
   reserved for real status, not category labelling, per the design
   system's rule — these categories aren't a status, so they don't get one.
   Differentiation between categories now comes from icon + label text
   (rule: colour is never the only signal), not a rainbow of hues. All
   three reference existing theme tokens, so they're correct in both
   light and dark automatically. */
.category-card.cat-color-requisition,
.category-card.cat-color-ticket,
.category-card.cat-color-orders-punched,
.category-card.cat-color-lease-verify,
.category-card.cat-color-offlease-2,
.category-card.cat-color-offlease-5 {
    --cat-bg: var(--surface-strong);
    --cat-text: var(--text-primary);
    --cat-border: var(--border-hover);
}

/* Was the design system's amber accent (--color-accent/--color-accent-soft) — in dark
   mode that soft-yellow tint composited over the dark navy surface read as a muddy
   brown, not amber. Moved onto the same blue scheme as the group below instead, so
   every category card is consistently blue / light blue / white in both themes. */
.category-card.cat-color-po-approval,
.category-card.cat-color-indent,
.category-card.cat-color-issue-note,
.category-card.cat-color-ceo,
.category-card.cat-color-sales-followup,
.category-card.cat-color-lease-renewal,
.category-card.cat-color-offlease-1,
.category-card.cat-color-offlease-4,
.category-card.cat-color-travel,
.category-card.cat-color-container-service,
.category-card.cat-color-offlease-3,
.category-card.cat-color-coldroom {
    --cat-bg: var(--color-live-soft);
    --cat-text: var(--text-primary);
    --cat-border: var(--color-primary);
}

.board-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    animation: fadeIn 0.3s ease;
}

/* Cold Room admin tab */
.cr-site {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.cr-openproj {
    color: var(--color-primary);
    margin-left: 0.5rem;
    font-size: 0.75rem;
    text-decoration: none;
}

.cr-openproj:hover {
    opacity: 0.8;
}

/* ==========================================================================
   COMPACT / LINEAR TASK ROWS (List view) + tighter sidebar & board cards
   ========================================================================== */
/* Task table (List view) — same .admin-table/.table-container the Admin
   Console uses (design system's Data Tables pattern), so this reads as a
   real table with a header row, not a stack of individually-bordered
   pill-rows (that was the previous .trow/.trows implementation). */
/* Never scrollable — unlike the Admin Console tables, this one is sized to
   always fit (fixed narrow columns + one flexible text column that already
   truncates with ellipsis), so a stray sub-pixel-rounding overflow shouldn't
   turn into a visible scrollbar. */
.task-table-wrap {
    overflow-x: hidden;
}

.task-table {
    table-layout: fixed;
    width: 100%;
}

.task-table th:first-child,
.task-table td:first-child {
    width: 150px;
}

/* Status column sized to its content (the pill), not an equal fixed-layout
   share — otherwise it stretches wide and leaves a gap before Actions. */
.task-table th:nth-child(3),
.task-table td:nth-child(3) {
    width: 140px;
}

.task-table th:last-child,
.task-table td:last-child {
    width: 100px;
    text-align: center;
}

.tr-kind-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.tr-ico {
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 0.68rem;
    background: var(--color-live-soft);
    color: var(--color-primary);
}

.task-row.is-overdue .tr-ico {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.task-row.has-link {
    cursor: pointer;
}

.tr-kind {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tr-main {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.tr-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-code);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
    text-decoration: none;
    color: var(--color-primary);
    background: var(--color-live-soft);
    border-radius: 50%;
}

.tr-open:hover {
    opacity: 0.9;
}

/* Tighter sidebar */
.app-sidebar {
    padding: 0.85rem 0.55rem;
    gap: 0.6rem;
}

.sidebar-nav-item {
    padding: 0.48rem 0.6rem;
    gap: 0.55rem;
    font-size: 0.82rem;
}

.sidebar-nav-item .ic {
    font-size: 0.85rem;
}

.sidebar-brand {
    padding: 0.2rem 0.4rem 0.75rem;
}

.sidebar-logo {
    height: 44px;
}

.sidebar-section .sidebar-title {
    padding: 0.45rem 0.5rem 0.5rem;
}

.tree-row {
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
}

/* Smaller board cards (denser) */
.todo-card {
    gap: 0.4rem;
    padding: 0.65rem 0.8rem;
    border-left-width: 3px;
}

.todo-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.6rem;
}

.tc-ico {
    width: 27px;
    height: 27px;
    font-size: 0.7rem;
}

.tc-title {
    font-size: 0.85rem;
}

.tc-meta {
    font-size: 0.7rem;
}

.tc-foot {
    padding-top: 0.45rem;
    margin-top: 0.1rem;
}

.tc-open {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
}

.kanban {
    grid-auto-columns: minmax(268px, 1fr);
    gap: 0.75rem;
}

.kanban-col {
    padding: 0.55rem;
    gap: 0.5rem;
}

/* ==========================================================================
   HELP DESK — raise-a-ticket page
   Built from the existing tokens only, so both themes follow automatically.
   Category is labelled by icon + text (it is not a status, so it gets no
   semantic colour); priority IS a severity scale, so it drives --hd-tone,
   and one set of rules tints the chip, its border and its tick from that.
   ========================================================================== */

/* ---- hero band ---- */
.hd-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding: var(--s-5);
    margin-bottom: var(--s-5);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    /* Plain fallback first — if color-mix() isn't supported (or fails for any other
       reason) the whole gradient declaration below is invalid and gets dropped
       entirely, silently leaving the card with NO background at all rather than
       just losing the tint. This guarantees at least a normal panel background. */
    background: var(--panel);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 14%, var(--panel)) 0%,
        var(--panel) 58%);
}

/* Soft off-centre glow — pure decoration, sits under the content. */
.hd-hero::after {
    content: '';
    position: absolute;
    top: -60%;
    right: -8%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: transparent;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 68%);
    pointer-events: none;
}

.hd-hero > * { position: relative; z-index: 1; }

.hd-hero-ico {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--color-live-soft);
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.hd-hero-ico .ic { font-size: 1.35rem; }

.hd-hero-text h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-primary);
}

.hd-hero-text p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

/* Tabs ride along the hero's right edge instead of sitting in their own band. */
.hd-tabs.admin-tabs {
    margin: 0 0 0 auto;
    border-bottom: none;
    gap: 0.25rem;
}

.hd-tabs.admin-tabs .tab-btn {
    border-radius: var(--r-pill);
    border-bottom: none;
    /* Base .tab-btn has zero horizontal padding (fine for its usual underline style —
       nothing to clear) but a pill radius with no side padding cuts straight into the
       label text at both ends. */
    padding: 0.5rem 0.9rem;
}

.hd-tabs.admin-tabs .tab-btn.active {
    background: var(--color-primary);
    color: #fff;
}

.hd-tabs.admin-tabs .tab-btn.active .ic { color: #fff; }

/* Solid navy + gold accent header — an alternative to the soft pastel gradient
   .hd-hero normally carries. .hd-hero is shared base layout only, so this
   overrides colour on top of it; opt in per-page with .hero-navy (Delegation,
   Help Desk).
   Fixed navy (not var(--color-primary), which is a lighter periwinkle in dark
   theme) — same reasoning as the QORE login wordmark: this brand navy must read
   the same regardless of which app theme is active. */
.hero-navy {
    --hero-navy: #052379;
    background: var(--hero-navy);
    border-color: var(--hero-navy);
}

.hero-navy::after { display: none; }

.hero-navy .hd-hero-ico {
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-accent);
    border-color: rgba(255, 255, 255, 0.24);
}

.hero-navy .hd-hero-text h2 { color: #fff; }
.hero-navy .hd-hero-text p { color: rgba(255, 255, 255, 0.72); }

.hero-navy .hd-tabs.admin-tabs .tab-btn { color: rgba(255, 255, 255, 0.78); }
.hero-navy .hd-tabs.admin-tabs .tab-btn .ic { color: rgba(255, 255, 255, 0.6); }
.hero-navy .hd-tabs.admin-tabs .tab-btn:hover { color: #fff; }
.hero-navy .hd-tabs.admin-tabs .tab-btn:hover .ic { color: #fff; }

.hero-navy .hd-tabs.admin-tabs .tab-btn.active {
    background: var(--color-accent);
    color: var(--hero-navy);
}
.hero-navy .hd-tabs.admin-tabs .tab-btn.active .ic { color: var(--hero-navy); }

/* ---- two-column layout: form + live rail ---- */
.hd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: var(--s-5);
    align-items: start;
}

.hd-body { min-width: 0; }

.hd-rail {
    position: sticky;
    top: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.hd-rail-card {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: var(--s-4);
    box-shadow: var(--shadow-sm);
}

/* ---- section cards ---- */
.hd-section {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: var(--s-5);
    margin-bottom: var(--s-4);
    box-shadow: var(--shadow-sm);
    animation: note-in 0.45s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
    transition: border-color var(--transition-normal);
}

.hd-section.is-done {
    border-color: color-mix(in srgb, var(--color-success) 42%, transparent);
}

.hd-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--hairline);
}

/* Detail-page accordion headings (Details / Conversation / History) — the head is a
   real <button>, reset to look like the plain heading it replaced */
button.hd-sec-toggle {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--hairline);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.hd-sec-chev {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform var(--dur-fast) ease;
}

.hd-sec-chev.open { transform: rotate(180deg); }

/* Collapsed accordion: the head is the only thing in the card — trim its bottom
   spacing and rule so the section reads as one compact row */
.hd-sec-toggle[aria-expanded="false"] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.hd-step {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-live-soft);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    transition: background var(--transition-normal), color var(--transition-normal);
}

.hd-step-ok { display: none; font-size: 0.85rem; }
.hd-section.is-done .hd-step { background: var(--color-success-bg); color: var(--color-success); }
.hd-section.is-done .hd-step-n { display: none; }
.hd-section.is-done .hd-step-ok { display: block; }

.hd-section-head h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.hd-section-head p {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.hd-sec-tag {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.2rem 0.55rem;
    border-radius: var(--r-pill);
    background: var(--color-live-soft);
    color: var(--color-primary);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hd-sec-tag.is-opt {
    background: var(--surface-strong);
    color: var(--text-muted);
}

.hd-field { margin-bottom: var(--s-4); }
.hd-field:last-child { margin-bottom: 0; }

/* ---- subject quality feedback ---- */
.hd-subject-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: 0.35rem;
}

.hd-quality {
    font-size: 0.7rem;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.hd-quality.is-empty { color: var(--text-muted); font-weight: 500; }
.hd-quality.is-bad   { color: var(--color-danger); }
.hd-quality.is-ok    { color: var(--color-warning); }
.hd-quality.is-good  { color: var(--color-success); }

.hd-count {
    font-family: var(--font-code);
    font-size: 0.68rem;
    color: var(--text-disabled);
    flex-shrink: 0;
}

.hd-examples {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: 0.5rem;
}

.hd-ex {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.24rem 0.6rem;
    border-radius: var(--r-pill);
    font-size: 0.68rem;
    font-weight: 600;
}

.hd-ex .ic { font-size: 0.7rem; }
.hd-ex.bad  { background: var(--color-danger-bg); color: var(--color-danger); }
.hd-ex.good { background: var(--color-success-bg); color: var(--color-success); }

/* ---- chip groups (category / priority / frequency) ---- */
.hd-chips {
    display: grid;
    gap: var(--s-2);
}

.hd-chips-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hd-chips-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hd-chips-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hd-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    text-align: left;
    padding: 0.8rem 0.85rem;
    background: var(--panel);
    border: 1.5px solid var(--border-color);
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    font-family: var(--font-main);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast),
                box-shadow var(--transition-fast), transform var(--transition-fast);
}

.hd-chip:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.hd-chip:active { transform: translateY(0); }

.hd-chip-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hd-chip-ico {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-xs);
    background: var(--surface-strong);
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.hd-chip-label {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.hd-chip-hint {
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* Selection tick — one rule, tinted by --hd-tone (priority sets it, everything
   else falls back to brand navy). */
.hd-chip-tick {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--hd-tone, var(--color-primary));
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.hd-chip-tick .ic { font-size: 0.6rem; }

.hd-chip.is-on {
    border-color: var(--hd-tone, var(--color-primary));
    background: color-mix(in srgb, var(--hd-tone, var(--color-primary)) 11%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hd-tone, var(--color-primary)) 15%, transparent);
}

.hd-chip.is-on .hd-chip-tick { opacity: 1; transform: scale(1); }

.hd-chip.is-on .hd-chip-ico {
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
    color: var(--color-primary);
}

.hd-chip.is-on .hd-chip-label { color: var(--hd-tone, var(--color-primary)); }

/* Priority severity scale — the dot keeps the colour visible before selection,
   so the ramp reads at a glance rather than only once something is picked. */
.hd-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--hd-tone, var(--text-muted));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hd-tone, var(--text-muted)) 22%, transparent);
}

.hd-p-low    { --hd-tone: var(--color-success); }
.hd-p-medium { --hd-tone: var(--color-info); }
.hd-p-high   { --hd-tone: var(--color-warning); }
.hd-p-urgent { --hd-tone: var(--color-danger); }

/* Compact single-line variant used by One-time / Ongoing */
.hd-chips-sm .hd-chip {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.7rem;
}

.hd-chips-sm .hd-chip-tick { top: 0.3rem; right: 0.3rem; width: 15px; height: 15px; }

.hd-urgent-why {
    margin-top: var(--s-3);
    padding: 0.75rem 0 0.1rem 0.8rem;
    border-left: 3px solid var(--color-danger);
    animation: note-in 0.3s var(--ease-out);
}

/* ---- "when did it start" row ---- */
.hd-when {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--s-3);
    align-items: center;
}

/* The native calendar picker glyph is near-black and vanishes on a dark fill. */
body:not(.light-theme) .hd-when input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
}

/* ---- validation ---- */
.hd-err {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-danger);
}

.form-group input.is-invalid,
.form-group textarea.is-invalid {
    border-color: var(--color-danger);
}

/* ---- attachments ---- */
.hd-dropzone { padding: 1.3rem 1rem; }

.hd-file-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: var(--s-3);
}

.hd-file {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.65rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xs);
    animation: note-in 0.3s var(--ease-out);
}

.hd-file .ic { color: var(--color-primary); flex-shrink: 0; }

.hd-file-name {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-file-size {
    font-family: var(--font-code);
    font-size: 0.68rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.hd-file-x {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.15rem;
    display: grid;
    place-items: center;
}

.hd-file-x:hover { color: var(--color-danger); }

/* ---- draft strip + sticky action bar ---- */
.hd-draft-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    margin-bottom: var(--s-4);
    background: var(--color-info-bg);
    border-radius: var(--r-sm);
    font-size: 0.76rem;
    color: var(--text-secondary);
}

.hd-draft-note .ic { color: var(--color-info); }

.hd-actions {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding: var(--s-3) 0;
    background: var(--bg-main);
    border-top: 1px solid var(--hairline);
}

.hd-actions-meta {
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.hd-ready {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.hd-ready.is-ready { color: var(--color-success); }

.hd-autosave {
    font-size: 0.68rem;
    color: var(--text-muted);
    min-height: 0.9rem;
}

/* Submit lifts off the bar on hover and presses back down on click — the
   .btn base rule already transitions transform, so this only sets the
   positions. The glow is tinted from the brand colour rather than a flat
   black shadow, so it reads the same in both themes. */
.hd-actions .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.hd-actions .btn-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--color-primary) 34%, transparent);
}

/* ---- rail: progress ---- */
.hd-progress-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.hd-progress-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hd-progress-pct {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}

.hd-progress-track {
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--surface-strong);
    overflow: hidden;
}

.hd-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    transition: width 0.35s var(--ease-out);
}

.hd-checklist {
    list-style: none;
    margin-top: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.hd-checklist li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.hd-checklist li .ic { font-size: 0.8rem; flex-shrink: 0; }
.hd-checklist li.is-done { color: var(--text-secondary); }
.hd-checklist li.is-done .ic { color: var(--color-success); }

/* ---- rail: live ticket card ---- */
.hd-live {
    border-style: dashed;
    border-color: var(--hairline-strong);
}

.hd-live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.hd-live-ref {
    font-family: var(--font-code);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.hd-live-status {
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-pill);
    background: var(--surface-strong);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hd-live-subject {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.hd-live-subject.is-empty {
    color: var(--text-disabled);
    font-weight: 500;
    font-style: italic;
}

.hd-live-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.hd-badge-empty {
    background: var(--surface-strong);
    color: var(--text-disabled);
}

.hd-badge-cat {
    background: var(--color-live-soft);
    color: var(--color-primary);
}

.hd-badge-prio { background: var(--surface-strong); color: var(--text-secondary); }
.hd-badge-prio.hd-prio-low    { background: var(--color-success-bg); color: var(--color-success); }
.hd-badge-prio.hd-prio-medium { background: var(--color-info-bg); color: var(--color-info); }
.hd-badge-prio.hd-prio-high   { background: var(--color-warning-bg); color: var(--color-warning); }
.hd-badge-prio.hd-prio-urgent { background: var(--color-danger-bg); color: var(--color-danger); }

.hd-live-meta {
    margin-top: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hd-live-meta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    font-size: 0.72rem;
}

.hd-live-meta dt { color: var(--text-muted); flex-shrink: 0; }
.hd-live-meta dd { color: var(--text-primary); text-align: right; }

.hd-live-sla {
    margin-top: 0.2rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--hairline);
}

.hd-live-sla dd { color: var(--color-primary); font-weight: 700; }

/* ---- rail: tips ---- */
.hd-tips {
    background: var(--color-accent-soft);
    border-color: color-mix(in srgb, var(--color-accent) 32%, transparent);
}

.hd-tips h4 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.hd-tips h4 .ic { color: var(--color-accent); }

.hd-tips ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hd-tips li {
    position: relative;
    padding-left: 0.8rem;
    font-size: 0.73rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.hd-tips li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* ---- submitted preview ---- */





/* Dotted-out ticket number: deliberately not a plausible-looking value, so
   nobody quotes it before the server has actually issued one. */





.hd-pv-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: var(--s-3);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--hairline);
}

.hd-pv-row:last-child { border-bottom: none; }

.hd-pv-row dt {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hd-pv-row dd {
    font-size: 0.82rem;
    color: var(--text-primary);
    white-space: pre-wrap;
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
    .hd-layout { grid-template-columns: minmax(0, 1fr); }
    .hd-rail { position: static; }
    .hd-rail-card { padding: var(--s-3) var(--s-4); }
}

@media (max-width: 720px) {
    .hd-hero { padding: var(--s-4); gap: var(--s-3); }
    .hd-hero-ico { width: 42px; height: 42px; }
    .hd-tabs.admin-tabs { margin: var(--s-2) 0 0; width: 100%; }

    .hd-chips-3,
    .hd-chips-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hd-when { grid-template-columns: minmax(0, 1fr); }
    .hd-section { padding: var(--s-4); }
    .hd-actions { flex-wrap: wrap; }
    .hd-actions-meta { width: 100%; margin-bottom: 0.25rem; }
    .hd-pv-row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hd-section,
    .hd-file,
    .hd-done,
    .hd-urgent-why { animation: none; }

    .hd-chip:hover,
    .hd-actions .btn-primary:hover,
    .hd-actions .btn-primary:active { transform: none; }
}

/* ==========================================================================
   HELP DESK — ticket lists, detail view and the post-submit confirmation
   ========================================================================== */

.hd-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--s-4);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.hd-loading .ic { color: var(--color-primary); }

/* ---- status pill: this one IS a status, so it carries real colour ---- */
.hd-status {
    flex-shrink: 0;
    padding: 0.22rem 0.6rem;
    border-radius: var(--r-pill);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: var(--surface-strong);
    color: var(--text-secondary);
    white-space: nowrap;
}

.hd-status.is-open     { background: var(--color-info-bg); color: var(--color-info); }
.hd-status.is-progress { background: var(--color-live-soft); color: var(--color-primary); }
.hd-status.is-waiting  { background: var(--color-warning-bg); color: var(--color-warning); }
.hd-status.is-resolved { background: var(--color-success-bg); color: var(--color-success); }
.hd-status.is-closed   { background: var(--surface-strong); color: var(--text-muted); }

.hd-overdue-tag {
    flex-shrink: 0;
    padding: 0.15rem 0.45rem;
    border-radius: var(--r-pill);
    background: var(--color-danger-bg);
    color: var(--color-danger);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---- ticket list ---- */
.hd-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hd-trow {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    text-align: left;
    padding: 0.8rem 1rem;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    cursor: pointer;
    font-family: var(--font-main);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.hd-trow:hover {
    transform: translateX(3px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-sm);
}

.hd-trow.is-overdue { border-left: 4px solid var(--color-danger); }

.hd-trow-ref {
    flex-shrink: 0;
    font-family: var(--font-code);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.hd-trow-main { flex: 1; min-width: 0; }

.hd-trow-subject {
    display: block;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-trow-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.hd-trow-prio { text-transform: capitalize; }
.hd-trow-who { color: var(--text-secondary); }

.hd-trow-go { flex-shrink: 0; color: var(--text-muted); }

/* ---- stage tracker: how far a ticket has got ----
   Sits in the empty stretch between the subject and the status pill rather than
   under the row. Four equal steps joined by a rule: reached steps are filled and
   their connector is solid, and the one it is sitting on gets a ring so it reads
   as "here", not "done". */
.hd-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 0 0 20rem;
    max-width: 20rem;
}
.hd-track-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding-top: 0.55rem;
    min-width: 0;
}
/* The connector runs left from this step's dot to the previous one. */
.hd-track-line {
    position: absolute;
    top: 0.55rem;
    right: 50%;
    left: -50%;
    height: 2px;
    transform: translateY(2px);
    background: var(--hairline-strong);
}
.hd-track-step.is-done .hd-track-line { background: var(--color-primary); }
.hd-track-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hairline-strong);
    position: relative;
    z-index: 1;
}
.hd-track-step.is-done .hd-track-dot { background: var(--color-primary); }
.hd-track-step.is-current .hd-track-dot {
    box-shadow: 0 0 0 3px var(--color-live-soft);
}
.hd-track-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.hd-track-step.is-done .hd-track-label { color: var(--text-secondary); }
.hd-track-step.is-current .hd-track-label { color: var(--color-primary); font-weight: 700; }
.hd-track-when { font-size: 0.58rem; color: var(--text-disabled); white-space: nowrap; }

/* A resolved or closed ticket's track is history — quieter than a live one's. */
.hd-track.is-settled { opacity: 0.6; }

/* Below this the subject needs the whole row, so the track steps aside; the status
   pill still says where the ticket is. */
@media (max-width: 1100px) {
    .hd-track { flex-basis: 14rem; max-width: 14rem; }
    .hd-track-when { display: none; }
    .hd-track-label { font-size: 0.56rem; }
}
@media (max-width: 860px) {
    .hd-track { display: none; }
}

/* ---- detail view ---- */
.hd-detail { max-width: 900px; }

.hd-back { margin-bottom: var(--s-4); }

.hd-detail-head { padding-bottom: var(--s-4); }

.hd-detail-top {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: 0.4rem;
}

.hd-detail-ref {
    font-family: var(--font-code);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.hd-detail-subject {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.hd-detail-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hd-detail-who {
    font-size: 0.74rem;
    color: var(--text-muted);
}

/* Triage controls — only rendered for the handling team */
.hd-manage {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--hairline);
}

.hd-manage label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.hd-manage select {
    width: auto;
    min-width: 150px;
    background-color: var(--bg-input);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    font-family: var(--font-main);
    padding: 0.45rem 2rem 0.45rem 0.6rem;
    font-size: 0.78rem;
    border-radius: var(--r-xs);
    appearance: none;
}

/* Priority on the ticket detail is fixed at creation — rendered as a disabled select */
.hd-manage select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    -webkit-appearance: none;
    background-image: var(--chevron-icon);
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.1rem;
}

/* ---- conversation ---- */
.hd-msgs {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: var(--s-4);
}

.hd-msg {
    padding: 0.7rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
}

/* An internal note must never be mistaken for something the requester saw. */
.hd-msg.is-internal {
    background: var(--color-warning-bg);
    border-color: color-mix(in srgb, var(--color-warning) 38%, transparent);
    border-left: 3px solid var(--color-warning);
}

.hd-msg-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.76rem;
    color: var(--text-primary);
}

.hd-internal-tag {
    padding: 0.1rem 0.4rem;
    border-radius: var(--r-pill);
    background: var(--color-warning);
    color: #000;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hd-msg-when {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.hd-msg p {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

.hd-empty-line {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.4rem 0;
}

.hd-reply-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: 0.5rem;
}

.hd-internal-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: auto;
    font-size: 0.73rem;
    color: var(--text-muted);
    cursor: pointer;
}

.hd-internal-check input { width: auto; }

/* ---- history ---- */
.hd-history {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.hd-history li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0;
    font-size: 0.76rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--hairline);
}

.hd-history li:last-child { border-bottom: none; }

.hd-hist-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-primary);
}

/* ---- post-submit confirmation ---- */
.hd-done {
    max-width: 560px;
    margin: var(--s-6) auto;
    padding: var(--s-6) var(--s-5);
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--color-success-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    animation: note-in 0.45s var(--ease-out);
}

.hd-done-ico {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--s-3);
    border-radius: 50%;
    background: var(--color-success-bg);
    color: var(--color-success);
}

.hd-done-ico .ic { font-size: 1.6rem; }

.hd-done h2 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.hd-done-sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.hd-done-ref {
    display: inline-block;
    margin: var(--s-4) 0 var(--s-3);
    padding: 0.5rem 1.1rem;
    border-radius: var(--r-sm);
    background: var(--color-live-soft);
    border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
    font-family: var(--font-code);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-primary);
}

.hd-done-note {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.hd-done-actions {
    display: flex;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

@media (max-width: 720px) {
    .hd-trow { gap: 0.6rem; padding: 0.7rem 0.8rem; flex-wrap: wrap; }
    .hd-trow-ref { order: -1; }
    .hd-trow-go { display: none; }
    .hd-manage { flex-direction: column; align-items: stretch; }
    .hd-manage select { width: 100%; }
    .hd-done-actions { flex-direction: column; }
}

/* =====================================================================
   DELEGATION — assign form, task lists, status badges, detail sections
   ===================================================================== */

/* The assign form is a form, not a dashboard — full-bleed inputs on a wide screen
   are hard to scan and hard to fill. Capped, and centred under the hero. */
.hd-section.dg-assign { max-width: 860px; margin-left: auto; margin-right: auto; }

.dg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.dg-form-grid .full { grid-column: 1 / -1; }
.dg-form-grid .form-group { margin-bottom: 0; }

.dg-form-actions { display: flex; gap: 0.6rem; margin-top: 1.1rem; flex-wrap: wrap; }

/* status badges — same color language as the To-Do/status system:
   blue assigned, amber in-progress, purple submitted, green approved,
   orange rework, red rejected. Purple/orange get explicit dark-theme-safe pairs. */
.badge.dg-st-assigned  { background: var(--color-live-soft); color: var(--color-primary); }
.badge.dg-st-progress  { background: var(--color-warning-bg); color: var(--color-warning); }
.badge.dg-st-submitted { background: rgba(139, 92, 246, 0.16); color: #a78bfa; }
.badge.dg-st-approved  { background: var(--color-success-bg); color: var(--color-success); }
.badge.dg-st-rework    { background: rgba(234, 88, 12, 0.16); color: #fb923c; }
.badge.dg-st-rejected  { background: var(--color-danger-bg); color: var(--color-danger); }
body.light-theme .badge.dg-st-submitted { background: #f0e9fd; color: #6d28d9; }
body.light-theme .badge.dg-st-rework    { background: #feeadd; color: #c2410c; }

.badge.dg-pr-high   { background: var(--color-danger-bg); color: var(--color-danger); }
.badge.dg-pr-medium { background: var(--color-warning-bg); color: var(--color-warning); }
.badge.dg-pr-low    { background: var(--bg-input); color: var(--text-secondary); }

.dg-table td { vertical-align: middle; }
.dg-t-cell b { font-size: 0.86rem; }
.dg-t-cell small { display: block; color: var(--text-muted); font-size: 0.7rem; margin-top: 0.15rem; }

.dg-meta-row { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.5rem; }

.dg-sec { margin-bottom: 0.85rem; }
.dg-sec h4 { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.25rem; }
.dg-sec p { font-size: 0.86rem; line-height: 1.55; }

@media (max-width: 640px) {
    .dg-form-grid { grid-template-columns: 1fr; }
    .dg-form-actions .btn { flex: 1; justify-content: center; }
}

/* ==========================================================================
   WEEKLY LEASE SCHEDULE
   The CEO's planner: a clean, light page (no hero band) — title, owner chips,
   month nav, then either the monthly table or the weekly calendar. A week is
   two aligned 7-column grids stacked on each other: the day header row, and a
   bar track where each activity is placed with grid-column start/end so it
   literally spans the days it covers.
   ========================================================================== */
/* One width for the whole page: the heading, the tabs row and the cards below all
   share it, so the month navigator lines up with the right edge of the content
   instead of drifting off to the far side of the screen. */
.ls-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    max-width: 1080px;
}

.ls-head h2 {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 0.3rem;
}
.ls-head p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}
/* ---- tabs on the left, month navigator on the right, sharing one line and the
   underline beneath it. There is no owner filter — Akash and Mansi each sign in as
   themselves, so the page only ever shows the signed-in person's plan. ---- */
.ls-tabs-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
}

.ls-month-nav { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.4rem; }
.ls-month-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    background: var(--bg-glass);
    color: var(--text-secondary);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.ls-month-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.ls-month-btn .ic { font-size: 0.9rem; }
.ls-month-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text-primary);
    min-width: 9.5rem;
    text-align: center;
}
.ls-today-btn {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.ls-today-btn:hover { background: var(--surface); }

/* ---- underline tabs (Monthly activities / Weekly schedule). The row they sit in
   carries the underline, so the active tab's marker meets it. ---- */
.ls-tabs {
    display: flex;
    gap: 1.5rem;
}
.ls-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.6rem 0.15rem;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.ls-tab:hover { color: var(--text-primary); }
.ls-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.ls-panel { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ls-panel-actions { display: flex; justify-content: flex-end; }
/* Hint on the left, its button on the right, one line — the hint explains the
   button, so they read together rather than stacked. */
.ls-panel-actions.ls-actions-row {
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.ls-hint { color: var(--text-secondary); font-size: 0.88rem; margin: 0; }

.ls-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.ls-empty { padding: 2.75rem 1rem; text-align: center; }
.ls-empty h3 { margin: 0.6rem 0 0.3rem; font-size: 1.05rem; }
.ls-empty p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }

/* ---- monthly table ----
   A compact widget rather than a full-bleed table: a month is a short list, and
   stretching five narrow columns across a wide screen left the activity name
   marooned from its dates. */
/* The list and a summary side by side: the table on its own left a wide page half
   empty, and the summary is where the three status colours get explained. */
.ls-monthly {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    align-items: start;
    gap: 1rem;
    min-width: 0;
}
.ls-monthly.is-empty { grid-template-columns: minmax(0, 1fr); max-width: 840px; }
.ls-monthly-main { overflow: hidden; }

/* ---- card header: what this is, and the one action it takes ---- */
.ls-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.ls-card-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ls-card-head p { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--text-muted); }

/* ---- summary / colour key ---- */
.ls-monthly-side { padding: 1rem; }
.ls-monthly-side h4 {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ls-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ls-legend li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.ls-legend li b {
    margin-left: auto;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ls-side-note {
    margin: 0.9rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.ls-empty-action { margin-top: 1rem; }
.ls-table { width: 100%; }
.ls-table th { white-space: nowrap; }
/* Tighter cells than the admin tables this borrows from — the card is narrow now. */
.ls-monthly .ls-table th,
.ls-monthly .ls-table td { padding: 0.65rem 0.85rem; }
.ls-monthly .ls-table tbody tr { transition: background var(--transition-fast); }
.ls-monthly .ls-table tbody tr:hover { background: var(--surface); }
/* The last row's rule would double up with the card's own bottom edge. */
.ls-monthly .ls-table tbody tr:last-child td { border-bottom: none; }
/* The activity name takes the slack; everything else is as wide as its content. */
.ls-monthly .ls-title-cell { width: 100%; min-width: 11rem; }
/* The table's own container carries a card's border and shadow, which read as a
   second card inside this one — flatten it so the widget is a single surface. It
   keeps its horizontal scroll for narrow screens. */
.ls-monthly .table-container {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.ls-title-cell b { display: block; font-weight: 700; color: var(--text-primary); }
.ls-title-cell small {
    display: block;
    margin-top: 0.15rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.ls-table tr.is-done .ls-title-cell b { text-decoration: line-through; color: var(--text-muted); }
.ls-act-cell { text-align: right; white-space: nowrap; }
.ls-alloc { font-size: 0.85rem; color: var(--text-primary); white-space: nowrap; }
.ls-alloc.muted { color: var(--text-muted); }

.ls-pri,
.ls-status {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.ls-pri-high   { background: var(--color-danger-bg);  color: var(--color-danger); }
.ls-pri-medium { background: var(--color-warning-bg); color: var(--color-warning); }
.ls-pri-low    { background: var(--surface-strong);   color: var(--text-secondary); }
.ls-st-planned     { background: var(--surface-strong);   color: var(--text-secondary); }
.ls-st-in-progress { background: var(--color-info-bg);    color: var(--color-info); }
.ls-st-done        { background: var(--color-success-bg); color: var(--color-success); }

/* ---- the add/edit modal's calendar: pick the day, see what's already on it ---- */
.ls-link-btn {
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
}
.ls-link-btn:hover { color: var(--color-primary-hover); }

/* The chosen date, shown next to the "Choose the day" label so the selection is
   readable without decoding the grid. */
.ls-pick-summary {
    float: right;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}
.ls-pick-summary.is-set { color: var(--color-primary); }

.ls-pick {
    border: 1px solid var(--border-color);
    border-radius: var(--r-sm);
    padding: 0.6rem 0.7rem 0.7rem;
    background: var(--bg-glass-secondary);
}
.ls-pick-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.ls-pick-month {
    flex: 1;
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ls-pick-dow,
.ls-pick-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}
.ls-pick-dow { margin-bottom: 0.2rem; }
.ls-pick-dow span {
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.ls-pick-day {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    background: transparent;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.ls-pick-day:hover { background: var(--surface-hover); }
/* Neighbouring months' days stay clickable — an activity may well run across the
   month boundary — but read as secondary. */
.ls-pick-day.is-out { color: var(--text-disabled); }
.ls-pick-day.is-today { border-color: var(--color-primary); }
.ls-pick-day.is-sel { background: var(--color-live-soft); color: var(--text-primary); }
.ls-pick-day.is-start,
.ls-pick-day.is-end { background: var(--color-primary); color: #fff; }
.ls-pick-day.is-open { outline: 2px solid var(--color-primary); outline-offset: -2px; }
/* A day that already has something on it — the picker's only signal of a clash. */
.ls-pick-dot {
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
}
.ls-pick-day.is-start .ls-pick-dot,
.ls-pick-day.is-end .ls-pick-dot { background: #fff; }

/* ---- what is already on the clicked day ---- */
.ls-pick-day-info {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--r-sm);
    background: var(--surface);
}
.ls-pick-day-info h5 {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ls-pick-day-info p { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.ls-pick-day-info ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ls-pick-day-info li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; }
.ls-pick-day-info li.is-done .ls-pick-day-title { text-decoration: line-through; color: var(--text-muted); }
.ls-pick-day-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-pick-day-span { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }

/* ---- weekly schedule: a card per week, activities drawn as bars ---- */
.ls-calview-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border-color);
    background: var(--bg-glass);
    color: var(--color-primary);
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.ls-calview-btn:hover { background: var(--surface); border-color: var(--border-hover); }
.ls-calview-btn .ic { font-size: 0.85rem; }

/* Five week cards have to fit a screen between them, so this view is deliberately
   tight — same information, less air. Matches the monthly widget's width so the two
   tabs don't jump about when you switch. */
.ls-weekly {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.ls-week { padding: 0.5rem 0.8rem 0.55rem; }
.ls-week-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.ls-week-title {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.ls-week-add {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.ls-week-add:hover { background: var(--surface); border-color: var(--border-hover); }
.ls-week-add .ic { font-size: 0.65rem; }

/* Seven columns is the smallest a week can honestly be drawn in — below ~640px
   the card scrolls sideways rather than crushing the day cells. */
.ls-week-scroll { overflow-x: auto; }
.ls-week-inner { min-width: 620px; }
.ls-days,
.ls-bars {
    display: grid;
    grid-template-columns: repeat(var(--ls-cols, 7), minmax(0, 1fr));
    gap: 0.35rem;
}
.ls-days { padding-bottom: 0.4rem; border-bottom: 1px solid var(--border-color); }
/* Weekday and date on one line — stacking them cost a row of height per week. */
.ls-day { display: flex; align-items: baseline; justify-content: center; gap: 0.3rem; }
.ls-dow {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.ls-dnum {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
}
.ls-dnum.is-today { background: var(--color-primary); color: #fff; }

.ls-bars { padding-top: 0.45rem; row-gap: 0.28rem; }
.ls-bar {
    min-width: 0;
    border: none;
    border-radius: var(--r-pill);
    padding: 0.26rem 0.7rem;
    text-align: left;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter var(--transition-fast), transform var(--transition-fast);
}
.ls-bar:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ls-bar-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A span that continues into the next/previous week is squared off on that side,
   so a clipped segment never reads as a bar that starts or ends there. */
.ls-bar.cut-left  { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.ls-bar.cut-right { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
/* Done already reads as green, so it is struck through but not faded — fading it too
   muddied the colour that carries the meaning. */
.ls-bar.is-done .ls-bar-text { text-decoration: line-through; }

.ls-week-empty {
    margin: 0;
    padding: 0.5rem 0 0.1rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* ---- the full-screen month, opened by "Calendar view" ---- */
/* A floating window, not a modal: no dimming, and the layer itself lets clicks
   through so the weekly schedule underneath stays readable and usable while the
   calendar is open. Only the sheet catches the pointer. */
.ls-cal-overlay {
    position: fixed;
    inset: 0;
    /* Below the task form (--z-modal) and toasts: the calendar stays open behind the
       form so you watch the day you just edited change when it closes. */
    z-index: var(--z-drawer);
    background: transparent;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.ls-cal-sheet { pointer-events: auto; }
/* Takes the full window height so the month gets as many rows on screen as will
   fit, and whatever is left over scrolls inside the body below. */
.ls-cal-sheet {
    position: relative;
    width: 100%;
    max-width: 1100px;
    /* Tall enough for all six week rows, but capped so the page it floats over is
       still visible around it on a normal screen. */
    height: min(100%, 44rem);
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
    border: 1px solid var(--border-hover);
    border-radius: var(--r-md);
    /* Its own shadow is what separates it from the page now that nothing dims. */
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
/* No transition while dragging, or the sheet lags a frame behind the pointer. */
.ls-cal-sheet.is-resizing { user-select: none; }

/* ---- the bottom-left resize grip ---- */
.ls-cal-resize {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    cursor: nesw-resize;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom-left-radius: var(--r-md);
    touch-action: none;      /* the pointer drag owns the gesture, not the scroller */
}
.ls-cal-resize:hover,
.ls-cal-resize:focus-visible { color: var(--color-primary); background: var(--surface); }
.ls-cal-resize svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* The header doubles as the drag bar — hold it anywhere that isn't a button. */
.ls-cal-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.ls-cal-sheet-head:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.ls-cal-sheet-head button { cursor: pointer; }
.ls-cal-sheet.is-moving .ls-cal-sheet-head { cursor: grabbing; }
.ls-cal-sheet.is-moving { user-select: none; }
.ls-cal-sheet-body {
    flex: 1;
    min-height: 0;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* Rows keep their natural height — squeezing six weeks into the window clipped the
   chips in half. The body scrolls instead, and the weekday header stays put at the
   top of the scroll so you always know which column you are looking at.
   The card's own overflow:hidden has to go here: an overflow-hidden ancestor becomes
   the sticky element's scroll box, which would kill the sticky. */
.ls-cal-sheet-body .ls-cal { overflow: visible; }
.ls-cal-sheet-body .ls-cal-dow {
    position: sticky;
    top: -1rem;              /* cancels the body's padding so it sits flush on scroll */
    z-index: 1;
    background: var(--bg-glass);
}
/* When the sheet is tall the six rows share the extra space; when it is short they
   hold their readable minimum and the body scrolls. */
.ls-cal-sheet-body .ls-cal {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ls-cal-sheet-body .ls-cal-grid { flex: 1; grid-auto-rows: minmax(5.5rem, 1fr); }

/* ---- a sheet dragged narrow: same seven columns, tighter type ---- */
.ls-cal-sheet.is-compact .ls-cal-sheet-body { padding: 0.6rem; }
.ls-cal-sheet.is-compact .ls-cal-sheet-body .ls-cal-dow { top: -0.6rem; }
.ls-cal-sheet.is-compact .ls-cal-cell { padding: 0.3rem 0.25rem; }
.ls-cal-sheet.is-compact .ls-cal-sheet-body .ls-cal-grid { grid-auto-rows: minmax(4.25rem, 1fr); }
.ls-cal-sheet.is-compact .ls-cal-chip { font-size: 0.64rem; padding: 0.12rem 0.3rem; }
.ls-cal-sheet.is-compact .ls-cal-num { font-size: 0.74rem; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; }
.ls-cal-sheet.is-compact .ls-cal-more { font-size: 0.62rem; }

.ls-cal-sheet.is-tiny .ls-hint { display: none; }
.ls-cal-sheet.is-tiny .ls-cal-dow span { font-size: 0.56rem; letter-spacing: 0.02em; }
.ls-cal-sheet.is-tiny .ls-cal-sheet-body .ls-cal-grid { grid-auto-rows: minmax(3.4rem, 1fr); }
.ls-cal-sheet.is-tiny .ls-cal-chip { font-size: 0.58rem; padding: 0.08rem 0.22rem; }
.ls-cal-sheet.is-tiny .ls-cal-num { font-size: 0.68rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.2rem; }
.ls-cal-sheet.is-tiny .ls-month-label { min-width: 6.5rem; font-size: 0.85rem; }

/* ---- month calendar: the whole month as one grid, activities as chips ---- */
.ls-cal { padding: 0; overflow: hidden; }
.ls-cal-dow,
.ls-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.ls-cal-dow {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
}
.ls-cal-dow span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
/* Cells carry their own right/bottom hairline and the outer edge is closed by the
   card's border, so the grid reads as one calendar rather than 42 little boxes. */
.ls-cal-cell {
    min-height: 5.5rem;
    padding: 0.4rem 0.35rem 0.45rem;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.ls-cal-cell:nth-child(7n) { border-right: none; }
.ls-cal-grid > .ls-cal-cell:nth-last-child(-n + 7) { border-bottom: none; }
.ls-cal-cell:hover { background: var(--surface); }
.ls-cal-cell.is-expanded { background: var(--surface); }
/* Neighbouring months are shown so the weeks are full rows, but they are not this
   month's business — dimmed and not clickable. */
.ls-cal-cell.is-out { opacity: 0.35; cursor: default; }
.ls-cal-cell.is-out:hover { background: transparent; }
.ls-cal-num {
    align-self: center;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.ls-cal-num.is-today { background: var(--color-primary); color: #fff; }
.ls-cal-chips { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ls-cal-chip {
    min-width: 0;
    border: none;
    border-radius: var(--r-xs);
    padding: 0.2rem 0.45rem;
    text-align: left;
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: filter var(--transition-fast);
}
.ls-cal-chip:hover { filter: brightness(1.12); }
.ls-cal-chip.is-done { text-decoration: line-through; }
.ls-cal-more {
    border: none;
    background: none;
    padding: 0 0.2rem;
    text-align: left;
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
}
.ls-cal-more:hover { color: var(--text-primary); text-decoration: underline; }

/* Status: soft purple for planned, brand blue once it is moving, green when done.
   Blue and green take white text; the purple is too light for that, so it carries
   deep violet text instead — same shape, still readable. */
.ls-b-planned  { background: #b39cf5; }
.ls-b-progress { background: #245bb0; }
.ls-b-done     { background: #17803f; }
/* Compound selectors so this beats the plain white the bar and chip rules set,
   wherever those happen to sit in the file. */
.ls-bar.ls-b-planned,
.ls-cal-chip.ls-b-planned { color: #241259; }

/* ---- "not scheduled yet" tray under the weeks ---- */
.ls-unscheduled { padding: 0.7rem 0.85rem 0.8rem; }
.ls-unscheduled h4 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.ls-unsched-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ls-unsched {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px dashed var(--border-hover);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.ls-unsched:hover { background: var(--surface); border-style: solid; }
.ls-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex-shrink: 0; }

/* ---- dictate into a field ----
   The mic sits inside the box, top-right, so it works the same on the one-line
   Activity input and the taller Remarks box. */
.input-with-mic { position: relative; }
.input-with-mic > input,
.input-with-mic > textarea { padding-right: 2.6rem; }

/* Activity/Remarks fields on the Lease Schedule form — grows taller while dictating (or
   typing) a long sentence instead of the text scrolling out of view (see lsAutoGrow).
   resize:none since the height is set by script, not the user dragging a handle. */
.ls-growable-field {
    resize: none;
    overflow: hidden;
    transition: height 0.12s ease;
}
.mic-btn {
    position: absolute;
    top: 0.4rem;
    right: 0.45rem;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.mic-btn:hover { color: var(--color-primary); background: var(--surface); }
.mic-btn .ic { font-size: 0.95rem; }
/* Listening: the button goes live and pulses, so it is obvious the microphone is
   open and how to switch it off again. */
.mic-btn.is-listening {
    color: #fff;
    background: var(--color-danger);
    border-color: var(--color-danger);
    animation: mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--color-danger-bg); }
    50%      { box-shadow: 0 0 0 5px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .mic-btn.is-listening { animation: none; }
}

/* ---- add / edit modal ---- */
.ls-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}
.ls-modal-footer { display: flex; align-items: center; gap: 0.6rem; }
.ls-modal-spacer { flex: 1; }

@media (max-width: 640px) {
    .ls-head h2 { font-size: 1.5rem; }
    /* Not enough width for tabs and the month navigator side by side — the navigator
       wraps below them and spans the row. */
    .ls-tabs-row { align-items: stretch; }
    .ls-month-nav { justify-content: center; width: 100%; padding-bottom: 0.5rem; }
    .ls-month-label { min-width: 8rem; }
    .ls-modal-grid { grid-template-columns: 1fr; }
    /* No room for the summary beside the list — it drops underneath. */
    .ls-monthly { grid-template-columns: minmax(0, 1fr); }
    .ls-panel-actions .btn { flex: 1; justify-content: center; }
    /* Too narrow for hint-and-button side by side: the button drops below and the
       hint keeps the full width. */
    .ls-panel-actions.ls-actions-row { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .ls-actions-row .ls-calview-btn { justify-content: center; }
    /* Full-bleed sheet on a phone — a 1.5rem inset wastes width the month needs. */
    .ls-cal-overlay { padding: 0; }
    .ls-cal-sheet { max-width: none; height: 100%; border-radius: 0; border: none; }
    .ls-cal-sheet-body { padding: 0.6rem; }
    /* Both calendars keep their 7 columns on a phone — smaller type rather than
       sideways scrolling, so a whole month is always visible and pickable. */
    .ls-cal-cell { min-height: 4.25rem; padding: 0.3rem 0.2rem; }
    .ls-cal-num { font-size: 0.74rem; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; }
    .ls-cal-chip { font-size: 0.62rem; padding: 0.12rem 0.25rem; }
    .ls-cal-more { font-size: 0.62rem; }
    .ls-cal-dow span { font-size: 0.6rem; letter-spacing: 0.02em; }
    .ls-pick-day { font-size: 0.74rem; }
    .ls-pick-dow span { font-size: 0.56rem; letter-spacing: 0.02em; }
}

/* ==========================================================================
   ADMIN "VIEW AS USER" BANNER
   Deliberately loud and pinned to the top of the content area: forgetting whose
   account you are in is the one failure mode this feature has.
   ========================================================================== */
.imp-banner {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.imp-banner .ic { flex-shrink: 0; font-size: 1rem; }
.imp-text { flex: 1; min-width: 0; }
.imp-text b { font-weight: 800; }
.imp-exit {
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.35);
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.25rem 0.8rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.imp-exit:hover { background: rgba(0, 0, 0, 0.18); }

@media (max-width: 640px) {
    .imp-banner { font-size: 0.78rem; padding: 0.5rem 0.7rem; }
}