/* ═══════════════════════════════════════════════════════════
   ANANTA RUBBER — Shared M3 Design System
   Every screen in this app loads this ONE file — same shared-token discipline
   that fixed the cross-page drift on ACS's admin panel (one canonical source
   beats N hand-copied pages that quietly diverge).

   Stable Material Web Components (`<md-filled-button>`, `<md-outlined-text-field>`,
   `<md-dialog>`, `<md-checkbox>`, `<md-radio>`, `<md-switch>`, `<md-*-progress>`,
   `<md-chip-set>`, `<md-fab>`, `<md-list>`, `<md-icon-button>`) are used for every
   interactive control. Navigation drawer/bar and Card are still marked "Labs —
   not recommended for production" in Material Web's own docs (verified live,
   2026-08), so those three are built here as plain HTML/CSS driven by the same
   M3 tokens below — visually and structurally real M3, just not built on the
   experimental layer.
═══════════════════════════════════════════════════════════ */

/* ── M3 color tokens ──
   Seed: a warm burnt-terracotta (#B5522A) — industrial, rubber-toned, distinct
   from any other project's palette. Hand-authored following M3's documented
   role structure and tonal-scale relationships (light: primary≈tone40,
   primary-container≈tone90; dark: primary≈tone80, primary-container≈tone30),
   not run through Google's HCT algorithm — see chat for why (no verified CDN
   API for the runtime generator at build time). Swap these values any time;
   the token NAMES below are what every component/page reads. */
