/* ==========================================================================
   APPLE THEME LAYER — بنك الخدمات
   --------------------------------------------------------------------------
   Loaded AFTER app.css. It re-skins the existing token system to Apple's Human
   Interface Guidelines without touching a single template:

     · Liquid Glass materials on the navigation layer (topbar, sidebar, menus,
       sheets, toasts) — content (cards, tables) stays opaque, per the HIG
     · concentric radii, capsule controls, grouped-inset cards
     · system-style semantic colours, verified against WCAG with the HIG checker
     · the HIG type ramp, 44pt touch targets, spring motion

   Deliberately KEPT from the brand: IBM Plex Sans Arabic (SF has no licence for
   the web), the deep-blue tint and the brass accent. Apple supplies the shape
   language; the brand supplies the colour and the letters.

   Accessibility fallbacks are part of the theme, not an afterthought:
   reduced transparency, increased contrast, forced colours, reduced motion.

   Contents
     1  Tokens          5  Shell (sidebar, topbar)   9  Feedback (alert, toast…)
     2  Light colours   6  Buttons                   10 Data (table, badge, stat)
     3  Dark colours    7  Forms                     11 Fallbacks
     4  Base            8  Surfaces (card, modal…)
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS — theme-invariant
   ========================================================================== */

:root {
  /* Without this, the <meta name="color-scheme" content="light dark"> makes the
     browser's own widgets (scrollbars, date pickers) follow the OS even when the
     user pinned the light theme. The dark blocks below override it. */
  color-scheme: light;

  /* -- type: the HIG ramp, floor raised to 12px for the web ---------------- */
  --font-size-2xs:  0.75rem;    /* 12  Caption */
  --font-size-xs:   0.8125rem;  /* 13  Footnote */
  --font-size-sm:   0.875rem;   /* 14 */
  --font-size-base: 0.9375rem;  /* 15  Body */
  --font-size-md:   1rem;       /* 16  Callout */
  --font-size-lg:   1.0625rem;  /* 17  Headline */
  --font-size-xl:   1.375rem;   /* 22  Title 2 */
  --font-size-2xl:  1.75rem;    /* 28  Title 1 */
  --font-size-3xl:  2.125rem;   /* 34  Large Title */

  /* Arabic needs more leading than Latin: tall ascenders and the dots of ي ن ت
     collide with the line above at the Latin-tuned 1.4. */
  --line-height-tight: 1.3;
  --line-height-snug:  1.5;
  --line-height-base:  1.7;

  /* -- shape: concentric — inner radii are the outer minus the padding ------ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* -- motion: Apple's emphasised-decelerate and a gentle overshoot -------- */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* -- layout -------------------------------------------------------------- */
  --sidebar-width:  16rem;
  --topbar-height:  3.5rem;
  --page-padding:   1.5rem;

  /* -- controls: 40 on a pointer, 44+ on touch (restated after this block) -- */
  --control-height-sm: 2rem;
  --control-height-md: 2.5rem;
  --control-height-lg: 3rem;

  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;

  /* Read by `.input` in app.css; variants that set their own sides still win. */
  --input-padding-inline: var(--space-4);

  /* -- materials ------------------------------------------------------------ */
  --material-blur:     22px;
  --material-saturate: 180%;
  --material-filter:   saturate(var(--material-saturate)) blur(var(--material-blur));
}

/* The coarse-pointer rule in app.css is overridden by the block above (same
   specificity, later source), so it is restated here. */
@media (pointer: coarse) {
  :root {
    --control-height-sm: var(--tap-target-min);
    --control-height-md: var(--tap-target-min);
    --control-height-lg: 3.25rem;
  }
}

@media (max-width: 899px) {
  :root { --page-padding: 1rem; }
}

/* ==========================================================================
   2 · COLOUR — light
   Every text pair below was run through the HIG contrast checker (>= 4.5:1);
   control boundaries are held to 3:1 (WCAG 1.4.11).
   ========================================================================== */

