@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/schibsted-grotesk.var.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/hanken-grotesk.var.woff2') format('woff2');}

/* ── Reset & CSS Custom Properties ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body { position: relative; overscroll-behavior: none; }
html { overscroll-behavior: none; }

/* ── Mobile touch optimizations ── */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}
button, a, [role="button"], label, summary {
  touch-action: manipulation;
}

:root {
  /* Accent Colors */
  --accent:        #003780;
  --accent-light:  #E0EAFB;
  --accent-dark:   #002456;
  --teal:          #1D9E75;
  --teal-light:    #E1F5EE;
  --amber:         #BA7517;
  --amber-light:   #FAEEDA;
  --coral:         #D85A30;
  --coral-light:   #FAECE7;
  --rose:          #C4426A;
  --rose-light:    #FAEAEF;

  /* Text */
  --text-primary:   #1a1a1a;
  --text-secondary: #666666;
  --text-tertiary:  #999999;

  /* Backgrounds */
  --bg-primary:   #ffffff;
  --bg-secondary: #f5f5f3;
  --bg-tertiary:  #eeede8;

  /* Border */
  --border: rgba(0,0,0,0.1);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Fonts */
  --font-body:    'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-display: 'Schibsted Grotesk','Hanken Grotesk',-apple-system,sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  /* Transitions */
  --transition: 150ms ease;
  --transition-slow: 300ms ease;

  /* Semantic tokens */
  --primary: var(--accent);
  --danger:       var(--coral);
  --danger-light: var(--coral-light);
  --warning: var(--amber);   /* #BA7517 – good contrast on light bg */
  --success: #1a9e6e;

  /* Sidebar */
  --sidebar-width: 240px;

  /* ── Kalender Time Grid ── */
  --cal-slot-height:       48px;                    /* Höhe eines 30-Min-Slots */
  --cal-hour-label-width:  56px;                    /* Breite der Stunden-Labels */
  --cal-event-border-width:4px;                     /* Linker Farbstreifen */
  --cal-event-radius:      var(--radius-sm);         /* 6px */
  --cal-event-gap:         2px;                     /* Abstand zwischen überlappenden Events */
  --cal-allday-height:     24px;                    /* Höhe eines All-Day-Event-Bars */
  --cal-flyout-width:      340px;                   /* Breite des Event-Flyouts */
  --cal-now-line-color:    var(--coral);             /* Aktuelle-Zeit-Linie */
  --cal-today-bg:          var(--accent-light);      /* Hintergrund aktueller Tag */

  /* ── Workspace-Tab-Leiste (Desktop, Ticket 3.42/B68) ──
     Fensterrahmen-Optik: dunkle Leiste im Marken-Blau, aktiver Tab hebt sich
     als helle Karte ab (verbindet sich optisch mit der L3-Leiste darunter,
     die ebenfalls --bg-primary nutzt) — grenzt sich damit klar von der
     flachen L3-Filter-Leiste (.tab-filter) ab. */
  --tabbar-bg:       var(--accent);
  --tabbar-fg:       rgba(255,255,255,.72);
  --tabbar-fg-hover: #ffffff;
  /* Rest-/Hover-Flaeche der einzelnen Tab-Items (nicht des aktiven Tabs —
     der bleibt var(--bg-primary), unveraendert). Ohne eigene Rest-Flaeche
     "schwebt" ein inaktiver Tab ohne erkennbare Form auf --tabbar-bg (Nutzer-
     Feedback 2026-08-07). Light hat viel Kontrast-Spielraum bis zum hellen
     aktiven Tab (weiss) — hier duerfen Rest/Hover kraeftiger auftragen. */
  --tabbar-item-bg:       rgba(255,255,255,.09);
  --tabbar-item-bg-hover: rgba(255,255,255,.22);
}

/* ── Dark mode tokens (shared by media query AND manual toggle) ── */
@mixin dark-tokens {
  --text-primary:   #e8e6df;
  --text-secondary: #9c9a92;
  --text-tertiary:  #6b6963;
  --bg-primary:     #1c1c1a;
  --bg-secondary:   #252523;
  --bg-tertiary:    #2e2e2b;
  --border:         rgba(255,255,255,0.1);
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.5);
}

