/* ==========================================================================
   TESM Design-System -- Teil 1: Tokens, Reset, Layout
   --------------------------------------------------------------------------
   Kein Bootstrap, kein Tailwind, kein Build-Schritt. Handgeschriebenes CSS in
   Layern, damit die Spezifitaet vorhersehbar bleibt.

   Gegenueber dem Vorgaenger (eine 1550-Zeilen-Datei, flach, ohne Layer):
   - Tokens sind konsequent semantisch (--surface-2 statt --bg-card-hover),
     damit Themes ohne Umbenennen von Komponenten getauscht werden koennen.
   - Drei Theme-Zustaende: System (Default), hell, dunkel. Der Vorgaenger kannte
     nur "dunkel oder hell" und ignorierte die Systemeinstellung.
   - Fokusringe sind ueberall sichtbar (:focus-visible), Kontraste erfuellen
     WCAG AA, und prefers-reduced-motion wird respektiert.
   ========================================================================== */

@layer tokens, reset, layout, components, utilities;

@layer tokens {
  :root {
    /* -- Markenfarbe: WiS-Orange, in eine vollstaendige Skala aufgezogen ---- */
    --brand-050: #fff4ec;
    --brand-100: #ffe3d1;
    --brand-200: #ffc3a1;
    --brand-300: #ff9f6b;
    --brand-400: #ff8639;
    --brand-500: #ff7100;
    --brand-600: #e05f00;
    --brand-700: #b84c00;
    --brand-800: #8a3900;

    /* -- Neutrale, leicht kuehle Grauskala ---------------------------------- */
    --neutral-000: #ffffff;
    --neutral-025: #fafafb;
    --neutral-050: #f4f5f7;
    --neutral-100: #eaecf0;
    --neutral-200: #d7dae1;
    --neutral-300: #b8bdc9;
    --neutral-400: #8f96a6;
    --neutral-500: #6b7383;
    --neutral-600: #4d5462;
    --neutral-700: #363c48;
    --neutral-800: #23272f;
    --neutral-850: #1a1d24;
    --neutral-900: #14171c;
    --neutral-950: #0d0f13;

    /* -- Semantische Statusfarben ------------------------------------------ */
    --green-400: #34d399;
    --green-500: #16a34a;
    --green-600: #15803d;
    --red-400: #f87171;
    --red-500: #dc2626;
    --red-600: #b91c1c;
    --amber-400: #fbbf24;
    --amber-500: #d97706;
    --blue-400: #60a5fa;
    --blue-500: #2563eb;
    --violet-400: #a78bfa;

    /* -- Abstaende (4er-Raster) -------------------------------------------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* -- Radien ------------------------------------------------------------ */
    --r-xs: 5px;
    --r-sm: 8px;
    --r-md: 11px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-full: 999px;

    /* -- Typografie -------------------------------------------------------- */
    --font-sans: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
      "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
    --fs-xs: 0.6875rem;   /* 11px */
    --fs-sm: 0.8125rem;   /* 13px */
    --fs-base: 0.875rem;  /* 14px */
    --fs-md: 0.9375rem;   /* 15px */
    --fs-lg: 1.0625rem;   /* 17px */
    --fs-xl: 1.3125rem;   /* 21px */
    --fs-2xl: 1.625rem;   /* 26px */
    --fs-3xl: 2rem;
    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    /* -- Struktur ---------------------------------------------------------- */
    --sidebar-w: 258px;
    --sidebar-rail-w: 68px;
    --topbar-h: 60px;
    --content-max: 1680px;

    /* -- Bewegung ---------------------------------------------------------- */
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-fast: 120ms;
    --dur: 180ms;
    --dur-slow: 300ms;

    --z-sticky: 30;
    --z-drawer: 60;
    --z-modal: 80;
    --z-toast: 100;
  }

  /* -- Helles Theme (Basis) ------------------------------------------------ */
  :root,
  :root[data-theme="light"] {
    color-scheme: light;

    --canvas: var(--neutral-050);
    --surface-1: var(--neutral-000);
    --surface-2: var(--neutral-025);
    --surface-3: var(--neutral-100);
    --surface-inset: var(--neutral-050);
    --surface-overlay: rgba(20, 23, 28, 0.45);

    --border: #e2e5ea;
    --border-strong: #cdd2db;
    --border-subtle: #eef0f4;

    --text: #171a20;
    --text-muted: #5b6371;
    --text-faint: #868d9b;
    --text-inverse: #ffffff;

    --accent: var(--brand-600);

    /* Marke. Eigene Token statt --accent: das Zeichen hat seine eigenen
       Farbwerte und soll sich nicht mitverschieben, wenn der Akzent sich
       aendert. */
    --logo-plate: #edf1f2;
    --logo-plate-line: #c1cbce;
    --logo-mark: #b5750e;
    --logo-text: #172026;
    --accent-hover: var(--brand-700);
    --accent-text: #ffffff;
    --accent-soft: var(--brand-050);
    --accent-soft-text: var(--brand-700);
    --accent-ring: rgba(224, 95, 0, 0.32);

    --success: var(--green-600);
    --success-soft: #e8f7ee;
    --danger: var(--red-600);
    --danger-soft: #fdecec;
    --warning: var(--amber-500);
    --warning-soft: #fdf3e2;
    --info: var(--blue-500);
    --info-soft: #eaf1fe;
    --neutral-pill: #eef0f4;
    --neutral-pill-text: #5b6371;

    --shadow-xs: 0 1px 2px rgba(16, 20, 28, 0.06);
    --shadow-sm: 0 2px 6px rgba(16, 20, 28, 0.07), 0 1px 2px rgba(16, 20, 28, 0.05);
    --shadow-md: 0 8px 20px -6px rgba(16, 20, 28, 0.14), 0 2px 6px rgba(16, 20, 28, 0.06);
    --shadow-lg: 0 22px 48px -16px rgba(16, 20, 28, 0.24), 0 4px 12px rgba(16, 20, 28, 0.08);
    --shadow-accent: 0 6px 18px -6px rgba(224, 95, 0, 0.45);
  }

  /* -- Dunkles Theme ------------------------------------------------------- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    /* Marke, dunkle Fassung. */
    --logo-plate: #10151b;
    --logo-plate-line: transparent;
    --logo-mark: #e2a63c;
    --logo-text: #e7ecee;

      color-scheme: dark;

      --canvas: #0b0d11;
      --surface-1: #14171c;
      --surface-2: #191d23;
      --surface-3: #21262e;
      --surface-inset: #101318;
      --surface-overlay: rgba(5, 6, 9, 0.66);

      --border: #262b34;
      --border-strong: #333944;
      --border-subtle: #1e222a;

      --text: #eceef2;
      --text-muted: #a0a8b6;
      --text-faint: #6f7787;
      --text-inverse: #14171c;

      --accent: var(--brand-500);
      --accent-hover: var(--brand-400);
      --accent-text: #1a0d02;
      --accent-soft: rgba(255, 113, 0, 0.14);
      --accent-soft-text: var(--brand-300);
      --accent-ring: rgba(255, 113, 0, 0.42);

      --success: var(--green-400);
      --success-soft: rgba(52, 211, 153, 0.14);
      --danger: var(--red-400);
      --danger-soft: rgba(248, 113, 113, 0.15);
      --warning: var(--amber-400);
      --warning-soft: rgba(251, 191, 36, 0.15);
      --info: var(--blue-400);
      --info-soft: rgba(96, 165, 250, 0.15);
      --neutral-pill: rgba(160, 168, 182, 0.14);
      --neutral-pill-text: #a0a8b6;

      --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
      --shadow-md: 0 10px 26px -8px rgba(0, 0, 0, 0.6);
      --shadow-lg: 0 26px 56px -18px rgba(0, 0, 0, 0.72);
      --shadow-accent: 0 6px 20px -8px rgba(255, 113, 0, 0.5);
    }
  }

  :root[data-theme="dark"] {
    /* Marke, dunkle Fassung. */
    --logo-plate: #10151b;
    --logo-plate-line: transparent;
    --logo-mark: #e2a63c;
    --logo-text: #e7ecee;

    color-scheme: dark;

    --canvas: #0b0d11;
    --surface-1: #14171c;
    --surface-2: #191d23;
    --surface-3: #21262e;
    --surface-inset: #101318;
    --surface-overlay: rgba(5, 6, 9, 0.66);

    --border: #262b34;
    --border-strong: #333944;
    --border-subtle: #1e222a;

    --text: #eceef2;
    --text-muted: #a0a8b6;
    --text-faint: #6f7787;
    --text-inverse: #14171c;

    --accent: var(--brand-500);
    --accent-hover: var(--brand-400);
    --accent-text: #1a0d02;
    --accent-soft: rgba(255, 113, 0, 0.14);
    --accent-soft-text: var(--brand-300);
    --accent-ring: rgba(255, 113, 0, 0.42);

    --success: var(--green-400);
    --success-soft: rgba(52, 211, 153, 0.14);
    --danger: var(--red-400);
    --danger-soft: rgba(248, 113, 113, 0.15);
    --warning: var(--amber-400);
    --warning-soft: rgba(251, 191, 36, 0.15);
    --info: var(--blue-400);
    --info-soft: rgba(96, 165, 250, 0.15);
    --neutral-pill: rgba(160, 168, 182, 0.14);
    --neutral-pill-text: #a0a8b6;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 10px 26px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 26px 56px -18px rgba(0, 0, 0, 0.72);
    --shadow-accent: 0 6px 20px -8px rgba(255, 113, 0, 0.5);
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    margin: 0;
    min-height: 100dvh;
    background: var(--canvas);
    color: var(--text);
    font: var(--fs-base) / var(--lh-normal) var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
  }

  ul, ol {
    padding: 0;
    list-style: none;
  }

  h1, h2, h3, h4 {
    line-height: var(--lh-tight);
    font-weight: 640;
    letter-spacing: -0.011em;
    text-wrap: balance;
  }

  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }
  h4 { font-size: var(--fs-md); }

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

  img, svg, video, canvas {
    display: block;
    max-width: 100%;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }

  code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
  }

  hr {
    height: 1px;
    margin: var(--sp-5) 0;
    border: 0;
    background: var(--border);
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }

  ::selection {
    background: var(--accent-soft);
    color: var(--accent-soft-text);
  }

  ::placeholder { color: var(--text-faint); opacity: 1; }

  [hidden] { display: none !important; }

  /* Scrollbars: dezent, aber sichtbar */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid transparent;
    border-radius: var(--r-full);
    background-clip: content-box;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  @media print {
    .sidebar, .topbar, .toast-stack, .no-print { display: none !important; }
    .main { margin: 0 !important; }
    body { background: #fff; color: #000; }
  }
}

