/* Naberion Konsole — eigenständige Oberfläche.
 *
 * ABGESCHOTTET: keine Datei, kein Import, keine Laufzeit-Verbindung zum ERP. Das Aussehen ist
 * NACHGEBAUT nach den im Design-Manifest dokumentierten Werten (Tokens, Maße, Zustände) —
 * damit es wie Naberion aussieht und sich wie Naberion bedient, ohne davon abzuhängen.
 * Ändert sich dort etwas, wird es hier bewusst nachgezogen.
 */

/* ===== Tokens (Manifest §1) ===== */
:root{
  --o:#eb5202; --o-h:#cf4700; --on-o:#fff;
  --ink:#1f2937; --text:#1f2937; --muted:#9ca3af; --border:#e5e7eb;
  --surface:#fff; --surface-2:#f8fafc; --chrome:#f6f6f7;
  --ok:#16a34a; --ok-h:#15803d; --ok-bg:#dcfce7; --ok-fg:#166534;
  --danger:#dc2626; --danger-h:#b91c1c; --danger-bg:#fef2f2; --danger-fg:#b91c1c;
  --warn:#d97706; --warn-bg:#fff7ed; --warn-fg:#9a3412;
  --info:#0d6efd; --info-bg:#eff6ff; --info-fg:#1565c0;
  --accent-2:#9333ea; --accent-2-bg:#fdf4ff;
  --grey-50:#f9fafb; --grey-100:#f3f4f6; --grey-200:#e5e7eb; --grey-300:#d1d5db; --grey-400:#9ca3af;
  --grey-500:#6b7280; --grey-600:#4b5563; --grey-700:#374151; --grey-800:#1f2937; --grey-900:#111827;
  --overlay:rgba(0,0,0,.5); --scrim:rgba(0,0,0,.3);
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-xxl:26px;
  --fw-normal:400; --fw-med:500; --fw-bold:600; --fw-heavy:700; --lh:1.5; --tracking:.04em;
  --sp-0:0; --sp-1:4px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:12px; --sp-6:14px; --sp-7:16px;
  --sp-8:20px; --sp-9:24px; --sp-10:32px; --sp-11:40px; --sp-12:48px;
  --sz-18:18px; --sz-22:22px; --sz-28:28px; --sz-32:32px; --sz-36:36px; --sz-180:180px; --sz-260:260px; --sz-500:500px;
  --radius:2px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 6px 20px rgba(0,0,0,.12); --shadow-lg:0 10px 40px rgba(0,0,0,.18);
  --focus:0 0 0 2px color-mix(in srgb, var(--o) 45%, transparent);
  --font-base:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --dur-fast:.12s; --dur:.2s; --dur-slow:.3s;
  --z-nav:300; --z-window:500; --z-sticky:900; --z-overlay:9998; --z-drawer:9999;
}

/* ===== Reset (Manifest Anhang B) ===== */
*{box-sizing:border-box}
/* Muss gewinnen — sonst hebelt jede display-Klasse das Verstecken aus. */
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;font-family:var(--font-base);font-size:var(--fs-base);line-height:var(--lh);
  color:var(--ink);background:var(--surface-2);-webkit-font-smoothing:antialiased}
a{color:var(--o);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:var(--fw-bold);line-height:1.3;color:var(--ink)}
h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)} h4{font-size:var(--fs-md)}
.txt-muted{color:var(--muted);font-size:var(--fs-sm)}
.txt-mono{font-family:var(--mono)}
.txt-strong{font-weight:var(--fw-bold)}
.cc-dash{color:var(--muted)}

/* ===== Knöpfe (Manifest §8) — EINE Höhe, Farbe unterscheidet ===== */
.mage-btn-add,.btn-save,.btn-cancel,.mage-btn-light,.mage-btn-neutral,.mage-btn-danger{
  height:var(--sz-36);padding:0 var(--sp-7);border:none;border-radius:var(--radius);
  font-weight:var(--fw-bold);font-size:var(--fs-base);cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:var(--sp-2);transition:background var(--dur-fast)}
