/*
 * AssistDesk Brand Stylesheet — single source of truth
 * ----------------------------------------------------
 * Brand: Corporate Blue (#1976d2) + white, set in Roboto.
 * Logo lockup: Material `support_agent` icon + "AssistDesk" wordmark.
 *
 * Two-blue system (intentional):
 *   --brand-blue        #1976d2  Main brand color. Logo, icons, accents, borders, headings.
 *                                Mid-tone; do NOT put white OR black body text directly on it.
 *   --brand-blue-accent #1565c0  Darker, color-matched. Button BODIES. White text passes WCAG AA (~5.8:1).
 *   --brand-blue-deep   #0d47a1  Deepest. Button hover, on-container text, strong emphasis (white ~8:1).
 *   --brand-blue-container #e3f2fd  Pale tint for backgrounds/containers (dark text on top).
 *
 * Linked from every page as <link rel="stylesheet" href="/brand.css">.
 * Public-dir assets are copied to the site root by Vite, so /brand.css resolves
 * identically from root pages, /auth/, and /docs/.
 */

/* Self-hosted fonts (#278) — no third-party (Google) requests, so no visitor
 * IPs leak to Google and no cookie-consent trigger is introduced. Files live in
 * /fonts (public/), sourced from the @fontsource / material-icons npm packages. */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/roboto-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/roboto-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/fraunces-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; font-display: block; src: url('/fonts/material-icons.woff2') format('woff2'); }

/* Material Icons base class (was provided by Google's stylesheet before). */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

:root {
    /* --- Two-blue brand system --- */
    --brand-blue: #1976d2;
    --brand-blue-accent: #1565c0;
    --brand-blue-deep: #0d47a1;
    --brand-blue-container: #e3f2fd;

    /* --- Material Design 3 token names (kept for existing page CSS) --- */
    --md-sys-color-primary: #1976d2;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #e3f2fd;
    --md-sys-color-on-primary-container: #0d47a1;
    --md-sys-color-secondary: #546e7a;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #eceff1;
    --md-sys-color-on-secondary-container: #263238;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #1c1b1f;
    --md-sys-color-surface-variant: #f5f5f5;
    --md-sys-color-on-surface-variant: #49454f;
    --md-sys-color-outline: #79747e;
    --md-sys-color-outline-variant: #cac4d0;
    --md-sys-color-success: #2e7d32;
    --md-sys-color-warning: #f57c00;
    --md-sys-color-error: #d32f2f;
    --md-sys-color-on-error: #ffffff;

    /* --- Tertiary + semantic container surfaces (#196) ---
       Shared foundation for color-coded UI (stat cards #202, dark mode #208).
       Container values align with the existing .chip-* palette; tertiary matches
       the email design system's Cait/AI violet. Additive — nothing renders
       differently until a surface opts in. */
    --md-sys-color-tertiary: #5e35b1;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ede7f6;
    --md-sys-color-on-tertiary-container: #4527a0;
    --md-sys-color-success-container: #e6f4ea;
    --md-sys-color-on-success-container: #1e7e34;
    --md-sys-color-warning-container: #fff3e0;
    --md-sys-color-on-warning-container: #b35600;
    --md-sys-color-error-container: #fdecea;
    --md-sys-color-on-error-container: #c62828;

    /* --- Shape aliases (#194) --- map the MD3 shape names used by components to
       the existing radius scale, so both naming conventions resolve. */
    --md-shape-small: var(--radius-sm);
    --md-shape-medium: var(--radius-md);
    --md-shape-large: var(--radius-lg);
    --md-shape-full: 9999px;

    --brand-font: 'Roboto', sans-serif;

    /* === Editorial-premium direction tokens (additive; non-breaking) ===
       New surfaces opt in via these; existing pages keep --md-sys-color-* as-is. */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --canvas: #faf7f2;          /* warm off-white page background */
    --ink: #1f2a37;             /* deep slate text (softer than pure black) */
    --ink-muted: #5b6573;       /* secondary text */
    --accent: #c2703d;          /* warm terracotta — editorial highlight */
    --accent-ink: #8a4f2a;      /* darker accent for text/borders */
    --accent-tint: #f6ece4;     /* pale warm tint surface */
    --hairline: #e7e0d6;        /* warm divider line */

    /* Elevation — soft, warm-tinted layered shadows */
    --elev-1: 0 1px 2px rgba(31,42,55,.06), 0 1px 3px rgba(31,42,55,.07);
    --elev-2: 0 6px 18px rgba(31,42,55,.08);
    --elev-3: 0 18px 48px rgba(31,42,55,.14);

    /* Shape scale — varied corner radii */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;

    /* Motion */
    --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
    --dur-2: 320ms;
}

