/*
 * Liquid Glass layer, loaded last on every page (after page styles and mobile.css).
 * Brings the app in line with the landing page (Landingpages/liquid): vivid wallpaper,
 * layered glass with rim light and specular edge, floating chrome, pill controls.
 * Mostly token overrides; component rules only where tokens cannot reach.
 */

/* ── 1. Tokens ─────────────────────────────────────────── */
:root {
  --bg: #07080f;
  --eyebrow: #ff6272;
  --liquid-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  --liquid-fill-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  --liquid-rim: linear-gradient(140deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.2));
  --liquid-chrome: rgba(16, 17, 30, 0.62);
  --liquid-sheet: linear-gradient(180deg, rgba(34, 36, 56, 0.9), rgba(16, 17, 30, 0.92));
  --liquid-blur: blur(28px) saturate(180%);

  --specular: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 60px -24px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 32px 72px -24px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-panel: var(--shadow-card);
  --shadow-modal: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 48px 120px -30px rgba(0, 0, 0, 0.85);
  --border-glass: rgba(255, 255, 255, 0.1);
  --border-glass-mid: rgba(255, 255, 255, 0.13);
  --blur-md: blur(24px) saturate(180%);
  --r-lg: 24px;

  --gradient-brand: linear-gradient(180deg, #ff5b6b 0%, #ff3347 55%, #ee2238 100%);
  --primary-glow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 6px rgba(120, 0, 20, 0.3), 0 12px 30px -10px rgba(255, 51, 71, 0.7);
  --primary-glow-strong: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 6px rgba(120, 0, 20, 0.3), 0 16px 42px -10px rgba(255, 51, 71, 0.9);
  --primary-glow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px -8px rgba(255, 51, 71, 0.6);

  /* Segmented control (section 12): recessed track, raised glass thumb */
  --seg-track: rgba(0, 0, 0, 0.22);
  --seg-line: rgba(255, 255, 255, 0.08);
  --seg-thumb: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  --seg-thumb-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 20px -10px rgba(0, 0, 0, 0.7);
}