.mage-btn-add{background:var(--o);color:var(--on-o)}
.mage-btn-add:hover{background:var(--o-h)}
.btn-save{background:var(--ok);color:#fff}
.btn-save:hover{background:var(--ok-h)}
.btn-cancel{background:var(--grey-500);color:#fff}
.btn-cancel:hover{background:var(--grey-600)}
.mage-btn-light{background:var(--surface);color:var(--ink);border:1px solid var(--grey-200)}
.mage-btn-light:hover{background:var(--grey-50);border-color:var(--grey-300)}
.mage-btn-neutral{background:var(--grey-500);color:#fff}
.mage-btn-danger{background:var(--danger);color:#fff}
.mage-btn-danger:hover{background:var(--danger-h)}
button:focus-visible{outline:none;box-shadow:var(--focus)}
button[disabled]{opacity:.15;pointer-events:none}

/* Icon-Knopf (Manifest §8.2) — quadratisch, 32px, Tooltip statt Text */
.ac-btn-action{width:var(--sz-32);height:var(--sz-32);display:inline-grid;place-items:center;border:none;
  background:transparent;color:var(--grey-500);border-radius:var(--radius);cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast)}
.ac-btn-action:hover{background:var(--grey-100);color:var(--ink)}
.ac-btn-action.tone-danger:hover{background:var(--danger-bg);color:var(--danger)}
.ac-btn-action.tone-ok:hover{background:var(--ok-bg);color:var(--ok)}
.ac-btn-action.tone-warn:hover{background:var(--warn-bg);color:var(--warn)}
/* Zwei-Klick-Bestätigung (Manifest §0-42): kein Browser-Dialog */
[data-confirm].is-armed{background:var(--danger)!important;color:#fff!important}

/* ===== Formular (Manifest §8.6 / §0-46) ===== */
.form-control,.mage-field input,.mage-field select,.mage-field textarea{
  width:100%;height:var(--sz-36);padding:var(--sp-3) var(--sp-4);border:1px solid var(--grey-200);
  border-radius:var(--radius);background:var(--surface);color:var(--grey-800);font-size:var(--fs-md)}
.mage-field textarea,textarea.form-control{height:auto;min-height:72px;resize:vertical}
.form-control:focus,.mage-field input:focus,.mage-field textarea:focus{outline:none;border-color:var(--o);box-shadow:var(--focus)}
/* Feld: Beschriftung feste linke Spalte, rechtsbündig, fett */
.mage-field{display:flex;gap:var(--sp-7);margin-bottom:var(--sp-7);align-items:flex-start}
.mage-field:last-child{margin-bottom:0}
.mage-field > label{flex:0 0 var(--sz-180);text-align:right;padding-top:9px;font-size:var(--fs-sm);
  font-weight:var(--fw-bold);color:var(--grey-700)}
.mage-field-body{flex:1;max-width:var(--sz-500);min-width:0}
.mage-field .req{color:var(--danger);margin-left:2px}
.field-hint{display:block;margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}
.mage-field-flush > label{display:none}
.mage-field-flush .mage-field-body{max-width:none}

/* ===== Plaketten / Chips (Manifest §9.3) ===== */
.badge-status{display:inline-flex;align-items:center;gap:var(--sp-2);padding:2px 8px;border-radius:var(--radius);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);background:var(--grey-100);color:var(--grey-700)}
.badge-status.bg-success{background:var(--ok-bg);color:var(--ok-fg)}
.badge-status.bg-warning{background:var(--warn-bg);color:var(--warn-fg)}
.badge-status.bg-danger{background:var(--danger-bg);color:var(--danger-fg)}
.badge-status.bg-secondary{background:var(--grey-100);color:var(--grey-700)}
.badge-status.bg-info{background:var(--info-bg);color:var(--info-fg)}
.cc-chip{display:inline-flex;align-items:center;gap:var(--sp-3);padding:3px 9px;border-radius:var(--radius-pill);
  background:var(--grey-100);color:var(--grey-700);font-size:var(--fs-xs);font-weight:var(--fw-med)}
.cc-chip + .cc-chip{margin-left:var(--sp-2)}
.cc-chip-info{background:var(--info-bg);color:var(--info-fg)}
.cc-chip-ok{background:var(--ok-bg);color:var(--ok-fg)}
.cc-status-dot{width:8px;height:8px;border-radius:50%;background:var(--grey-300);display:inline-block}
.cc-status-dot.on{background:var(--ok)} .cc-status-dot.off{background:var(--grey-300)}

/* ===== Fenster (Manifest §10.1 / §0-7) ===== */
.cc-desktop{height:100%;overflow:hidden;background:
  radial-gradient(120% 120% at 100% 0%, #fbe6d8 0%, transparent 46%), var(--surface-2)}
.cc-win{position:absolute;inset:var(--sp-8);display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--grey-300);border-radius:var(--radius);box-shadow:var(--shadow-md);
  z-index:var(--z-window);overflow:hidden}
.cc-win-bar{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-5);height:44px;padding:0 var(--sp-7);
  background:var(--grey-50);border-bottom:1px solid var(--border)}
.cc-win-title{font-weight:var(--fw-bold);font-size:var(--fs-md);display:flex;align-items:center;gap:var(--sp-4)}
.cc-win-title i{color:var(--o)}
.cc-win-bar .spacer{margin-left:auto}
.cc-win-body{flex:1;min-height:0;display:flex;overflow:hidden}

/* ===== Fenster-Navigation (Manifest §0-32/33) ===== */
.wn-page-flex{display:flex;flex:1;min-width:0;min-height:0}
.wn-sidebar{flex:0 0 var(--sz-260);background:var(--chrome);border-right:1px solid var(--border);
  overflow-y:auto;padding:var(--sp-5) 0}
.wn-group-head{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--tracking);color:var(--muted);
  font-weight:var(--fw-bold);padding:var(--sp-5) var(--sp-7) var(--sp-3)}
.wn-item{display:flex;align-items:center;gap:var(--sp-5);width:100%;padding:8px var(--sp-7);border:none;
  background:transparent;cursor:pointer;text-align:left;color:var(--grey-700);font-size:var(--fs-base);
  border-left:2px solid transparent}
.wn-item:hover{background:var(--surface)}
.wn-item.active{background:var(--surface);border-left-color:var(--o);color:var(--ink);font-weight:var(--fw-bold)}
.wn-item i{width:16px;color:var(--muted)}
.wn-item.active i{color:var(--o)}
.wn-count{margin-left:auto;font-size:var(--fs-xs);color:var(--muted)}
/* Inhaltsspalte: KEIN oberes Polster, Abstand kommt vom mitscrollenden Spacer (Manifest §0-7) */
.wn-main-col{flex:1;min-width:0;overflow-y:auto;padding:0 var(--sp-7) var(--sp-7)}
.wn-main-col::before{content:"";display:block;height:var(--sz-18)}

/* ===== Werkzeugleiste + Suche (Manifest §0-1: Fenster beginnt hiermit) ===== */
.dtx-head{display:flex;align-items:center;gap:var(--sp-5);margin-bottom:var(--sp-5);flex-wrap:wrap}
.cc-searchbar{position:relative;flex:1;min-width:220px;max-width:360px;display:flex;align-items:center}
.cc-searchbar i{position:absolute;left:var(--sp-5);color:var(--muted);font-size:var(--fs-md)}
.cc-searchbar input{height:var(--sz-36);width:100%;padding:0 var(--sp-5) 0 34px;border:1px solid var(--grey-200);
  border-radius:var(--radius);background:var(--surface);font-size:var(--fs-md)}
.cc-searchbar input:focus{outline:none;border-color:var(--o);box-shadow:var(--focus)}
.dtx-head .spacer{margin-left:auto}
.dataTables_info{margin-top:var(--sp-5);font-size:var(--fs-sm);color:var(--muted)}

/* ===== Tabelle (Manifest §9.1 / §0-24) ===== */
.mage-table{width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius)}
.mage-table thead th{position:sticky;top:0;z-index:var(--z-nav);background:var(--ink);color:var(--muted);
  text-align:left;font-size:var(--fs-xs);font-weight:var(--fw-med);text-transform:uppercase;
  letter-spacing:var(--tracking);padding:10px var(--sp-7);white-space:nowrap}
.mage-table tbody td{padding:var(--sp-6) var(--sp-7);border-bottom:1px solid var(--grey-200);vertical-align:middle}
.mage-table tbody tr:last-child td{border-bottom:0}
/* KEIN Zebra — Hover in Info-Ton (Manifest §9.1) */
.mage-table tbody tr:hover{background:var(--info-bg)}
.mage-table tbody tr.clickable-row{cursor:pointer}
.mage-table tbody tr.dt-row-inactive td{opacity:.55}
/* Aktionsspalte: letzte Spalte, rechtsbündig, Rand = Rand (Manifest §0-24/G8/G9) */
.dt-actions{text-align:right;white-space:nowrap;width:1%}
.dt-actions .ac-btn-action + .ac-btn-action{margin-left:var(--sp-2)}
.cc-ent{display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-ent-title{font-weight:var(--fw-bold);overflow:hidden;text-overflow:ellipsis}
.cc-ent-meta{font-size:var(--fs-xs);color:var(--muted);font-family:var(--mono)}

/* ===== Leerzustand / Hinweise (Manifest §9.5) ===== */
.cc-empty{text-align:center;padding:var(--sp-12) var(--sp-8);color:var(--muted);
  border:1px dashed var(--grey-300);border-radius:var(--radius);background:var(--surface)}
.cc-empty i{font-size:26px;display:block;margin-bottom:var(--sp-5);opacity:.6}
.cc-infobox{display:flex;gap:var(--sp-5);align-items:flex-start;padding:var(--sp-5) var(--sp-7);
  border-left:3px solid var(--info);background:var(--info-bg);color:var(--info-fg);
  border-radius:var(--radius);font-size:var(--fs-sm);margin-bottom:var(--sp-5)}
.cc-infobox.tone-ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-fg)}
.cc-infobox.tone-danger{border-color:var(--danger);background:var(--danger-bg);color:var(--danger-fg)}
.cc-infobox.tone-warn{border-color:var(--warn);background:var(--warn-bg);color:var(--warn-fg)}