/* ===========================================================================
 * Dark theme (#208) — canonical token set, applied when <html data-theme="dark">.
 * MD3-style tone-based surfaces (a dark blue-grey, not flat black) plus dark
 * variants of the editorial tokens, so any surface that reads from brand.css
 * tokens goes dark automatically. Pages that define their own :root tokens
 * locally also carry a matching [data-theme="dark"] block.
 * ======================================================================== */
:root[data-theme="dark"],
[data-theme="dark"] {
    /* Primary / secondary */
    --md-sys-color-primary: #aac7ff;
    --md-sys-color-on-primary: #002f65;
    --md-sys-color-primary-container: #003a78;
    --md-sys-color-on-primary-container: #d6e3ff;
    --md-sys-color-secondary: #bec6dc;
    --md-sys-color-on-secondary: #283041;
    --md-sys-color-secondary-container: #3f4759;
    --md-sys-color-on-secondary-container: #dae2f9;

    /* Surfaces — tone-based, not #000 */
    --md-sys-color-surface: #1a1c1e;
    --md-sys-color-on-surface: #e3e2e6;
    --md-sys-color-surface-variant: #23262b;
    --md-sys-color-on-surface-variant: #c4c6cf;
    --md-sys-color-outline: #8e9099;
    --md-sys-color-outline-variant: #3c3f46;

    /* Status + their containers */
    --md-sys-color-success: #6ddf8b;
    --md-sys-color-warning: #ffb951;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-success-container: #11401f;
    --md-sys-color-on-success-container: #88f8a6;
    --md-sys-color-warning-container: #4a3000;
    --md-sys-color-on-warning-container: #ffdca3;
    --md-sys-color-error-container: #7a1f1a;
    --md-sys-color-on-error-container: #ffdad6;

    /* Tertiary (AI/Cait violet) */
    --md-sys-color-tertiary: #d7baff;
    --md-sys-color-on-tertiary: #3b0083;
    --md-sys-color-tertiary-container: #4f1f97;
    --md-sys-color-on-tertiary-container: #eddeff;

    /* Editorial tokens — dark variants */
    --canvas: #16181c;
    --ink: #e6e7ea;
    --ink-muted: #a3a8b3;
    --accent: #e0915f;
    --accent-ink: #eaa877;
    --accent-tint: #2a211b;
    --hairline: #2d3037;

    /* Elevation reads via deeper shadows on dark surfaces. */
    --elev-1: 0 1px 2px rgba(0,0,0,.45);
    --elev-2: 0 6px 18px rgba(0,0,0,.5);
    --elev-3: 0 18px 48px rgba(0,0,0,.6);

    color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * Logo lockup — icon + wordmark, used identically on every page.
 * Markup:  <a class="logo"><span class="material-icons">support_agent</span>AssistDesk</a>
 * ------------------------------------------------------------------------- */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--brand-font);
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-blue);
    text-decoration: none;
    transition: color 0.2s;
}

.logo .material-icons {
    font-size: 28px;
    color: var(--brand-blue);
    transition: color 0.2s;
}

.logo:hover,
.logo:hover .material-icons {
    color: var(--brand-blue-deep);
}

/* ---------------------------------------------------------------------------
 * Buttons — bodies use the darker accent blue for legible white text.
 * ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: var(--brand-font);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

/* Compound selectors (.btn.btn-primary) so button text colors win against
 * page rules like `.nav-links a { color: ... }` that target nested anchors.
 * Rule: a blue/accent fill always pairs with white text — never dark text. */
.btn.btn-primary {
    background: var(--brand-blue-accent);
    color: #ffffff;
}

.btn.btn-primary:hover {
    background: var(--brand-blue-deep);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 71, 161, 0.3);
}

.btn.btn-secondary {
    background: transparent;
    color: var(--brand-blue-accent);
    border: 2px solid var(--brand-blue);
}

.btn.btn-secondary:hover {
    background: var(--brand-blue-container);
    color: var(--brand-blue-deep);
}