/* Dark mode ist ausschliesslich ein expliziter User-Toggle — KEINE OS-Media-Query.
   Default (kein data-theme-Attribut) ist immer Hell, unabhaengig von prefers-color-scheme. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --text-primary:   #e8e6df;
  --text-secondary: #9c9a92;
  --text-tertiary:  #6b6963;
  --bg-primary:     #1c1c1a;
  --bg-secondary:   #252523;
  --bg-tertiary:    #2e2e2b;
  --border:         rgba(255,255,255,0.1);
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.5);
  --accent:         #4d85e0;
  --accent-dark:    #3a6db8;
  --accent-light:   rgba(77,133,224,0.15);
  --teal:           #2abb8a;
  --teal-light:     rgba(42,187,138,0.15);
  --amber:          #e09b26;
  --amber-light:    rgba(224,155,38,0.15);
  --coral:          #e8714d;
  --coral-light:    rgba(232,113,77,0.15);
  --rose:           #d95c82;
  --rose-light:     rgba(217,92,130,0.15);
  --primary:        var(--accent);
  --warning:        #e09b26;
  --success:        #34d399;
  --danger:         var(--coral);
  --danger-light:   rgba(232,113,77,0.15);
  /* Workspace-Tab-Leiste: volles --accent (#4d85e0) waere im Dark-Mode zu
     hell/laut fuer eine vollflaechige Leiste (am Bildschirm geprueft) —
     gedaempftes, dunkles Navy statt hellem Blau. Identitaet bleibt am
     aktiven Tab-Rand + Fokus-Optik erhalten (s. nav.css). */
  --tabbar-bg:       #16233a;
  --tabbar-fg:       rgba(255,255,255,.6);
  --tabbar-fg-hover: #ffffff;
  /* Dark: --bg-primary (aktiver Tab, #1c1c1a) ist SELBST dunkler als
     --tabbar-bg (#16233a) — eine Eigenheit des bestehenden Dark-Palette-
     Designs (bg-primary ist im Dark-Mode die dunkelste Flaeche der App,
     s. base.css Dark-Tokens), nicht durch diese Aenderung eingefuehrt und
     hier nicht behebbar (aktiver Tab + globale bg-Variablen bleiben
     unangetastet). Deshalb bleibt fuer Rest/Hover kaum Spielraum, bevor sie
     optisch mit dem aktiven Tab konkurrieren wuerden — deutlich
     zurueckhaltender als Light kalibriert. --tabbar-item-bg-hover haelt
     bewusst die INTENSITAET des bisherigen (theme-uebergreifenden) Hover-
     Werts (rgba(255,255,255,.1)) — kein neues, staerkeres Aufhellen als
     der bereits produktiv gewesene Zustand, nur der fehlende Ruhe-
     Zwischenschritt kommt dazu (am Bildschirm geprueft). */
  --tabbar-item-bg:       rgba(255,255,255,.05);
  --tabbar-item-bg-hover: rgba(255,255,255,.10);
}

/* Manual light override (overrides system dark preference) */
:root[data-theme="light"] {
  color-scheme: light;
  --accent:        #003780;
  --accent-light:  #E0EAFB;
  --accent-dark:   #002456;
  --teal:          #1D9E75;
  --teal-light:    #E1F5EE;
  --amber:         #BA7517;
  --amber-light:   #FAEEDA;
  --text-primary:   #1a1a1a;
  --text-secondary: #666666;
  --text-tertiary:  #999999;
  --bg-primary:   #ffffff;
  --bg-secondary: #f5f5f3;
  --bg-tertiary:  #eeede8;
  --border:         rgba(0,0,0,0.1);
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.12);
  --danger:         var(--coral);
  --danger-light:   var(--coral-light);
  --tabbar-bg:       var(--accent);
  --tabbar-fg:       rgba(255,255,255,.72);
  --tabbar-fg-hover: #ffffff;
  --tabbar-item-bg:       rgba(255,255,255,.09);
  --tabbar-item-bg-hover: rgba(255,255,255,.22);
}

/* ── Typography ── */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-secondary);
  min-height: 100dvh;
}

h1,h2,h3,h4 { font-family: var(--font-display); }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: 1.0625rem; font-weight: 600; }
h4 { font-size: 0.9375rem; font-weight: 600; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

p { color: var(--text-secondary); line-height: 1.65; }

small { font-size: 0.8125rem; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ── Focus ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Selection ── */
::selection {
  background: var(--accent-light);
  color: var(--accent-dark);
}

/* ── Page Transition ── */
#app {
  animation: pageIn 150ms ease forwards;
}

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

/* opacity-only Variante für .ds-content-body:
   transform (auch `none` am Ende) erzeugt nach einer SPA-Navigation einen
   Containing-Block für position:fixed-Descendants — Browser liefert
   matrix(1,0,0,1,0,0) statt `none`, auch bei `to{transform:none}`.
   opacity erzeugt KEINEN Containing-Block → .ds-cal-panel bleibt viewport-fixed.
   MUSS synchron mit nav.css `.ds-content-body` + ds-app-shell.js `_mountPage` gehalten werden. */
@keyframes contentIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* WICHTIG: #app nutzt `pageIn` (einmaliger Initial-Load, gibt Kompositions-Ebene frei).
   .ds-content-body nutzt `contentIn` (opacity-only) bei jeder SPA-Navigation —
   kein transform, kein Containing-Block für position:fixed (ds-cal-panel, Slide-In-Panels). */

/* ── Brand-Dot: der farbige Punkt im hejdesk-Markenzeichen ── */
.brand-dot { color: var(--accent); }