/* ===== Sidebar (Manifest §0-19/20, §10) ===== */
.mage-sidebar-scrim{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-overlay);backdrop-filter:blur(2px)}
.mage-sidebar{position:fixed;top:0;right:0;bottom:0;width:min(520px,96vw);background:var(--surface);
  border-left:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:var(--z-drawer);
  display:flex;flex-direction:column;transform:none}
/* Kopf: EINE Zeile, max 84px (Manifest §0-19) */
.mage-sidebar-header{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-5);max-height:84px;
  padding:var(--sp-6) var(--sp-8);background:var(--chrome);border-bottom:1px solid var(--border)}
.cc-sheet-ico{flex:0 0 auto;width:var(--sz-28);height:var(--sz-28);display:grid;place-items:center;
  background:var(--grey-100);color:var(--o);border-radius:var(--radius);font-size:var(--fs-md)}
.cc-sheet-title{min-width:0;display:flex;flex-direction:column}
.cc-sheet-title h4{font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-sheet-sub{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-sheet-badges{margin-left:auto;display:flex;gap:var(--sp-3);align-items:center}
.mage-sidebar-header .ac-btn-action{flex:0 0 auto}
/* Körper: 20px, KEIN oberes Polster — erster Tab dockt an (Manifest §0-8) */
.mage-sidebar-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 var(--sp-8) var(--sp-8)}
/* Sticky Fuss für datensatzweite Knöpfe (Manifest §0-20) */
.mage-sidebar-foot{flex:0 0 auto;display:flex;justify-content:flex-end;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-8);background:var(--chrome);border-top:1px solid var(--border)}

