/*
 * AHS Toolchain — Gemeinsame Kopfzeile ("Hülle")
 * Seit 09.09.2026. Gestaltung von Marius aus drei Entwürfen gewählt:
 * Dashboard-Ton, hell als Standard, Markenrot, Systemschrift, Toolname als Überschrift,
 * Toolkette hinter einem Menü. Entwürfe und Plan: siehe MIGRATION.md, Abschnitt "Gemeinsame Kopfzeile".
 *
 * Einbinden NACH ahs-common.css:
 *   <link href="/_shared/ahs-common.css" rel="stylesheet">
 *   <link href="/_shared/ahs-shell.css"  rel="stylesheet">
 *   <script src="/_shared/ahs-theme.js"></script>          <!-- im <head>, vor dem <body> -->
 *   ...
 *   <script src="/_shared/ahs-shell.js" defer></script>    <!-- Tools-Menü, Theme-Knopf -->
 *
 * Alle Regeln hier greifen NUR, wenn ahs-theme.js das Attribut data-ahs-shell auf <html> setzt.
 * Tools, die diese Datei nicht laden oder das Attribut nicht tragen, sehen keinen Unterschied —
 * ahs-common.css bleibt unverändert und speist weiterhin elf Tools.
 *
 * Was diese Datei tut:
 *   1. Die --ahs-* Farbwerte auf die warme helle Palette umlegen (und die Dashboard-Dunkelpalette),
 *      damit ALLE bestehenden --ahs-* Nutzungen im Tool automatisch mitziehen (Adapter statt Umbenennen).
 *   2. Neue Tokens ergänzen, die ahs-common.css nicht kennt (--ahs-accent, --ahs-text-2, --ahs-wash …).
 *   3. Die Bausteine der Hülle: Streifen, Kopf, Pillen, Navigation, Unterzeile, Tools-Menü.
 *   4. Auf die Einstellungen aus design.json reagieren (data-ahs-akzent, -schrift, -emoji, -titel, -toolkette).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · PALETTE — hell (Standard) und dunkel
   Spezifität: :root[data-ahs-shell] (0,2,0) schlägt :root aus ahs-common.css (0,1,0).
   Die Dunkel-Blöcke haben (0,3,0) und stehen dahinter, damit sie gewinnen.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-ahs-shell] {
  color-scheme: light;
  --ahs-bg:             #F2F1EC;
  --ahs-surface:        #FFFFFF;
  --ahs-card:           #FFFFFF;
  --ahs-border:         #dbd9cf;
  --ahs-border-2:       #e8e6de;
  --ahs-selected-bg:    rgba(204,0,0,.09);
  --ahs-text:           #17171a;
  --ahs-text-muted:     #807e77;
  --ahs-text-muted-2:   #a8a69e;
  --ahs-red:            #CC0000;
  --ahs-red-dark:       #A30000;
  --ahs-green:          #1E7B34;
  --ahs-green-dark:     #166028;
  --ahs-orange:         #a1580b;
  --ahs-blue:           #2a78d6;
  --ahs-purple:         #7a4fb0;
  --ahs-radius:         8px;
  --ahs-radius-sm:      6px;
  --ahs-radius-lg:      12px;
  --ahs-shadow:         0 1px 2px rgba(28,24,12,.05), 0 2px 4px rgba(28,24,12,.04);
  --ahs-shadow-lg:      0 4px 16px rgba(28,24,12,.10);

  /* neu, nur von der Hülle und von Tools im neuen Kleid genutzt */
  --ahs-text-2:         #55544e;
  --ahs-wash:           rgba(23,23,26,.045);
  --ahs-input:          #F2F1EC;
  --ahs-accent:         var(--ahs-red);
  --ahs-accent-2:       var(--ahs-red-dark);
  --ahs-accent-soft:    rgba(204,0,0,.10);
  --ahs-accent-fg:      #ffffff;
  --ahs-ok-bg:          #E6F4EA;
  --ahs-warn-bg:        #FBEFD9;
  --ahs-crit:           #B23A3A;
  --ahs-crit-bg:        #FBE7E7;
  --ahs-punkt-ok:       #0ca30c;
  --ahs-punkt-warn:     #fab219;
  --ahs-punkt-crit:     #d03b3b;
  --ahs-kopf-hoehe:     30px;
}

