/* ---------------------------------------------------------------------------
   Atkinson Hyperlegible — self-hosted

   Designed by the Braille Institute for legibility: letterforms that are hard
   to confuse with one another (I/l/1, O/0, b/d), which matters for a console
   full of UUIDs, account numbers and monograms.

   SELF-HOSTED DELIBERATELY. The console already pulls three stylesheets from
   two external origins on every page load; this replaces one of them rather
   than adding a fourth. It also means the typeface renders on an internal
   network with no route to fonts.gstatic.com.

   Licence: SIL Open Font License 1.1 — see static/fonts/OFL.txt.
   Files are Google's subsetted woff2 builds; unicode-range is preserved so a
   browser fetches only the subset it needs (latin ~17KB, latin-ext ~9KB).

   font-display: swap — text renders immediately in the fallback and swaps when
   the font arrives, rather than blocking on it.
   --------------------------------------------------------------------------- */

/* latin */
@font-face {
    font-family: 'Atkinson Hyperlegible Mono';
    font-style: normal;
    /* A RANGE, not two faces: Google serves one byte-identical variable file for
       400 and 700, so declaring both discretely would ship the same bytes twice
       under different names. */
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/atkinson-hyperlegible-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Atkinson Hyperlegible Mono';
    font-style: normal;
    /* A RANGE, not two faces: Google serves one byte-identical variable file for
       400 and 700, so declaring both discretely would ship the same bytes twice
       under different names. */
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/atkinson-hyperlegible-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/atkinson-hyperlegible-400-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/atkinson-hyperlegible-400-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/atkinson-hyperlegible-700-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/atkinson-hyperlegible-700-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/atkinson-hyperlegible-400-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/atkinson-hyperlegible-400-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/atkinson-hyperlegible-700-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/atkinson-hyperlegible-700-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Primary colors */
    --md-sys-color-primary: #1976d2;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d1e4ff;
    --md-sys-color-on-primary-container: #001d36;
    
    /* Secondary colors */
    --md-sys-color-secondary: #565e71;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #dae2f9;
    --md-sys-color-on-secondary-container: #131c2b;
    
    /* Tertiary colors */
    --md-sys-color-tertiary: #705574;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #fad8fd;
    --md-sys-color-on-tertiary-container: #29132d;
    
    /* Error colors */
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    
    /* Background colors */
    --md-sys-color-background: #fafafa;
    --md-sys-color-on-background: #1a1c1e;
    
    /* Surface colors */
    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #1c1b1f;
    --md-sys-color-surface-variant: #f5f5f5;
    --md-sys-color-on-surface-variant: #44474f;
    
    /* Surface container colors */
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f4f4f7;
    --md-sys-color-surface-container: #eeeef1;
    --md-sys-color-surface-container-high: #e8e8eb;
    --md-sys-color-surface-container-highest: #e3e2e6;
    
    /* Outline colors */
    --md-sys-color-outline: #79747e;
    --md-sys-color-outline-variant: #c4c7c5;
    
    /* Elevation levels */
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-level4: 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-level5: 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.3);
    
    /* Shape/Border radius tokens */
    --md-sys-shape-corner-none: 0;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;
    
    /* Typography scale - Display */
    --md-sys-typescale-display-large-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-display-large-font-weight: 400;
    --md-sys-typescale-display-large-font-size: 57px;
    --md-sys-typescale-display-large-line-height: 64px;
    --md-sys-typescale-display-large-letter-spacing: -0.25px;
    
    --md-sys-typescale-display-medium-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-display-medium-font-weight: 400;
    --md-sys-typescale-display-medium-font-size: 45px;
    --md-sys-typescale-display-medium-line-height: 52px;
    --md-sys-typescale-display-medium-letter-spacing: 0;
    
    --md-sys-typescale-display-small-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-display-small-font-weight: 400;
    --md-sys-typescale-display-small-font-size: 36px;
    --md-sys-typescale-display-small-line-height: 44px;
    --md-sys-typescale-display-small-letter-spacing: 0;
    
    /* Typography scale - Headline */
    --md-sys-typescale-headline-large-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-headline-large-font-weight: 400;
    --md-sys-typescale-headline-large-font-size: 32px;
    --md-sys-typescale-headline-large-line-height: 40px;
    --md-sys-typescale-headline-large-letter-spacing: 0;
    
    --md-sys-typescale-headline-medium-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-headline-medium-font-weight: 400;
    --md-sys-typescale-headline-medium-font-size: 28px;
    --md-sys-typescale-headline-medium-line-height: 36px;
    --md-sys-typescale-headline-medium-letter-spacing: 0;
    
    --md-sys-typescale-headline-small-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-headline-small-font-weight: 400;
    --md-sys-typescale-headline-small-font-size: 24px;
    --md-sys-typescale-headline-small-line-height: 32px;
    --md-sys-typescale-headline-small-letter-spacing: 0;
    
    /* Typography scale - Title */
    --md-sys-typescale-title-large-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-title-large-font-weight: 400;
    --md-sys-typescale-title-large-font-size: 22px;
    --md-sys-typescale-title-large-line-height: 28px;
    --md-sys-typescale-title-large-letter-spacing: 0;
    
    --md-sys-typescale-title-medium-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-title-medium-font-weight: 500;
    --md-sys-typescale-title-medium-font-size: 16px;
    --md-sys-typescale-title-medium-line-height: 24px;
    --md-sys-typescale-title-medium-letter-spacing: 0.15px;
    
    --md-sys-typescale-title-small-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-title-small-font-weight: 500;
    --md-sys-typescale-title-small-font-size: 14px;
    --md-sys-typescale-title-small-line-height: 20px;
    --md-sys-typescale-title-small-letter-spacing: 0.1px;
    
    /* Typography scale - Body */
    --md-sys-typescale-body-large-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-body-large-font-weight: 400;
    --md-sys-typescale-body-large-font-size: 16px;
    --md-sys-typescale-body-large-line-height: 24px;
    --md-sys-typescale-body-large-letter-spacing: 0.5px;
    
    --md-sys-typescale-body-medium-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-body-medium-font-weight: 400;
    --md-sys-typescale-body-medium-font-size: 14px;
    --md-sys-typescale-body-medium-line-height: 20px;
    --md-sys-typescale-body-medium-letter-spacing: 0.25px;
    
    --md-sys-typescale-body-small-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-body-small-font-weight: 400;
    --md-sys-typescale-body-small-font-size: 12px;
    --md-sys-typescale-body-small-line-height: 16px;
    --md-sys-typescale-body-small-letter-spacing: 0.4px;
    
    /* Typography scale - Label */
    --md-sys-typescale-label-large-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-label-large-font-weight: 500;
    --md-sys-typescale-label-large-font-size: 14px;
    --md-sys-typescale-label-large-line-height: 20px;
    --md-sys-typescale-label-large-letter-spacing: 0.1px;
    
    --md-sys-typescale-label-medium-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-label-medium-font-weight: 500;
    --md-sys-typescale-label-medium-font-size: 12px;
    --md-sys-typescale-label-medium-line-height: 16px;
    --md-sys-typescale-label-medium-letter-spacing: 0.5px;
    
    --md-sys-typescale-label-small-font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    --md-sys-typescale-label-small-font-weight: 500;
    --md-sys-typescale-label-small-font-size: 11px;
    --md-sys-typescale-label-small-line-height: 16px;
    --md-sys-typescale-label-small-letter-spacing: 0.5px;
    
    /* State layer opacity values */
    --md-sys-state-hover-opacity: 0.08;
    --md-sys-state-focus-opacity: 0.12;
    --md-sys-state-pressed-opacity: 0.12;
    --md-sys-state-dragged-opacity: 0.16;
    --md-sys-state-disabled-opacity: 0.38;
    --md-sys-state-disabled-container-opacity: 0.12;
    
    /* Motion tokens - Easing */
    --md-sys-motion-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --md-sys-motion-easing-standard-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
    --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
    
    /* Motion tokens - Duration */
    --md-sys-motion-duration-short1: 50ms;
    --md-sys-motion-duration-short2: 100ms;
    --md-sys-motion-duration-short3: 150ms;
    --md-sys-motion-duration-short4: 200ms;
    --md-sys-motion-duration-medium1: 250ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-duration-medium3: 350ms;
    --md-sys-motion-duration-medium4: 400ms;
    --md-sys-motion-duration-long1: 450ms;
    --md-sys-motion-duration-long2: 500ms;
    --md-sys-motion-duration-long3: 550ms;
    --md-sys-motion-duration-long4: 600ms;
    --md-sys-motion-duration-extra-long1: 700ms;
    --md-sys-motion-duration-extra-long2: 800ms;
    --md-sys-motion-duration-extra-long3: 900ms;
    --md-sys-motion-duration-extra-long4: 1000ms;
}

/* Dark mode support - system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Primary colors - dark mode */
        --md-sys-color-primary: #a8c7fa;
        --md-sys-color-on-primary: #003258;
        --md-sys-color-primary-container: #004a77;
        --md-sys-color-on-primary-container: #d1e4ff;

        /* Secondary colors - dark mode */
        --md-sys-color-secondary: #bec6dc;
        --md-sys-color-on-secondary: #283041;
        --md-sys-color-secondary-container: #3e4759;
        --md-sys-color-on-secondary-container: #dae2f9;

        /* Tertiary colors - dark mode */
        --md-sys-color-tertiary: #debcdf;
        --md-sys-color-on-tertiary: #402843;
        --md-sys-color-tertiary-container: #583e5b;
        --md-sys-color-on-tertiary-container: #fad8fd;

        /* Error colors - dark mode */
        --md-sys-color-error: #ffb4ab;
        --md-sys-color-on-error: #690005;
        --md-sys-color-error-container: #93000a;
        --md-sys-color-on-error-container: #ffdad6;

        /* Background colors - dark mode */
        --md-sys-color-background: #1a1c1e;
        --md-sys-color-on-background: #e2e2e6;

        /* Surface colors - dark mode */
        --md-sys-color-surface: #1a1c1e;
        --md-sys-color-on-surface: #e2e2e6;
        --md-sys-color-surface-variant: #44474f;
        --md-sys-color-on-surface-variant: #c4c6d0;

        /* Surface container colors - dark mode */
        --md-sys-color-surface-container-lowest: #0c0e11;
        --md-sys-color-surface-container-low: #1a1c1e;
        --md-sys-color-surface-container: #1e2023;
        --md-sys-color-surface-container-high: #282a2d;
        --md-sys-color-surface-container-highest: #333538;

        /* Outline colors - dark mode */
        --md-sys-color-outline: #8e9099;
        --md-sys-color-outline-variant: #44474f;
    }
}