/* ===== Akkordeon (Manifest §0-14/15, §4) ===== */
.accordion-section{border-bottom:1px solid var(--border)}
.accordion-section:first-child{border-top:1px solid var(--border)}
.accordion-header{display:flex;align-items:center;gap:var(--sp-5);width:100%;padding:var(--sp-7) var(--sp-8);
  margin:0 calc(var(--sp-8) * -1);width:calc(100% + var(--sp-8) * 2);
  background:transparent;border:none;cursor:pointer;text-align:left}
.accordion-header h3{font-size:var(--fs-base);font-weight:var(--fw-bold)}
.accordion-header > i:first-child{color:var(--o);width:16px}
/* offen = blaue Tönung + blaue Links-Kante (Manifest §0-14) */
.accordion-section.open > .accordion-header{background:var(--info-bg);box-shadow:inset 4px 0 0 var(--info)}
.accordion-icon{margin-left:auto;width:var(--sz-22);height:var(--sz-22);display:grid;place-items:center;
  border-radius:50%;background:var(--grey-100);color:var(--grey-500);font-size:var(--fs-xs);
  transition:transform var(--dur),background var(--dur)}
.accordion-section.open .accordion-icon{background:var(--o);color:var(--on-o);transform:rotate(180deg)}
.accordion-content{display:none}
.accordion-section.open > .accordion-content{display:block}
.accordion-body{padding:var(--sp-8) 0}