:root {
  --color-bg:              #f2f2f7;   /* systemGroupedBackground */
  --color-bg-subtle:       #f7f7fa;
  --color-surface:         #ffffff;
  --color-surface-raised:  #ffffff;
  --color-surface-sunken:  #f5f5f9;
  --color-surface-hover:   rgba(120, 120, 128, 0.10);
  --color-overlay:         rgba(0, 0, 0, 0.32);

  /* Separators are alpha, so they stay correct on any surface they sit on. */
  --color-border:          rgba(60, 60, 67, 0.16);
  --color-border-strong:   rgba(60, 60, 67, 0.30);
  --color-border-subtle:   rgba(60, 60, 67, 0.09);
  --color-hairline:        rgba(60, 60, 67, 0.12);

  --color-text:            #1d1d1f;   /* 16.8:1 on white */
  --color-text-muted:      #515154;   /*  7.9:1 */
  --color-text-subtle:     #6e6e73;   /*  5.1:1 on white, 4.5:1 on the grouped bg */
  --color-text-inverse:    #ffffff;
  --color-placeholder:     #6e6e73;
  --color-link:            #0a67a8;   /*  6.0:1 */
  --color-link-hover:      #084f82;

  --color-primary:         #0a67a8;   /* white on it: 6.0:1 */
  --color-primary-hover:   #0b74bd;
  --color-primary-active:  #08568c;
  --color-primary-fg:      #ffffff;
  --color-primary-soft:    rgba(10, 103, 168, 0.10);
  --color-primary-border:  rgba(10, 103, 168, 0.30);
  --color-focus:           #0a67a8;

  --color-success:         #17702f;
  --color-success-fg:      #17702f;   /* 5.0:1 on its own soft fill, measured over the grouped background */
  --color-success-soft:    rgba(52, 199, 89, 0.14);
  --color-success-border:  rgba(52, 199, 89, 0.38);

  --color-warning:         #9a4a00;
  --color-warning-fg:      #8a4500;   /* 6.4:1 */
  --color-warning-soft:    rgba(255, 149, 0, 0.14);
  --color-warning-border:  rgba(255, 149, 0, 0.42);

  --color-danger:          #d70015;
  --color-danger-hover:    #b80012;
  --color-danger-fg:       #c4101f;   /* 5.2:1 */
  --color-danger-soft:     rgba(255, 59, 48, 0.12);
  --color-danger-border:   rgba(255, 59, 48, 0.34);

  --color-info:            #0a67a8;
  --color-info-fg:         #0a5a94;   /* 6.3:1 */
  --color-info-soft:       rgba(10, 103, 168, 0.10);
  --color-info-border:     rgba(10, 103, 168, 0.28);

  --color-neutral:         #8e8e93;
  --color-neutral-fg:      #515154;
  --color-neutral-soft:    rgba(120, 120, 128, 0.14);
  --color-neutral-border:  rgba(60, 60, 67, 0.20);

  /* New tokens this layer introduces. */
  --color-fill:            rgba(120, 120, 128, 0.12);  /* systemFill */
  --color-fill-hover:      rgba(120, 120, 128, 0.18);
  --color-thumb:           #ffffff;                    /* segmented-control thumb */
  --color-field:           #ffffff;
  --color-input-border:    #8a8a8e;                    /* 3.4:1 on white, 3.1:1 on the grouped bg */

  /* Sidebar: light glass in light mode, like a macOS source list. */
  --color-sidebar-bg:         rgba(255, 255, 255, 0.58);
  --color-sidebar-fg:         #1d1d1f;
  --color-sidebar-fg-muted:   #6e6e73;
  --color-sidebar-hover-bg:   rgba(120, 120, 128, 0.10);
  --color-sidebar-active-bg:  rgba(10, 103, 168, 0.12);
  --color-sidebar-active-fg:  #0a67a8;
  --color-sidebar-accent:     #0a67a8;
  --color-sidebar-border:     rgba(60, 60, 67, 0.12);
  --color-sidebar-logo:       var(--brand-600);

  --color-topbar-bg:      transparent;
  --color-table-head-bg:  transparent;
  --color-table-stripe:   rgba(120, 120, 128, 0.05);
  --color-table-hover:    rgba(120, 120, 128, 0.08);
  --color-skeleton:       rgba(120, 120, 128, 0.18);
  --color-code-bg:        rgba(120, 120, 128, 0.12);

  /* Materials */
  --material-regular: rgba(255, 255, 255, 0.72);
  --material-thick:   rgba(255, 255, 255, 0.88);
  --material-bar:     rgba(250, 250, 252, 0.74);
  --material-edge:    rgba(255, 255, 255, 0.70);   /* the specular rim */
  --material-tooltip: rgba(29, 29, 31, 0.90);

  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.14), 0 0 1px rgba(0, 0, 0, 0.20);

  --ambient-a: color-mix(in srgb, var(--brand-400) 20%, transparent);
  --ambient-b: color-mix(in srgb, var(--brass-400) 16%, transparent);
}