body.theme-light {
  --bg: #eef1f8;
  --eyebrow: #e0203a;
  --liquid-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.64));
  --liquid-fill-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72));
  --liquid-rim: linear-gradient(140deg, #fff, rgba(255, 255, 255, 0.6) 40%, rgba(15, 23, 42, 0.05) 70%, rgba(15, 23, 42, 0.1));
  --liquid-chrome: rgba(255, 255, 255, 0.62);
  --liquid-sheet: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 248, 252, 0.94));
  --specular: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(15, 23, 42, 0.04);
  --shadow-card: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(15, 23, 42, 0.06), 0 18px 40px -22px rgba(15, 23, 42, 0.3), 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-card-hover: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 26px 50px -22px rgba(15, 23, 42, 0.36), 0 2px 6px rgba(15, 23, 42, 0.1);
  --shadow-panel: var(--shadow-card);
  --shadow-modal: inset 0 1px 0 #fff, 0 40px 100px -30px rgba(15, 23, 42, 0.45);
  --border-glass: rgba(15, 23, 42, 0.1);
  --border-glass-mid: rgba(15, 23, 42, 0.13);
  --r-lg: 24px;
  --gradient-brand: linear-gradient(180deg, #ff5b6b 0%, #ff3347 55%, #ee2238 100%);
  --primary-glow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 6px rgba(120, 0, 20, 0.25), 0 10px 24px -10px rgba(255, 51, 71, 0.55);
  --primary-glow-strong: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 6px rgba(120, 0, 20, 0.25), 0 14px 32px -10px rgba(255, 51, 71, 0.7);
  --primary-glow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px -6px rgba(255, 51, 71, 0.45);
  --seg-track: rgba(15, 23, 42, 0.06);
  --seg-line: rgba(15, 23, 42, 0.08);
  --seg-thumb: #fff;
  --seg-thumb-shadow: 0 1px 3px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

/* ── 2. Wallpaper: the colour the glass refracts ───────── */
html { background: #07080f; }
html:has(body.theme-light) { background: #eef1f8; }
html body,
html body.theme-dark,
html body.theme-light { background: transparent; }
html body.theme-light main { background: transparent; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62vmax 62vmax at -4% -8%, rgba(255, 51, 71, 0.3), transparent 62%),
    radial-gradient(60vmax 60vmax at 104% -4%, rgba(10, 132, 255, 0.24), transparent 62%),
    radial-gradient(70vmax 60vmax at 8% 108%, rgba(10, 132, 255, 0.2), transparent 62%),
    radial-gradient(60vmax 60vmax at 104% 104%, rgba(6, 182, 212, 0.14), transparent 62%),
    radial-gradient(120% 70% at 50% -10%, #111a2b 0%, #07080f 62%);
}
body.theme-light::after {
  background:
    radial-gradient(62vmax 62vmax at -4% -8%, rgba(255, 51, 71, 0.16), transparent 62%),
    radial-gradient(60vmax 60vmax at 104% -4%, rgba(10, 132, 255, 0.14), transparent 62%),
    radial-gradient(70vmax 60vmax at 8% 108%, rgba(10, 132, 255, 0.14), transparent 62%),
    radial-gradient(60vmax 60vmax at 104% 104%, rgba(6, 182, 212, 0.12), transparent 62%),
    linear-gradient(180deg, #f3f0fb 0%, #eef1f8 60%);
}

/* ── 3. Glass surfaces ─────────────────────────────────── */
/* Single-class list keeps specificity at one class: beats base page rules, loses to variants
   such as .product-card.danger, so status tints survive. */
:is(.card, .panel, .control-panel, .recordings-section, .status-strip, .date-panel, .weekly-progress-card,
  .users-panel, .settings-section, .performance-panel, .dev-card, .contact-card, .camera-card, .doc-panel, .cost-card, .spruch-card,
  .delivery-panel, .order-tabs-wrapper, .product-card, .orders-panel, .management-tile, .images-panel,
  .daily-card, .image-card, .wf-panel, .insights-panel, .notification-row, .reinigung-entry-card,
  .reinigung-mgmt-stat, .locations-panel, .mg-stat, .mg-card, .mg-empty, .admin-time-account,
  .admin-time-controls, .gleitzeitkonto-panel, .time-card, .time-form, .time-list-panel, .kpi-card,
  .login-card, .user-form, .location-form, .mail-section) {
  background: var(--liquid-fill);
  border-color: transparent;
  box-shadow: var(--shadow-card);
}
body.theme-light :is(.card, .panel, .control-panel, .recordings-section, .status-strip, .date-panel, .weekly-progress-card,
  .users-panel, .settings-section, .performance-panel, .dev-card, .contact-card, .camera-card, .doc-panel, .cost-card, .spruch-card,
  .delivery-panel, .order-tabs-wrapper, .product-card, .orders-panel, .management-tile, .images-panel,
  .daily-card, .image-card, .wf-panel, .insights-panel, .notification-row, .reinigung-entry-card,
  .reinigung-mgmt-stat, .locations-panel, .mg-stat, .mg-card, .mg-empty, .admin-time-account,
  .admin-time-controls, .gleitzeitkonto-panel, .time-card, .time-form, .time-list-panel, .kpi-card,
  .login-card, .user-form, .location-form, .mail-section) {
  background: var(--liquid-fill), #fff;
  border-color: transparent;
  box-shadow: var(--shadow-card);
}
/* app.css forces white light cards with !important */
body.theme-light :is(.card, .panel) {
  background: var(--liquid-fill), #fff !important;
  border-color: transparent !important;
}

/* Rim light on the shared card primitive (its pseudo-elements belong to the design system) */
.card::before,
.panel::before {
  inset: -1px;
  height: auto;
  padding: 1px;
  border-radius: inherit;
  opacity: 1;
  background: var(--liquid-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* Specular glare following the pointer (motion.js sets --mx/--my) instead of the shimmer sweep */
.card::after,
.panel::after {
  transform: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.1), transparent 45%);
  transition: opacity 0.4s var(--ease-smooth);
}
body.theme-light .card::after,
body.theme-light .panel::after {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.7), transparent 45%);
}
@media (hover: hover) {
  .card:hover,
  .panel:hover,
  .camera-card:hover,
  .doc-panel:hover,
  .cost-card:hover,
  .spruch-card:hover,
  .product-card:hover,
  .dev-card:hover,
  .management-tile:hover,
  .reinigung-entry-card:hover,
  .wf-panel:hover,
  .insights-panel:hover {
    transform: translateY(-3px);
    border-color: transparent;
    background: var(--liquid-fill);
    box-shadow: var(--shadow-card-hover);
  }
  body.theme-light :is(.card, .panel, .camera-card, .doc-panel, .cost-card, .spruch-card, .product-card, .dev-card,
    .management-tile, .reinigung-entry-card, .wf-panel, .insights-panel):hover {
    background: var(--liquid-fill), #fff !important;
  }
  .card:hover::after,
  .panel:hover::after { opacity: 1; transform: none; }
}

:is(.card, .panel, .camera-card, .doc-panel, .cost-card, .spruch-card, .product-card, .dev-card, .management-tile,
  .reinigung-entry-card, .wf-panel, .insights-panel) {
  transition: transform 420ms var(--ease-spring), box-shadow 320ms var(--ease-smooth),
    background 320ms var(--ease-smooth), border-color 240ms var(--ease-smooth);
}

/* ── 4. Typography ─────────────────────────────────────── */
:is(.page-eyebrow, .dashboard-eyebrow, .management-eyebrow, .dev-page-eyebrow, .access-kicker) {
  color: var(--eyebrow);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
main > header h1,
.dashboard-header h1,
.dev-page-header h1 {
  font-weight: 800;
  letter-spacing: -0.04em;
}
/* Gradient titles vanished on the light wallpaper and tinted two dark pages violet; titles are plain text everywhere */
:is(.management-header) h1 {
  background: none;
  color: var(--text);
  -webkit-text-fill-color: currentColor;
}
/* Tiles are links; the light theme's red link colour leaked into their text */
body.theme-light .management-tile { color: var(--text); }
body.theme-light .management-tile p { color: var(--text-secondary); }

/* ── 5. Controls ───────────────────────────────────────── */
button { border-radius: var(--r-full); }
button::after { background: none; }
button:hover { transform: none; filter: brightness(1.05); }
:is(.panel-link, .button-secondary, .studio-switch-btn, .icon-btn, .icon-button) { border-radius: var(--r-full); }

/* The light theme turned every button white; primary actions stay brand red like in dark mode.
   List = buttons that render red in dark but white in light (checked across all pages). */
body.theme-light :is(.btn-primary, .button-primary, .camera-primary, .dev-btn-primary, .save-btn, .save-time-btn,
  .save-settings-btn, .theme-option.active, #add-task-btn, #admin-page-save-account, #admin-page-save-settings,
  #bug-refresh, #forgot-submit-btn, #reset-submit-btn, .login-form button[type="submit"]):not(:disabled) {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--primary-glow);
}

input,
select,
textarea {
  border-radius: var(--r-md);
  border-color: rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.06);
}
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(255, 98, 114, 0.8);
  background-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 4px rgba(255, 51, 71, 0.18);
}
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  border-color: rgba(15, 23, 42, 0.12);
  background-color: rgba(255, 255, 255, 0.78);
}
body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
  border-color: rgba(224, 32, 58, 0.7);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 51, 71, 0.14);
}
input[type="checkbox"],
input[type="radio"],
input[type="range"] { box-shadow: none; }