@media (prefers-color-scheme: dark) {
  :root[data-ahs-shell]:not([data-theme="light"]) {
    color-scheme: dark;
    --ahs-bg:             #0d0d0d;
    --ahs-surface:        #1a1a19;
    --ahs-card:           #1a1a19;
    --ahs-border:         #33322f;
    --ahs-border-2:       #2c2c2a;
    --ahs-selected-bg:    rgba(230,48,48,.16);
    --ahs-text:           #ffffff;
    --ahs-text-muted:     #8f8d84;
    --ahs-text-muted-2:   #5e5d57;
    --ahs-red:            #e63030;
    --ahs-red-dark:       #CC0000;
    --ahs-green:          #4dbb7d;
    --ahs-green-dark:     #2f9a5e;
    --ahs-orange:         #f0a500;
    --ahs-blue:           #3987e5;
    --ahs-purple:         #a683d6;
    --ahs-shadow:         0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
    --ahs-shadow-lg:      0 8px 28px rgba(0,0,0,.55);
    --ahs-text-2:         #c3c2b7;
    --ahs-wash:           rgba(255,255,255,.05);
    --ahs-input:          #0d0d0d;
    --ahs-accent-soft:    rgba(230,48,48,.18);
    --ahs-ok-bg:          #0d2b1a;
    --ahs-warn-bg:        #2a1800;
    --ahs-crit:           #ef5f5f;
    --ahs-crit-bg:        #2b0d0d;
  }
}
:root[data-ahs-shell][data-theme="dark"] {
  color-scheme: dark;
  --ahs-bg:             #0d0d0d;
  --ahs-surface:        #1a1a19;
  --ahs-card:           #1a1a19;
  --ahs-border:         #33322f;
  --ahs-border-2:       #2c2c2a;
  --ahs-selected-bg:    rgba(230,48,48,.16);
  --ahs-text:           #ffffff;
  --ahs-text-muted:     #8f8d84;
  --ahs-text-muted-2:   #5e5d57;
  --ahs-red:            #e63030;
  --ahs-red-dark:       #CC0000;
  --ahs-green:          #4dbb7d;
  --ahs-green-dark:     #2f9a5e;
  --ahs-orange:         #f0a500;
  --ahs-blue:           #3987e5;
  --ahs-purple:         #a683d6;
  --ahs-shadow:         0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
  --ahs-shadow-lg:      0 8px 28px rgba(0,0,0,.55);
  --ahs-text-2:         #c3c2b7;
  --ahs-wash:           rgba(255,255,255,.05);
  --ahs-input:          #0d0d0d;
  --ahs-accent-soft:    rgba(230,48,48,.18);
  --ahs-ok-bg:          #0d2b1a;
  --ahs-warn-bg:        #2a1800;
  --ahs-crit:           #ef5f5f;
  --ahs-crit-bg:        #2b0d0d;
}

/* ── Einstellungen aus design.json (gesetzt von ahs-theme.js) ─────────────── */
:root[data-ahs-shell][data-ahs-akzent="blau"] {
  --ahs-accent:      var(--ahs-blue);
  --ahs-accent-2:    #1f5fae;
  --ahs-accent-soft: rgba(42,120,214,.13);
  --ahs-selected-bg: rgba(42,120,214,.13);
}
:root[data-ahs-shell][data-ahs-schrift="system"] {
  --ahs-font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ahs-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-ahs-shell][data-ahs-schrift="barlow"] {
  --ahs-font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --ahs-font-body:    'Barlow', system-ui, sans-serif;
}
:root[data-ahs-shell][data-ahs-emoji="aus"] .ahs-shell .em { display: none; }
:root[data-ahs-shell] .ahs-shell .em { font-style: normal; margin-right: 5px; }
:root[data-ahs-shell][data-ahs-titel="tool"]    .ahs-shell-var-bereich { display: none; }
:root[data-ahs-shell][data-ahs-titel="bereich"] .ahs-shell-var-tool    { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   2 · GRUNDRAHMEN
   Der Seitengrund kommt vom Tool (body { background: var(--ahs-bg) }). Die Hülle selbst
   ist ein Block mit Innenabstand; sie erzwingt keine maximale Breite, das entscheidet
   das Tool über .ahs-shell--schmal (1080 px wie das Dashboard) oder eigene Regeln.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-ahs-shell] body { background: var(--ahs-bg); color: var(--ahs-text); font-family: var(--ahs-font-body); }