/* ==========================================================================
   3 · COLOUR — dark
   True black base with #1c1c1e / #2c2c2e elevation steps, exactly Apple's
   ladder. Declared twice (OS preference, explicit toggle) because CSS has no
   way to share one block across a media query and an attribute selector.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --color-bg:              #000000;
    --color-bg-subtle:       #0a0a0c;
    --color-surface:         #1c1c1e;
    --color-surface-raised:  #2c2c2e;
    --color-surface-sunken:  #151517;
    --color-surface-hover:   rgba(235, 235, 245, 0.08);
    --color-overlay:         rgba(0, 0, 0, 0.58);

    --color-border:          rgba(84, 84, 88, 0.58);
    --color-border-strong:   rgba(120, 120, 128, 0.52);
    --color-border-subtle:   rgba(84, 84, 88, 0.34);
    --color-hairline:        rgba(84, 84, 88, 0.50);

    --color-text:            #f5f5f7;   /* 15.6:1 on #1c1c1e */
    --color-text-muted:      #a1a1a6;   /*  6.6:1 */
    --color-text-subtle:     #8e8e93;   /*  5.2:1 */
    --color-text-inverse:    #000000;
    --color-placeholder:     #8e8e93;
    --color-link:            #5ab0ec;   /*  7.2:1 */
    --color-link-hover:      #86c4f2;

    --color-primary:         #2a74b3;   /* white on it: 4.9:1 */
    --color-primary-hover:   #3b86c6;
    --color-primary-active:  #1e5f96;
    --color-primary-fg:      #ffffff;
    --color-primary-soft:    rgba(90, 176, 236, 0.16);
    --color-primary-border:  rgba(90, 176, 236, 0.40);
    --color-focus:           #5ab0ec;

    --color-success:         #30d158;
    --color-success-fg:      #5fe083;
    --color-success-soft:    rgba(48, 209, 88, 0.16);
    --color-success-border:  rgba(48, 209, 88, 0.38);

    --color-warning:         #ff9f0a;
    --color-warning-fg:      #ffb340;
    --color-warning-soft:    rgba(255, 159, 10, 0.16);
    --color-warning-border:  rgba(255, 159, 10, 0.40);

    --color-danger:          #d92d20;
    --color-danger-hover:    #e5473b;
    --color-danger-fg:       #ff8a80;
    --color-danger-soft:     rgba(255, 69, 58, 0.18);
    --color-danger-border:   rgba(255, 69, 58, 0.42);

    --color-info:            #5ab0ec;
    --color-info-fg:         #7fc4f5;
    --color-info-soft:       rgba(90, 176, 236, 0.16);
    --color-info-border:     rgba(90, 176, 236, 0.40);

    --color-neutral:         #8e8e93;
    --color-neutral-fg:      #c7c7cc;
    --color-neutral-soft:    rgba(120, 120, 128, 0.24);
    --color-neutral-border:  #48484a;

    --color-fill:            rgba(120, 120, 128, 0.24);
    --color-fill-hover:      rgba(120, 120, 128, 0.34);
    --color-thumb:           #636366;
    --color-field:           rgba(0, 0, 0, 0.30);
    --color-input-border:    #7a7a7f;

    --color-sidebar-bg:         rgba(28, 28, 30, 0.66);
    --color-sidebar-fg:         #f5f5f7;
    --color-sidebar-fg-muted:   #a1a1a6;
    --color-sidebar-hover-bg:   rgba(235, 235, 245, 0.08);
    --color-sidebar-active-bg:  rgba(90, 176, 236, 0.18);
    --color-sidebar-active-fg:  #8fcbf5;
    --color-sidebar-accent:     #5ab0ec;
    --color-sidebar-border:     rgba(255, 255, 255, 0.08);
    --color-sidebar-logo:       #eef5fb;

    --color-table-stripe:   rgba(235, 235, 245, 0.04);
    --color-table-hover:    rgba(235, 235, 245, 0.07);
    --color-skeleton:       rgba(120, 120, 128, 0.30);
    --color-code-bg:        rgba(120, 120, 128, 0.24);

    --material-regular: rgba(28, 28, 30, 0.72);
    --material-thick:   rgba(36, 36, 38, 0.88);
    --material-bar:     rgba(14, 14, 16, 0.72);
    --material-edge:    rgba(255, 255, 255, 0.10);
    --material-tooltip: rgba(58, 58, 60, 0.92);

    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.6);

    --ambient-a: color-mix(in srgb, var(--brand-500) 26%, transparent);
    --ambient-b: color-mix(in srgb, var(--brass-600) 14%, transparent);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --color-bg:              #000000;
  --color-bg-subtle:       #0a0a0c;
  --color-surface:         #1c1c1e;
  --color-surface-raised:  #2c2c2e;
  --color-surface-sunken:  #151517;
  --color-surface-hover:   rgba(235, 235, 245, 0.08);
  --color-overlay:         rgba(0, 0, 0, 0.58);

  --color-border:          rgba(84, 84, 88, 0.58);
  --color-border-strong:   rgba(120, 120, 128, 0.52);
  --color-border-subtle:   rgba(84, 84, 88, 0.34);
  --color-hairline:        rgba(84, 84, 88, 0.50);

  --color-text:            #f5f5f7;
  --color-text-muted:      #a1a1a6;
  --color-text-subtle:     #8e8e93;
  --color-text-inverse:    #000000;
  --color-placeholder:     #8e8e93;
  --color-link:            #5ab0ec;
  --color-link-hover:      #86c4f2;

  --color-primary:         #2a74b3;
  --color-primary-hover:   #3b86c6;
  --color-primary-active:  #1e5f96;
  --color-primary-fg:      #ffffff;
  --color-primary-soft:    rgba(90, 176, 236, 0.16);
  --color-primary-border:  rgba(90, 176, 236, 0.40);
  --color-focus:           #5ab0ec;

  --color-success:         #30d158;
  --color-success-fg:      #5fe083;
  --color-success-soft:    rgba(48, 209, 88, 0.16);
  --color-success-border:  rgba(48, 209, 88, 0.38);

  --color-warning:         #ff9f0a;
  --color-warning-fg:      #ffb340;
  --color-warning-soft:    rgba(255, 159, 10, 0.16);
  --color-warning-border:  rgba(255, 159, 10, 0.40);

  --color-danger:          #d92d20;
  --color-danger-hover:    #e5473b;
  --color-danger-fg:       #ff8a80;
  --color-danger-soft:     rgba(255, 69, 58, 0.18);
  --color-danger-border:   rgba(255, 69, 58, 0.42);

  --color-info:            #5ab0ec;
  --color-info-fg:         #7fc4f5;
  --color-info-soft:       rgba(90, 176, 236, 0.16);
  --color-info-border:     rgba(90, 176, 236, 0.40);

  --color-neutral:         #8e8e93;
  --color-neutral-fg:      #c7c7cc;
  --color-neutral-soft:    rgba(120, 120, 128, 0.24);
  --color-neutral-border:  #48484a;

  --color-fill:            rgba(120, 120, 128, 0.24);
  --color-fill-hover:      rgba(120, 120, 128, 0.34);
  --color-thumb:           #636366;
  --color-field:           rgba(0, 0, 0, 0.30);
  --color-input-border:    #7a7a7f;

  --color-sidebar-bg:         rgba(28, 28, 30, 0.66);
  --color-sidebar-fg:         #f5f5f7;
  --color-sidebar-fg-muted:   #a1a1a6;
  --color-sidebar-hover-bg:   rgba(235, 235, 245, 0.08);
  --color-sidebar-active-bg:  rgba(90, 176, 236, 0.18);
  --color-sidebar-active-fg:  #8fcbf5;
  --color-sidebar-accent:     #5ab0ec;
  --color-sidebar-border:     rgba(255, 255, 255, 0.08);
  --color-sidebar-logo:       #eef5fb;

  --color-table-stripe:   rgba(235, 235, 245, 0.04);
  --color-table-hover:    rgba(235, 235, 245, 0.07);
  --color-skeleton:       rgba(120, 120, 128, 0.30);
  --color-code-bg:        rgba(120, 120, 128, 0.24);

  --material-regular: rgba(28, 28, 30, 0.72);
  --material-thick:   rgba(36, 36, 38, 0.88);
  --material-bar:     rgba(14, 14, 16, 0.72);
  --material-edge:    rgba(255, 255, 255, 0.10);
  --material-tooltip: rgba(58, 58, 60, 0.92);

  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.6);

  --ambient-a: color-mix(in srgb, var(--brand-500) 26%, transparent);
  --ambient-b: color-mix(in srgb, var(--brass-600) 14%, transparent);
}

