/* ==========================================================================
   manthey-ui.css — Manthey IT product design system
   Cupertino + Terrakotta, Farbsystem v6 · Auswahl-Muster E · Pastel-Chips
   --------------------------------------------------------------------------
   Palette values are taken VERBATIM from mantheyv3.html (30.07.2026). They
   have not been altered. Five contrast failures are documented in
   CONTRAST.md with ready-to-paste corrections; nothing here is corrected
   silently.

   Layer order is declared once, here, and is the whole override contract:
   an app stylesheet loaded later wins without a single !important, provided
   it writes into manthey.app.

   The six core rules from the design (see SKILL.md for the full text):
     1. Terrakotta #DE7356 is ONLY action + punctual accent. Never a surface.
        Never a status label.
     2. Selection = raised background + exactly ONE terracotta point.
     3. Status labels = pastel background + muted coloured text, same family.
     4. Pill buttons (999px), soft cards (14px), shadow instead of border
        on elevated elements.
     5. KPI numbers 34px/weight 500 — editorial, not bold.
     6. Light and dark solve the same problems with the same patterns and
        different values.
   ========================================================================== */

@layer manthey.reset, manthey.tokens, manthey.base, manthey.components,
       manthey.utilities, manthey.app;

/* ==========================================================================
   FONT
   Body text is the OS system face — that is what "Full Cupertino" means, and
   it is why no body font ships here. Consequence to design around: SF Pro
   (macOS) and Segoe UI Variable (Windows 11) have different metrics, and
   Windows 10 falls back again to Segoe UI. Never hard-code a text width.

   The wordmark is the ONE exception. Space Grotesk is not installed on
   customer machines, so it must be self-hosted or LISTEN silently renders in
   SF Pro. Subset to A-Z + digits + hyphen = 4 764 bytes.
   ========================================================================== */