/* ---------------------------------------------------------------------------
 * Feature / decorative icons (replaces emoji on marketing pages).
 * Markup:  <span class="material-icons feature-icon">support_agent</span>
 * ------------------------------------------------------------------------- */
.feature-icon {
    color: var(--brand-blue);
    font-size: 48px;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Modal / popup component — shared so every dialog matches the brand.
 * Markup:
 *   <div class="modal"><div class="modal-content">
 *     <div class="modal-header"><h2>…</h2><button class="close">&times;</button></div>
 *     <div class="modal-body">…</div>
 *   </div></div>
 * Toggle visibility by adding/removing the `.open` class (or inline display).
 * ------------------------------------------------------------------------- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    /* Brand-tinted scrim — warmer than neutral black (#204). Solid fallback
       first so browsers without color-mix() still get a proper scrim. */
    background: rgba(0, 0, 0, 0.55);
    background: color-mix(in srgb, rgba(0, 0, 0, 0.55) 86%, var(--brand-blue) 14%);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal.open,
.modal[style*="display: flex"] {
    display: flex;
    /* Scrim fades in when the dialog is shown. */
    animation: ad-scrim-in var(--dur-2) var(--ease-standard);
}

.modal-content {
    background: var(--md-sys-color-surface);
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--elev-3);
    /* Content expands into focus (scale + fade). */
    animation: ad-modal-enter var(--dur-3) var(--ease-decelerate);
}

/* Exit animation — opt in by adding `.closing` to the `.modal` before hiding it,
   then remove the element / `.open` on `animationend`. Non-breaking: dialogs that
   just toggle display still work, they simply skip the exit transition. */
.modal.closing {
    animation: ad-scrim-out var(--dur-2) var(--ease-accelerate) forwards;
}
.modal.closing .modal-content {
    animation: ad-modal-exit var(--dur-2) var(--ease-accelerate) forwards;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface);
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.modal-body {
    padding: 24px;
}

/* Action bar — right-aligned buttons with a divider, mirrors the header. */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Close affordance — circular icon-button hover, consistent with .btn-icon. */
.modal .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    transition: background var(--dur-1) var(--ease-standard),
                color var(--dur-1) var(--ease-standard);
}

.modal .close:hover {
    background: var(--md-sys-color-surface-variant);
    color: var(--brand-blue);
}

@keyframes ad-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ad-scrim-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ad-modal-enter {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: none; }
}
@keyframes ad-modal-exit {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.96); }
}

/* ===========================================================================
 * Editorial polish — additive, opt-in design-system classes (#198–#201).
 * Existing markup is unaffected; pages adopt these classes incrementally.
 * ======================================================================== */

/* --- #198 Motion: easing curves + micro-animations --------------------- */
:root {
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-decelerate: cubic-bezier(0, 0, 0, 1);
    --ease-accelerate: cubic-bezier(.3, 0, 1, 1);
    --dur-1: 160ms;
    --dur-3: 480ms;
}

@keyframes ad-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ad-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ad-spin { to { transform: rotate(360deg); } }

.u-fade-in { animation: ad-fade-in var(--dur-2) var(--ease-standard) both; }
.u-rise-in { animation: ad-rise-in var(--dur-2) var(--ease-standard) both; }

/* Subtle interactive lift — reusable on cards, rows, stat tiles. */
.u-hover-lift {
    transition: transform var(--dur-1) var(--ease-standard),
                box-shadow var(--dur-1) var(--ease-standard);
}
.u-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }

/* Accessibility: honor reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- #199 Button variants: tonal, icon-button, loading ----------------- */
.btn.btn-tonal {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.btn.btn-tonal:hover { background: #d6e9fb; color: var(--brand-blue-deep); }

/* Icon-only round button — for toolbars, table-row actions, close affordances. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    transition: background var(--dur-1) var(--ease-standard),
                color var(--dur-1) var(--ease-standard);
}
.btn-icon:hover { background: var(--md-sys-color-surface-variant); color: var(--brand-blue); }
.btn-icon:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

/* Loading state — add `.is-loading` to any `.btn`: hides the label, shows a
 * spinner, blocks interaction. */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ad-spin 600ms linear infinite;
}
.btn.btn-secondary.is-loading::after,
.btn.btn-tonal.is-loading::after {
    border-color: var(--brand-blue-accent);
    border-top-color: transparent;
}

/* --- #200 Status chips / badges: pill shape + semantic fills ----------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--brand-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
}
.chip .material-icons { font-size: 14px; }
.chip-success { background: #e6f4ea; color: #1e7e34; }
.chip-warning { background: #fff3e0; color: #b35600; }
.chip-error   { background: #fdecea; color: #c62828; }
.chip-info    { background: var(--md-sys-color-primary-container); color: var(--brand-blue-deep); }
.chip-neutral { background: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant); }

/* --- #201 Form inputs: focus ring, helper text, error states ----------- */
.form-input, .form-select, .form-textarea {
    transition: border-color var(--dur-1) var(--ease-standard),
                box-shadow var(--dur-1) var(--ease-standard);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .18);
}