/* ==========================================================================
   4 · BASE
   ========================================================================== */

body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Tracking is a Latin-script idea. Applying it to Arabic breaks the joins
   between letters, so every negative/positive letter-spacing in app.css is
   neutralised wherever the text is Arabic. `lang="en"` islands keep theirs. */
:lang(ar) * { letter-spacing: 0; }

h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); }
h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); }

::selection { background: color-mix(in srgb, var(--color-primary) 28%, transparent); }

::placeholder { color: var(--color-placeholder); }

/* Overlay-style scrollbars, as on macOS. */
.app-sidebar,
.table-wrap,
.tabs,
.modal,
.dropdown__menu {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-text) 28%, transparent) transparent;
}

/* Focus: a solid 3px tint ring. A soft glow is prettier but cannot be relied on
   to clear 3:1 against every surface it lands on. */
:where(a, button, input, select, textarea, summary, [tabindex], [role='button'], [role='tab'], [role='menuitem']):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* The ambient backdrop gives the glass something to refract. Painted once, fixed,
   behind everything — and absent when transparency is reduced (see §11). */
.app-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52rem 34rem at 100% -8%, var(--ambient-a), transparent 62%),
    radial-gradient(44rem 30rem at -6% 108%, var(--ambient-b), transparent 58%);
}