:root{
  --md-sys-color-primary:#8B3D20;
  --md-sys-color-on-primary:#FFFFFF;
  --md-sys-color-primary-container:#FFDBCC;
  --md-sys-color-on-primary-container:#3A1200;

  --md-sys-color-secondary:#77574C;
  --md-sys-color-on-secondary:#FFFFFF;
  --md-sys-color-secondary-container:#FFDBCC;
  --md-sys-color-on-secondary-container:#2C160D;

  --md-sys-color-tertiary:#68602C;
  --md-sys-color-on-tertiary:#FFFFFF;
  --md-sys-color-tertiary-container:#F0E48B;
  --md-sys-color-on-tertiary-container:#201C00;

  --md-sys-color-error:#BA1A1A;
  --md-sys-color-on-error:#FFFFFF;
  --md-sys-color-error-container:#FFDAD6;
  --md-sys-color-on-error-container:#410002;
  --md-sys-color-success:#2E7D32;
  --md-sys-color-on-success:#FFFFFF;
  --md-sys-color-success-container:#C8E6C9;
  --md-sys-color-on-success-container:#0B3B0D;

  --md-sys-color-background:#FFF8F6;
  --md-sys-color-on-background:#231A15;
  --md-sys-color-surface:#FFF8F6;
  --md-sys-color-on-surface:#231A15;
  --md-sys-color-surface-variant:#F5DED4;
  --md-sys-color-on-surface-variant:#53433C;

  --md-sys-color-surface-dim:#E7D6CE;
  --md-sys-color-surface-bright:#FFF8F6;
  --md-sys-color-surface-container-lowest:#FFFFFF;
  --md-sys-color-surface-container-low:#FCF1EB;
  --md-sys-color-surface-container:#F7E9E2;
  --md-sys-color-surface-container-high:#F1E3DC;
  --md-sys-color-surface-container-highest:#EBDDD6;

  --md-sys-color-outline:#85736A;
  --md-sys-color-outline-variant:#D8C3B9;
  --md-sys-color-shadow:#000000;
  --md-sys-color-scrim:#000000;
  --md-sys-color-inverse-surface:#392E29;
  --md-sys-color-inverse-on-surface:#FFEDE5;
  --md-sys-color-inverse-primary:#FFB599;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --md-sys-color-primary:#FFB599;
    --md-sys-color-on-primary:#5C1E07;
    --md-sys-color-primary-container:#732C13;
    --md-sys-color-on-primary-container:#FFDBCC;

    --md-sys-color-secondary:#E7BEAF;
    --md-sys-color-on-secondary:#442A20;
    --md-sys-color-secondary-container:#5D4035;
    --md-sys-color-on-secondary-container:#FFDBCC;

    --md-sys-color-tertiary:#D3C86F;
    --md-sys-color-on-tertiary:#363100;
    --md-sys-color-tertiary-container:#4F4900;
    --md-sys-color-on-tertiary-container:#F0E48B;

    --md-sys-color-error:#FFB4AB;
    --md-sys-color-on-error:#690005;
    --md-sys-color-error-container:#93000A;
    --md-sys-color-on-error-container:#FFDAD6;
    --md-sys-color-success:#8FDB92;
    --md-sys-color-on-success:#00390A;
    --md-sys-color-success-container:#0B5D16;
    --md-sys-color-on-success-container:#C8E6C9;

    --md-sys-color-background:#1A120D;
    --md-sys-color-on-background:#EDE0DA;
    --md-sys-color-surface:#1A120D;
    --md-sys-color-on-surface:#EDE0DA;
    --md-sys-color-surface-variant:#53433C;
    --md-sys-color-on-surface-variant:#D8C3B9;

    --md-sys-color-surface-dim:#1A120D;
    --md-sys-color-surface-bright:#412F28;
    --md-sys-color-surface-container-lowest:#140D09;
    --md-sys-color-surface-container-low:#231A15;
    --md-sys-color-surface-container:#271E18;
    --md-sys-color-surface-container-high:#322822;
    --md-sys-color-surface-container-highest:#3D332C;

    --md-sys-color-outline:#A08D83;
    --md-sys-color-outline-variant:#53433C;
    --md-sys-color-inverse-surface:#EDE0DA;
    --md-sys-color-inverse-on-surface:#392E29;
    --md-sys-color-inverse-primary:#8B3D20;
  }
}
:root[data-theme="dark"]{
  --md-sys-color-primary:#FFB599;--md-sys-color-on-primary:#5C1E07;
  --md-sys-color-primary-container:#732C13;--md-sys-color-on-primary-container:#FFDBCC;
  --md-sys-color-secondary:#E7BEAF;--md-sys-color-on-secondary:#442A20;
  --md-sys-color-secondary-container:#5D4035;--md-sys-color-on-secondary-container:#FFDBCC;
  --md-sys-color-tertiary:#D3C86F;--md-sys-color-on-tertiary:#363100;
  --md-sys-color-tertiary-container:#4F4900;--md-sys-color-on-tertiary-container:#F0E48B;
  --md-sys-color-error:#FFB4AB;--md-sys-color-on-error:#690005;
  --md-sys-color-error-container:#93000A;--md-sys-color-on-error-container:#FFDAD6;
  --md-sys-color-success:#8FDB92;--md-sys-color-on-success:#00390A;
  --md-sys-color-success-container:#0B5D16;--md-sys-color-on-success-container:#C8E6C9;
  --md-sys-color-background:#1A120D;--md-sys-color-on-background:#EDE0DA;
  --md-sys-color-surface:#1A120D;--md-sys-color-on-surface:#EDE0DA;
  --md-sys-color-surface-variant:#53433C;--md-sys-color-on-surface-variant:#D8C3B9;
  --md-sys-color-surface-dim:#1A120D;--md-sys-color-surface-bright:#412F28;
  --md-sys-color-surface-container-lowest:#140D09;--md-sys-color-surface-container-low:#231A15;
  --md-sys-color-surface-container:#271E18;--md-sys-color-surface-container-high:#322822;
  --md-sys-color-surface-container-highest:#3D332C;
  --md-sys-color-outline:#A08D83;--md-sys-color-outline-variant:#53433C;
  --md-sys-color-inverse-surface:#EDE0DA;--md-sys-color-inverse-on-surface:#392E29;
  --md-sys-color-inverse-primary:#8B3D20;
}

