/* Apple Design System — Tokens & Fonts (Spec: DESIGN-apple.md) */
@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'InterVariable';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariableItalic.woff2') format('woff2');
}

:root {
  /* Native Controls (Checkbox, Scrollbars, Autofill) passend zum Theme */
  color-scheme: light;
  /* Colors — light */
  --apple-primary: #0066cc;
  --apple-primary-focus: #0071e3;
  --apple-primary-on-dark: #2997ff;
  --apple-ink: #1d1d1f;
  --apple-ink-muted-80: #333333;
  --apple-ink-muted-48: #7a7a7a;
  --apple-divider-soft: #f0f0f0;
  --apple-hairline: #e0e0e0;
  --apple-canvas: #ffffff;
  --apple-canvas-parchment: #f5f5f7;
  --apple-surface-pearl: #fafafc;
  --apple-surface-tile-1: #272729;
  --apple-surface-tile-2: #2a2a2c;
  --apple-surface-tile-3: #252527;
  --apple-surface-black: #000000;
  --apple-surface-chip-translucent: #d2d2d7;
  --apple-on-primary: #ffffff;
  --apple-on-dark: #ffffff;

  /* Comfort aliases — not part of the core token spec palette above,
     added for consistent radius/spacing/shadow usage across components */
  --apple-radius-xs: 5px;
  --apple-radius-sm: 8px;
  --apple-radius-md: 11px;
  --apple-radius-lg: 18px;
  --apple-radius-pill: 9999px;
  --apple-space-xxs: 4px;
  --apple-space-xs: 8px;
  --apple-space-sm: 12px;
  --apple-space-md: 17px;
  --apple-space-lg: 24px;
  --apple-space-xl: 32px;
  --apple-space-xxl: 48px;
  --apple-space-section: 80px;
  --apple-product-shadow: 3px 5px 30px rgba(0,0,0,0.22);
  --apple-overlay-shadow: 0 4px 16px rgba(0,0,0,0.12);
  --apple-font-display: "InterVariable", "SF Pro Display", system-ui, -apple-system, sans-serif;
  --apple-font-text: "InterVariable", "SF Pro Text", system-ui, -apple-system, sans-serif;
}

html.apple-dark {
  color-scheme: dark;
  --apple-primary: #2997ff;
  --apple-primary-focus: #2997ff;
  --apple-ink: #f5f5f7;
  --apple-ink-muted-80: #d2d2d7;
  --apple-ink-muted-48: #8e8e93;
  --apple-divider-soft: #2c2c2e;
  --apple-hairline: #38383a;
  --apple-canvas: #1d1d1f;
  --apple-canvas-parchment: #161618;
  --apple-surface-pearl: #2a2a2c;
  /* Tiles bleiben gleich (272729/2a2a2c/252527), on-primary/on-dark bleiben #ffffff */
}

body {
  font-family: var(--apple-font-text);
  color: var(--apple-ink);
  background-color: var(--apple-canvas);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--apple-font-display);
}

html.apple-dark body {
  background-color: var(--apple-canvas);
}

/* ============================================================
   MudBlazor bridging — this sheet loads after MudBlazor.min.css.
   Light overrides via html:not(.apple-dark), dark via html.apple-dark —
   beide mit gleicher Spezifität (0,1,1): schlagen MudThemeProviders :root
   (0,1,0), und der Dark-Block steht später in der Datei, gewinnt also.
   NICHT :root:root verwenden — (0,2,0) würde den eigenen Dark-Block
   html.apple-dark (0,1,1) schlagen und ihn still lahmlegen.
   C# AppleTheme mirrors these values for code-side consumers.
   ============================================================ */