/* Dark mode support - explicit override */
:root[data-theme="dark"] {
    /* Primary colors - dark mode */
    --md-sys-color-primary: #a8c7fa;
    --md-sys-color-on-primary: #003258;
    --md-sys-color-primary-container: #004a77;
    --md-sys-color-on-primary-container: #d1e4ff;

    /* Secondary colors - dark mode */
    --md-sys-color-secondary: #bec6dc;
    --md-sys-color-on-secondary: #283041;
    --md-sys-color-secondary-container: #3e4759;
    --md-sys-color-on-secondary-container: #dae2f9;

    /* Tertiary colors - dark mode */
    --md-sys-color-tertiary: #debcdf;
    --md-sys-color-on-tertiary: #402843;
    --md-sys-color-tertiary-container: #583e5b;
    --md-sys-color-on-tertiary-container: #fad8fd;

    /* Error colors - dark mode */
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;

    /* Background colors - dark mode */
    --md-sys-color-background: #1a1c1e;
    --md-sys-color-on-background: #e2e2e6;

    /* Surface colors - dark mode */
    --md-sys-color-surface: #1a1c1e;
    --md-sys-color-on-surface: #e2e2e6;
    --md-sys-color-surface-variant: #44474f;
    --md-sys-color-on-surface-variant: #c4c6d0;

    /* Surface container colors - dark mode */
    --md-sys-color-surface-container-lowest: #0c0e11;
    --md-sys-color-surface-container-low: #1a1c1e;
    --md-sys-color-surface-container: #1e2023;
    --md-sys-color-surface-container-high: #282a2d;
    --md-sys-color-surface-container-highest: #333538;

    /* Outline colors - dark mode */
    --md-sys-color-outline: #8e9099;
    --md-sys-color-outline-variant: #44474f;
}

* {
    box-sizing: border-box;
}

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

body {
    margin: 0;
    font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Base Form Element Styles - Apply MD3 styling to all form elements.
 *
 * .search-field is EXCLUDED. This selector is (0,2,1) — an element plus two
 * attribute selectors — so it outranks .search-field and .home-search-field at
 * (0,1,0), and its :focus variant is (0,3,1). Every class-based attempt to give
 * the search box room for its magnifier icon therefore lost the cascade
 * silently, which is why that overlap survived repeated "fixes": the padding
 * was never applied, and the box is autofocused on the home page so the :focus
 * variant won immediately.
 *
 * The search field carries its own complete styling, so excluding it here is
 * cleaner than escalating specificity on the other side.
 */
input:not([type="checkbox"]):not([type="radio"]):not(.search-field),
textarea,
select {
    font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    font-size: 16px;
    padding: 12px 16px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

input:not([type="checkbox"]):not([type="radio"]):not(.search-field):focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    padding: 11px 15px; /* Compensate for thicker border */
}

input:not([type="checkbox"]):not([type="radio"]):not(.search-field):hover,
textarea:hover,
select:hover {
    border-color: var(--md-sys-color-on-surface);
}

input:not([type="checkbox"]):not([type="radio"]):disabled,
textarea:disabled,
select:disabled {
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
    cursor: not-allowed;
}

/* Select-specific styling */
select {
    appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
}

select:focus {
    padding-right: 39px; /* Compensate for thicker border */
}

select option {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    padding: 8px;
}

/* Label styling */
label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 8px;
}

/* Button base styling */
button {
    font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

button:hover {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

button:disabled {
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
    cursor: not-allowed;
}

/* Link styling */
a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--md-sys-color-primary-container);
    text-decoration: underline;
}

/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--md-sys-color-surface);
    border-radius: 8px;
    overflow: hidden;
}

th,
td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

th {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

tr:hover {
    background-color: var(--md-sys-color-surface-container-low);
}

tr:last-child td {
    border-bottom: none;
}

/* App Bar */
.app-bar {
    background-color: var(--md-sys-color-surface);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.app-bar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px;
    gap: 24px;
    width: 100%;
}

.app-bar-start {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

.brand-link:hover {
    opacity: 0.8;
}

/* Brand logos are WORDMARKS, not marks, and must not be forced into a square.
   Measured from the shipped assets:

     binfone / capalon / moosenetworks / myvoipaccount / optimoose /
     uptownmoose   224.88 x 75    3.00 : 1
     cornfield     1112 x 404     2.75 : 1
     bwt           375 x 375      1.00 : 1   (a mark, the exception)
     logo.png      471 x 354      1.33 : 1   (platform fallback)

   `width: 32px; height: 32px` was correct when the only logo was the square
   moose head (logo.svg, 100x100). Every wordmark added since has been crushed
   to a third of its width, which is why the company name in the app bar is
   illegible rather than merely small.

   Constraining HEIGHT and letting width follow handles both shapes with one
   rule: a square mark still renders 32x32, a 3:1 wordmark renders ~96px wide.
   max-width caps a pathological asset so it can never push the search field
   off the bar; object-fit keeps it undistorted if it ever hits that cap. */
.logo {
    height: 32px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.product-name {
    font-size: 20px;
    font-weight: 500;
}

/* Company Selector */
.company-selector {
    margin-left: 24px;
    position: relative;
}

.company-select {
    appearance: none;
    background: var(--md-sys-color-surface-variant);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 8px;
    padding: 8px 32px 8px 12px;
    font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    font-size: 14px;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    min-width: 180px;
    max-width: 250px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2379747e'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
}

.company-select:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-surface);
}

.company-select:hover {
    border-color: var(--md-sys-color-primary);
}

.company-select option {
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    padding: 8px;
}

.app-bar-center {
    flex: 0 1 600px;
    display: flex;
    justify-content: center;
}

.search-container {
    position: relative;
    width: 100%;
    max-width: 600px;
}

.search-icon {
    position: absolute;
    left: 14px;
    font-size: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--md-sys-color-outline);
    pointer-events: none;
    z-index: 1;
}

.search-field {
    width: 100%;
    padding: 12px 16px;
    /* Clears the 20px icon sitting at left:14px with room to breathe. The old
       44px left barely cleared it, so the glyph and the first character
       collided — most visible on the home page's larger field. */
    padding-left: 48px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 28px;
    background-color: var(--md-sys-color-surface-variant);
    font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    font-size: 16px;
    transition: all 0.2s ease;
    color: var(--md-sys-color-on-surface);
    box-sizing: border-box;
}

.search-field:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-surface);
}

.search-field::placeholder {
    color: var(--md-sys-color-outline);
}

/* Remove browser default search styling */
.search-field::-webkit-search-decoration,
.search-field::-webkit-search-cancel-button,
.search-field::-webkit-search-results-button,
.search-field::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* Autocomplete Dropdown */
.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

/* The dropdown is shown by toggling .show, not by inline styles. Without this
   rule the JS builds and populates the dropdown and it stays display:none —
   which is exactly what happened when the class-based toggle was introduced
   without its stylesheet counterpart. */
.autocomplete-dropdown.show {
    display: block;
}

.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    transition: background-color 0.15s ease;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background-color: var(--md-sys-color-surface-variant);
}

.autocomplete-title {
    font-weight: 500;
    font-size: 14px;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 4px;
}

.autocomplete-title strong {
    color: var(--md-sys-color-primary);
}

.autocomplete-description {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.autocomplete-description strong {
    color: var(--md-sys-color-primary);
    font-weight: 600;
}

.app-bar-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1;
}

.icon-button {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: var(--md-sys-color-on-surface);
}

.icon-button:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

.sign-in-button {
    padding: 8px 24px;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 20px;
    font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sign-in-button:hover {
    background-color: #1565c0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* User Menu */
.user-menu {
    position: relative;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: none;
    padding: 0;
    background: none;
    transition: opacity 0.2s ease;
}

.user-avatar:hover {
    opacity: 0.8;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--md-sys-color-surface);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    display: none;
}

.user-dropdown.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dropdown-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.dropdown-user-info {
    flex: 1;
    min-width: 0;
}

.dropdown-user-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-user-email {
    font-size: 12px;
    color: var(--md-sys-color-outline);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--md-sys-color-outline);
    opacity: 0.2;
}

.dropdown-section {
    padding: 12px 16px;
}

.dropdown-section-title {
    font-size: 11px;
    font-weight: 500;
    color: var(--md-sys-color-outline);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.dropdown-section-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dropdown-customer-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 4px;
}

.dropdown-uuid-info {
    display: flex;
    gap: 8px;
    font-size: 12px;
    align-items: center;
}

.dropdown-label {
    color: var(--md-sys-color-outline);
    font-weight: 400;
}

.dropdown-uuid {
    color: var(--md-sys-color-on-surface-variant);
    font-family: 'Courier New', monospace;
    font-size: 11px;
    word-break: break-all;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--md-sys-color-on-surface);
    transition: background-color 0.2s ease;
    font-size: 14px;
}

.dropdown-item:hover {
    background-color: var(--md-sys-color-surface-variant);
}

.dropdown-item:last-child {
    border-radius: 0 0 8px 8px;
}

.dropdown-item .material-symbols-outlined {
    font-size: 20px;
}


/* Main Content */
.main-content {
    padding: 24px;
}

/* Dashboard */
.dashboard-container {
    width: 100%;
    padding: 0 24px;
}

.welcome-section {
    margin-bottom: 48px;
    text-align: center;
}

.welcome-section h1 {
    margin: 0 0 16px 0;
}

.welcome-section p {
    margin: 0;
    color: var(--md-sys-color-outline);
}

/* Modules Grid */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.module-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.module-card {
    background-color: var(--md-sys-color-surface);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s ease;
    overflow: hidden;
}

.module-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.module-content {
    padding: 24px;
}

.module-icon {
    font-size: 48px;
    color: var(--md-sys-color-primary);
    margin-bottom: 16px;
    display: block;
}

.module-content h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 400;
}

.module-content p {
    margin: 0 0 16px 0;
    color: var(--md-sys-color-outline);
}

.module-actions {
    display: flex;
    justify-content: flex-start;
}

.module-link {
    color: var(--md-sys-color-primary);
    font-weight: 500;
}

/* Auth Page */
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    padding: 24px;
}

