@import url("./_font.css");
@import url("./_horizon.css");

/* ─────────────────────────────────────────────
   CMMS-EWK Layout-Overrides
   Ergänzt das aus HORIZON portierte Design-System
   ───────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Frutiger Next for EVN', 'FrutigerNextforEVN', 'Frutiger Next',
               'Frutiger', Frutiger, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

.app-shell { display: flex; min-height: 100vh; flex: 1; min-width: 0; }

.bg-blob { position: fixed; border-radius: 50%; filter: blur(80px);
           pointer-events: none; z-index: 0; opacity: 0.6; }
.bg-blob-1 { top: -120px; right: -120px;   width: 480px; height: 480px;
             background: var(--blob-1); }
.bg-blob-2 { bottom: -160px; left: -80px;  width: 520px; height: 520px;
             background: var(--blob-2); }
.bg-blob-3 { top: 35%; left: 45%;          width: 400px; height: 400px;
             background: var(--blob-3); opacity: .4; }

.main { position: relative; z-index: 1; }

.page-title { font-size: 18px; font-weight: 600; color: var(--text); margin: 0; }
.page-sub   { font-size: 12px; color: var(--muted); }

.content { flex: 1; overflow-y: auto; padding: 4px 0 24px; }

.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.crumbs a:hover { color: var(--evn-red); }
.crumbs .sep { margin: 0 6px; opacity: .5; }

.page-header { display: flex; align-items: center; justify-content: space-between;
               gap: 12px; margin-bottom: 16px; }
.page-header h1 { font-size: 20px; font-weight: 600; margin: 0; }

.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
              padding: 12px 16px; margin-bottom: 12px; }

.table-wrap { overflow-x: auto; }
table.cmms-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.cmms-table thead th {
  text-align: left; padding: 10px 14px;
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 10.5px; color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--border);
}
table.cmms-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border);
                            color: var(--text); }
table.cmms-table tbody tr:hover td { background: var(--glass-row-hover); }
table.cmms-table tbody tr:last-child td { border-bottom: none; }
table.cmms-table .num { text-align: right; font-variant-numeric: tabular-nums; }
table.cmms-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                         font-size: 12px; color: var(--text2); }

.empty-state { padding: 36px 14px; text-align: center; color: var(--muted);
               font-size: 13px; font-style: italic; }

.badge { display: inline-flex; align-items: center; gap: 4px;
         padding: 2px 8px; border-radius: 999px;
         font-size: 11px; font-weight: 600; line-height: 1.4;
         background: var(--surface2); color: var(--text2); }
.badge-red    { background: var(--evn-red-light); color: var(--evn-red-dark); }
.badge-blue   { background: rgba(27,111,168,.12); color: var(--evn-blue); }
.badge-teal   { background: rgba(0,122,122,.12); color: var(--evn-teal); }
.badge-orange { background: rgba(240,120,0,.14); color: var(--evn-orange); }
.badge-green  { background: rgba(46,125,50,.14); color: var(--success); }
.badge-amber  { background: rgba(184,100,0,.14); color: var(--warn); }
.badge-violet { background: rgba(107,94,168,.14); color: var(--status-planned); }
.badge-gray   { background: var(--surface2); color: var(--muted); }

.flash { padding: 10px 14px; border-radius: 10px; font-size: 13px;
         margin-bottom: 12px; border: 1px solid; }
.flash-error { background: var(--evn-red-pale); border-color: rgba(192,57,43,.25);
               color: var(--evn-red-dark); }
.flash-ok    { background: rgba(46,125,50,.08); border-color: rgba(46,125,50,.25);
               color: var(--success); }
.flash-info  { background: rgba(27,111,168,.08); border-color: rgba(27,111,168,.25);
               color: var(--info); }

.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.form-grid label { font-size: 11.5px; color: var(--muted); display: block;
                   margin-bottom: 4px; letter-spacing: .04em; text-transform: uppercase; }
.col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.actions-row { display: flex; gap: 8px; justify-content: flex-end;
               padding-top: 12px; margin-top: 12px;
               border-top: 1px solid var(--border); }

.kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--text); }

.section-h { font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
             text-transform: uppercase; color: var(--muted);
             margin: 18px 0 8px; }

/* Globale Form-Control-Defaults für nicht migrierte Templates.
   Greifen nur, wenn keine HORIZON-Klasse gesetzt ist. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.form-input):not(.btn-input-naked),
select:not(.form-select),
textarea:not(.form-textarea) {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 11px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.form-input):not(.btn-input-naked):focus,
select:not(.form-select):focus,
textarea:not(.form-textarea):focus {
  border-color: var(--evn-red);
  box-shadow: 0 0 0 3px rgba(227, 0, 15, .12);
}

/* Passwortfelder: Standard-Schrift erzwingen, damit das Maskierungszeichen
   als runder Punkt erscheint (die Frutiger-Next-Schrift hat hierfür kein
   passendes Glyph und stellt es als pfeilartiges Ersatzzeichen dar).
   !important nötig, weil die globale Form-Control-Regel oben über den
   langen :not()-Selektor eine deutlich höhere Spezifität hat. */