/* Studio switch and custom select: glass pills with glass menus */
.studio-switch-btn,
.c-select__trigger {
  background: var(--liquid-fill);
  border-color: transparent;
  box-shadow: var(--shadow-card);
}
.c-select__trigger { border-radius: var(--r-md); }
body.theme-light :is(.studio-switch-btn, .c-select__trigger) { background: var(--liquid-fill), #fff; border-color: transparent; box-shadow: var(--shadow-card); }
:is(.studio-menu, .c-select__menu, .sidebar-user-menu) {
  background: var(--liquid-sheet);
  -webkit-backdrop-filter: var(--liquid-blur);
  backdrop-filter: var(--liquid-blur);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  box-shadow: var(--shadow-modal);
}
body.theme-light :is(.studio-menu, .c-select__menu, .sidebar-user-menu) { background: var(--liquid-sheet); border-color: rgba(15, 23, 42, 0.08); box-shadow: var(--shadow-modal); }
:is(.studio-menu-item, .c-select__option, .sidebar-user-menu-item) { border-radius: 12px; }

/* ── 6. Sidebar navigation: glass capsules, no indicator bar ── */
.sidebar-nav a,
:is(.admin-dropdown-menu, .nav-dropdown-menu) a,
.nav-dropdown-item,
:is(.admin-dropdown-toggle, .nav-dropdown-toggle) { border-radius: var(--r-full); }
.sidebar-nav a,
:is(.admin-dropdown-menu, .nav-dropdown-menu) a,
.nav-dropdown-item {
  transition: color var(--t-base) var(--ease-smooth), background-color var(--t-base) var(--ease-smooth),
    box-shadow var(--t-base) var(--ease-smooth);
}
.sidebar-nav a::before,
.sidebar-nav a::after { display: none; }
.sidebar-nav a:hover,
:is(.admin-dropdown-menu, .nav-dropdown-menu) a:hover,
.nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: transparent;
  transform: none;
}
.sidebar-nav a.active,
:is(.admin-dropdown-menu, .nav-dropdown-menu) a.active,
.nav-dropdown-item.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)), rgba(255, 51, 71, 0.08);
  border-color: transparent;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 10px 24px -12px rgba(0, 0, 0, 0.7);
}
.sidebar-nav a.active .nav-icon { opacity: 1; color: var(--eyebrow); filter: none; }
/* The light theme's generic link colour used to turn every nav entry red */
body.theme-light .sidebar-nav a,
body.theme-light .sidebar-legal a { color: var(--text-secondary); }
body.theme-light .sidebar-nav a:hover,
body.theme-light :is(.admin-dropdown-menu, .nav-dropdown-menu) a:hover,
body.theme-light .nav-dropdown-item:hover { background: rgba(15, 23, 42, 0.05); }
body.theme-light .sidebar-nav a.active,
body.theme-light :is(.admin-dropdown-menu, .nav-dropdown-menu) a.active,
body.theme-light .nav-dropdown-item.active {
  background: #fff;
  color: var(--text);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 23, 42, 0.05), 0 8px 18px -8px rgba(15, 23, 42, 0.28);
}
.sidebar-user-profile-btn { border-radius: 22px; }