/* Begriff/Wert-Liste (Manifest §19.2: Formular-Look) */
.cc-kv{display:grid;grid-template-columns:var(--sz-180) 1fr;gap:var(--sp-4) var(--sp-7);margin:0;font-size:var(--fs-sm)}
.cc-kv dt{text-align:right;font-weight:var(--fw-bold);color:var(--grey-700)}
.cc-kv dd{margin:0;min-width:0;word-break:break-word}

/* ===== Login ===== */
.login-wrap{display:grid;place-items:center;height:100%;padding:var(--sp-8)}
.login-card{width:min(400px,100%);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-md);padding:var(--sp-10)}
.login-card h2{margin-bottom:var(--sp-3)}
.login-card .sub{color:var(--muted);margin:0 0 var(--sp-8)}
.login-card .mage-field{display:block}
.login-card .mage-field > label{display:block;flex:none;text-align:left;padding:0 0 var(--sp-3)}
.login-card .mage-field-body{max-width:none}
.brand{display:inline-flex;align-items:center;gap:var(--sp-5);font-weight:var(--fw-bold);margin-bottom:var(--sp-7)}
.nmark{display:inline-grid;place-items:center;width:var(--sz-28);height:var(--sz-28);border:1.5px solid var(--o);
  color:var(--o);border-radius:3px;font-weight:var(--fw-heavy);font-size:var(--fs-lg)}

/* Umschalter (Manifest §8.3 segmented) */
.cc-seg{display:inline-flex;background:var(--grey-100);border-radius:var(--radius-pill);padding:2px;height:var(--sz-36)}
.cc-seg-btn{border:none;background:transparent;border-radius:var(--radius-pill);padding:0 var(--sp-7);
  cursor:pointer;font-size:var(--fs-sm);font-weight:var(--fw-med);color:var(--grey-700)}
.cc-seg-btn.cc-seg-active{background:var(--o);color:var(--on-o)}

@media (max-width:900px){
  .cc-win{inset:0;border:0;border-radius:0}
  .wn-sidebar{flex-basis:200px}
  .mage-field{display:block}
  .mage-field > label{display:block;text-align:left;flex:none;padding:0 0 var(--sp-3)}
  .mage-field-body{max-width:none}
}