.auth-card {
    max-width: 400px;
    width: 100%;
    background-color: var(--md-sys-color-surface);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.auth-content {
    padding: 48px 32px;
    text-align: center;
}

.auth-logo {
    width: 300px;
    height: 100px;
    margin-bottom: 24px;
}

.auth-content h1 {
    margin: 0 0 32px 0;
    font-weight: 400;
}

.auth-providers {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.google-signin-button {
    width: 100%;
    padding: 12px 24px;
    background-color: #fff;
    border: 1px solid #dadce0;
    border-radius: 4px;
    font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #3c4043;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.google-signin-button:hover {
    background-color: #f8f9fa;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.google-icon {
    width: 18px;
    height: 18px;
}

.divider {
    margin: 16px 0;
    text-align: center;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--md-sys-color-outline);
}

.divider span {
    background-color: var(--md-sys-color-surface);
    padding: 0 16px;
    position: relative;
}

.email-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.text-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    font-size: 16px;
    background-color: var(--md-sys-color-surface);
    transition: all 0.2s ease;
}

.text-input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
}

.primary-button {
    padding: 12px 24px;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 4px;
    font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.primary-button:hover {
    background-color: #1565c0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.auth-links {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

.text-link {
    color: var(--md-sys-color-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.text-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Footer */
.app-footer {
    background-color: var(--md-sys-color-surface);
    border-top: 1px solid var(--md-sys-color-outline);
    margin-top: auto;
    padding: 24px;
}

.footer-content {
    text-align: center;
}

.footer-content p {
    margin: 0;
    color: var(--md-sys-color-outline);
    font-size: 14px;
}

/* Ensure main content grows to push footer down */
.main-content {
    flex: 1;
}

/* MD3 Utility Classes */

/* Typography utilities */
.md-typescale-display-large {
    font-family: var(--md-sys-typescale-display-large-font-family);
    font-weight: var(--md-sys-typescale-display-large-font-weight);
    font-size: var(--md-sys-typescale-display-large-font-size);
    line-height: var(--md-sys-typescale-display-large-line-height);
    letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
}

.md-typescale-display-medium {
    font-family: var(--md-sys-typescale-display-medium-font-family);
    font-weight: var(--md-sys-typescale-display-medium-font-weight);
    font-size: var(--md-sys-typescale-display-medium-font-size);
    line-height: var(--md-sys-typescale-display-medium-line-height);
    letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
}

.md-typescale-display-small {
    font-family: var(--md-sys-typescale-display-small-font-family);
    font-weight: var(--md-sys-typescale-display-small-font-weight);
    font-size: var(--md-sys-typescale-display-small-font-size);
    line-height: var(--md-sys-typescale-display-small-line-height);
    letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
}

.md-typescale-headline-large {
    font-family: var(--md-sys-typescale-headline-large-font-family);
    font-weight: var(--md-sys-typescale-headline-large-font-weight);
    font-size: var(--md-sys-typescale-headline-large-font-size);
    line-height: var(--md-sys-typescale-headline-large-line-height);
    letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
}

.md-typescale-headline-medium {
    font-family: var(--md-sys-typescale-headline-medium-font-family);
    font-weight: var(--md-sys-typescale-headline-medium-font-weight);
    font-size: var(--md-sys-typescale-headline-medium-font-size);
    line-height: var(--md-sys-typescale-headline-medium-line-height);
    letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
}

.md-typescale-headline-small {
    font-family: var(--md-sys-typescale-headline-small-font-family);
    font-weight: var(--md-sys-typescale-headline-small-font-weight);
    font-size: var(--md-sys-typescale-headline-small-font-size);
    line-height: var(--md-sys-typescale-headline-small-line-height);
    letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
}

.md-typescale-title-large {
    font-family: var(--md-sys-typescale-title-large-font-family);
    font-weight: var(--md-sys-typescale-title-large-font-weight);
    font-size: var(--md-sys-typescale-title-large-font-size);
    line-height: var(--md-sys-typescale-title-large-line-height);
    letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
}

.md-typescale-title-medium {
    font-family: var(--md-sys-typescale-title-medium-font-family);
    font-weight: var(--md-sys-typescale-title-medium-font-weight);
    font-size: var(--md-sys-typescale-title-medium-font-size);
    line-height: var(--md-sys-typescale-title-medium-line-height);
    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
}

.md-typescale-title-small {
    font-family: var(--md-sys-typescale-title-small-font-family);
    font-weight: var(--md-sys-typescale-title-small-font-weight);
    font-size: var(--md-sys-typescale-title-small-font-size);
    line-height: var(--md-sys-typescale-title-small-line-height);
    letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
}

.md-typescale-body-large {
    font-family: var(--md-sys-typescale-body-large-font-family);
    font-weight: var(--md-sys-typescale-body-large-font-weight);
    font-size: var(--md-sys-typescale-body-large-font-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
}

.md-typescale-body-medium {
    font-family: var(--md-sys-typescale-body-medium-font-family);
    font-weight: var(--md-sys-typescale-body-medium-font-weight);
    font-size: var(--md-sys-typescale-body-medium-font-size);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
}

.md-typescale-body-small {
    font-family: var(--md-sys-typescale-body-small-font-family);
    font-weight: var(--md-sys-typescale-body-small-font-weight);
    font-size: var(--md-sys-typescale-body-small-font-size);
    line-height: var(--md-sys-typescale-body-small-line-height);
    letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
}

.md-typescale-label-large {
    font-family: var(--md-sys-typescale-label-large-font-family);
    font-weight: var(--md-sys-typescale-label-large-font-weight);
    font-size: var(--md-sys-typescale-label-large-font-size);
    line-height: var(--md-sys-typescale-label-large-line-height);
    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
}

.md-typescale-label-medium {
    font-family: var(--md-sys-typescale-label-medium-font-family);
    font-weight: var(--md-sys-typescale-label-medium-font-weight);
    font-size: var(--md-sys-typescale-label-medium-font-size);
    line-height: var(--md-sys-typescale-label-medium-line-height);
    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
}

.md-typescale-label-small {
    font-family: var(--md-sys-typescale-label-small-font-family);
    font-weight: var(--md-sys-typescale-label-small-font-weight);
    font-size: var(--md-sys-typescale-label-small-font-size);
    line-height: var(--md-sys-typescale-label-small-line-height);
    letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
}

/* Elevation utilities */
.md-elevation-0 { box-shadow: var(--md-sys-elevation-level0); }
.md-elevation-1 { box-shadow: var(--md-sys-elevation-level1); }
.md-elevation-2 { box-shadow: var(--md-sys-elevation-level2); }
.md-elevation-3 { box-shadow: var(--md-sys-elevation-level3); }
.md-elevation-4 { box-shadow: var(--md-sys-elevation-level4); }
.md-elevation-5 { box-shadow: var(--md-sys-elevation-level5); }

/* Shape utilities */
.md-shape-none { border-radius: var(--md-sys-shape-corner-none); }
.md-shape-extra-small { border-radius: var(--md-sys-shape-corner-extra-small); }
.md-shape-small { border-radius: var(--md-sys-shape-corner-small); }
.md-shape-medium { border-radius: var(--md-sys-shape-corner-medium); }
.md-shape-large { border-radius: var(--md-sys-shape-corner-large); }
.md-shape-extra-large { border-radius: var(--md-sys-shape-corner-extra-large); }
.md-shape-full { border-radius: var(--md-sys-shape-corner-full); }

/* Surface utilities */
.md-surface {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.md-surface-container-lowest {
    background-color: var(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface);
}

.md-surface-container-low {
    background-color: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
}

.md-surface-container {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.md-surface-container-high {
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.md-surface-container-highest {
    background-color: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
}

/* State layer utilities */
.md-ripple {
    position: relative;
    overflow: hidden;
}

.md-ripple::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: currentColor;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    pointer-events: none;
}

.md-ripple:hover::before {
    opacity: var(--md-sys-state-hover-opacity);
}

.md-ripple:focus::before {
    opacity: var(--md-sys-state-focus-opacity);
}

.md-ripple:active::before {
    opacity: var(--md-sys-state-pressed-opacity);
}

/* Common MD3 component patterns */
.md-card {
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-level1);
    transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-card:hover {
    box-shadow: var(--md-sys-elevation-level2);
}

.md-button {
    font-family: var(--md-sys-typescale-label-large-font-family);
    font-weight: var(--md-sys-typescale-label-large-font-weight);
    font-size: var(--md-sys-typescale-label-large-font-size);
    line-height: var(--md-sys-typescale-label-large-line-height);
    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
    padding: 10px 24px;
    border-radius: var(--md-sys-shape-corner-full);
    border: none;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    position: relative;
    overflow: hidden;
}

.md-button-filled {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.md-button-filled:hover {
    box-shadow: var(--md-sys-elevation-level1);
}

.md-button-outlined {
    background-color: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
}

.md-button-text {
    background-color: transparent;
    color: var(--md-sys-color-primary);
}

.md-button-elevated {
    background-color: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level1);
}

.md-button-elevated:hover {
    box-shadow: var(--md-sys-elevation-level2);
}

.md-button-tonal {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/* FAB (Floating Action Button) utilities */
.md-fab {
    width: 56px;
    height: 56px;
    border-radius: var(--md-sys-shape-corner-large);
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    box-shadow: var(--md-sys-elevation-level3);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-fab:hover {
    box-shadow: var(--md-sys-elevation-level4);
}

.md-fab-small {
    width: 40px;
    height: 40px;
}

.md-fab-large {
    width: 96px;
    height: 96px;
    border-radius: var(--md-sys-shape-corner-extra-large);
}

/* Chip utilities */
.md-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    height: 32px;
    border-radius: var(--md-sys-shape-corner-small);
    background-color: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--md-sys-typescale-label-large-font-family);
    font-weight: var(--md-sys-typescale-label-large-font-weight);
    font-size: var(--md-sys-typescale-label-large-font-size);
    line-height: var(--md-sys-typescale-label-large-line-height);
    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    cursor: pointer;
}

.md-chip:hover {
    background-color: var(--md-sys-color-surface-container);
}

.md-chip-elevated {
    box-shadow: var(--md-sys-elevation-level1);
}

/* MD3 Form Elements */
.md-text-field {
    position: relative;
    margin-bottom: 16px;
}

.md-text-field input,
.md-text-field textarea,
.md-text-field select {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-body-large-font-family);
    font-size: var(--md-sys-typescale-body-large-font-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-text-field input:focus,
.md-text-field textarea:focus,
.md-text-field select:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    padding: 15px;
}

.md-text-field input:disabled,
.md-text-field textarea:disabled,
.md-text-field select:disabled {
    opacity: var(--md-sys-state-disabled-opacity);
    cursor: not-allowed;
}

.md-text-field-filled input,
.md-text-field-filled textarea,
.md-text-field-filled select {
    background-color: var(--md-sys-color-surface-container-highest);
    border: none;
    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
}

.md-text-field-filled input:focus,
.md-text-field-filled textarea:focus,
.md-text-field-filled select:focus {
    border-bottom: 2px solid var(--md-sys-color-primary);
    padding-bottom: 15px;
}

.md-text-field label {
    position: absolute;
    left: 16px;
    top: 16px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-body-large-font-size);
    pointer-events: none;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    background-color: var(--md-sys-color-surface);
    padding: 0 4px;
}

.md-text-field input:focus + label,
.md-text-field input:not(:placeholder-shown) + label,
.md-text-field textarea:focus + label,
.md-text-field textarea:not(:placeholder-shown) + label {
    top: -8px;
    left: 12px;
    font-size: var(--md-sys-typescale-body-small-font-size);
    color: var(--md-sys-color-primary);
}

.md-text-field-helper {
    margin-top: 4px;
    font-size: var(--md-sys-typescale-body-small-font-size);
    color: var(--md-sys-color-on-surface-variant);
}

.md-text-field-error {
    color: var(--md-sys-color-error);
}

/* MD3 Select Field Specific Styles (component library pattern) */
.md-text-field--select {
    position: relative;
}

.md-text-field--select select {
    appearance: none;
    padding-right: 48px;
    cursor: pointer;
    width: 100%;
    padding: 16px 48px 16px 16px;
    border: 2px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    background-color: transparent;
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-body-large-font-family);
    font-size: var(--md-sys-typescale-body-large-font-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

/* Handle the outlined variant */
.md-text-field--outlined select {
    background-color: transparent;
    border: 2px solid var(--md-sys-color-outline);
}

.md-text-field--select select:hover {
    border-color: var(--md-sys-color-on-surface);
    background-color: rgba(0, 0, 0, 0.04);
}

.md-text-field--select select:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    background-color: transparent;
}

/* Floating label for select - special handling */
.md-text-field--select label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    background-color: var(--md-sys-color-surface);
    padding: 0 4px;
    pointer-events: none;
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-body-large-font-size);
}

/* Move label when select has value or is focused */
.md-text-field--select select:focus ~ label,
.md-text-field--select select:not([value=""]):valid ~ label,
.md-text-field--select.has-value label {
    top: 0;
    transform: translateY(-50%);
    font-size: var(--md-sys-typescale-body-small-font-size);
    color: var(--md-sys-color-primary);
}

/* Handle when select has a selected option that's not the placeholder */
.md-text-field--select select:has(option:checked:not([value=""])) ~ label {
    top: 0;
    transform: translateY(-50%);
    font-size: var(--md-sys-typescale-body-small-font-size);
}

/* Dropdown icon styling */
.md-text-field__icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--md-sys-color-on-surface-variant);
    pointer-events: none;
    transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    font-size: 24px;
}

/* Icon color when focused */
.md-text-field--select select:focus ~ .md-text-field__icon {
    color: var(--md-sys-color-primary);
}

/* Helper text styling */
.md-text-field__helper {
    margin-top: 4px;
    padding: 0 16px;
    font-size: var(--md-sys-typescale-body-small-font-size);
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.25;
}

/* Error state */
.md-text-field--error select {
    border-color: var(--md-sys-color-error);
}

.md-text-field--error label {
    color: var(--md-sys-color-error);
}

.md-text-field--error .md-text-field__icon {
    color: var(--md-sys-color-error);
}

.md-text-field--error .md-text-field__helper {
    color: var(--md-sys-color-error);
}

/* Disabled state */
.md-text-field--disabled select,
.md-text-field--select select:disabled {
    opacity: var(--md-sys-state-disabled-opacity);
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.04);
    border-color: var(--md-sys-color-outline);
}

.md-text-field--disabled label,
.md-text-field--disabled .md-text-field__icon {
    opacity: var(--md-sys-state-disabled-opacity);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .md-text-field--select select:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    :root:not([data-theme="light"]) .md-text-field--disabled select,
    :root:not([data-theme="light"]) .md-text-field--select select:disabled {
        background-color: rgba(255, 255, 255, 0.04);
    }

    :root:not([data-theme="light"]) .md-text-field--select label {
        background-color: var(--md-sys-color-surface);
    }
}

:root[data-theme="dark"] .md-text-field--select select:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .md-text-field--disabled select,
:root[data-theme="dark"] .md-text-field--select select:disabled {
    background-color: rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .md-text-field--select label {
    background-color: var(--md-sys-color-surface);
}

/* Checkbox and Radio */
.md-checkbox,
.md-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 12px;
    padding: 8px;
    border-radius: var(--md-sys-shape-corner-full);
    transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.md-checkbox:hover,
.md-radio:hover {
    background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-opacity));
}