html:not(.apple-dark) {
  --mud-palette-primary: var(--apple-primary);
  /* Hover/Selected-Flächen als 12%-Tint statt Vollfarbe: Mud nutzt *-hover
     u. a. für selektierte Dropdown-Items, Text-Button-Hover und Chips —
     volldeckendes #0071e3 machte selektierte Werte unlesbar (blau auf blau). */
  --mud-palette-primary-hover: color-mix(in srgb, var(--apple-primary) 12%, var(--apple-canvas));
  --mud-palette-primary-text: var(--apple-on-primary);
  --mud-palette-on-primary: var(--apple-on-primary);
  --mud-palette-secondary: var(--apple-ink-muted-80);
  --mud-palette-secondary-hover: color-mix(in srgb, var(--mud-palette-secondary) 12%, var(--apple-canvas));
  --mud-palette-secondary-text: var(--apple-on-primary);
  --mud-palette-tertiary: var(--apple-primary);
  --mud-palette-tertiary-hover: color-mix(in srgb, var(--apple-primary) 12%, var(--apple-canvas));
  --mud-palette-tertiary-text: var(--apple-on-primary);
  --mud-palette-info: var(--apple-primary-focus);
  --mud-palette-success: #198754;
  --mud-palette-warning: #f57c00;
  --mud-palette-error: #d93025;
  --mud-palette-dark: var(--apple-ink);
  --mud-palette-dark-text: var(--apple-on-dark);
  --mud-palette-background: var(--apple-canvas);
  --mud-palette-background-gray: var(--apple-canvas-parchment);
  --mud-palette-surface: var(--apple-canvas);
  --mud-palette-surface-dark: var(--apple-surface-tile-1);
  --mud-palette-appbar-background: var(--apple-canvas-parchment);
  --mud-palette-appbar-text: var(--apple-ink);
  --mud-palette-text-primary: var(--apple-ink);
  --mud-palette-text-secondary: var(--apple-ink-muted-48);
  --mud-palette-text-disabled: var(--apple-ink-muted-48);
  --mud-palette-lines-inputs: var(--apple-hairline);
  --mud-palette-line-default: var(--apple-hairline);
  --mud-palette-divider: var(--apple-divider-soft);
  --mud-palette-table-lines: var(--apple-divider-soft);
  --mud-palette-table-striped: var(--apple-surface-pearl);
  --mud-palette-table-hover: var(--apple-canvas-parchment);
  --mud-palette-drawer-background: var(--apple-canvas);
  --mud-palette-drawer-text: var(--apple-ink);
  --mud-default-borderradius: var(--apple-radius-md);
  --mud-typography-default-family: var(--apple-font-text);
}

/* Dark: apple tokens flip under html.apple-dark; semantic colors switch to
   Apple dark-mode system colors. #2997ff never appears on light surfaces. */
html.apple-dark {
  --mud-palette-primary: var(--apple-primary);
  --mud-palette-primary-hover: color-mix(in srgb, var(--apple-primary) 12%, var(--apple-canvas));
  --mud-palette-primary-text: var(--apple-on-primary);
  --mud-palette-on-primary: var(--apple-on-primary);
  --mud-palette-secondary: var(--apple-ink-muted-80);
  --mud-palette-secondary-hover: color-mix(in srgb, var(--mud-palette-secondary) 12%, var(--apple-canvas));
  --mud-palette-secondary-text: var(--apple-canvas);
  --mud-palette-tertiary: var(--apple-primary);
  --mud-palette-tertiary-hover: color-mix(in srgb, var(--apple-primary) 12%, var(--apple-canvas));
  --mud-palette-tertiary-text: var(--apple-on-primary);
  --mud-palette-info: var(--apple-primary-focus);
  /* Helle Semantic-Farben im Dark Mode brauchen dunklen Text: Die Apple-
     Systemfarben (#30d158/#ffd60a/#ff453a) sind für dunklen Grund dimensioniert —
     als Chip/Alert-Fläche mit weißem Text wären sie unlesbar. */
  --mud-palette-info-text: var(--apple-canvas);
  --mud-palette-success: #30d158;
  --mud-palette-success-text: var(--apple-canvas);
  --mud-palette-warning: #ffd60a;
  --mud-palette-warning-text: var(--apple-canvas);
  --mud-palette-error: #ff453a;
  --mud-palette-error-text: var(--apple-canvas);
  --mud-palette-dark: var(--apple-ink);
  --mud-palette-dark-text: var(--apple-canvas);
  --mud-palette-background: var(--apple-canvas);
  --mud-palette-background-gray: var(--apple-canvas-parchment);
  --mud-palette-surface: var(--apple-canvas);
  --mud-palette-surface-dark: var(--apple-surface-tile-1);
  --mud-palette-appbar-background: var(--apple-canvas-parchment);
  --mud-palette-appbar-text: var(--apple-ink);
  --mud-palette-text-primary: var(--apple-ink);
  --mud-palette-text-secondary: var(--apple-ink-muted-48);
  --mud-palette-text-disabled: var(--apple-ink-muted-48);
  --mud-palette-lines-inputs: var(--apple-hairline);
  --mud-palette-line-default: var(--apple-hairline);
  --mud-palette-divider: var(--apple-divider-soft);
  --mud-palette-table-lines: var(--apple-divider-soft);
  --mud-palette-table-striped: var(--apple-surface-pearl);
  --mud-palette-table-hover: var(--apple-surface-tile-3);
  --mud-palette-drawer-background: var(--apple-canvas);
  --mud-palette-drawer-text: var(--apple-ink);
}