input[type="password"] {
  font-family: Verdana, Tahoma, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Buttons mit Tailwind bg-brand-* sollen den EVN-Hover-Effekt bekommen */
button.bg-brand-600, button.bg-brand-700, a.bg-brand-600, a.bg-brand-700,
input[type="submit"].bg-brand-600, input[type="submit"].bg-brand-700 {
  font-family: inherit; font-weight: 600;
  transition: all .15s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 2px 6px rgba(227,0,15,0.18);
}
button.bg-brand-600:hover, a.bg-brand-600:hover { transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(227,0,15,0.25); }

/* Hover-Effekt für ghost-artige Buttons mit border-slate-300 */
button.border-slate-300:hover, a.border-slate-300:hover,
.border-slate-300:hover[role="button"] { border-color: var(--evn-red); color: var(--evn-red); }

/* Card-Variation: schmaler, ohne Hover-Lift, für sub-panels */
.card-flat { background: var(--surface); border:1px solid var(--border);
             border-radius: var(--radius); box-shadow: none; }
.card-flat:hover { transform: none; box-shadow: none; }

/* Header-Bar oben in Cards (Dashboard etc.) */
.card > header.bg-slate-50, .card-flat > header.bg-slate-50,
.card > .bg-slate-50:first-child {
  background: var(--surface-elev1) !important;
  border-color: var(--border) !important;
}

/* Status-Pills (zarter, EVN-typisch) */
.text-red-700.bg-red-50    { background: var(--evn-red-pale) !important; color: var(--evn-red-dark) !important; }
.text-amber-800.bg-amber-50{ background: rgba(184,100,0,.12) !important; color: var(--warn) !important; }
.text-blue-700.bg-blue-50  { background: rgba(27,111,168,.12) !important; color: var(--evn-blue) !important; }
.text-emerald-700.bg-emerald-50 { background: rgba(46,125,50,.10) !important; color: var(--success) !important; }

/* BPMN-Stage-Indicator: horizontal Pipeline für Permit-Workflow */
.bpmn-stages {
  display: flex; align-items: stretch; gap: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; font-size: 11px;
}
.bpmn-stage {
  flex: 1; padding: 10px 12px;
  border-right: 1px solid var(--border);
  position: relative; min-width: 90px;
}
.bpmn-stage:last-child { border-right: none; }
.bpmn-stage .num {
  display: inline-block; width: 18px; height: 18px;
  border-radius: 50%; background: var(--surface2);
  color: var(--muted); text-align: center; line-height: 18px;
  font-size: 10px; font-weight: 700; margin-right: 6px;
}
.bpmn-stage .lbl { color: var(--muted); }
.bpmn-stage.done { background: rgba(46,125,50,.06); }
.bpmn-stage.done .num { background: var(--success); color: #fff; }
.bpmn-stage.done .lbl { color: var(--text2); }
.bpmn-stage.active {
  background: var(--evn-red-pale);
}
.bpmn-stage.active .num { background: var(--evn-red); color: #fff; }
.bpmn-stage.active .lbl { color: var(--evn-red-dark); font-weight: 600; }
.bpmn-stage.cancelled {
  background: var(--surface2);
}
.bpmn-stage.cancelled .num { background: var(--muted); color: #fff; }

/* ─── Mobile-Shell (eigene Layout-Schiene unter /m/*) ─── */
.m-shell { min-height: 100vh; display: flex; flex-direction: column; }
.m-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--evn-red); color: #fff;
  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.m-header h1 { font-size: 16px; font-weight: 600; margin: 0; flex: 1; line-height: 1.2; }
.m-back { color: #fff; text-decoration: none; font-size: 20px; line-height: 1;
          width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
          border-radius: 8px; }
.m-back:active { background: rgba(255,255,255,0.15); }

.m-content { flex: 1; padding: 16px; padding-bottom: 80px; overflow-y: auto; }

.m-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--surface); border-top: 1px solid var(--border);
  display: flex; height: 64px; box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  max-width: 520px; margin: 0 auto;   /* an Shell-Breite koppeln (Desktop-Preview) */
}
.m-nav-item { flex: 1; display: flex; flex-direction: column;
              align-items: center; justify-content: center; gap: 2px;
              color: var(--muted); text-decoration: none; font-size: 11px;
              padding: 8px 4px; transition: color .15s; }
.m-nav-item.active { color: var(--evn-red); }
.m-nav-item svg { width: 22px; height: 22px; }

.m-card { background: var(--surface); border: 1px solid var(--border);
          border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.m-card-title { font-size: 11px; font-weight: 600; text-transform: uppercase;
                letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; }
.m-tap-list { background: var(--surface); border: 1px solid var(--border);
              border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.m-tap {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.m-tap:last-child { border-bottom: none; }
.m-tap:active { background: var(--surface-elev1); }
.m-tap .lbl { flex: 1; font-size: 15px; }
.m-tap .meta { font-size: 12px; color: var(--muted); }
.m-tap .chev { color: var(--muted); font-size: 18px; }

.m-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 18px;
  background: var(--evn-red); color: #fff;
  border: none; border-radius: 12px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer; min-height: 48px;
}
.m-btn:active { background: var(--evn-red-dark); transform: scale(0.99); }
.m-btn-ghost {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
}
.m-btn-ghost:active { background: var(--surface-elev1); }
.m-btn-danger { background: var(--danger); }

.m-input, .m-select, .m-textarea {
  width: 100%; font-family: inherit; font-size: 16px;  /* 16px → iOS no-zoom */
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
  outline: none; min-height: 44px;
}
.m-input:focus, .m-select:focus, .m-textarea:focus {
  border-color: var(--evn-red); box-shadow: 0 0 0 3px rgba(227,0,15,.12);
}
.m-label { display: block; font-size: 12px; color: var(--muted);
           margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.m-row { margin-bottom: 14px; }

.m-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
                margin-bottom: 12px; }
.m-quick {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 8px; min-height: 88px;
  color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500;
  text-align: center;
}
.m-quick:active { background: var(--surface-elev1); }
.m-quick svg { width: 28px; height: 28px; color: var(--evn-red); }

.m-status-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }

@media (min-width: 700px) {
  /* Auf größeren Bildschirmen die Mobile-Ansicht zentriert anzeigen */
  .m-shell { max-width: 520px; margin: 0 auto; box-shadow: var(--shadow); }
}

@media (max-width: 900px) {
  .sidebar { position: fixed; left: -260px; top: 0; bottom: 0;
             margin: 0; border-radius: 0; height: 100vh;
             transition: left .25s ease; z-index: 200; }
  .sidebar.open { left: 0; }
  .main { padding: 8px 12px; }
  .col-2,.col-3,.col-4,.col-5,.col-6,.col-8 { grid-column: span 12; }
}

/* ═══════════════════════════════════════════════════════════
   REDESIGN v2 — Globaler Re-Skin (2026-05-15)
   Anthrazitgraue Sidebar, Teal als Aktionsfarbe, ruhige Leinwand,
   solide Flächen statt Glas/Blobs. Die --evn-red*-Tokens bleiben
   UNANGETASTET — Rot bleibt für Status/Fehler reserviert.
   Theme-abhängige Flächen sind auf [data-theme="light"] beschränkt,
   damit der Dark-Mode unverändert bleibt.
   ═══════════════════════════════════════════════════════════ */

:root {
  --accent:      #0D8E86;
  --accent-dark: #0B746E;
  --accent-soft: #DCEFED;
  --anthracite:  #383D44;
}

[data-theme="light"] {
  --bg:            #E9EBEF;
  --border:        #DBDEE3;
  --border2:       #C8CCD3;

  /* Flächen solide statt Glas */
  --glass-bg:          #FFFFFF;
  --glass-bg-strong:   #FFFFFF;
  --glass-bg-soft:     #F3F4F6;
  --glass-input:       #FFFFFF;
  --glass-input-focus: #FFFFFF;
  --glass-row-hover:   #F3F4F6;
  --glass-border:      #DBDEE3;
  --glass-border-soft: #E5E7EA;
  --glass-blur:        none;
  --glass-blur-soft:   none;
  --glass-shadow:      0 1px 2px rgba(20,24,31,.05), 0 2px 8px rgba(20,24,31,.05);
  --glass-shadow-lg:   0 6px 24px rgba(20,24,31,.12);

  /* Deko-Blobs aus */
  --blob-1: transparent;
  --blob-2: transparent;
  --blob-3: transparent;

  --shadow:    0 1px 2px rgba(20,24,31,.05), 0 2px 8px rgba(20,24,31,.05);
  --shadow-lg: 0 6px 24px rgba(20,24,31,.12);
  --radius:    10px;
  --radius-lg: 14px;
  --logo-bg:   var(--accent);
}

/* Deko-Blobs vollständig entfernen */
.bg-blob { display: none; }

/* ── Sidebar: Anthrazit statt Markenrot ── */
.sidebar { background: var(--anthracite); }
.nav-item.active::before { display: none; }       /* kein weißer Balken */
.nav-item.active .nav-icon { color: var(--accent); opacity: 1; }
.avatar { background: rgba(255, 255, 255, .14); }

/* ── Aktionsfarbe Teal ── */
.btn-primary { background: var(--accent); box-shadow: 0 2px 6px rgba(13,142,134,.20); }
.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 4px 12px rgba(13,142,134,.26); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-icon:hover  { border-color: var(--accent); color: var(--accent); }
.view-toggle .btn-primary { box-shadow: 0 1px 3px rgba(13,142,134,.25); }

/* Tailwind-brand-Buttons (Templates nutzen bg-brand-600 / border-slate-300) */
button.bg-brand-600, button.bg-brand-700, a.bg-brand-600, a.bg-brand-700,
input[type="submit"].bg-brand-600, input[type="submit"].bg-brand-700 {
  box-shadow: 0 2px 6px rgba(13,142,134,.18);
}
button.bg-brand-600:hover, a.bg-brand-600:hover {
  box-shadow: 0 4px 12px rgba(13,142,134,.26);
}
button.border-slate-300:hover, a.border-slate-300:hover,
.border-slate-300:hover[role="button"] {
  border-color: var(--accent); color: var(--accent);
}

/* Form-Focus: Teal statt Rot */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not(.form-input):not(.btn-input-naked):focus,
select:not(.form-select):focus,
textarea:not(.form-textarea):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13,142,134,.14);
}