/* ── M3 typography scale ── */
:root{
  --md-sys-typescale-display-large-font:'Roboto',system-ui,sans-serif;
  --md-sys-typescale-display-large-size:57px;--md-sys-typescale-display-large-weight:400;--md-sys-typescale-display-large-line-height:64px;
  --md-sys-typescale-headline-large-size:32px;--md-sys-typescale-headline-large-weight:400;--md-sys-typescale-headline-large-line-height:40px;
  --md-sys-typescale-headline-medium-size:28px;--md-sys-typescale-headline-medium-weight:400;--md-sys-typescale-headline-medium-line-height:36px;
  --md-sys-typescale-headline-small-size:24px;--md-sys-typescale-headline-small-weight:400;--md-sys-typescale-headline-small-line-height:32px;
  --md-sys-typescale-title-large-size:22px;--md-sys-typescale-title-large-weight:500;--md-sys-typescale-title-large-line-height:28px;
  --md-sys-typescale-title-medium-size:16px;--md-sys-typescale-title-medium-weight:500;--md-sys-typescale-title-medium-line-height:24px;
  --md-sys-typescale-title-small-size:14px;--md-sys-typescale-title-small-weight:500;--md-sys-typescale-title-small-line-height:20px;
  --md-sys-typescale-body-large-size:16px;--md-sys-typescale-body-large-weight:400;--md-sys-typescale-body-large-line-height:24px;
  --md-sys-typescale-body-medium-size:14px;--md-sys-typescale-body-medium-weight:400;--md-sys-typescale-body-medium-line-height:20px;
  --md-sys-typescale-body-small-size:12px;--md-sys-typescale-body-small-weight:400;--md-sys-typescale-body-small-line-height:16px;
  --md-sys-typescale-label-large-size:14px;--md-sys-typescale-label-large-weight:500;--md-sys-typescale-label-large-line-height:20px;
  --md-sys-typescale-label-medium-size:12px;--md-sys-typescale-label-medium-weight:500;--md-sys-typescale-label-medium-line-height:16px;
  --md-sys-typescale-label-small-size:11px;--md-sys-typescale-label-small-weight:500;--md-sys-typescale-label-small-line-height:16px;

  /* ── M3 shape tokens ── */
  --md-sys-shape-corner-none:0px;
  --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;

  /* ── M3 elevation (surface-tint approximated via box-shadow, standard M3 values) ── */
  --md-sys-elevation-0:none;
  --md-sys-elevation-1:0px 1px 2px rgba(0,0,0,.30),0px 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-2:0px 1px 2px rgba(0,0,0,.30),0px 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-3:0px 4px 8px 3px rgba(0,0,0,.15),0px 1px 3px rgba(0,0,0,.30);
  --md-sys-elevation-4:0px 6px 10px 4px rgba(0,0,0,.15),0px 2px 3px rgba(0,0,0,.30);
  --md-sys-elevation-5:0px 8px 12px 6px rgba(0,0,0,.15),0px 4px 4px rgba(0,0,0,.30);

  --nav-drawer-w:280px;
  --top-bar-h:64px;
  --bottom-nav-h:80px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}

/* ── Reset + base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--md-sys-color-background);
  color:var(--md-sys-color-on-background);
  font-family:'Roboto',system-ui,-apple-system,sans-serif;
  font-size:var(--md-sys-typescale-body-large-size);
  line-height:var(--md-sys-typescale-body-large-line-height);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}

h1,.md-headline-large{font-size:var(--md-sys-typescale-headline-large-size);font-weight:var(--md-sys-typescale-headline-large-weight);line-height:var(--md-sys-typescale-headline-large-line-height)}
h2,.md-headline-small{font-size:var(--md-sys-typescale-headline-small-size);font-weight:var(--md-sys-typescale-headline-small-weight);line-height:var(--md-sys-typescale-headline-small-line-height)}
h3,.md-title-large{font-size:var(--md-sys-typescale-title-large-size);font-weight:var(--md-sys-typescale-title-large-weight);line-height:var(--md-sys-typescale-title-large-line-height)}
.md-title-medium{font-size:var(--md-sys-typescale-title-medium-size);font-weight:var(--md-sys-typescale-title-medium-weight);line-height:var(--md-sys-typescale-title-medium-line-height)}
.md-body-medium{font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height)}
.md-body-small{font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height)}
.md-label-large{font-size:var(--md-sys-typescale-label-large-size);font-weight:var(--md-sys-typescale-label-large-weight);line-height:var(--md-sys-typescale-label-large-line-height)}
.md-label-small{font-size:var(--md-sys-typescale-label-small-size);font-weight:var(--md-sys-typescale-label-small-weight);line-height:var(--md-sys-typescale-label-small-line-height)}
.on-surface-variant{color:var(--md-sys-color-on-surface-variant)}

/* ── App shell layout ── */
.app-shell{display:grid;grid-template-columns:var(--nav-drawer-w) 1fr;min-height:100vh}
@media(max-width:840px){.app-shell{grid-template-columns:1fr}}
.main-content{display:flex;flex-direction:column;min-height:100vh;min-width:0}

/* ── Top app bar (M3 spec — stable, hand-built since <md-top-app-bar> isn't
   part of the published component set; structure/tokens are 100% M3) ── */