/* Field wrapper: <div class="field"> label + input + .field-help / .field-error-text */
.field { margin-bottom: 16px; }
.field-help {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}
.field-error-text {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: var(--md-sys-color-error);
}

/* Error state — add `.has-error` to `.field` (or `.is-invalid` to the input). */
.field.has-error .form-input,
.form-input.is-invalid {
    border-color: var(--md-sys-color-error);
}
.field.has-error .form-input:focus,
.form-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(211, 47, 47, .18);
}
.field.has-error .field-error-text { display: block; }

/* --- #206 Skeleton loaders + dot loader -------------------------------- */
/* Shimmer placeholders that match the shape of incoming content, so loading
   feels like content appearing rather than waiting for a spinner. */
@keyframes ad-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton {
    background: linear-gradient(
        90deg,
        var(--md-sys-color-surface-variant) 25%,
        #ececf2 50%,
        var(--md-sys-color-surface-variant) 75%
    );
    background-size: 200% 100%;
    animation: ad-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton-text  { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-card  { height: 80px; border-radius: var(--radius-md); }
.skeleton-badge { height: 24px; width: 72px; border-radius: 999px; }

/* Three-dot pulse — for standalone action pages where a skeleton doesn't fit
   (e.g. ticket-action.html), a calmer alternative to a spinning ring. */
@keyframes ad-dot-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}
.dot-loader { display: inline-flex; gap: 8px; align-items: center; }
.dot-loader span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-blue);
    animation: ad-dot-pulse 1.4s var(--ease-standard) infinite both;
}
.dot-loader span:nth-child(2) { animation-delay: 0.2s; }
.dot-loader span:nth-child(3) { animation-delay: 0.4s; }

/* --- #205 Data tables: sticky headers, hover elevation, sort affordances --- */
/* Opt-in: add `.data-table` to a <table>. Existing tables are unaffected. */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--md-sys-color-surface-variant);
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.data-table thead th:first-child { border-top-left-radius: var(--radius-sm); }
.data-table thead th:last-child  { border-top-right-radius: var(--radius-sm); }

.data-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface);
}
/* Subtle zebra striping (static tint — avoids color-mix support gaps). */
.data-table tbody tr:nth-child(even) { background: rgba(25, 118, 210, 0.022); }
/* Hover lifts the row instead of just shading it. */
.data-table tbody tr {
    transition: box-shadow var(--dur-1) var(--ease-standard),
                background var(--dur-1) var(--ease-standard);
}
.data-table tbody tr:hover {
    position: relative;
    z-index: 1;
    background: rgba(25, 118, 210, 0.05);
    box-shadow: var(--elev-1);
}

/* Sortable headers — render a Material Icons glyph via the self-hosted font. */
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable::after {
    content: 'unfold_more';
    font-family: 'Material Icons';
    /* Reset the header's uppercase + letter-spacing, which would otherwise break
       the Material Icons ligature so the glyph renders as literal text. */
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
    font-size: 16px;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.45;
    transition: opacity var(--dur-1) var(--ease-standard);
}
.data-table th.sort-asc::after  { content: 'arrow_upward';   opacity: 1; color: var(--brand-blue); }
.data-table th.sort-desc::after { content: 'arrow_downward'; opacity: 1; color: var(--brand-blue); }

/* Empty state — illustration-sized icon + muted copy, centered. */
.data-table-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--md-sys-color-on-surface-variant);
}
.data-table-empty .material-icons {
    display: block;
    margin: 0 auto 12px;
    font-size: 48px;
    opacity: 0.4;
}