/* BPMN-Stage-Indicator: aktueller Schritt Teal statt Rot */
.bpmn-stage.active { background: var(--accent-soft); }
.bpmn-stage.active .num { background: var(--accent); }
.bpmn-stage.active .lbl { color: var(--accent-dark); }

/* ── Mobile-Schiene: Chrome anthrazit, Aktion Teal ── */
.m-header { background: var(--anthracite); }
.m-btn { background: var(--accent); }
.m-btn:active { background: var(--accent-dark); }
.m-btn-danger { background: var(--danger); }
.m-nav-item.active { color: var(--accent); }
.m-quick svg { color: var(--accent); }
.m-input:focus, .m-select:focus, .m-textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13,142,134,.14);
}

/* ─── Next-Step-Hero — geführte Bedienung (Auftrags-Detail) ─── */
.next-step {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; background: var(--accent-soft);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px;
}
.next-step-done { background: var(--surface2); }
.next-step-label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-dark);
}
.next-step-done .next-step-label { color: var(--muted); }
.next-step-text { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 2px; }
.next-step-hint { font-size: 12.5px; color: var(--text2); margin-top: 2px; }
.btn-lg { padding: 11px 22px; font-size: 14px; border-radius: 11px; }

/* ─── Arbeitsgänge als Checkliste ─── */
.op-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px; border-top: 1px solid var(--border);
}
.op-row:first-child { border-top: none; }
.op-row:hover { background: var(--surface-elev1); }
.op-check {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--border2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff;
}
.op-check.is-done { background: var(--accent); border-color: var(--accent); }
.op-seq {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--muted); width: 26px; flex-shrink: 0;
}
.op-desc { flex: 1; font-size: 13px; color: var(--text); }
.op-desc.is-done { color: var(--muted); text-decoration: line-through; }
.op-hours { font-size: 12px; color: var(--muted); flex-shrink: 0; }