.ahs-shell { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 0; }
.ahs-shell--schmal { max-width: 1080px; margin: 0 auto; }
@media (max-width: 760px) { .ahs-shell { padding: 14px 14px 0; } }

/* ── Logo-Streifen ─────────────────────────────────────────────────────── */
.ahs-shell-streifen { width: 100%; height: var(--ahs-kopf-hoehe); overflow: hidden; position: relative; }
.ahs-shell-streifen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }

/* ── Kopfzeile: links Text, rechts Pillen ──────────────────────────────── */
.ahs-shell-kopf { display: flex; align-items: flex-start; gap: 16px; flex-wrap: nowrap; }
.ahs-shell-links { flex: 1 1 0; min-width: 190px; }
.ahs-shell-ober  { font-size: 11.5px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; color: var(--ahs-text-muted); margin: 0 0 6px; white-space: nowrap; }
.ahs-shell-titel { font-family: var(--ahs-font-display); font-size: 28px; line-height: 1.2; margin: 0 0 6px; font-weight: 700; letter-spacing: -.015em; color: var(--ahs-text); }
:root[data-ahs-schrift="barlow"] .ahs-shell-titel { font-size: 32px; letter-spacing: 0; }
.ahs-shell-unter { margin: 0; color: var(--ahs-text-2); font-size: 13.5px; }
/* Rechte Seite nie schmaler als ihr Inhalt — sonst quetscht der Container die Pillen
   unter ihre Textbreite und Zeitstempel und Symbole überlagern sich (Werkstatt-Fund 09.09.2026). */
.ahs-shell-rechts { margin-left: auto; flex: 0 0 auto; width: max-content; max-width: 100%; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .ahs-shell-kopf { flex-wrap: wrap; }
  .ahs-shell-rechts { margin-left: 0; flex-basis: 100%; width: auto; justify-content: flex-start; }
}

/* ── Pillen (Benutzer, Sprache, Stand, Symbolknöpfe, Umgebung) ─────────── */
.ahs-shell-pille {
  font: inherit; font-size: 12px; border: 1px solid var(--ahs-border); border-radius: 999px;
  padding: 5px 11px; background: var(--ahs-surface); color: var(--ahs-text-2);
  white-space: nowrap; flex: none; cursor: default; text-decoration: none; line-height: 1.4;
}
button.ahs-shell-pille, a.ahs-shell-pille { cursor: pointer; }
button.ahs-shell-pille:hover, a.ahs-shell-pille:hover { background: var(--ahs-wash); }
.ahs-shell-pille.ist-stand { color: var(--ahs-text-muted); font-variant-numeric: tabular-nums; }
.ahs-shell-pille.ist-ic { padding: 5px 9px; font-size: 14px; line-height: 1; }
.ahs-shell-pille.ist-env { border-color: var(--ahs-punkt-warn); color: var(--ahs-orange); font-weight: 600; }
.ahs-shell-pille:focus-visible { outline: 2px solid var(--ahs-accent); outline-offset: 2px; }

/* ── Bereichsnavigation: Segment mit gefüllter aktiver Pille ───────────── */
.ahs-shell-nav {
  display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--ahs-border);
  border-radius: 999px; background: var(--ahs-surface); max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
}
.ahs-shell-nav::-webkit-scrollbar { display: none; }
.ahs-shell-nav > a, .ahs-shell-nav > button {
  font: inherit; font-size: 12.5px; font-weight: 500; padding: 4px 12px; border-radius: 999px; border: 0;
  background: transparent; color: var(--ahs-text-2); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s;
}
.ahs-shell-nav > a:hover, .ahs-shell-nav > button:hover { background: var(--ahs-wash); color: var(--ahs-text); }
.ahs-shell-nav > .aktiv, .ahs-shell-nav > .active { background: var(--ahs-accent); color: var(--ahs-accent-fg); font-weight: 600; }
.ahs-shell-nav > a:focus-visible, .ahs-shell-nav > button:focus-visible { outline: 2px solid var(--ahs-accent); outline-offset: 2px; }
/* Bei vielen Bereichen (ab etwa sechs) als eigene Zeile unter dem Kopf: */
.ahs-shell-nav-zeile { margin-top: 6px; }
.ahs-shell-nav-zeile .ahs-shell-nav { display: flex; }
.ahs-shell-nav .fuellung { flex: 1; min-width: 8px; }