/* ==========================================================================
   5 · SHELL
   ========================================================================== */

.app-sidebar {
  background: var(--color-sidebar-bg);
  -webkit-backdrop-filter: var(--material-filter);
          backdrop-filter: var(--material-filter);
  border-inline-end: 1px solid var(--color-sidebar-border);
}

.sidebar__brand {
  border-block-end-color: var(--color-sidebar-border);
  color: var(--color-sidebar-fg);
}
.sidebar__brand:hover { color: var(--color-sidebar-fg); }

/* The seal needs a fill that reads on glass: brand blue on light, near-white on
   dark. (The rule in app.css targets `.sidebar`, a class the shell never emits.) */
.app-sidebar .logo__seal { fill: var(--color-sidebar-logo); }
.app-sidebar .logo__subtitle { color: var(--color-sidebar-fg-muted); }
.app-sidebar .logo__name { color: var(--color-sidebar-fg); }

.sidebar__scroll { padding: var(--space-3) var(--space-2); }

.nav-group + .nav-group { margin-block-start: var(--space-5); }

.nav-group__label {
  padding-inline: var(--space-3);
  padding-block: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-sidebar-fg-muted);
}

.nav-list { gap: 2px; }

.nav-link {
  min-block-size: var(--control-height-md);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  gap: var(--space-3);
  font-size: var(--font-size-base);
  border-inline-start: 0;
  border-radius: var(--radius-sm);
  color: var(--color-sidebar-fg);
}
.nav-link:hover { color: var(--color-sidebar-fg); background: var(--color-sidebar-hover-bg); }
.nav-link:active { transform: scale(0.985); }

.nav-link.is-active,
.nav-link[aria-current='page'] {
  color: var(--color-sidebar-active-fg);
  background: var(--color-sidebar-active-bg);
  font-weight: var(--font-weight-semibold);
}

.nav-link__icon { inline-size: 1.25rem; block-size: 1.25rem; }

.nav-link__badge {
  min-inline-size: 1.375rem;
  line-height: 1.375rem;
  color: var(--color-sidebar-active-fg);
  background: var(--color-sidebar-active-bg);
}

.sidebar__footer { border-block-start-color: var(--color-sidebar-border); }

/* -- topbar: the clearest place a user sees the material at work, because the
      page scrolls underneath it ------------------------------------------- */

.app-topbar {
  background: var(--material-bar);
  -webkit-backdrop-filter: var(--material-filter);
          backdrop-filter: var(--material-filter);
  border-block-end: 1px solid var(--color-hairline);
}

.topbar__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}
.topbar__sep { background: var(--color-hairline); }

/* One row at every width: whatever does not fit has to shrink, never push the page
   sideways. The long demo names (an owner's name carries the office's) made the user
   button 246px wide and the whole page scroll horizontally on a phone. Flex items will
   not shrink below their content unless told they may. */
.app-topbar { min-inline-size: 0; }
.topbar__title { flex: 1 1 0; min-inline-size: 0; }
.topbar__actions { flex: 0 1 auto; min-inline-size: 0; }
.topbar__actions .dropdown { flex: 0 1 auto; min-inline-size: 0; }
.topbar__actions .dropdown > .btn { min-inline-size: 0; max-inline-size: 100%; }
.topbar__actions .dropdown > .btn .truncate { min-inline-size: 0; }

@media (max-width: 599px) {
  .topbar__actions .dropdown > .btn .truncate { max-inline-size: 5.5rem; }
}

/* On a phone the page title matters more than the user's name, and the avatar already says
   who is signed in. The name stays in the button for screen readers — hidden by clipping,
   not by display:none, so the button keeps its accessible name. */