.md-checkbox input[type="checkbox"],
.md-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--md-sys-color-primary);
}

/* Switch */
.md-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 32px;
}

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

.md-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--md-sys-color-surface-variant);
    border: 2px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-full);
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-switch-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 6px;
    bottom: 6px;
    background-color: var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-full);
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-switch input:checked + .md-switch-slider {
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}

.md-switch input:checked + .md-switch-slider:before {
    background-color: var(--md-sys-color-on-primary);
    transform: translateX(20px);
    width: 24px;
}

/* MD3 Tables */
.md-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-medium);
    overflow: hidden;
    box-shadow: var(--md-sys-elevation-level1);
}

.md-table thead {
    background-color: var(--md-sys-color-surface-container);
}

.md-table th {
    padding: 16px;
    text-align: left;
    font-weight: var(--md-sys-typescale-title-small-font-weight);
    font-size: var(--md-sys-typescale-title-small-font-size);
    color: var(--md-sys-color-on-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.md-table td {
    padding: 16px;
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.md-table tbody tr {
    transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.md-table tbody tr:hover {
    background-color: var(--md-sys-color-surface-container-low);
}

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

/* MD3 Alerts/Notifications */
.md-alert {
    padding: 16px;
    border-radius: var(--md-sys-shape-corner-medium);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--md-sys-typescale-body-medium-font-size);
    animation: md-fade-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
}

.md-alert-success {
    background-color: #e8f5e9;
    color: #1b5e20;
}

.md-alert-error {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.md-alert-warning {
    background-color: #fff3e0;
    color: #e65100;
}

.md-alert-info {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

@keyframes md-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MD3 Badges */
.md-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--md-sys-shape-corner-full);
    font-size: var(--md-sys-typescale-label-small-font-size);
    font-weight: var(--md-sys-typescale-label-small-font-weight);
    line-height: 1;
    white-space: nowrap;
}

.md-badge-primary {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.md-badge-secondary {
    background-color: var(--md-sys-color-secondary);
    color: var(--md-sys-color-on-secondary);
}

.md-badge-success {
    background-color: #4caf50;
    color: white;
}

.md-badge-warning {
    background-color: #ff9800;
    color: white;
}

.md-badge-error {
    background-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
}

.md-badge-info {
    background-color: #2196f3;
    color: white;
}

/* MD3 Modal/Dialog */
.md-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: md-fade-in var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.md-dialog {
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-extra-large);
    box-shadow: var(--md-sys-elevation-level3);
    max-width: 560px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: md-scale-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
}

.md-dialog-header {
    padding: 24px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.md-dialog-title {
    font-size: var(--md-sys-typescale-headline-small-font-size);
    font-weight: var(--md-sys-typescale-headline-small-font-weight);
    color: var(--md-sys-color-on-surface);
    margin: 0;
}

.md-dialog-content {
    padding: 24px;
}

.md-dialog-actions {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

@keyframes md-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* MD3 Navigation Components */
.md-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 16px;
}

.md-breadcrumb a {
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.md-breadcrumb a:hover {
    color: var(--md-sys-color-primary);
}

.md-breadcrumb-separator {
    color: var(--md-sys-color-outline);
}

.md-breadcrumb-current {
    color: var(--md-sys-color-on-surface);
    font-weight: 500;
}

/* Application Breadcrumbs (used in base.html) */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: var(--md-sys-color-surface-container-low);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface-variant);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.breadcrumb-item:hover {
    color: var(--md-sys-color-primary);
}

.breadcrumb-item.current {
    color: var(--md-sys-color-on-surface);
    font-weight: 500;
    pointer-events: none;
}

.breadcrumb-icon {
    font-size: 20px;
}

.breadcrumb-separator {
    color: var(--md-sys-color-outline);
    user-select: none;
}

/* Responsive breadcrumbs */
@media (max-width: 768px) {
    .breadcrumbs {
        padding: 8px 16px;
        font-size: var(--md-sys-typescale-body-small-font-size);
    }

    .breadcrumb-text {
        display: none;
    }

    .breadcrumb-icon {
        font-size: 18px;
    }
}

/* MD3 Tabs */
.md-tabs {
    display: flex;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    margin-bottom: 24px;
}

.md-tab {
    padding: 12px 24px;
    background: none;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-title-small-font-size);
    font-weight: var(--md-sys-typescale-title-small-font-weight);
    cursor: pointer;
    position: relative;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.md-tab:hover {
    background-color: var(--md-sys-color-surface-container-low);
}

.md-tab.active {
    color: var(--md-sys-color-primary);
}

.md-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--md-sys-color-primary);
    animation: md-tab-indicator var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
}

@keyframes md-tab-indicator {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* MD3 Loading States */
.md-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--md-sys-color-surface-variant);
    border-top-color: var(--md-sys-color-primary);
    border-radius: 50%;
    animation: md-spin var(--md-sys-motion-duration-extra-long2) linear infinite;
}

.md-spinner-large {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

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

.md-skeleton {
    background: linear-gradient(
        90deg,
        var(--md-sys-color-surface-container) 25%,
        var(--md-sys-color-surface-container-high) 50%,
        var(--md-sys-color-surface-container) 75%
    );
    background-size: 200% 100%;
    animation: md-skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--md-sys-shape-corner-extra-small);
}

@keyframes md-skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* MD3 List Components */
.md-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--md-sys-color-surface);
}

.md-list-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    min-height: 56px;
    transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    cursor: pointer;
}

.md-list-item:hover {
    background-color: var(--md-sys-color-surface-container-low);
}

.md-list-item-icon {
    margin-right: 16px;
    color: var(--md-sys-color-on-surface-variant);
}

.md-list-item-content {
    flex: 1;
}

.md-list-item-primary {
    font-size: var(--md-sys-typescale-body-large-font-size);
    color: var(--md-sys-color-on-surface);
}

.md-list-item-secondary {
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 4px;
}

/* MD3 Divider */
.md-divider {
    height: 1px;
    background-color: var(--md-sys-color-outline-variant);
    margin: 16px 0;
    border: none;
}

.md-divider-vertical {
    width: 1px;
    height: auto;
    margin: 0 16px;
}