/* Desktop: sidebar floats as a glass panel beside the content */
@media (min-width: 901px) {
  .sidebar {
    height: calc(100dvh - 24px);
    margin: 12px 0 12px 12px;
    border: 0;
    border-radius: 28px;
    background: var(--liquid-fill-strong), var(--liquid-chrome);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    /* Rim drawn with insets: pseudo-elements would scroll away inside the overflow container */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -24px rgba(0, 0, 0, 0.6);
  }
  body.theme-light .sidebar {
    border: 0;
    background: var(--liquid-fill-strong), var(--liquid-chrome);
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(15, 23, 42, 0.05), 0 24px 50px -24px rgba(15, 23, 42, 0.3);
  }
  .sidebar::before,
  .sidebar::after { display: none; }
  /* Document-scrolling pages pin the sidebar; keep the floating inset while pinned */
  body:has(> .ops-page) > .sidebar { top: 12px; height: calc(100dvh - 24px); }
}

/* ── 7. Dialogs and notifications ──────────────────────── */
:is(.modal, .modal-overlay) { background: rgba(4, 5, 12, 0.5); }
body.theme-light :is(.modal, .modal-overlay) { background: rgba(15, 23, 42, 0.28); }
:is(.modal-content, .modal-box, .contact-detail-modal, .ac-modal-card) {
  background: var(--liquid-sheet);
  -webkit-backdrop-filter: var(--liquid-blur);
  backdrop-filter: var(--liquid-blur);
  border: 1px solid var(--border-glass);
  border-radius: 28px;
  box-shadow: var(--shadow-modal);
}
body.theme-light :is(.modal-content, .modal-box, .contact-detail-modal, .ac-modal-card) {
  background: var(--liquid-sheet);
  border-color: rgba(15, 23, 42, 0.08);
}