@font-face {
  font-family: "Manthey Wordmark";
  src: url("./fonts/space-grotesk-wordmark.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  /* block, not swap: a wordmark that reflows after paint looks broken, and
     4.7 KB arrives well inside the 3 s block period. */
  font-display: block;
  unicode-range: U+0020, U+002D, U+0030-0039, U+0041-005A;
}

/* ==========================================================================
   TOKENS
   Tier 1 (--w-*) is the raw v6 palette and is theme-specific.
   Tier 2 (semantic) is what components consume. Apps override tier 2 only.
   ========================================================================== */

@layer manthey.tokens {

  :root {
    /* ---- Tier 1 · v6 light — neutral greys (r=g=b) + terracotta -------- */
    --w-canvas:        #ececec;
    --w-panel:         #f3f3f3;
    --w-card:          #fafafa;
    --w-raised:        #ffffff;
    --w-hover:         #e5e5e5;
    --w-ink:           #141414;
    --w-ink2:          #555555;
    --w-muted:         #858585;
    --w-line:          #d8d8d8;
    --w-line2:         #c4c4c4;
    --w-action:        #DE7356;
    --w-action-hover:  #c96248;
    --w-on-action:     #ffffff;
    --w-accent:        #B24E2E;
    --w-accent-subtle: #fbe8e0;
    --w-accent-line:   #f0c9b6;
    --w-ok:            #1a7048;
    --w-ok-subtle:     #dcefe2;
    --w-warn:          #8f5407;
    --w-warn-subtle:   #f6e6c8;
    --w-danger:        #ad2f2f;
    --w-live:          #DE7356;
    --w-focus:         #DE7356;

    --w-shadow:
      0 1px 2px rgba(20, 23, 25, .04),
      0 12px 32px -10px rgba(20, 23, 25, .12);
    --w-shadow-card:
      0 1px 2px rgba(20, 23, 25, .04),
      0 6px 24px -6px rgba(20, 23, 25, .08);
    --w-shadow-kpi:
      0 1px 2px rgba(20, 23, 25, .04),
      0 4px 20px -4px rgba(20, 23, 25, .06);

    /* ---- Tier 2 · semantic -------------------------------------------- */
    --surface-canvas: var(--w-canvas);
    --surface-panel:  var(--w-panel);
    --surface-card:   var(--w-card);
    --surface-raised: var(--w-raised);   /* rule 2: the selection surface  */
    --surface-hover:  var(--w-hover);

    --text:        var(--w-ink);
    --text-2:      var(--w-ink2);
    --text-muted:  var(--w-muted);

    --border:         var(--w-line);   /* dividers, card hairlines         */
    --border-control: var(--w-line2);  /* buttons, inputs, chips           */

    --action:       var(--w-action);
    --action-hover: var(--w-action-hover);
    --on-action:    var(--w-on-action);

    --accent:        var(--w-accent);
    --accent-subtle: var(--w-accent-subtle);
    --accent-line:   var(--w-accent-line);

    --ok:          var(--w-ok);
    --ok-subtle:   var(--w-ok-subtle);
    --warn:        var(--w-warn);
    --warn-subtle: var(--w-warn-subtle);
    --danger:      var(--w-danger);
    --live:        var(--w-live);
    --focus:       var(--w-focus);

    /* ---- Shape · rule 4 ---------------------------------------------- */
    --radius-sm:   10px;
    --radius:      14px;
    --radius-lg:   20px;
    --radius-pill: 999px;

    --shadow:      var(--w-shadow);
    --shadow-card: var(--w-shadow-card);
    --shadow-kpi:  var(--w-shadow-kpi);

    /* ---- Space · üppiges spacing -------------------------------------- */
    --sp-1: 4px;  --sp-2: 6px;  --sp-3: 9px;  --sp-4: 12px;
    --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 28px; --sp-10: 44px;

    /* ---- Type · rule 5 ----------------------------------------------- */
    --font: -apple-system, "Segoe UI Variable Text", "Segoe UI", system-ui,
            sans-serif;
    --font-mono: ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo,
                 Consolas, monospace;
    --font-wordmark: "Manthey Wordmark", -apple-system, system-ui, sans-serif;

    --fs-kpi:      34px;  --fw-kpi:   500;  /* editorial, deliberately not bold */
    --fs-h1:       30px;
    --fs-headline: 24px;
    --fs-h3:       17px;
    --fs-body:     13px;
    --fs-dense:  12.5px;
    --fs-sm:     11.5px;
    --fs-micro:    10px;
    --fs-mono:     12px;

    --lh-tight: 1.2;
    --lh-body:  1.45;
    --lh-read:  1.55;
    /* Hard floor. Ä/Ö/Ü ascenders collide below 1.35. */
    --lh-min:   1.35;

    --ls-kpi:   -.025em;
    --ls-h1:    -.02em;
    --ls-tight: -.012em;
    --ls-label:  .07em;   /* uppercase micro-labels only                  */

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;

    /* ---- Motion ------------------------------------------------------ */
    --dur: 150ms;
    --ease: ease;

    /* ---- Z-index. Named, so nobody writes 9999. --------------------- */
    --z-base: 0; --z-sticky: 10; --z-dropdown: 100; --z-overlay: 200;
    --z-dialog: 300; --z-toast: 400; --z-tooltip: 500;

    /* WCAG 2.2 (2.5.8) requires 24px. Pills need vertical room anyway. */
    --hit-min: 32px;

    color-scheme: light;
  }

  /* ---- v6 dark — neutral dark greys, lighter terracotta accent -------- */
  :root[data-theme="dark"] {
    --w-canvas:        #1e1e1e;
    --w-panel:         #252525;
    --w-card:          #2c2c2c;
    --w-raised:        #343434;
    --w-hover:         #323232;
    --w-ink:           #ececec;
    --w-ink2:          #b0b0b0;
    --w-muted:         #8a8a8a;
    --w-line:          #3a3a3a;
    --w-line2:         #484848;
    --w-action:        #DE7356;
    --w-action-hover:  #e58b73;
    --w-on-action:     #1a0a06;
    --w-accent:        #e88a72;   /* lighter than light theme, by design   */
    --w-accent-subtle: #3d2b25;
    --w-accent-line:   #6b3d2f;
    --w-ok:            #7ac093;
    --w-ok-subtle:     #233529;
    --w-warn:          #e8b768;
    --w-warn-subtle:   #3a2f18;
    --w-danger:        #e08080;
    --w-live:          #DE7356;
    --w-focus:         #DE7356;

    /* Deeper on dark, per the design note. */
    --w-shadow:
      0 1px 2px rgba(0, 0, 0, .5),
      0 12px 32px -10px rgba(0, 0, 0, .55);
    --w-shadow-card:
      0 1px 2px rgba(0, 0, 0, .5),
      0 6px 24px -6px rgba(0, 0, 0, .5);
    --w-shadow-kpi:
      0 1px 2px rgba(0, 0, 0, .45),
      0 4px 20px -4px rgba(0, 0, 0, .45);

    color-scheme: dark;
  }

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

/* ==========================================================================
   RESET
   ========================================================================== */

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

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

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

  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

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

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

  button { background: none; border: 0; padding: 0; cursor: pointer; }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  :focus:not(:focus-visible) { outline: none; }

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

/* ==========================================================================
   BASE
   ========================================================================== */

@layer manthey.base {
  body {
    background: var(--surface-canvas);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    /* slashed-zero as well as tabular: a running timer must not jitter, and
       0/O must be distinguishable in a transcript or an invoice number. */
    font-variant-numeric: tabular-nums slashed-zero;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-weight: var(--fw-semi);
    /* German compounds break badly on tight measures. */
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-h1); }
  h2 { font-size: 22px; line-height: 1.3; letter-spacing: var(--ls-tight); }
  h3 { font-size: var(--fs-h3); line-height: var(--lh-min); letter-spacing: -.005em; }
  h4 { font-size: var(--fs-body); line-height: var(--lh-min); color: var(--text-2); }

  p { text-wrap: pretty; }

  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
  a:hover { text-decoration-thickness: 2px; }

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

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

  * { scrollbar-color: var(--border-control) transparent; scrollbar-width: thin; }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

@layer manthey.components {

  /* ---- Brand lockup · rule 0 --------------------------------------------
     One word, ALL CAPS, Space Grotesk Bold. The Manthey logo sits directly
     beneath it at EXACTLY the wordmark's width — that is what makes it a
     lockup rather than two stacked things. width:min-content on the wrapper
     plus width:100% on the logo is what enforces it; do not set a logo
     width or height in px, or the alignment breaks per app name.
     No icon. No product-family prefix. ------------------------------------ */
  .m-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    width: min-content;
  }
  .m-brand__word {
    font-family: var(--font-wordmark);
    font-weight: var(--fw-bold);
    font-size: 32px;
    letter-spacing: -.025em;
    line-height: .95;
    color: var(--text);
    white-space: nowrap;
    /* The name is already uppercase in the markup; this guards against a
       lowercase string slipping in from config. */
    text-transform: uppercase;
  }
  .m-brand__logo {
    display: block;
    color: var(--text-2);
    opacity: .85;
    margin-top: 9px;
    line-height: 0;
  }
  .m-brand__logo svg { width: 100%; height: auto; display: block; }

  /* ---- Button · rule 4: pills ----------------------------------------- */
  .m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--hit-min);
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--fs-dense);
    font-weight: var(--fw-semi);
    line-height: var(--lh-tight);
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  .m-btn:disabled, .m-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }

  .m-btn--primary { background: var(--action); color: var(--on-action); }
  .m-btn--primary:hover:not(:disabled) { background: var(--action-hover); }

  .m-btn--ghost {
    background: var(--surface-card);
    border-color: var(--border-control);
    color: var(--text-2);
  }
  .m-btn--ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }

  /* Destructive stays outlined, never a red slab — rule 1 forbids colour
     as a surface, and a filled red button invites misclicks. */
  .m-btn--danger {
    background: transparent;
    border-color: var(--border-control);
    color: var(--danger);
  }
  .m-btn--danger:hover:not(:disabled) { border-color: var(--danger); }

  .m-btn--sm { padding: 8px 15px; font-size: var(--fs-sm); min-height: 28px; }
  .m-btn--xs { padding: 6px 12px; font-size: 11px; min-height: 24px; }

  /* ---- KPI · rule 5 --------------------------------------------------- */
  .m-kpi {
    background: var(--surface-card);
    border: 0;
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    box-shadow: var(--shadow-kpi);
  }
  .m-kpi__label {
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: var(--fw-semi);
  }
  .m-kpi__value {
    font-size: var(--fs-kpi);
    font-weight: var(--fw-kpi);       /* 500, not bold — this is the rule  */
    letter-spacing: var(--ls-kpi);
    line-height: 1.05;
    color: var(--text);
    margin-top: 3px;
    font-variant-numeric: tabular-nums slashed-zero;
  }
  .m-kpi__foot { font-size: 10.5px; color: var(--text-muted); }

  /* ---- Card · rule 4: shadow, not border ----------------------------- */
  .m-card {
    background: var(--surface-card);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .m-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 17px;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-dense);
    color: var(--text);
  }
  .m-card__body { padding: 16px 17px; }

  .m-float { box-shadow: var(--shadow); }

  /* ---- Banner · rule 2: raised bg + ONE terracotta icon -------------- */
  .m-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--surface-raised);
    border: 0;
    /* inset ring instead of a border so the radius stays crisp */
    box-shadow: inset 0 0 0 1px var(--border);
    color: var(--text-2);
    font-size: var(--fs-sm);
  }
  .m-banner > svg, .m-banner .m-icon { color: var(--accent); flex: none; }

  /* ---- Status chips · rule 3: pastel bg + muted coloured text --------
     Never a bare coloured text label. Never a saturated fill. ---------- */
  .m-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius-pill);
    padding: 3px 9px;
    font-size: 10.5px;
    font-weight: var(--fw-semi);
    background: var(--surface-hover);
    color: var(--text-2);
    border: 1px solid var(--border);
  }
  .m-chip--ok   { color: var(--ok);   background: var(--ok-subtle);   border-color: transparent; }
  .m-chip--warn { color: var(--warn); background: var(--warn-subtle); border-color: transparent; }
  /* "live" is a state, not a status colour: raised surface + one dot. */
  .m-chip--live { color: var(--text-2); background: var(--surface-raised); border-color: var(--border); }

  .m-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    display: inline-block;
    flex: none;
  }
  .m-dot--ok   { background: var(--ok); }
  .m-dot--live { background: var(--live); }

  /* ---- Nav · rule 2 -------------------------------------------------- */
  .m-nav { display: flex; flex-direction: column; gap: 1px; }
  .m-nav__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 12px;
    font-weight: var(--fw-medium);
    text-decoration: none;
    min-height: 28px;
  }
  .m-nav__item:hover { background: var(--surface-hover); }
  /* Selected: raised background + the icon in accent. Exactly one point. */
  .m-nav__item[aria-current="page"] {
    background: var(--surface-raised);
    color: var(--text);
    font-weight: var(--fw-semi);
  }
  .m-nav__item[aria-current="page"] .m-icon { color: var(--accent); }
  .m-nav__count {
    margin-left: auto;
    font-size: var(--fs-micro);
    color: var(--text-muted);
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
  }

  /* ---- Search pill --------------------------------------------------- */
  .m-search {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    min-height: var(--hit-min);
  }
  .m-search input {
    border: 0; background: none; outline: none; flex: 1 1 auto; min-width: 0;
    color: var(--text);
  }

  /* ---- Field --------------------------------------------------------- */
  .m-field { display: grid; gap: var(--sp-1); }
  .m-label { font-size: var(--fs-dense); font-weight: var(--fw-medium); color: var(--text-2); }
  .m-input, .m-select, .m-textarea {
    min-height: var(--hit-min);
    padding: 8px 13px;
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    line-height: var(--lh-min);
  }
  .m-textarea { min-height: 88px; resize: vertical; line-height: var(--lh-read); }
  .m-input::placeholder, .m-textarea::placeholder { color: var(--text-muted); }
  .m-input:disabled, .m-select:disabled, .m-textarea:disabled {
    background: var(--surface-hover); color: var(--text-muted); cursor: not-allowed;
  }
  /* Colour is never the only signal — always pair with .m-field-error. */
  .m-input[aria-invalid="true"], .m-textarea[aria-invalid="true"] { border-color: var(--danger); }
  .m-field-error {
    display: flex; align-items: flex-start; gap: var(--sp-1);
    font-size: var(--fs-sm); color: var(--danger); line-height: var(--lh-min);
  }

  /* ---- Table --------------------------------------------------------- */
  .m-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    /* fixed + explicit cols is what lets long German titles ellipsis
       instead of shoving the numeric columns around */
    table-layout: fixed;
  }
  .m-table th {
    text-align: left;
    font-size: 9.5px;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: var(--fw-semi);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
  }
  .m-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-table tr:last-child td { border-bottom: 0; }
  .m-table td:first-child { color: var(--text); font-weight: var(--fw-medium); }
  .m-table .m-num { text-align: right; font-variant-numeric: tabular-nums slashed-zero; }

  /* ---- Meter --------------------------------------------------------- */
  .m-meter { display: flex; flex-direction: column; gap: 5px; }
  .m-meter__label {
    display: flex; justify-content: space-between;
    font-size: var(--fs-micro); color: var(--text-muted); font-weight: var(--fw-medium);
  }
  .m-meter__label b { color: var(--text-2); font-weight: var(--fw-semi); }
  .m-meter__track {
    height: 4px; border-radius: 99px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    overflow: hidden;
  }
  .m-meter__bar { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

  /* ---- Dialog -------------------------------------------------------- */
  .m-dialog {
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text);
    padding: var(--sp-7);
    max-width: 32rem;
    box-shadow: var(--shadow);
  }
  .m-dialog::backdrop { background: rgba(20, 23, 25, .42); }

  /* ---- Icon ---------------------------------------------------------- */
  /* NOTE: external <use href="icons.svg#i-x"> is blocked over file:// in
     Chromium and fails SILENTLY — no console error, just invisible icons.
     Serve over http, or inline the sprite into the document body. */
  .m-icon {
    width: 16px; height: 16px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .m-icon--sm { width: 14px; height: 14px; stroke-width: 2; }
  .m-icon--xs { width: 11px; height: 11px; stroke-width: 2.25; }
  .m-icon--lg { width: 20px; height: 20px; stroke-width: 1.5; }

  /* ---- Skeleton ------------------------------------------------------ */
  .m-skeleton {
    background: linear-gradient(90deg,
      var(--surface-hover) 25%, var(--surface-raised) 37%, var(--surface-hover) 63%);
    background-size: 400% 100%;
    border-radius: var(--radius-sm);
    animation: m-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes m-shimmer { to { background-position: -135% 0; } }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

@layer manthey.utilities {
  .u-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .u-num { font-variant-numeric: tabular-nums slashed-zero; }
  .u-muted { color: var(--text-muted); }
  .u-2 { color: var(--text-2); }
  .u-read { font-size: 15px; line-height: var(--lh-read); }

  .u-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .u-col { display: flex; flex-direction: column; gap: var(--sp-3); }
  .u-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
  .u-grow { flex: 1 1 auto; min-width: 0; }
  .u-push { margin-left: auto; }

  /* Truncation is opt-in. German runs ~40% longer than English, so the
     default must be to wrap. */
  .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .u-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}