/* Buttons: Apple press grammar, pill CTAs, ghost secondary. */
.mud-button-root { text-transform: none; transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease; }
.mud-button-root:active { transform: scale(0.95); }
.mud-button-filled-primary,
.mud-button-outlined-primary,
.mud-button-text-primary,
.mud-button-primary { border-radius: var(--apple-radius-pill); }
.mud-button-outlined-secondary,
.mud-button-outlined-tertiary {
  background-color: transparent;
  border: 1px solid var(--apple-primary);
  color: var(--apple-primary);
  border-radius: var(--apple-radius-pill);
}
.mud-button-outlined-secondary:hover,
.mud-button-outlined-tertiary:hover { background-color: var(--apple-divider-soft); }

/* Flat surfaces: no decorative shadows. Only product imagery carries shadow. */
.mud-paper,
.mud-card,
.mud-button,
.mud-chip { box-shadow: none !important; }

/* Focus: single 2px Action Blue ring (Apple focus grammar). */
*:focus-visible { outline: 2px solid var(--apple-primary-focus); outline-offset: 2px; }

/* Overlays/menus: subtle Apple shadow + hairline, 18px radius. */
.mud-dialog { border-radius: var(--apple-radius-lg); box-shadow: var(--apple-overlay-shadow) !important; }
.mud-popover { border-radius: var(--apple-radius-md); box-shadow: var(--apple-overlay-shadow) !important; border: 1px solid var(--apple-hairline); }

/* Typography default family for Mud components. */
.mud-typography { font-family: var(--apple-font-text); }

/* Frosted shell: toolbar + mobile nav per DESIGN-apple.md (sub-nav-frosted). */
.mud-appbar {
  background: rgba(245, 245, 247, 0.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--apple-hairline);
  color: var(--apple-ink);
}
html.apple-dark .mud-appbar {
  background: rgba(22, 22, 24, 0.8) !important;
}
.app-bottomnav {
  background: rgba(245, 245, 247, 0.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--apple-hairline);
}
html.apple-dark .app-bottomnav { background: rgba(22, 22, 24, 0.8) !important; }
/* Drawer ebenfalls flach/hairline statt Schatten */
.mud-drawer { border-right: 1px solid var(--apple-hairline); box-shadow: none !important; }

/* Brand typography: display font, 21px/600 (DESIGN-apple.md). */
.app-brand, .mud-appbar .app-brand { font-family: var(--apple-font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.374px; color: var(--apple-ink); text-decoration: none; }


/* Flat surfaces carry a hairline instead of shadows (store-utility-card pattern).
   Token flips automatically in dark mode (#38383a on #1d1d1f). */
.mud-paper,
.mud-card {
  border: 1px solid var(--apple-hairline);
}

/* Termine rows: full hairline box per store-utility-card grammar so each entry
   reads as its own row; left accent from app.css stays intact.
   The extra selector out-specifies the nested-surface reset further down. */
.app-upcoming-item,
.mud-card .mud-paper.app-upcoming-item {
  border: 1px solid var(--apple-hairline);
  border-left: 3px solid var(--mud-palette-success);
  border-radius: var(--apple-radius-sm);
  background: var(--apple-surface-pearl);
}

/* Dashboard tiles: pearl surface + hairline make the hit area readable;
   radius-lg (18px) per card grammar, !important to beat mud rounded utilities. */
.app-quick-action {
  background: var(--apple-surface-pearl);
  border-radius: var(--apple-radius-lg) !important;
}
.app-quick-action:hover { background: var(--apple-canvas); }

.app-summary-card,
.app-home-stat-card {
  border-radius: var(--apple-radius-lg) !important;
}
.app-home-stat-card:hover { background: var(--apple-surface-pearl); }

/* Stat-Karten (UserList): flache Tint-Flächen statt Gradienten — liegt hier,
   weil MudBlazor.min.css nach app.css lädt und .mud-paper sonst gewinnt. */
.app-stat-card-primary { background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--apple-canvas)); }
.app-stat-card-success { background: color-mix(in srgb, var(--mud-palette-success) 8%, var(--apple-canvas)); }
.app-stat-card-info { background: color-mix(in srgb, var(--mud-palette-info) 8%, var(--apple-canvas)); }
.app-stat-card-warning { background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--apple-canvas)); }
.app-stat-card-error { background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--apple-canvas)); }

/* Summary-Karten (Dashboard): gleiches Tint-Muster, gleiche Kaskadenursache. */
.app-summary-card-info { background: color-mix(in srgb, var(--mud-palette-info) 8%, var(--apple-canvas)); }
.app-summary-card-success { background: color-mix(in srgb, var(--mud-palette-success) 8%, var(--apple-canvas)); }
.app-summary-card-warning { background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--apple-canvas)); }

/* Only the outermost surface carries the hairline — nested papers/tables stay clean. */
.mud-paper .mud-paper,
.mud-card .mud-paper {
  border: none;
}