/* ── Zweite Ebene: schlichte Unterzeile mit Unterstrich ────────────────── */
.ahs-shell-nav-2 { display: flex; gap: 16px; align-items: center; margin: 2px 2px 0; font-size: 12.5px; flex-wrap: wrap; }
.ahs-shell-nav-2 > a, .ahs-shell-nav-2 > button { font: inherit; font-size: 12.5px; color: var(--ahs-text-muted); text-decoration: none; padding: 0 0 2px; border: 0; background: none; cursor: pointer; }
.ahs-shell-nav-2 > a:hover, .ahs-shell-nav-2 > button:hover { color: var(--ahs-text-2); }
.ahs-shell-nav-2 > .aktiv, .ahs-shell-nav-2 > .active { color: var(--ahs-accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ahs-accent); }
.ahs-shell-nav-2 .hinweis { margin-left: auto; color: var(--ahs-text-muted); }

/* ── Tools-Menü (Toolkette "im Menü", Standard) ─────────────────────────── */
.ahs-shell-tools { position: relative; flex: none; }
.ahs-shell-tools > summary {
  list-style: none; font-size: 12px; font-weight: 600; border: 1px dashed var(--ahs-border); border-radius: 999px;
  padding: 5px 11px; background: var(--ahs-surface); color: var(--ahs-text-2); cursor: pointer; white-space: nowrap; user-select: none;
}
.ahs-shell-tools > summary::-webkit-details-marker { display: none; }
.ahs-shell-tools > summary:hover { background: var(--ahs-wash); }
.ahs-shell-tools[open] > summary { border-style: solid; border-color: var(--ahs-accent); color: var(--ahs-accent); }
.ahs-shell-tools-menue {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 300px; max-width: min(92vw, 560px);
  background: var(--ahs-card); border: 1px solid var(--ahs-border); border-radius: var(--ahs-radius-lg);
  box-shadow: var(--ahs-shadow-lg); padding: 10px 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 10px;
  /* Nie länger als bis zum unteren Bildrand (Höhe setzt ahs-shell.js beim Öffnen), sonst sind
     die unteren Tools in einer sticky Kopfzeile nicht erreichbar. */
  box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
}
/* Handy: rechtsbündig am Knopf ragte das Menü links aus dem Bild und war länger als der
   Bildschirm (wscmd-Nachprüfung 23.09.2026). Hier spannt es über die Kopfzeile und scrollt
   selbst. Waagrecht hängt es an der Hülle (:where() hält die Spezifität bei null, damit ein
   Tool, das seine Kopfzeile selbst positioniert, z. B. sticky, gewinnt — auch das ist ein
   Bezugsrahmen), senkrecht bleibt es direkt unter dem Knopf (top: auto). 70vh ist nur der
   Rückfall, falls ahs-shell.js die Höhe nicht setzt. */