/* HTMX Integration Styles */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

.htmx-settling {
    opacity: 0.5;
}

.htmx-swapping {
    opacity: 0.5;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.htmx-added {
    animation: md-fade-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
}

/* MD3 Empty State */
.md-empty-state {
    text-align: center;
    padding: 48px 24px;
}

.md-empty-state-icon {
    font-size: 64px;
    color: var(--md-sys-color-outline);
    margin-bottom: 16px;
}

.md-empty-state-title {
    font-size: var(--md-sys-typescale-headline-small-font-size);
    color: var(--md-sys-color-on-surface);
    margin-bottom: 8px;
}

.md-empty-state-description {
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 24px;
}

/* MD3 Pagination */
.md-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 24px 0;
}

.md-pagination-button {
    min-width: 40px;
    height: 40px;
    padding: 8px;
    border: none;
    background-color: transparent;
    color: var(--md-sys-color-on-surface);
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    display: flex;
    align-items: center;
    justify-content: center;
}

.md-pagination-button:hover:not(:disabled) {
    background-color: var(--md-sys-color-surface-container-high);
}

.md-pagination-button:disabled {
    opacity: var(--md-sys-state-disabled-opacity);
    cursor: not-allowed;
}

.md-pagination-button.active {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

/* ====================================
   Component Library Integration Styles
   ==================================== */

/* Component Container Isolation */
.module-container {
    --module-padding: 24px;
    --module-transition: var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
    padding: var(--module-padding);
    background: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-medium);
    min-height: calc(100vh - 180px);
    animation: moduleLoad var(--module-transition);
}

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

/* Module iframe integration */
.module-iframe-container {
    width: 100%;
    min-height: calc(100vh - 120px);
    border: none;
    border-radius: var(--md-sys-shape-corner-medium);
    overflow: hidden;
}

/* Component Spacing Harmonization */
.md-component-stack > * + * {
    margin-top: var(--md-sys-spacing-medium, 16px);
}

.md-component-group {
    display: flex;
    gap: var(--md-sys-spacing-small, 8px);
    flex-wrap: wrap;
    align-items: center;
}

/* Responsive component grid system */
.md-responsive-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.md-responsive-grid.compact {
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.md-responsive-grid.wide {
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
}

/* Enhanced Button Groups */
.md-button-group {
    display: inline-flex;
    gap: 8px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-container-low);
    padding: 4px;
    align-items: center;
}

.md-button-group.vertical {
    flex-direction: column;
    border-radius: var(--md-sys-shape-corner-medium);
}

.md-button-group .md-button {
    box-shadow: none;
    margin: 0;
}

.md-button-group .md-button:hover {
    background-color: var(--md-sys-color-surface-container-high);
}

.md-button-group .md-button.active {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

/* Enhanced Table Styling */
.md-table-container {
    overflow-x: auto;
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-level1);
    background: var(--md-sys-color-surface);
}

.md-table-container .md-table {
    box-shadow: none;
    border-radius: 0;
}

.md-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--md-sys-color-surface-container);
    backdrop-filter: blur(10px);
}

.md-table tbody tr.selected {
    background: var(--md-sys-color-primary-container);
}

.md-table tbody tr.selected:hover {
    background: var(--md-sys-color-primary-container);
    opacity: 0.9;
}

.md-table-actions {
    padding: 16px;
    background: var(--md-sys-color-surface-container-low);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.md-table-bulk-actions {
    display: flex;
    gap: 8px;
}

/* Form Field Enhancements */
.md-field-container {
    position: relative;
    margin-bottom: 24px;
}

.md-field-container label {
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    transform-origin: left center;
}

.md-field-container.focused label,
.md-field-container.filled label {
    transform: translateY(-150%) scale(0.85);
    color: var(--md-sys-color-primary);
}

.md-field-error {
    border-color: var(--md-sys-color-error) !important;
}

.md-field-error:focus {
    border-color: var(--md-sys-color-error) !important;
    box-shadow: 0 0 0 1px var(--md-sys-color-error);
}

.md-field-success {
    border-color: #4caf50 !important;
}

.md-field-success:focus {
    border-color: #4caf50 !important;
    box-shadow: 0 0 0 1px #4caf50;
}

.md-field-helper {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: var(--md-sys-typescale-body-small-font-size);
}

.md-field-error-message {
    color: var(--md-sys-color-error);
}

.md-field-success-message {
    color: #4caf50;
}

.md-field-counter {
    color: var(--md-sys-color-on-surface-variant);
}

/* Enhanced Select/Dropdown Styling */
.md-select-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.md-select {
    appearance: none;
    width: 100%;
    padding: 16px 48px 16px 16px;
    background-color: var(--md-sys-color-surface-container-highest);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-body-large-font-family);
    font-size: var(--md-sys-typescale-body-large-font-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2379747e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
}

/* Outlined variant */
.md-select.outlined {
    background-color: transparent;
    border: 2px solid var(--md-sys-color-outline);
}

/* Filled variant */
.md-select.filled {
    background-color: var(--md-sys-color-surface-container-highest);
    border: none;
    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
    padding: 20px 48px 8px 16px;
}

.md-select:hover {
    border-color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface-container);
}

.md-select:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    padding: 15px 47px 15px 15px;
}

.md-select.filled:focus {
    border-bottom-width: 2px;
    padding: 20px 48px 7px 16px;
}

.md-select:disabled {
    opacity: var(--md-sys-state-disabled-opacity);
    cursor: not-allowed;
    background-color: var(--md-sys-color-surface-container-low);
}

/* Select with floating label */
.md-select-floating {
    position: relative;
    margin-top: 16px;
}

.md-select-floating label {
    position: absolute;
    left: 16px;
    top: 16px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-body-large-font-size);
    pointer-events: none;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    background-color: var(--md-sys-color-surface);
    padding: 0 4px;
}

.md-select-floating select:focus + label,
.md-select-floating select:not(:placeholder-shown) + label,
.md-select-floating.has-value label {
    top: -8px;
    left: 12px;
    font-size: var(--md-sys-typescale-body-small-font-size);
    color: var(--md-sys-color-primary);
}

/* Custom dropdown menu (for custom implementations) */
.md-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.md-dropdown-trigger {
    width: 100%;
    padding: 16px 48px 16px 16px;
    background-color: var(--md-sys-color-surface-container-highest);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-body-large-font-family);
    font-size: var(--md-sys-typescale-body-large-font-size);
    text-align: left;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
    position: relative;
}

.md-dropdown-trigger::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--md-sys-color-on-surface-variant);
    transition: transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.md-dropdown.open .md-dropdown-trigger::after {
    transform: translateY(-50%) rotate(180deg);
}

.md-dropdown-trigger:hover {
    background-color: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-on-surface);
}

.md-dropdown-trigger:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    padding: 15px 47px 15px 15px;
}

.md-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-extra-small);
    box-shadow: var(--md-sys-elevation-level2);
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized-decelerate);
}

.md-dropdown.open .md-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.md-dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--md-sys-color-on-surface);
    font-size: var(--md-sys-typescale-body-large-font-size);
}

.md-dropdown-item:hover {
    background-color: var(--md-sys-color-surface-container-high);
}

.md-dropdown-item.selected {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-weight: 500;
}

.md-dropdown-item.disabled {
    opacity: var(--md-sys-state-disabled-opacity);
    cursor: not-allowed;
}

.md-dropdown-item.disabled:hover {
    background-color: transparent;
}

.md-dropdown-item-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.md-dropdown-item-text {
    flex: 1;
}

.md-dropdown-item-badge {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 2px 8px;
    border-radius: var(--md-sys-shape-corner-full);
    font-size: var(--md-sys-typescale-label-small-font-size);
    font-weight: 500;
}

/* Dropdown divider */
.md-dropdown-divider {
    height: 1px;
    margin: 8px 0;
    background-color: var(--md-sys-color-outline-variant);
}

/* Dropdown header */
.md-dropdown-header {
    padding: 8px 16px;
    font-size: var(--md-sys-typescale-label-small-font-size);
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.1px;
}

/* Multi-select dropdown styles */
.md-dropdown-item.multi-select {
    padding-left: 48px;
    position: relative;
}

.md-dropdown-item.multi-select::before {
    content: '';
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--md-sys-color-outline);
    border-radius: 2px;
    transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.md-dropdown-item.multi-select.selected::before {
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}

.md-dropdown-item.multi-select.selected::after {
    content: '✓';
    position: absolute;
    left: 19px;
    top: 8px;
    color: var(--md-sys-color-on-primary);
    font-size: 14px;
    font-weight: bold;
}

/* Searchable dropdown */
.md-dropdown-search {
    padding: 12px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    position: sticky;
    top: 0;
    background-color: var(--md-sys-color-surface-container);
    z-index: 1;
}

.md-dropdown-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-size: var(--md-sys-typescale-body-medium-font-size);
}

.md-dropdown-search-input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
}

/* Dropdown size variants */
.md-dropdown.small .md-dropdown-trigger,
.md-select.small {
    padding: 8px 36px 8px 12px;
    font-size: var(--md-sys-typescale-body-small-font-size);
}

.md-dropdown.large .md-dropdown-trigger,
.md-select.large {
    padding: 20px 52px 20px 20px;
    font-size: var(--md-sys-typescale-body-large-font-size);
}

/* Dropdown animation states */
@keyframes dropdownSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Dark mode enhancements for dropdowns */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .md-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23c4c6d0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    }

    :root:not([data-theme="light"]) .md-dropdown-trigger::after {
        border-top-color: var(--md-sys-color-on-surface-variant);
    }

    :root:not([data-theme="light"]) .md-dropdown-menu {
        background-color: var(--md-sys-color-surface-container-high);
    }

    :root:not([data-theme="light"]) .md-dropdown-item:hover {
        background-color: var(--md-sys-color-surface-container-highest);
    }
}

:root[data-theme="dark"] .md-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23c4c6d0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .md-dropdown-trigger::after {
    border-top-color: var(--md-sys-color-on-surface-variant);
}

:root[data-theme="dark"] .md-dropdown-menu {
    background-color: var(--md-sys-color-surface-container-high);
}

:root[data-theme="dark"] .md-dropdown-item:hover {
    background-color: var(--md-sys-color-surface-container-highest);
}

/* Enhanced Card System */
.md-card-interactive {
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.md-card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--md-sys-elevation-level3);
}

.md-card-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    align-items: center;
    gap: 16px;
}

.md-card-header-compact {
    padding: 16px;
}

.md-card-icon {
    font-size: 24px;
    color: var(--md-sys-color-primary);
    flex-shrink: 0;
}