@media (max-width: 479px) {
  .topbar__actions .dropdown > .btn .truncate {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* -- locale switch: a segmented control -------------------------------------- */

.locale-switch {
  padding: 2px;
  background: var(--color-fill);
  border: 0;
  border-radius: var(--radius-pill);
}
.locale-switch__item {
  min-block-size: 1.75rem;
  min-inline-size: 2.25rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.locale-switch__item.is-active {
  color: var(--color-text);
  background: var(--color-thumb);
  box-shadow: var(--shadow-thumb);
}

@media (pointer: coarse) {
  .locale-switch__item { min-block-size: var(--tap-target-min); }
}

/* Drawer under 900px: needs more body than the desktop glass, since content
   shows through it and there is no hairline of page between them. The shadow belongs
   to the OPEN drawer only — app.css put it on the closed one too, where it sits just
   beyond the screen edge and bleeds a grey band onto the page. */
@media (max-width: 899px) {
  .app-sidebar {
    background: var(--material-thick);
    box-shadow: none;
  }
  .app-shell.is-nav-open .app-sidebar { box-shadow: var(--shadow-xl); }
}

/* ==========================================================================
   6 · BUTTONS — capsules, with a pressed state that feels physical
   ========================================================================== */

.btn {
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.97); }
.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled='true'] { opacity: 0.45; }

.btn--primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 40%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primary:hover { box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 38%, transparent),
                                  inset 0 1px 0 rgba(255, 255, 255, 0.22); }

/* "Gray" button: Apple's default secondary — a tinted fill, no outline. */
.btn--secondary {
  color: var(--color-text);
  background: var(--color-fill);
  border-color: transparent;
}
.btn--secondary:hover { color: var(--color-text); background: var(--color-fill-hover); border-color: transparent; }
.btn--secondary:active { background: var(--color-fill-hover); }

.btn--danger {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%);
}

.btn--ghost { color: var(--color-link); }
.btn--ghost:hover { color: var(--color-link-hover); background: var(--color-fill); }
.btn--ghost.is-active { color: var(--color-text); background: var(--color-fill); }

/* Icon-only buttons in the chrome are neutral, not tinted. */
.btn--ghost.btn--icon { color: var(--color-text-muted); }
.btn--ghost.btn--icon:hover { color: var(--color-text); }

.btn--sm { padding-inline: var(--space-3); }
.btn--lg { padding-inline: var(--space-8); font-size: var(--font-size-md); }

/* An icon-only button has a fixed square size; the padding that suits a labelled small or large
   button would squeeze its icon into a dot. */
.btn--icon.btn--sm,
.btn--icon.btn--lg { padding-inline: 0; }

/* Button group → segmented control. */
.btn-group {
  padding: 2px;
  background: var(--color-fill);
  border-radius: var(--radius-pill);
}
.btn-group .btn,
.btn-group .btn:first-child,
.btn-group .btn:last-child {
  margin-inline-start: 0;
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-pill);
  box-shadow: none;
  background-image: none;
  color: var(--color-text-muted);
}
.btn-group .btn.is-active,
.btn-group .btn[aria-pressed='true'] {
  color: var(--color-text);
  background: var(--color-thumb);
  box-shadow: var(--shadow-thumb);
}

/* ==========================================================================
   7 · FORMS
   ========================================================================== */

.field { gap: var(--space-2); }

.field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.field__help { font-size: var(--font-size-xs); }

.input,
.select,
.textarea {
  background: var(--color-field);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}

.input:hover:not(:disabled),
.select:hover:not(:disabled),
.textarea:hover:not(:disabled) { border-color: var(--color-text-subtle); }

/* The border change plus a 4px glow IS the focus indicator here, so the generic
   outline is dropped on fields (it would double the ring). */
.input:focus,
.select:focus,
.textarea:focus,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-focus) 26%, transparent);
  outline: none;
}

.input:disabled,
.select:disabled,
.textarea:disabled,
.input[readonly] {
  color: var(--color-text-subtle);
  background: var(--color-surface-sunken);
  border-color: var(--color-border);
}

.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid,
[aria-invalid='true'].input,
[aria-invalid='true'].select,
[aria-invalid='true'].textarea {
  background: var(--color-field);
  border-color: var(--color-danger);
}
.input.is-invalid:focus,
.select.is-invalid:focus,
.textarea.is-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 24%, transparent); }

.textarea { border-radius: var(--radius-md); }

.select-wrap::after {
  inset-inline-end: var(--space-4);
  background: var(--color-text-muted);
}

.input-group > :first-child {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}
.input-group > :last-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}
.input-group__affix {
  background: var(--color-fill);
  border-color: var(--color-input-border);
}

/* Switch: Apple's — green when on, a thumb that overshoots slightly. */
.switch {
  inline-size: 2.75rem;
  block-size: 1.625rem;
  background: color-mix(in srgb, var(--color-neutral) 55%, transparent);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.switch::before {
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.3);
  transition: margin-inline-start var(--duration-slow) var(--ease-spring);
}
.switch:checked { background: var(--color-success); }
.switch:checked::before { margin-inline-start: 1.125rem; }
.switch:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }

.fieldset { border-block-start-color: var(--color-hairline); }
.form-actions { border-block-start-color: var(--color-hairline); }

/* ==========================================================================
   8 · SURFACES — content stays opaque; only floating layers get glass
   ========================================================================== */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card__header {
  padding-block: var(--space-4);
  padding-inline: var(--space-5);
  border-block-end-color: var(--color-hairline);
}
.card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}
.card__subtitle { font-size: var(--font-size-sm); }
.card__body { padding: var(--space-5); }
.card__body--tight { padding: var(--space-4); }
.card__footer {
  padding-inline: var(--space-5);
  background: var(--color-surface-sunken);
  border-block-start-color: var(--color-hairline);
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}
.card--raised { box-shadow: var(--shadow-md); }
.card--accent { border-block-start: 1px solid var(--color-hairline); box-shadow: inset 0 3px 0 var(--color-primary), var(--shadow-sm); }

/* -- sheet (modal) ----------------------------------------------------------- */

.modal__backdrop {
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.modal__dialog {
  background: var(--material-thick);
  -webkit-backdrop-filter: var(--material-filter);
          backdrop-filter: var(--material-filter);
  border: 1px solid var(--material-edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  animation: apple-sheet-in var(--duration-slow) var(--ease-standard);
}

@keyframes apple-sheet-in {
  from { opacity: 0; transform: translateY(14px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}

.modal__header {
  padding-block: var(--space-5) var(--space-3);
  padding-inline: var(--space-6);
  border-block-end: 0;
}
.modal__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}
.modal__body { padding: var(--space-2) var(--space-6) var(--space-5); }
.modal__footer {
  padding-block: var(--space-4);
  padding-inline: var(--space-6);
  background: transparent;
  border-block-start: 1px solid var(--color-hairline);
  border-end-start-radius: var(--radius-xl);
  border-end-end-radius: var(--radius-xl);
}

/* -- menu ---------------------------------------------------------------------- */

.dropdown__menu {
  padding: var(--space-2);
  background: var(--material-regular);
  -webkit-backdrop-filter: var(--material-filter);
          backdrop-filter: var(--material-filter);
  border: 1px solid var(--material-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: apple-menu-in var(--duration-base) var(--ease-standard);
  transform-origin: top;
}

@keyframes apple-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.dropdown__header {
  margin-block-end: var(--space-1);
  padding-inline: var(--space-3);
  border-block-end-color: var(--color-hairline);
}
.dropdown__item {
  min-block-size: var(--control-height-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}
.dropdown__item:hover { background: var(--color-fill); }
.dropdown__divider { background: var(--color-hairline); margin-inline: var(--space-2); }

/* -- tabs: a segmented control ------------------------------------------------ */

.tabs {
  inline-size: max-content;
  max-inline-size: 100%;
  gap: 2px;
  padding: 3px;
  background: var(--color-fill);
  border-block-end: 0;
  border-radius: var(--radius-pill);
}
.tabs__tab {
  min-block-size: calc(var(--control-height-md) - 6px);
  padding-inline: var(--space-4);
  margin-block-end: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  border-block-end: 0;
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.tabs__tab:hover { color: var(--color-text); }
.tabs__tab.is-active,
.tabs__tab[aria-selected='true'] {
  color: var(--color-text);
  background: var(--color-thumb);
  box-shadow: var(--shadow-thumb);
}

@media (pointer: coarse) {
  .tabs__tab { min-block-size: var(--tap-target-min); }
}

.tabs--pills { background: transparent; padding: 0; gap: var(--space-2); }
.tabs--pills .tabs__tab { background: var(--color-fill); }
.tabs--pills .tabs__tab.is-active,
.tabs--pills .tabs__tab[aria-selected='true'] {
  color: var(--color-primary-fg);
  background: var(--color-primary);
  box-shadow: none;
}

/* -- pagination ---------------------------------------------------------------- */

.pagination__link {
  border-radius: var(--radius-pill);
  border-color: var(--color-hairline);
  color: var(--color-text-muted);
  transition: background-color var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.pagination__link:hover { background: var(--color-fill); }
.pagination__link:active { transform: scale(0.96); }

/* -- empty state --------------------------------------------------------------- */

.empty-state__icon {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  background: var(--color-fill);
  border: 0;
  border-radius: var(--radius-lg);
}
.empty-state__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }

/* ==========================================================================
   9 · FEEDBACK
   ========================================================================== */

.alert {
  border-radius: var(--radius-md);
  border-inline-start-width: 1px;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
}
.alert__title { font-weight: var(--font-weight-bold); }

.toast {
  background: var(--material-regular);
  -webkit-backdrop-filter: var(--material-filter);
          backdrop-filter: var(--material-filter);
  border: 1px solid var(--material-edge);
  border-inline-start-width: 1px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: apple-toast-in var(--duration-slow) var(--ease-spring);
}

@keyframes apple-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.has-tooltip::after {
  color: #ffffff;
  background: var(--material-tooltip);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-radius: var(--radius-sm);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
}

.progress { block-size: 0.5rem; background: var(--color-fill); }
.progress--lg { block-size: 0.75rem; }

.avatar {
  background-image: linear-gradient(150deg, color-mix(in srgb, var(--color-primary) 72%, #ffffff), var(--color-primary));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.avatar--muted { background-image: none; box-shadow: none; }

.skip-link { border-radius: var(--radius-pill); }

/* ==========================================================================
   10 · DATA — tables, badges, stat tiles, page header
   ========================================================================== */

.table-wrap {
  background: var(--color-surface);
  border-color: var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.table-toolbar {
  padding: var(--space-3) var(--space-4);
  border-color: var(--color-hairline);
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
}

.table th,
.table td {
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-block-end-color: var(--color-hairline);
}

.table thead th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  color: var(--color-text-muted);
  background: var(--material-thick);
  -webkit-backdrop-filter: var(--material-filter);
          backdrop-filter: var(--material-filter);
  border-block-end: 1px solid var(--color-border);
}

.table tbody tr:hover { background: var(--color-table-hover); }
.table tbody tr.is-selected { background: var(--color-primary-soft); }
.table caption { font-size: var(--font-size-sm); }
.table__empty { color: var(--color-text-muted); }

.badge {
  padding-block: 0.125rem;
  padding-inline: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-color: transparent;
}
.badge--sm { padding-inline: var(--space-2); }

/* Solid badges: the white-on-colour pairs were checked (>= 4.5:1) above. */
.badge--solid.badge--danger,
.badge--solid.badge--info { color: #ffffff; }

.stat-tile {
  padding: var(--space-5);
  background: var(--color-surface);
  border-color: var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
a.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-hairline); }
a.stat-tile:active { transform: scale(0.985); }

.stat-tile__icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-md);
}
.stat-tile__icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.stat-tile__label { font-size: var(--font-size-sm); }
.stat-tile__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }

.page-header { margin-block-end: var(--space-6); }
.page-header__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}
.page-header__subtitle { font-size: var(--font-size-base); }

@media (max-width: 599px) {
  .page-header__title { font-size: var(--font-size-xl); }
}

/* ==========================================================================
   11 · FALLBACKS — the theme degrades; it never becomes unreadable
   ========================================================================== */

/* No backdrop-filter support: swap every material for its opaque equivalent. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --material-regular: var(--color-surface-raised);
    --material-thick:   var(--color-surface-raised);
    --material-bar:     var(--color-surface);
    --material-tooltip: #1d1d1f;
    --color-sidebar-bg: var(--color-surface);
  }
}

/* The user asked the OS for less transparency: honour it everywhere. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --material-filter:  none;
    --material-regular: var(--color-surface-raised);
    --material-thick:   var(--color-surface-raised);
    --material-bar:     var(--color-surface);
    --material-edge:    var(--color-hairline);
    --material-tooltip: #1d1d1f;
    --color-sidebar-bg: var(--color-surface);
  }
  .app-body::before { display: none; }
  .modal__backdrop,
  .has-tooltip::after,
  .table thead th { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Increased contrast: strong separators, no translucency, solid control edges. */
@media (prefers-contrast: more) {
  :root {
    --material-filter:  none;
    --material-regular: var(--color-surface-raised);
    --material-thick:   var(--color-surface-raised);
    --material-bar:     var(--color-surface);
    --color-sidebar-bg: var(--color-surface);
    --color-hairline:   var(--color-text-muted);
    --color-border:     var(--color-text-muted);
    --color-input-border: var(--color-text);
  }
  .app-body::before { display: none; }
  .card,
  .table-wrap,
  .stat-tile { border-color: var(--color-text-muted); }
}

/* Windows high-contrast: let the system palette win. */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .btn--primary { background-image: none; }
  .card, .table-wrap, .stat-tile, .modal__dialog, .dropdown__menu, .toast { border: 1px solid CanvasText; }
  .nav-link.is-active,
  .nav-link[aria-current='page'] { outline: 2px solid Highlight; }
  .switch { border: 1px solid ButtonText; }
  .app-body::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .nav-link:active,
  .pagination__link:active,
  a.stat-tile:hover,
  a.stat-tile:active { transform: none; }
}

@media print {
  .app-body::before { display: none; }
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
}