/* Entscheidungs-Hero (zwei Wege, z.B. Meldung freigeben/ablehnen) */
.next-step-decision {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}

/* ═══════════════════════════════════════════════════════════
   REDESIGN v2 — Dark-Mode
   Zieht das Designsystem auf [data-theme="dark"] nach: dunkle
   Leinwand, solide dunkle Flächen, Teal-Akzent. Plus ein Shim,
   der die fest hell gedachten Tailwind-Utilities (text-slate-*,
   bg-white, bg-*-50 …) im Dark-Mode umlenkt.
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg:            #16181C;
  --surface:       #23262B;
  --surface2:      #2B2F35;
  --surface3:      #343941;
  --surface-elev1: #282C32;
  --surface-elev2: #30353D;
  --border:        #34383F;
  --border2:       #434851;

  --text:   #E6E7EA;
  --text2:  #C3C5CA;
  --muted:  #8B8F98;
  --muted2: #6C707A;

  --glass-bg:          #23262B;
  --glass-bg-strong:   #23262B;
  --glass-bg-soft:     #2B2F35;
  --glass-input:       #2B2F35;
  --glass-input-focus: #30353D;
  --glass-row-hover:   rgba(255, 255, 255, .045);
  --glass-border:      #34383F;
  --glass-border-soft: #2C3036;
  --glass-blur:        none;
  --glass-blur-soft:   none;
  --glass-shadow:      0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.34);
  --glass-shadow-lg:   0 8px 28px rgba(0,0,0,.50);

  --shadow:      0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.34);
  --shadow-lg:   0 8px 28px rgba(0,0,0,.50);
  --radius:      10px;
  --radius-lg:   14px;
  --accent-soft: rgba(13, 142, 134, .20);
  --logo-bg:     var(--accent);
}

/* Sidebar dunkel & flach (HORIZON-Dark-Gradient überschreiben) */
[data-theme="dark"] .sidebar { background: #1E2024; }

/* ── Tailwind-Utility-Shim: feste Hell-Werte aufs Theme umlenken ── */
[data-theme="dark"] .text-slate-900 { color: #E6E7EA; }
[data-theme="dark"] .text-slate-700 { color: #C3C5CA; }
[data-theme="dark"] .text-slate-600 { color: #A7AAB1; }
[data-theme="dark"] .text-slate-500 { color: #8B8F98; }
[data-theme="dark"] .text-slate-400 { color: #777B84; }

[data-theme="dark"] .bg-white     { background-color: var(--surface); }
[data-theme="dark"] .bg-slate-50  { background-color: var(--surface-elev1); }
[data-theme="dark"] .bg-slate-100 { background-color: var(--surface2); }
[data-theme="dark"] .bg-slate-200 { background-color: var(--surface3); }
[data-theme="dark"] .hover\:bg-slate-50:hover  { background-color: var(--surface-elev1); }
[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: var(--surface2); }

[data-theme="dark"] .border-slate-100 { border-color: var(--border); }
[data-theme="dark"] .border-slate-200 { border-color: var(--border); }
[data-theme="dark"] .border-slate-300 { border-color: var(--border2); }
[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }

/* ── Farbige Status-/Kachel-Tints abdunkeln ── */
[data-theme="dark"] .bg-red-50      { background-color: rgba(220,70,70,.16); }
[data-theme="dark"] .bg-amber-50    { background-color: rgba(201,130,30,.16); }
[data-theme="dark"] .bg-blue-50     { background-color: rgba(60,120,210,.16); }
[data-theme="dark"] .bg-emerald-50  { background-color: rgba(46,160,95,.16); }
[data-theme="dark"] .bg-indigo-50   { background-color: rgba(99,102,210,.16); }
[data-theme="dark"] .bg-cyan-50     { background-color: rgba(34,170,200,.16); }
[data-theme="dark"] .bg-teal-50     { background-color: rgba(20,150,140,.16); }
[data-theme="dark"] .bg-red-100     { background-color: rgba(220,70,70,.24); }
[data-theme="dark"] .bg-amber-100   { background-color: rgba(201,130,30,.24); }
[data-theme="dark"] .bg-emerald-100 { background-color: rgba(46,160,95,.24); }

/* Farbiger Text aufhellen (combo-Regeln mit !important überschreiben) */
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-700.bg-red-50          { color: #EC8B8B !important; }
[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-800.bg-amber-50      { color: #E2B36A !important; }
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-700.bg-blue-50        { color: #8FB4EE !important; }
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-emerald-700.bg-emerald-50  { color: #6FCF97 !important; }
[data-theme="dark"] .text-indigo-700 { color: #A6A8F0; }
[data-theme="dark"] .badge-red { background: rgba(220,70,70,.18); color: #EC8B8B; }

/* ─── Standort-Umschalter in der Top-Leiste (Button + Popover-Baum) ─── */
.scope-switcher { position: relative; flex-shrink: 0; }

/* Auslöse-Button: zeigt den aktiven Standort */
.scope-trigger {
  display: flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 11px; max-width: 240px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text); cursor: pointer;
  background: var(--glass-input); border: 1px solid var(--glass-border);
  border-radius: 10px;
  transition: background .15s, border-color .15s;
}
.scope-trigger:hover { background: var(--glass-input-focus); }
.scope-trigger .scope-pin { color: var(--accent); flex-shrink: 0; }
.scope-trigger .scope-chevron {
  color: var(--muted); flex-shrink: 0; transition: transform .15s;
}
.scope-trigger-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scope-switcher.open .scope-trigger {
  background: var(--glass-input-focus); border-color: var(--accent);
}
.scope-switcher.open .scope-trigger .scope-chevron { transform: rotate(180deg); }

/* Popover unter dem Button */
.scope-popover {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
  width: 268px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
}
.scope-switcher.open .scope-popover { display: block; }

.scope-label {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 2px 6px 7px;
}
.scope-tree { max-height: 62vh; overflow-y: auto; }

/* Zeile: [Pfeil] [Name] — Name wählt den Scope, Pfeil klappt nur auf */
.scope-node {
  display: flex; align-items: stretch;
  border-radius: 7px; transition: background .12s;
}
.scope-node:hover { background: var(--surface2); }
.scope-branch > summary.scope-node { list-style: none; }
.scope-branch > summary.scope-node::-webkit-details-marker { display: none; }
/* Pfeil (Branch) bzw. Platzhalter (Blatt) — gleiche Breite für saubere Flucht */
.scope-caret, .scope-spacer {
  width: 18px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.scope-caret::before {
  content: ""; width: 0; height: 0;
  border: 4px solid transparent; border-right-width: 0;
  border-left-color: var(--muted);
  transition: transform .15s;
}
.scope-branch[open] > summary > .scope-caret::before { transform: rotate(90deg); }
/* Name — der eigentliche Auswahl-Link */
.scope-link, .scope-leaf {
  font-family: inherit; line-height: 1.3;
  color: var(--text); text-decoration: none; cursor: pointer;
}
.scope-link {
  flex: 1; min-width: 0; font-size: 13px; padding: 7px 8px 7px 2px;
}
.scope-leaf {
  display: flex; align-items: center;
  font-size: 12.5px; padding: 6px 8px 6px 0;
}
/* eingerückte Kinder mit Verbindungslinie */
.scope-children {
  margin: 1px 0 2px 9px; padding-left: 8px;
  border-left: 1px solid var(--border);
}
.scope-empty {
  display: block; font-size: 11.5px; font-style: italic;
  color: var(--muted); padding: 6px 8px;
}
/* aktiver Scope — ganze Zeile teal */
.scope-node.is-active { background: var(--accent); }
.scope-node.is-active:hover { background: var(--accent); }
.scope-node.is-active .scope-link,
.scope-leaf.scope-node.is-active { color: #fff; font-weight: 600; }
.scope-node.is-active .scope-caret::before { border-left-color: #fff; }

/* ─── KKS-/Anlagen-Picker mit Autovervollständigung ─── */
.kks-picker { position: relative; }
.kks-picker-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 60;
}
.kks-results-list {
  list-style: none; margin: 0; padding: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
  max-height: 288px; overflow-y: auto;
}
.kks-result {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 7px;
  background: transparent; cursor: pointer; text-align: left;
  font-family: inherit;
}
.kks-result:hover { background: var(--surface2); }
.kks-result-code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12.5px; font-weight: 600; color: var(--accent); flex-shrink: 0;
}
.kks-result-name {
  font-size: 12.5px; color: var(--text); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kks-result-kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); flex-shrink: 0;
}
.kks-results-empty {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
  padding: 10px 12px; font-size: 12px; color: var(--muted);
}

/* ─── Anlagen-Baum (vertikal, von oben nach unten) ─── */
.tree-root, .tree-children { list-style: none; margin: 0; padding: 0; }
.tree-li { display: block; }
.tree-row {
  display: flex; align-items: center; gap: 7px;
  padding-top: 6px; padding-bottom: 6px; padding-right: 12px;
  min-height: 40px; border-bottom: 1px solid var(--border);
}
.tree-li:last-child > .tree-row { border-bottom: 0; }
.tree-row:hover { background: var(--surface2); }
/* Auf-/Zuklapp-Pfeil */
.tree-caret {
  width: 22px; height: 22px; flex-shrink: 0; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tree-caret::before {
  content: ""; width: 0; height: 0;
  border: 5px solid transparent; border-right-width: 0;
  border-left-color: var(--muted);
  transition: transform .15s;
}
.tree-caret:hover::before { border-left-color: var(--text); }
.tree-caret.open::before { transform: rotate(90deg); }
.tree-caret-spacer { width: 22px; flex-shrink: 0; }
/* Kind-Badge */
.tree-kind {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); background: var(--surface2);
  padding: 2px 6px; border-radius: 5px; flex-shrink: 0;
}
/* KKS-Code-Badge */
.tree-kks {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px; font-weight: 600; color: var(--accent);
  background: rgba(13, 142, 134, .12);
  padding: 2px 6px; border-radius: 5px; flex-shrink: 0;
}
/* Name */
.tree-name {
  display: flex; align-items: baseline; gap: 7px;
  flex: 1; min-width: 0; text-decoration: none;
}
.tree-code { font-weight: 600; font-size: 13px; color: var(--text); flex-shrink: 0; }
.tree-label {
  font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tree-name:hover .tree-code { color: var(--accent); }
/* KKS-Konsistenz-Warnung */
.tree-warn {
  font-size: 12px; line-height: 1; flex-shrink: 0; cursor: help;
  color: #B45309;
}

/* ─── Plantafel / Einsatzraster ─── */
.sched-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sched-grid th {
  text-align: left; padding: 8px 10px; font-size: 10px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.sched-daydate { color: var(--muted); font-weight: 400; }
.sched-grid td {
  padding: 6px 8px; border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border); vertical-align: top;
}
.sched-grid td:first-child, .sched-grid th:first-child { border-left: 0; }
.sched-name-col, .sched-name { min-width: 170px; }
.sched-name { font-weight: 600; color: var(--text); white-space: nowrap; }
.sched-pers-no {
  display: block; font-weight: 400; font-size: 10.5px; color: var(--muted);
}
.sched-day-col, .sched-cell { min-width: 142px; }
.sched-load-col, .sched-load { min-width: 152px; }
.sched-today, .sched-grid th.sched-today { background: var(--surface2); }
.sched-cell.sched-drop { background: rgba(13, 142, 134, .14); box-shadow: inset 0 0 0 2px var(--accent); }
.sched-chip { cursor: grab; }
.sched-chip:active { cursor: grabbing; }
/* Auftrags-Chip */
.sched-chip {
  display: block; margin-bottom: 4px; padding: 4px 7px;
  border-radius: 6px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
.sched-chip:last-child { margin-bottom: 0; }
.sched-chip:hover { border-color: var(--accent); }
.sched-chip-open { border-left-color: #B45309; }
.sched-chip-no {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px; font-weight: 600; color: var(--accent);
}
.sched-chip-open .sched-chip-no { color: #B45309; }
.sched-chip-title {
  display: block; color: var(--text); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sched-chip-h { font-size: 10.5px; color: var(--muted); }
/* Auslastungsbalken */
.sched-bar {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--surface2); margin-bottom: 3px;
}
.sched-bar-fill { height: 100%; border-radius: 4px; }
.sched-bar-free .sched-bar-fill { background: transparent; }
.sched-bar-under .sched-bar-fill { background: #3B82C4; }
.sched-bar-ok   .sched-bar-fill { background: var(--accent); }
.sched-bar-over .sched-bar-fill { background: #C0392B; }
.sched-load-txt { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.sched-unassigned-row .sched-name { color: #B45309; }
.sched-empty {
  padding: 24px; text-align: center; color: var(--muted); font-style: italic;
}

/* ─── Erinnerungen / Alerts ─── */
.alert-mount { display: contents; }
.alert-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.alert-head-danger { box-shadow: inset 3px 0 0 #C0392B; }
.alert-head-warn   { box-shadow: inset 3px 0 0 #C99700; }
.alert-icon { display: flex; color: var(--muted); }
.alert-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 0; }
.alert-count {
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  padding: 1px 8px; border-radius: 10px; color: #fff;
}
.alert-count-danger { background: #C0392B; }
.alert-count-warn   { background: #C99700; }
.alert-list { list-style: none; margin: 0; padding: 0; }
.alert-item { border-bottom: 1px solid var(--border); }
.alert-item:last-child { border-bottom: 0; }
.alert-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 14px; text-decoration: none;
}
a.alert-row:hover { background: var(--surface2); }
.alert-item-label { font-size: 13px; color: var(--text); flex: 1; min-width: 0; }
.alert-item-sub { font-size: 12px; color: var(--muted); white-space: nowrap; }