.md-card-header-text {
    flex: 1;
    min-width: 0;
}

.md-card-title {
    font-size: var(--md-sys-typescale-title-large-font-size);
    font-weight: var(--md-sys-typescale-title-large-font-weight);
    margin: 0;
}

.md-card-subtitle {
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface-variant);
    margin: 4px 0 0;
}

.md-card-content {
    padding: 24px;
}

.md-card-content-compact {
    padding: 16px;
}

.md-card-media {
    position: relative;
    overflow: hidden;
    background-color: var(--md-sys-color-surface-variant);
}

.md-card-image {
    width: 100%;
    height: auto;
    display: block;
}

.md-card-actions {
    padding: 8px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.md-card-actions.start {
    justify-content: flex-start;
}

.md-card-actions.center {
    justify-content: center;
}

.md-card-actions.space-between {
    justify-content: space-between;
}

/* Modal & Dialog Improvements */
.md-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 999;
    animation: fadeIn var(--md-sys-motion-duration-short3) ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.md-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    animation: slideUp var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
    max-height: 85vh;
    overflow-y: auto;
    width: 90%;
    max-width: 560px;
}

@keyframes slideUp {
    from {
        transform: translate(-50%, -40%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.md-modal-fullscreen {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
}

/* Loading States & Skeletons */
.md-component-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.md-component-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-surface);
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.md-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Skeleton variations */
.md-skeleton-text {
    height: 16px;
    margin-bottom: 8px;
    border-radius: var(--md-sys-shape-corner-extra-small);
}

.md-skeleton-text.title {
    height: 24px;
    width: 60%;
}

.md-skeleton-text.subtitle {
    height: 20px;
    width: 40%;
}

.md-skeleton-button {
    height: 40px;
    width: 120px;
    border-radius: var(--md-sys-shape-corner-full);
}

.md-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.md-skeleton-card {
    height: 200px;
    border-radius: var(--md-sys-shape-corner-medium);
}

.md-skeleton-image {
    height: 240px;
    border-radius: var(--md-sys-shape-corner-medium);
}

/* Enhanced HTMX Integration */
.htmx-request .md-button {
    position: relative;
    color: transparent !important;
}

.htmx-request .md-button::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--md-sys-color-on-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.htmx-request .md-button.md-button-outlined::after {
    border-color: var(--md-sys-color-primary);
    border-top-color: transparent;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Smooth content swapping */
[hx-swap] {
    transition: opacity var(--md-sys-motion-duration-short4) ease;
}

.htmx-swapping {
    opacity: 0.5;
}

.htmx-settling {
    opacity: 0.5;
}

.htmx-added {
    animation: htmxFadeIn var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
}

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

/* Progress indicators for HTMX */
.htmx-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--md-sys-color-primary);
    transform-origin: left;
    animation: htmxProgress 2s ease-in-out;
    z-index: 9999;
}

@keyframes htmxProgress {
    0% { transform: scaleX(0); }
    50% { transform: scaleX(0.5); }
    100% { transform: scaleX(1); opacity: 0; }
}

/* Accessibility Improvements */
.md-button:focus-visible,
.md-field:focus-visible,
.md-card-interactive:focus-visible,
.md-chip:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 8px 16px;
    text-decoration: none;
    border-radius: var(--md-sys-shape-corner-small);
    z-index: 10000;
}