@media (max-width: 760px) {
  :where(.ahs-shell) { position: relative; }
  .ahs-shell-tools { position: static; }
  .ahs-shell-tools-menue {
    left: 14px; right: 14px; top: auto; margin-top: 8px; min-width: 0; max-width: none;
    max-height: 70vh; grid-template-columns: 1fr;
  }
}
.ahs-shell-tools-gruppe { padding: 4px 8px 6px; }
.ahs-shell-tools-gruppe > b { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ahs-text-muted); margin: 4px 0 4px; }
.ahs-shell-tools-gruppe > b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gruppe-farbe, var(--ahs-text-muted)); margin-right: 7px; vertical-align: 0; }
.ahs-shell-tools-eintrag {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--ahs-radius-sm);
  color: var(--ahs-text); text-decoration: none; font-size: 13px;
}
.ahs-shell-tools-eintrag:hover { background: var(--ahs-wash); }
.ahs-shell-tools-eintrag.ist-aktuell { color: var(--ahs-accent); font-weight: 600; }
.ahs-shell-tools-eintrag .mark {
  width: 26px; height: 22px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  display: grid; place-items: center; color: #fff; background: var(--tool-farbe, var(--ahs-text-muted)); flex: none;
}
.ahs-shell-tools-eintrag .desc { display: block; font-size: 11.5px; color: var(--ahs-text-muted); }
.ahs-shell-tools-eintrag .badge-extern { margin-left: auto; font-size: 10px; color: var(--ahs-text-muted); border: 1px solid var(--ahs-border); border-radius: 4px; padding: 1px 5px; }

/* ── Toolkette "als Streifen" (Alternative, per Einstellung) ────────────── */
.ahs-shell-tools-streifen {
  margin-top: 6px; padding: 10px 14px; background: var(--ahs-surface); border: 1px solid var(--ahs-border);
  border-radius: var(--ahs-radius-lg); display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.ahs-shell-tools-streifen > b { font-size: 10.5px; font-weight: 700; color: var(--ahs-text-muted); letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.ahs-shell-tools-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--ahs-text-2);
  border: 1px solid var(--ahs-border); border-radius: 999px; padding: 4px 11px; background: var(--ahs-bg);
  text-decoration: none; white-space: nowrap; flex: none;
}
.ahs-shell-tools-chip:hover { background: var(--ahs-wash); color: var(--ahs-text); }
.ahs-shell-tools-chip.ist-aktuell { border-color: var(--ahs-accent); color: var(--ahs-accent); font-weight: 600; }

/* ── Tool-eigene Werkzeugleiste (Basisoptik, Inhalt kommt vom Tool) ─────── */
.ahs-shell-werkzeuge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-top: 8px; }
.ahs-shell-werkzeuge .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ahs-shell-werkzeuge .notiz { color: var(--ahs-text-muted); font-size: 12.5px; }

/* ── Inhalt unter der Hülle ─────────────────────────────────────────────── */
.ahs-shell-inhalt { padding: 16px 22px 40px; }
.ahs-shell--schmal ~ .ahs-shell-inhalt, .ahs-shell-inhalt.ahs-shell--schmal { max-width: 1080px; margin: 0 auto; }
@media (max-width: 760px) { .ahs-shell-inhalt { padding: 14px 14px 32px; } }

/* Karten im Dashboard-Ton, additiv zu .ahs-card */
[data-ahs-shell] .ahs-card { border-radius: var(--ahs-radius-lg); box-shadow: var(--ahs-shadow); border-color: var(--ahs-border); }

/* Knöpfe: ahs-common.css schreibt dem Sekundärknopf ein festes Dunkelgrau (#2a2a2a) zu — im
   hellen Kleid wäre das ein schwarzer Klotz. Nur unter dem Hüllen-Attribut auf Tokens umlegen,
   der Primärknopf folgt dem Akzent (wscmd: blau). */
[data-ahs-shell] .ahs-btn.btn-secondary { background: var(--ahs-surface); color: var(--ahs-text-2); border: 1px solid var(--ahs-border); }
[data-ahs-shell] .ahs-btn.btn-secondary:hover { background: var(--ahs-wash); border-color: var(--ahs-text-muted); }
[data-ahs-shell] .ahs-btn.btn-primary { background: var(--ahs-accent); color: var(--ahs-accent-fg); }
[data-ahs-shell] .ahs-btn.btn-primary:hover { background: var(--ahs-accent-2); }
[data-ahs-shell] .ahs-btn.btn-outline { color: var(--ahs-accent); border-color: var(--ahs-accent); }
[data-ahs-shell] .ahs-btn.btn-outline:hover { background: var(--ahs-accent-soft); }

@media print { .ahs-shell-tools, .ahs-shell-rechts, .ahs-shell-nav-zeile { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ahs-shell * { transition: none !important; } }