/* iOS notification material: tinted glass instead of solid colour blocks */
.toast {
  border-radius: 22px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: var(--liquid-blur);
  backdrop-filter: var(--liquid-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
.toast::after { display: none; }
.toast-success { background: linear-gradient(135deg, rgba(48, 209, 88, 0.34), rgba(48, 209, 88, 0.12)), rgba(18, 20, 34, 0.78); }
.toast-warning { background: linear-gradient(135deg, rgba(255, 214, 10, 0.3), rgba(255, 214, 10, 0.1)), rgba(18, 20, 34, 0.78); color: #fff; }
:is(.toast-danger, .toast-error) { background: linear-gradient(135deg, rgba(255, 51, 71, 0.38), rgba(255, 51, 71, 0.14)), rgba(18, 20, 34, 0.78); }
.toast-info { background: linear-gradient(135deg, rgba(10, 132, 255, 0.34), rgba(10, 132, 255, 0.12)), rgba(18, 20, 34, 0.78); }

/* ── 8. Phone and tablet ───────────────────────────────── */
@media (max-width: 900px) {
  :root { --mobile-bar: calc(82px + env(safe-area-inset-top)); }

  /* Floating glass bar like the landing page navigation */
  .mobile-topbar {
    inset: calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) auto max(12px, env(safe-area-inset-left));
    height: 60px;
    padding: 0 8px 0 18px;
    border: 0;
    border-radius: var(--r-full);
    background: var(--liquid-fill-strong), var(--liquid-chrome);
    -webkit-backdrop-filter: var(--liquid-blur);
    backdrop-filter: var(--liquid-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  }
  body.theme-light .mobile-topbar {
    border: 0;
    background: var(--liquid-fill-strong), var(--liquid-chrome);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 23, 42, 0.06), 0 16px 36px -18px rgba(15, 23, 42, 0.35);
  }
  .mobile-topbar-logo img { width: 60px; height: 40px; }
  .mobile-menu-btn {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-size: 20px;
  }
  body.theme-light .mobile-menu-btn { background: rgba(15, 23, 42, 0.06); box-shadow: inset 0 1px 0 #fff; }

  /* Menu opens as a glass sheet under the bar */
  .sidebar {
    top: var(--mobile-bar);
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    height: calc(100dvh - var(--mobile-bar) - max(12px, env(safe-area-inset-bottom)));
    border: 0;
    border-radius: 28px;
    transform: translateX(calc(-100% - 24px));
    background: var(--liquid-sheet);
    -webkit-backdrop-filter: var(--liquid-blur);
    backdrop-filter: var(--liquid-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  }
  body.theme-light .sidebar { border: 0; background: var(--liquid-sheet); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 23, 42, 0.06), 0 30px 70px -30px rgba(15, 23, 42, 0.4); }
  .sidebar-overlay { inset: 0; background: rgba(4, 5, 12, 0.45); }
  body.theme-light .sidebar-overlay { background: rgba(15, 23, 42, 0.2); }

  /* Surfaces keep the glass look; blur stays off for scroll performance (the wallpaper is smooth) */
  main :is(.card, .panel, .user-form, .users-panel, .settings-section, .time-form, .time-list-panel,
    .location-form, .locations-panel, .mail-section, .performance-panel) {
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 40px -24px rgba(0, 0, 0, 0.6);
  }
  body.theme-light main :is(.card, .panel, .user-form, .users-panel, .settings-section, .time-form, .time-list-panel,
    .location-form, .locations-panel, .mail-section, .performance-panel) {
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(15, 23, 42, 0.06), 0 14px 32px -22px rgba(15, 23, 42, 0.3);
  }
  main :is(.card, .panel)::before { display: block; }
  .mobile-disclosure.mobile-active {
    border: 0;
    border-radius: 22px;
    background: var(--liquid-fill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
  body.theme-light .mobile-disclosure.mobile-active { background: var(--liquid-fill), #fff; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(15, 23, 42, 0.06); }
  main > header h1,
  .dev-page-header h1 { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.08; letter-spacing: -0.035em; }
}

/* ── 9. Preferences ────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .sidebar,
  .mobile-topbar,
  :is(.modal-content, .modal-box, .studio-menu, .c-select__menu, .sidebar-user-menu, .toast) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #161827;
  }
  body.theme-light :is(.sidebar, .mobile-topbar) { background: #fff; }
}

/* ── 10. Clarity: one header, one label style, aligned numbers ── */
/* Digits share one width, so KPIs, times and tables line up instead of jittering while they update. */
body { font-variant-numeric: tabular-nums; }

/* One page header everywhere. Pages mixed 10.5–12px eyebrows in red, grey and white and titles from 22 to 36px;
   page rules such as `.schedule-page .page-eyebrow` outrank this layer, hence !important on the type values. */
main > header :is(.page-eyebrow, .dashboard-eyebrow, .management-eyebrow, .dev-page-eyebrow, .inventory-eyebrow,
  .notifications-eyebrow) {
  color: var(--eyebrow) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}
/* Eyebrow links lead back to the parent area (Management, Konto) */
main > header a.page-eyebrow { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
main > header a.page-eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
main > header a.page-eyebrow:hover { text-decoration: underline; text-underline-offset: 3px; }
main > header p:not([class*="eyebrow"]) {
  max-width: 68ch;
  color: var(--text-secondary) !important;
  font-size: 14.5px !important;
  line-height: 1.55;
}
@media (min-width: 901px) {
  main > header h1 { font-size: 32px !important; font-weight: 800 !important; line-height: 1.15 !important; }
}

/* Labels in sentence case: half the pages shouted in capitals, the other half did not. Eyebrows, badges and
   table headers keep their small caps. */
:is(.modal-content label, .zone-editor label, .studio-field > span, .status-strip span,
  .date-panel label, .comment-box, .weekly-progress-label, .user-form label, .extra-permissions-header h3,
  .settings-section label, .theme-selector legend, .camera-info-group h4, .performance-score small,
  .performance-day span, .time-status-card span, .dev-section-label, .dev-ostat-lbl, .subdomain-stat-label,
  .pm2-stat-label, .impressum-field-label, .contact-detail-label, .order-form label, .consumption-analysis-title,
  .product-manager-form label, .login-form label, .warehouse-item-section-label, .mail-preview-header h3,
  .panel-header h2, .daily-card h2, .reinigung-mgmt-controls label, .reinigung-mgmt-stat-label, .location-form label,
  .time-card h3, .time-form label, .admin-time-controls label, .admin-time-account-grid label,
  .gleitzeitkonto-item-label) {
  text-transform: none;
  letter-spacing: 0;
}

/* Field values inherited the label weight (650–800), so every placeholder read like a heading */
main :is(input, select, textarea, .c-select__trigger, .multi-select-btn):not([type="checkbox"]):not([type="radio"]) { font-weight: 500; }

/* Native file pickers looked like an unstyled browser control next to the glass fields */
input[type="file"] { color: var(--text-secondary); font-size: 13px; }
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: 1px solid var(--border-glass-mid);
  border-radius: var(--r-full);
  background: var(--glass-12);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--glass-18); }
body.theme-light input[type="file"]::file-selector-button { background: #fff; border-color: rgba(15, 23, 42, 0.12); }

/* Toolbars: search and role filter share one row; time admin filters fill the row before wrapping */
.contacts-filter > .c-select {
  flex: 0 0 240px;
  width: 240px;
  /* app.js copies the select's classes onto the wrapper; without this the trigger sat in a second glass box */
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.contacts-filter .c-select__trigger { height: 100%; border-radius: var(--r-lg); }
.admin-time-controls > label { flex: 1 1 180px; }
.admin-time-controls .multi-select { min-width: 200px; }
#learning-retry { margin-bottom: 22px; }

@media (max-width: 900px) {
  /* Same title size on every phone page (Management used 24px, others up to 34px) */
  main > header h1 { font-size: clamp(26px, 7.4vw, 32px) !important; }
  /* The help disclosure is plain text, not a glass pill (it inherited the section style above) */
  .mobile-disclosure.mobile-active.mobile-help { background: none; box-shadow: none; border-radius: 0; }
  body.theme-light .mobile-disclosure.mobile-active.mobile-help { background: none; box-shadow: none; }
  /* Decorative eyebrows stay hidden on phones (mobile.css); back links stay, they are navigation */
  main > header :is(.inventory-eyebrow, .notifications-eyebrow) { display: none; }
  main > header a.page-eyebrow { display: inline-flex; margin-bottom: 6px; }
}
@media (max-width: 600px) {
  .contacts-filter > .c-select { flex-basis: 100%; width: 100%; }
}

/* ── 11. Capsule actions ───────────────────────────────── */
/* iOS draws every text action as a capsule. These actions had 8–16px corners from page rules; fields
   (.c-select__trigger, .multi-select-btn) and card-like buttons keep their shape. */
:is(.admin-edit-btn, .avatar-upload-btn, .save-settings-btn, .save-time-btn, .compact-action, .contact-btn,
  .history-btn, .manage-products-btn, .warehouse-btn, .upload-submit-btn, .copy-btn,
  .learn-button, #notifications-refresh, #notifications-read-all, #insights-refresh,
  #admin-page-save-settings, #admin-page-save-account, #admin-page-reset-plus, #forgot-submit-btn, #reset-submit-btn,
  .login-form button[type="submit"], main:not(.workforce-page, .documents-page) form > button[type="submit"]) {
  border-radius: var(--r-full) !important;
}
:is(.day-nav-btn, .month-nav-btn) { border-radius: 50% !important; }

/* ── 12. Segmented controls ────────────────────────────── */
/* Every view switcher is one control: recessed track, raised glass thumb, capsule segments (same look as the
   documents page's .doc-segments). motion.js glides the thumb from the old segment to the new one. */
main :is(.learn-tabs, .camera-tabs, .dev-tab-bar, .order-tab-nav, .logistics .tabs) {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  padding: 4px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--seg-track);
  box-shadow: inset 0 0 0 1px var(--seg-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow-x: auto;
  scrollbar-width: none;
}
main :is(.learn-tabs, .camera-tabs, .dev-tab-bar, .order-tab-nav, .logistics .tabs)::-webkit-scrollbar { display: none; }
main :is(.learn-tabs, .camera-tabs, .dev-tab-bar, .order-tab-nav, .logistics .tabs) > :is(button, a, [role="tab"]) {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  bottom: auto;
  transition: color var(--t-base) var(--ease-smooth);
}
main :is(.learn-tabs, .camera-tabs, .dev-tab-bar, .order-tab-nav, .logistics .tabs) > :is(button, a, [role="tab"]):hover:not(:disabled) {
  background: transparent;
  color: var(--text);
}
main :is(.learn-tabs, .camera-tabs, .dev-tab-bar, .order-tab-nav, .logistics .tabs) > :is([aria-selected="true"], .active, .is-active),
main :is(.learn-tabs, .camera-tabs, .dev-tab-bar, .order-tab-nav, .logistics .tabs) > :is([aria-selected="true"], .active, .is-active):hover:not(:disabled) {
  background: var(--seg-thumb);
  color: var(--text);
  box-shadow: var(--seg-thumb-shadow);
}
/* Lager: the switcher sits inside the order card instead of forming its folder-tab top edge */
main .order-tab-nav { margin: 18px 18px 0; }

/* Gliding thumb (motion.js): a positioned copy of the selected segment's fill slides under the labels */
:is(.doc-segments, .learn-editor-steps, .learn-tabs, .camera-tabs, .dev-tab-bar, .order-tab-nav, .logistics .tabs) {
  position: relative;
  isolation: isolate;
}
.seg-thumb { position: absolute; z-index: -1; pointer-events: none; }
.seg-gliding { background: transparent !important; box-shadow: none !important; transition: none !important; }