.top-app-bar{
  display:flex;align-items:center;gap:8px;
  height:var(--top-bar-h);padding:0 4px 0 4px;
  background:var(--md-sys-color-surface);
  color:var(--md-sys-color-on-surface);
  border-bottom:1px solid var(--md-sys-color-outline-variant);
  position:sticky;top:0;z-index:20;flex-shrink:0;
}
.top-app-bar .title{font-size:var(--md-sys-typescale-title-large-size);font-weight:var(--md-sys-typescale-title-large-weight);margin-left:4px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-btn{display:none}
@media(max-width:840px){.menu-btn{display:inline-flex}}

/* ── Navigation drawer (M3 spec, hand-built — see file header) ── */
.nav-drawer{
  width:var(--nav-drawer-w);background:var(--md-sys-color-surface);
  border-right:1px solid var(--md-sys-color-outline-variant);
  display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow-y:auto;
}
@media(max-width:840px){
  .nav-drawer{
    position:fixed;top:0;left:0;bottom:0;z-index:60;
    transform:translateX(-100%);transition:transform 280ms cubic-bezier(0.2,0,0,1);
    box-shadow:var(--md-sys-elevation-1);
  }
  .nav-drawer.open{transform:translateX(0)}
}
.nav-drawer-scrim{display:none}
@media(max-width:840px){
  .nav-drawer-scrim{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;
  }
  .nav-drawer-scrim.open{display:block}
}
.nav-drawer-header{padding:calc(20px + var(--sat)) 16px 16px;display:flex;align-items:center;gap:12px}
.nav-drawer-brand-name{font-size:var(--md-sys-typescale-title-medium-size);font-weight:600}
.nav-drawer-brand-sub{font-size:var(--md-sys-typescale-body-small-size);color:var(--md-sys-color-on-surface-variant)}
.nav-drawer-section{padding:0 12px}
.nav-drawer-label{font-size:var(--md-sys-typescale-label-small-size);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);padding:16px 16px 8px}
.nav-drawer-item{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px;
  border-radius:var(--md-sys-shape-corner-full);color:var(--md-sys-color-on-surface-variant);
  text-decoration:none;font-size:var(--md-sys-typescale-label-large-size);font-weight:var(--md-sys-typescale-label-large-weight);
  -webkit-tap-highlight-color:transparent;
}
.nav-drawer-item:hover{background:color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)}
.nav-drawer-item.active{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);font-weight:700}
.nav-drawer-item .ms{font-size:22px}
.nav-drawer-footer{margin-top:auto;padding:16px calc(16px) calc(16px + var(--sab));border-top:1px solid var(--md-sys-color-outline-variant)}

/* ── Bottom nav (mobile, M3 spec) ── */
.bottom-nav{display:none}
@media(max-width:840px){
  .bottom-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;
    height:calc(var(--bottom-nav-h) + var(--sab));padding-bottom:var(--sab);
    background:var(--md-sys-color-surface-container);
    border-top:1px solid var(--md-sys-color-outline-variant);
  }
  .main-content{padding-bottom:var(--bottom-nav-h)}
}
.bottom-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--md-sys-color-on-surface-variant);text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.bottom-nav-item.active{color:var(--md-sys-color-on-secondary-container)}
.bottom-nav-item .pill{padding:4px 20px;border-radius:var(--md-sys-shape-corner-full)}
.bottom-nav-item.active .pill{background:var(--md-sys-color-secondary-container)}
.bottom-nav-item .ms{font-size:22px}

/* ── Card (M3 spec, hand-built — see file header) ── */
.md-card{
  background:var(--md-sys-color-surface-container-low);
  border-radius:var(--md-sys-shape-corner-medium);
  padding:16px;
}
.md-card.elevated{box-shadow:var(--md-sys-elevation-1);background:var(--md-sys-color-surface-container-low)}
.md-card.filled{background:var(--md-sys-color-surface-container-highest)}
.md-card.outlined{background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant)}

/* ── Content area ── */
.page-content{padding:20px;max-width:960px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
@media(max-width:600px){.page-content{padding:16px}}

/* ── Material Symbols icon font (used inside our own hand-built nav/card, not the labs components) ── */
.ms{
  font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;
  word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;flex-shrink:0;
}

/* ── Status pills (semantic — separate from the brand accent per design-system discipline) ── */
.status-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--md-sys-shape-corner-full);font-size:var(--md-sys-typescale-label-medium-size);font-weight:600}
.status-pending{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}
.status-approved,.status-success{background:var(--md-sys-color-success-container);color:var(--md-sys-color-on-success-container)}
.status-rejected,.status-error{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}

/* ── Icon button (menu toggle, logout, row actions — one shared style) ── */
.icon-btn{width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:var(--md-sys-color-on-surface-variant);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.icon-btn:hover{background:color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)}

/* ── Empty state ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:48px 24px;text-align:center;color:var(--md-sys-color-on-surface-variant)}
.empty-state .ms{font-size:40px;opacity:.5}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--md-sys-color-outline-variant);border-radius:5px}