.skip-to-content:focus {
    top: 8px;
    left: 8px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .md-button-outlined {
        border-width: 2px;
    }

    .md-card {
        border: 1px solid var(--md-sys-color-outline);
    }

    .md-field {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Additional Dark Mode Enhancements */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .md-component-border {
        border-color: var(--md-sys-color-outline-variant);
    }

    :root:not([data-theme="light"]) .md-subtle-background {
        background: var(--md-sys-color-surface-container-low);
    }

    :root:not([data-theme="light"]) .md-interactive-surface:hover {
        background: var(--md-sys-color-surface-container-high);
    }

    :root:not([data-theme="light"]) .md-skeleton {
        background: linear-gradient(
            90deg,
            var(--md-sys-color-surface-container) 25%,
            var(--md-sys-color-surface-container-highest) 50%,
            var(--md-sys-color-surface-container) 75%
        );
    }

    /* MDC Component dark mode support */
    .mdc-card {
        background-color: var(--md-sys-color-surface-container);
        color: var(--md-sys-color-on-surface);
    }

    .mdc-data-table {
        background-color: var(--md-sys-color-surface-container);
        color: var(--md-sys-color-on-surface);
    }

    .mdc-data-table__header-row {
        background-color: var(--md-sys-color-surface-container-high);
    }

    .mdc-data-table__header-cell {
        color: var(--md-sys-color-on-surface);
        border-bottom-color: var(--md-sys-color-outline-variant);
    }

    .mdc-data-table__cell {
        color: var(--md-sys-color-on-surface);
        border-bottom-color: var(--md-sys-color-outline-variant);
    }

    .mdc-data-table__row:hover {
        background-color: var(--md-sys-color-surface-container-highest);
    }

    .mdc-text-field {
        background-color: var(--md-sys-color-surface-container);
    }

    .mdc-text-field__input {
        color: var(--md-sys-color-on-surface);
    }

    .mdc-notched-outline__leading,
    .mdc-notched-outline__notch,
    .mdc-notched-outline__trailing {
        border-color: var(--md-sys-color-outline);
    }

    .mdc-floating-label {
        color: var(--md-sys-color-on-surface-variant);
    }

    .mdc-text-field--with-leading-icon .mdc-text-field__icon {
        color: var(--md-sys-color-on-surface-variant);
    }

    .mdc-button {
        color: var(--md-sys-color-primary);
    }

    .mdc-button--raised {
        background-color: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
    }

    .mdc-dialog__surface {
        background-color: var(--md-sys-color-surface-container-high);
        color: var(--md-sys-color-on-surface);
    }

    .mdc-dialog__title {
        color: var(--md-sys-color-on-surface);
    }

    .mdc-dialog__scrim {
        background-color: rgba(0, 0, 0, 0.6);
    }

    .mdc-fab {
        background-color: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
    }

    .mdc-fab:hover {
        background-color: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
    }

    .mdc-select__anchor {
        background-color: var(--md-sys-color-surface-container);
    }

    .mdc-select__selected-text {
        color: var(--md-sys-color-on-surface);
    }

    .mdc-select__dropdown-icon {
        fill: var(--md-sys-color-on-surface-variant);
    }

    .mdc-menu-surface {
        background-color: var(--md-sys-color-surface-container-high);
    }

    .mdc-deprecated-list-item {
        color: var(--md-sys-color-on-surface);
    }

    .mdc-deprecated-list-item:hover {
        background-color: var(--md-sys-color-surface-container-highest);
    }

    .mdc-linear-progress__buffer {
        background-color: var(--md-sys-color-surface-container-highest);
    }

    .mdc-linear-progress__primary-bar .mdc-linear-progress__bar-inner {
        background-color: var(--md-sys-color-primary);
    }
}

/* Explicit dark mode support with data-theme attribute */
:root[data-theme="dark"] {
    /* Apply all dark mode styles when explicitly set */
}

:root[data-theme="dark"] .md-component-border {
    border-color: var(--md-sys-color-outline-variant);
}

:root[data-theme="dark"] .md-subtle-background {
    background: var(--md-sys-color-surface-container-low);
}

:root[data-theme="dark"] .md-interactive-surface:hover {
    background: var(--md-sys-color-surface-container-high);
}

:root[data-theme="dark"] .md-skeleton {
    background: linear-gradient(
        90deg,
        var(--md-sys-color-surface-container) 25%,
        var(--md-sys-color-surface-container-highest) 50%,
        var(--md-sys-color-surface-container) 75%
    );
}

:root[data-theme="dark"] .mdc-card {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

:root[data-theme="dark"] .mdc-data-table {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

:root[data-theme="dark"] .mdc-data-table__header-row {
    background-color: var(--md-sys-color-surface-container-high);
}

:root[data-theme="dark"] .mdc-data-table__header-cell {
    color: var(--md-sys-color-on-surface);
    border-bottom-color: var(--md-sys-color-outline-variant);
}

:root[data-theme="dark"] .mdc-data-table__cell {
    color: var(--md-sys-color-on-surface);
    border-bottom-color: var(--md-sys-color-outline-variant);
}

:root[data-theme="dark"] .mdc-data-table__row:hover {
    background-color: var(--md-sys-color-surface-container-highest);
}

:root[data-theme="dark"] .mdc-text-field {
    background-color: var(--md-sys-color-surface-container);
}

:root[data-theme="dark"] .mdc-text-field__input {
    color: var(--md-sys-color-on-surface);
}

:root[data-theme="dark"] .mdc-notched-outline__leading,
:root[data-theme="dark"] .mdc-notched-outline__notch,
:root[data-theme="dark"] .mdc-notched-outline__trailing {
    border-color: var(--md-sys-color-outline);
}

:root[data-theme="dark"] .mdc-floating-label {
    color: var(--md-sys-color-on-surface-variant);
}

:root[data-theme="dark"] .mdc-text-field--with-leading-icon .mdc-text-field__icon {
    color: var(--md-sys-color-on-surface-variant);
}

:root[data-theme="dark"] .mdc-button {
    color: var(--md-sys-color-primary);
}

:root[data-theme="dark"] .mdc-button--raised {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

:root[data-theme="dark"] .mdc-dialog__surface {
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

:root[data-theme="dark"] .mdc-dialog__title {
    color: var(--md-sys-color-on-surface);
}

:root[data-theme="dark"] .mdc-dialog__scrim {
    background-color: rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .mdc-fab {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

:root[data-theme="dark"] .mdc-fab:hover {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

:root[data-theme="dark"] .mdc-select__anchor {
    background-color: var(--md-sys-color-surface-container);
}

:root[data-theme="dark"] .mdc-select__selected-text {
    color: var(--md-sys-color-on-surface);
}

:root[data-theme="dark"] .mdc-select__dropdown-icon {
    fill: var(--md-sys-color-on-surface-variant);
}

:root[data-theme="dark"] .mdc-menu-surface {
    background-color: var(--md-sys-color-surface-container-high);
}

:root[data-theme="dark"] .mdc-deprecated-list-item {
    color: var(--md-sys-color-on-surface);
}

:root[data-theme="dark"] .mdc-deprecated-list-item:hover {
    background-color: var(--md-sys-color-surface-container-highest);
}

:root[data-theme="dark"] .mdc-linear-progress__buffer {
    background-color: var(--md-sys-color-surface-container-highest);
}

:root[data-theme="dark"] .mdc-linear-progress__primary-bar .mdc-linear-progress__bar-inner {
    background-color: var(--md-sys-color-primary);
}

/* Responsive Breakpoints */
.md-container {
    width: 100%;
    padding: 0 16px;
    margin: 0 auto;
}

/* Mobile (up to 599px) */
@media (max-width: 599px) {
    .md-hide-mobile {
        display: none !important;
    }

    .md-table {
        font-size: 14px;
    }

    .md-table th,
    .md-table td {
        padding: 12px 8px;
    }

    .md-card {
        border-radius: 0;
        margin: 0 -16px;
    }

    .md-modal-content {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .md-button-group {
        width: 100%;
        flex-direction: column;
    }

    .md-responsive-grid {
        grid-template-columns: 1fr;
    }
}

/* Tablet (600px to 1239px) */
@media (min-width: 600px) and (max-width: 1239px) {
    .md-hide-tablet {
        display: none !important;
    }

    .md-container {
        padding: 0 24px;
    }

    .md-responsive-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* Desktop (1240px and up) */
@media (min-width: 1240px) {
    .md-hide-desktop {
        display: none !important;
    }

    .md-container {
        max-width: 1200px;
        padding: 0 32px;
    }

    .md-container.wide {
        max-width: 1440px;
    }

    .md-container.full {
        max-width: none;
    }
}

/* Extra large screens (1920px and up) */
@media (min-width: 1920px) {
    .md-container {
        max-width: 1600px;
    }

    .md-responsive-grid {
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    }
}

/* ========================================
   MOBILE NAVIGATION COMPONENTS
   ======================================== */

/* Hamburger Menu Button - MUST BE HIDDEN ON DESKTOP */
.hamburger-menu {
    display: none !important; /* Force hidden on desktop */
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    color: var(--md-sys-color-on-surface);
    transition: background-color 0.2s;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.hamburger-menu:hover {
    background-color: var(--md-sys-color-surface-container-highest);
}

.hamburger-menu .material-symbols-outlined {
    font-size: 24px;
}

/* Mobile Drawer Overlay - MUST BE HIDDEN ON DESKTOP */
.mobile-drawer-overlay {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1100;
    opacity: 0;
    transition: opacity 0.3s ease;
    visibility: hidden;
    pointer-events: none;
}

.mobile-drawer-overlay.show {
    display: none !important; /* Stays hidden on desktop even with .show class */
    opacity: 1;
}

/* Mobile Drawer - MUST BE HIDDEN ON DESKTOP */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background-color: var(--md-sys-color-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: none !important; /* Force hidden on desktop */
    visibility: hidden;
    pointer-events: none;
}

.mobile-drawer.open {
    transform: translateX(-100%); /* Keep it off-screen even when .open on desktop */
    display: none !important; /* Stays hidden on desktop even with .open class */
}

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

.drawer-title {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    color: var(--md-sys-color-on-surface);
}

.drawer-content {
    padding: 8px 0;
}

.drawer-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.drawer-section:last-child {
    border-bottom: none;
}

.drawer-section-title {
    padding: 12px 16px 8px 16px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--md-sys-color-on-surface-variant);
}

.drawer-item {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 12px 16px;
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 0;
    background: none !important;
    background-color: transparent !important;
    color: var(--md-sys-color-on-surface) !important;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Atkinson Hyperlegible', 'Roboto', sans-serif;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: none !important;
}

.drawer-item:hover {
    background-color: var(--md-sys-color-surface-container-highest) !important;
}

.drawer-item .material-symbols-outlined {
    font-size: 24px;
    color: var(--md-sys-color-on-surface-variant);
    flex-shrink: 0;
}

.drawer-customer-info {
    padding: 12px 16px;
}

.drawer-customer-name {
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 4px;
}

.drawer-uuid {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    font-family: 'Atkinson Hyperlegible Mono', 'Roboto Mono', monospace;
}

.company-select-mobile {
    width: 100%;
    margin: 0 16px;
    max-width: calc(100% - 32px);
}

/* Mobile Search Button - MUST BE HIDDEN ON DESKTOP */
.mobile-search-button {
    display: none !important; /* Force hidden on desktop */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Mobile Search Overlay */
.mobile-search-overlay {
    display: none !important; /* Force hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--md-sys-color-surface);
    z-index: 1300;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    flex-direction: column;
}

.mobile-search-overlay.open {
    display: flex;
    transform: translateY(0);
}

.mobile-search-header {
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 8px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background-color: var(--md-sys-color-surface);
}

.mobile-search-input-container {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.mobile-search-input-container .search-icon {
    position: absolute;
    left: 12px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 24px;
}

.mobile-search-input {
    width: 100%;
    padding: 12px 12px 12px 48px;
    border: none;
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
    font-size: 16px;
    border-radius: 28px;
    outline: none;
}

.mobile-search-input::placeholder {
    color: var(--md-sys-color-on-surface-variant);
}

.mobile-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .app-bar-container {
        padding: 8px 16px;
        gap: 16px;
    }

    .app-bar-center {
        flex: 0 1 400px;
    }

    .search-container {
        max-width: 400px;
    }
}

/* Mobile (<= 768px) - ENABLE MOBILE ELEMENTS */
@media (max-width: 768px) {
    /* App Bar Adjustments */
    .app-bar-container {
        padding: 8px 12px;
        gap: 8px;
    }

    /* ENABLE mobile-specific elements on small screens */
    .hamburger-menu {
        display: flex !important;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .mobile-search-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .mobile-drawer {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-drawer.open {
        transform: translateX(0) !important; /* Slide in on mobile */
        display: block !important;
    }

    .mobile-drawer-overlay {
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-drawer-overlay.show {
        display: block !important; /* Show overlay on mobile when drawer opens */
    }

    .mobile-search-overlay {
        display: none !important; /* Will become flex when open */
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-search-overlay.open {
        display: flex !important;
    }

    /* Hide desktop elements */
    .app-bar-center {
        display: none; /* Hide desktop search */
    }

    .desktop-icon {
        display: none; /* Hide desktop icon buttons */
    }

    .company-selector-desktop {
        display: none !important; /* Hide desktop company selector */
    }

    /* Brand adjustments */
    .product-name {
        /* Hide the product name on very small screens. The brand's wordmark is
           what a customer needs to see in a cramped bar — it tells them whose
           service they are in. The product name is the half that can go. */
        display: none;
    }

    /* Height-only, same reasoning as the base rule. The narrower cap matters
       more here: the product name is hidden at this width, so the wordmark is
       the only thing in the bar naming anyone, and it still must not crowd it. */
    .logo {
        height: 32px;
        width: auto;
        max-width: 150px;
    }

    /* User avatar size */
    .user-avatar img {
        width: 32px;
        height: 32px;
    }

    /* Modules grid on mobile */
    .modules-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }

    /* Footer adjustments */
    .app-footer {
        padding: 16px 12px;
    }
}

/* Small mobile (< 360px) */
@media (max-width: 360px) {
    .app-bar-container {
        padding: 8px;
        gap: 4px;
    }

    .hamburger-menu,
    .icon-button {
        width: 40px;
        height: 40px;
    }

    .logo {
        height: 28px;
        width: auto;
        max-width: 130px;
    }
}

/* ---------------------------------------------------------------------------
   Subject band (Phase 1.5)

   Shown whenever the user is working on a relationship that is not their own
   seat. Fixed amber/gold rather than a theme colour on purpose: it must read as
   "you are somewhere unusual" in both light and dark, and must not blend into
   whichever brand palette the tenant is using.
   --------------------------------------------------------------------------- */

.subject-band {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background-color: #FFC107;
    color: #1F1400;
    font-size: 0.9375rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.subject-band-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.subject-band-text {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}

.subject-band-label {
    font-weight: 500;
    opacity: 0.85;
}

.subject-band-name {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
}

.subject-band-chip {
    padding: 1px 8px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.14);
    font-size: 0.75rem;
    text-transform: capitalize;
    white-space: nowrap;
}

.subject-band-via {
    font-size: 0.8125rem;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subject-band-done {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 16px;
    background-color: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.subject-band-done:hover { background-color: rgba(0, 0, 0, 0.09); }
.subject-band-done:disabled { opacity: 0.6; cursor: default; }

/* The band is a warning, not decoration: it keeps its colour in dark mode
   rather than being toned down to match the surrounding surface. */
@media (prefers-color-scheme: dark) {
    .subject-band {
        background-color: #E5A700;
        color: #1F1400;
        border-bottom-color: rgba(0, 0, 0, 0.35);
    }
}

/* Mobile: compressed — icon, truncated name, short Done. The full tappable
   bottom sheet is Phase 3 chrome. */
@media (max-width: 768px) {
    .subject-band {
        padding: 8px 12px;
        gap: 8px;
        font-size: 0.875rem;
    }
    .subject-band-name { max-width: 18ch; }
    .subject-band-chip,
    .subject-band-via { display: none; }
    .subject-band-label { display: none; }
    .subject-band-done {
        padding: 5px 10px;
        font-size: 0.8125rem;
    }
    /* "Done — back to {seat}" is too long on a phone; the seat name is already
       one tap away. */
    .subject-band-done { font-size: 0; }
    .subject-band-done::after {
        content: "Done";
        font-size: 0.8125rem;
    }
}

/* ---------------------------------------------------------------------------
   Conscious-entry interstitial (Phase 1.3)
   --------------------------------------------------------------------------- */

.subject-interstitial {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px;
}

.subject-interstitial-card {
    max-width: 34rem;
    padding: 32px;
    text-align: left;
}

.subject-interstitial-icon {
    font-size: 40px;
    color: var(--md-sys-color-primary);
}

.subject-interstitial-detail { opacity: 0.8; }

.subject-interstitial-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

/* Mobile: render as a bottom sheet. */
@media (max-width: 768px) {
    .subject-interstitial {
        align-items: flex-end;
        min-height: 100vh;
        padding: 0;
    }
    .subject-interstitial-card {
        width: 100%;
        max-width: none;
        border-radius: 16px 16px 0 0;
        padding: 24px 20px 32px;
    }
    .subject-interstitial-actions { justify-content: stretch; }
    .subject-interstitial-actions > * { flex: 1; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Corner-mark seat control (Phase 3 nav, #11)

   The seat IS the corner mark: a company monogram in a deterministic colour,
   with the person reduced to a small badge. This replaced a faux-human avatar
   (which implied the identity was the person, when the relationship is what
   scopes every request) plus a separate company <select> in the bar.
   --------------------------------------------------------------------------- */

.seat-menu { position: relative; }

.seat-mark {
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;          /* squircle, not a circle: a circle reads as a person */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    color: #fff;
    padding: 0;
}

.seat-mark:hover { filter: brightness(1.08); }
.seat-mark:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }

.seat-mark-monogram { line-height: 1; }

/* The person is a badge on the company, not the other way round. */
.seat-mark-person {
    position: absolute;
    right: -3px;
    bottom: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border: 1.5px solid var(--md-sys-color-surface);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

/* Seated away from the usual company: a quiet marker, reinforced by the line in
   the menu. Deliberately not alarming — being away is normal, just worth noting. */
.seat-mark-away-dot {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FFC107;
    border: 1.5px solid var(--md-sys-color-surface);
}

/* Deterministic palette. Chosen for contrast against white text and for being
   distinguishable from each other at 40px — the colour is how a returning user
   recognises the seat before reading it. */
.seat-mark-c0 { background-color: #3D5AFE; }
.seat-mark-c1 { background-color: #00897B; }
.seat-mark-c2 { background-color: #C2185B; }
.seat-mark-c3 { background-color: #5E35B1; }
.seat-mark-c4 { background-color: #EF6C00; }
.seat-mark-c5 { background-color: #0277BD; }
.seat-mark-c6 { background-color: #558B2F; }
.seat-mark-c7 { background-color: #AD1457; }

.seat-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 300px;
    max-width: 380px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 0;
    z-index: 1200;
    display: none;
}

.seat-dropdown.is-open { display: block; }

.seat-dropdown-person { padding: 12px 16px 8px; outline: none; }
.seat-dropdown-person-name { font-weight: 600; }
.seat-dropdown-person-email { font-size: 0.8125rem; opacity: 0.7; }

/* Seat identity block — the contact and relationship UUIDs.
 *
 * Hidden until the person block is hovered or focused. Collapsed with
 * max-height rather than display:none so the reveal does not jump the menu's
 * height, and so the text stays selectable the moment it appears — the whole
 * point is copying the value out.
 *
 * user-select:all makes one click select the whole UUID. Selecting 36
 * characters of hex by dragging is exactly the fiddly step this block exists to
 * remove. */
.seat-dropdown-ids {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.15s ease, opacity 0.15s ease, margin-top 0.15s ease;
}
.seat-dropdown-person:hover .seat-dropdown-ids,
.seat-dropdown-person:focus-within .seat-dropdown-ids,
.seat-dropdown-person:focus .seat-dropdown-ids {
    max-height: 6rem;
    opacity: 1;
    margin-top: 6px;
}
.seat-dropdown-id {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.5;
}
.seat-dropdown-id-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
    flex: 0 0 auto;
    min-width: 5.5em;
}
.seat-dropdown-id-value {
    font-family: 'Atkinson Hyperlegible Mono', 'Roboto Mono', monospace;
    font-size: 0.6875rem;
    opacity: 0.85;
    user-select: all;
    word-break: break-all;
}

.seat-dropdown-away {
    margin: 4px 12px 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 193, 7, 0.16);
    font-size: 0.8125rem;
}
.seat-dropdown-away-primary { display: block; opacity: 0.75; }

.seat-dropdown-divider {
    height: 1px;
    margin: 6px 0;
    background: var(--md-sys-color-outline, rgba(0, 0, 0, 0.12));
    opacity: 0.4;
}

.seat-dropdown-section-title {
    padding: 4px 16px 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
}

.seat-dropdown-seat,
.seat-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.seat-dropdown-seat:hover,
.seat-dropdown-item:hover { background: rgba(127, 127, 127, 0.12); }
.seat-dropdown-seat.is-current { font-weight: 600; }

/* The name column. flex:1 lives on the wrapper rather than the name so the
 * qualifier under it shares the same width and truncates on the same edge;
 * min-width:0 is what actually lets a flex child ellipsize at all. */
.seat-dropdown-seat-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.seat-dropdown-seat-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "via Uptown Moose" — present only on seats whose company name is not unique
 * in the menu. font-weight is pinned so .is-current's 600 does not promote the
 * qualifier to look like a second name. */
.seat-dropdown-seat-via {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seat-dropdown-check { font-size: 18px; opacity: 0.7; }

.seat-chip {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Mobile: the same menu becomes a bottom sheet. The mark rides in the app bar on
   every viewport, which is what fixes the portrait bug — the old mobile company
   <select> lived in the drawer and was never wired to anything, so on a phone
   there was no way to change seat at all. */
@media (max-width: 768px) {
    .seat-dropdown {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        max-width: none;
        border-radius: 16px 16px 0 0;
        padding: 8px 0 24px;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.24);
        max-height: 70vh;
        overflow-y: auto;
    }

    .seat-dropdown.is-open::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        margin: 4px auto 12px;
        border-radius: 2px;
        background: currentColor;
        opacity: 0.25;
    }

    .seat-dropdown-seat,
    .seat-dropdown-item { padding: 14px 20px; }
}

/* Scrim behind the bottom sheet. */
body.seat-sheet-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1100;
}
@media (min-width: 769px) {
    body.seat-sheet-open::after { display: none; }
}

/* Shell 404 (see templates/not_found.html) */
.not-found {
    max-width: 34rem;
    margin: 8vh auto;
    padding: 0 24px;
    text-align: center;
}
.not-found-icon { font-size: 48px; opacity: 0.5; }
.not-found-path {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(127, 127, 127, 0.15);
    word-break: break-all;
}
.not-found-detail { opacity: 0.75; }
.not-found-actions { margin-top: 24px; }
.not-found-meta { margin-top: 32px; font-size: 0.75rem; opacity: 0.5; }
/* ---------------------------------------------------------------------------
   Search-first home (Phase 3 nav, #10)
   --------------------------------------------------------------------------- */

.home { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.home-search { padding: 6vh 0 4vh; text-align: center; }
.home-search-title { margin: 0 0 20px; font-weight: 400; }

.home-search-container {
    max-width: 620px;
    margin: 0 auto;
}
.home-search-field { font-size: 1.05rem; }


.home-search-hint { margin-top: 12px; font-size: 0.8125rem; opacity: 0.65; }
.home-search-hint kbd {
    padding: 1px 6px;
    border: 1px solid rgba(127, 127, 127, 0.4);
    border-radius: 4px;
    font-family: inherit;
}
.home-search-example { font-style: italic; }

.home-modules-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.home-modules-title { flex: 1; margin: 0; font-size: 1rem; opacity: 0.75; }

.home-modules-toggle,
.home-modules-pin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 16px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}
.home-modules-toggle .material-symbols-outlined,
.home-modules-pin .material-symbols-outlined { font-size: 18px; }

.home-modules-pin.is-pinned {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary, #fff);
    border-color: transparent;
}

/* Collapsed: chips instead of cards. The modules stay reachable — collapsing
   must not hide them, only make them take less room. */
.home-modules-chips { display: none; flex-wrap: wrap; gap: 8px; }
.home-modules.is-collapsed .home-modules-chips { display: flex; }
.home-modules.is-collapsed .modules-grid { display: none; }
.home-modules.is-collapsed .home-modules-toggle .material-symbols-outlined {
    transform: rotate(-90deg);
}

.home-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    background: rgba(127, 127, 127, 0.12);
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
}
.home-chip:hover { background: rgba(127, 127, 127, 0.2); }
.home-chip-icon { font-size: 18px; }

/* Autocomplete rows now carry either a module icon or a company mark. */
.autocomplete-item { display: flex; align-items: center; gap: 10px; }
.autocomplete-text { min-width: 0; flex: 1; }
.autocomplete-icon { font-size: 20px; opacity: 0.7; }
.autocomplete-chip {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
}
.autocomplete-title,
.autocomplete-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 768px) {
    .home-search { padding: 3vh 0 2vh; }
    .home-search-title { font-size: 1.25rem; }
}

/* Band subject-recents dropdown (Phase 3 nav, #12) */
.subject-band-switcher { position: relative; display: inline-flex; }

.subject-band-name-button {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
.subject-band-caret { font-size: 18px; }

.subject-band-recents {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-width: 320px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 6px 0;
    z-index: 1200;
}
.subject-band-recents.is-open { display: block; }

.subject-band-recents-title {
    padding: 6px 14px;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
}

/* Open work sessions — the "Currently working on" section (#17).
 *
 * A row is a link plus its own Done, so a subject can be left without first
 * navigating to it. That was the gap that left sessions lapsing rather than
 * being ended: Done only ever applied to the page you were looking at. */
.subject-band-open {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 14px 2px 0;
}
.subject-band-open:hover { background: rgba(127, 127, 127, 0.14); }

.subject-band-open-name {
    flex: 1 1 auto;
    padding: 8px 0 8px 14px;
    color: inherit;
    text-decoration: none;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The row you are already on. Marked rather than hidden: a switcher that omits
 * where you are makes you count entries to work out which one is missing. */
.subject-band-open-current .subject-band-open-name { font-weight: 600; }
.subject-band-open-here {
    font-weight: 400;
    opacity: 0.6;
    font-size: 0.8125rem;
}

.subject-band-open-done,
.subject-band-done-all {
    flex: 0 0 auto;
    background: none;
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 4px;
    padding: 3px 10px;
    font: inherit;
    font-size: 0.8125rem;
    color: inherit;
    cursor: pointer;
}
.subject-band-open-done:hover,
.subject-band-done-all:hover { background: rgba(127, 127, 127, 0.2); }
.subject-band-open-done:disabled,
.subject-band-done-all:disabled { opacity: 0.5; cursor: default; }

.subject-band-done-all {
    display: block;
    width: calc(100% - 28px);
    margin: 6px 14px 2px;
    text-align: center;
}

.subject-band-divider {
    height: 1px;
    margin: 8px 0;
    background: rgba(127, 127, 127, 0.2);
}

.subject-band-recent {
    display: block;
    padding: 8px 14px;
    color: inherit;
    text-decoration: none;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.subject-band-recent:hover { background: rgba(127, 127, 127, 0.14); }
.subject-band-recent-record {
    border-top: 1px solid rgba(127, 127, 127, 0.2);
    margin-top: 4px;
    font-size: 0.8125rem;
    opacity: 0.85;
}

/* The search-first home owns the search box; the app bar's would be a second,
   identical control on the same screen. Kept in the DOM (its handlers are shared)
   but hidden, so the two cannot diverge in behaviour. */
body.has-page-search .app-bar-center { visibility: hidden; }
body.has-page-search .mobile-search-button { display: none; }

/* Home search field: larger, so it needs proportionally more room for the icon. */
.home-search-field {
    padding-left: 52px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.home-search-container .search-icon { left: 18px; font-size: 22px; }