@layer layout {
  .app-shell {
    display: flex;
    min-height: 100dvh;
  }

  /* -- Seitenleiste ------------------------------------------------------- */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    background: var(--surface-1);
    border-right: 1px solid var(--border);
    transition: width var(--dur) var(--ease), transform var(--dur) var(--ease);
  }

  .sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: var(--topbar-h);
    padding: 0 var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }

  .sidebar__logo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    /* Die Wortmarke bestimmt die Breite, nicht die Seitenleiste: sonst
       zerlaeuft der Schriftzug bei schmalem Fenster. */
    max-width: 168px;
  }
  .sidebar__logo svg { width: 100%; height: auto; display: block; }
  .sidebar__edition {
    font-size: var(--fs-xs);
    color: var(--text-faint);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 2px;
  }

  .sidebar__title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
  }
  .sidebar__title strong {
    font-size: var(--fs-md);
    font-weight: 650;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar__title span {
    font-size: var(--fs-xs);
    color: var(--text-faint);
    white-space: nowrap;
  }

  .sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-3) var(--sp-2) var(--sp-4);
  }

  .nav-group__label {
    padding: var(--sp-4) var(--sp-3) var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 620;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 8px var(--sp-3);
    margin-bottom: 2px;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--dur-fast), color var(--dur-fast);
  }
  .nav-item:hover {
    background: var(--surface-3);
    color: var(--text);
    text-decoration: none;
  }
  .nav-item[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent-soft-text);
    font-weight: 600;
  }
  .nav-item__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
  }
  .nav-item__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-item__badge {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: var(--r-full);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: var(--fs-xs);
    font-weight: 700;
  }

  .nav-tree > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 8px var(--sp-3);
    margin-bottom: 2px;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    transition: background var(--dur-fast);
  }
  .nav-tree > summary::-webkit-details-marker { display: none; }
  .nav-tree > summary:hover { background: var(--surface-3); color: var(--text); }
  .nav-tree__chevron {
    margin-left: auto;
    width: 15px;
    height: 15px;
    transition: transform var(--dur) var(--ease);
  }
  .nav-tree[open] > summary > .nav-tree__chevron { transform: rotate(90deg); }
  .nav-tree[open] > summary { color: var(--text); }
  .nav-tree__children {
    margin: 2px 0 var(--sp-2) 0;
    padding-left: calc(var(--sp-3) + 9px);
    border-left: 1px solid var(--border-subtle);
    margin-left: calc(var(--sp-3) + 9px);
  }
  .nav-tree__children .nav-item { padding-left: var(--sp-3); }

  .sidebar__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border-subtle);
    padding: var(--sp-3);
  }

  .user-chip {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2);
    border-radius: var(--r-md);
    min-width: 0;
  }
  .user-chip:hover { background: var(--surface-3); text-decoration: none; }
  .user-chip__meta { min-width: 0; flex: 1; }
  .user-chip__name {
    display: block;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .user-chip__role {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* -- Schmale Leiste (eingeklappt) --------------------------------------- */
  body[data-sidebar="rail"] .sidebar { width: var(--sidebar-rail-w); }
  body[data-sidebar="rail"] .main { margin-left: var(--sidebar-rail-w); }
  body[data-sidebar="rail"] .sidebar__title,
  body[data-sidebar="rail"] .nav-item__label,
  body[data-sidebar="rail"] .nav-item__badge,
  body[data-sidebar="rail"] .nav-group__label,
  body[data-sidebar="rail"] .nav-tree__chevron,
  body[data-sidebar="rail"] .user-chip__meta,
  body[data-sidebar="rail"] .sidebar__actions-label { display: none; }
  body[data-sidebar="rail"] .nav-tree__children {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  body[data-sidebar="rail"] .nav-item,
  body[data-sidebar="rail"] .nav-tree > summary { justify-content: center; padding: 9px; }

  /* -- Hauptbereich ------------------------------------------------------- */
  .main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    transition: margin-left var(--dur) var(--ease);
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: var(--topbar-h);
    padding: 0 var(--sp-5);
    background: color-mix(in srgb, var(--canvas) 82%, transparent);
    backdrop-filter: blur(12px) saturate(1.4);
    border-bottom: 1px solid var(--border);
  }

  .topbar__heading { min-width: 0; flex: 1; }
  .topbar__title {
    font-size: var(--fs-lg);
    font-weight: 640;
    letter-spacing: -0.012em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar__sub {
    font-size: var(--fs-xs);
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar__right {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
  }

  .content {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    padding: var(--sp-6) var(--sp-5) var(--sp-12);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }

  .page-footer {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-faint);
    font-size: var(--fs-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: space-between;
  }

  /* -- Raster ------------------------------------------------------------- */
  .grid { display: grid; gap: var(--sp-4); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .grid--tiles { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
  .grid--split { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
  }
  .row--between { justify-content: space-between; }
  .row--end { justify-content: flex-end; }
  .row--tight { gap: var(--sp-2); }
  .stack { display: flex; flex-direction: column; gap: var(--sp-4); }
  .stack--tight { gap: var(--sp-2); }

  /* -- Mobil -------------------------------------------------------------- */
  .sidebar__scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--surface-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }

  @media (max-width: 1000px) {
    .sidebar {
      transform: translateX(-100%);
      box-shadow: var(--shadow-lg);
    }
    body[data-sidebar="open"] .sidebar { transform: none; }
    body[data-sidebar="open"] .sidebar__scrim { opacity: 1; pointer-events: auto; }
    .main, body[data-sidebar="rail"] .main { margin-left: 0; }
    body[data-sidebar="rail"] .sidebar { width: var(--sidebar-w); }
    body[data-sidebar="rail"] .sidebar__title,
    body[data-sidebar="rail"] .nav-item__label,
    body[data-sidebar="rail"] .nav-group__label,
    body[data-sidebar="rail"] .nav-tree__chevron,
    body[data-sidebar="rail"] .user-chip__meta { display: revert; }
    .content { padding: var(--sp-4) var(--sp-4) var(--sp-10); }
    .topbar { padding: 0 var(--sp-4); }
    .grid--split { grid-template-columns: 1fr; }
  }
}