/* ============================================================
   LEITSTAND
   Die Tokens stammen unveraendert aus cp-robotik.de/assets/css/main.css.
   Gleiche Farben, gleiche Schriften, gleiche Formsprache — die App
   ist eine Fortsetzung der Website, kein Fremdkoerper.
   ============================================================ */

/* ---- Schriften (identisch zur Hauptseite) ---------------- */
@font-face { font-family:'Space Grotesk'; src:url('../fonts/space-grotesk-var.woff2') format('woff2'); font-weight:300 700; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; src:url('../fonts/space-grotesk-var-ext.woff2') format('woff2'); font-weight:300 700; font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-var.woff2') format('woff2'); font-weight:100 900; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-var-ext.woff2') format('woff2'); font-weight:100 900; font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/jetbrains-mono-var.woff2') format('woff2'); font-weight:100 800; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/jetbrains-mono-var-ext.woff2') format('woff2'); font-weight:100 800; font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---- Tokens --------------------------------------------- */
:root {
  --bg0:#06090f; --bg1:#0a0f18; --bg2:#0e1522; --bg3:#131c2e;
  --line:rgba(146,176,220,0.10); --line2:rgba(146,176,220,0.20);
  --txt:#e9eef6; --txt2:#a3b2c9; --txt3:#66768f;
  --blue:#3498db; --blue-hi:#5db4f0; --blue-dim:rgba(52,152,219,0.12);
  --run:#2ee08a; --run-dim:rgba(46,224,138,0.12);
  --amber:#ffb454; --red:#ff6b6b;

  --font-d:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,'Cascadia Code',monospace;

  --rad:10px;
  --ease:cubic-bezier(0.22,1,0.36,1);

  --topbar-h:52px;
  --capture-h:60px;
  --tabbar-h:60px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

/* ---- Grundlage ------------------------------------------ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

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

body {
  background:var(--bg1);
  color:var(--txt);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.5;
  min-height:100dvh;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}

button,input,textarea,select { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }
svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6;
      stroke-linecap:round; stroke-linejoin:round; }
[hidden] { display:none !important; }

:focus-visible { outline:2px solid var(--blue-hi); outline-offset:2px; border-radius:4px; }

.mono { font-family:var(--font-m); }

.kicker {
  font-family:var(--font-m); font-size:0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--txt3); margin-bottom:10px;
}

/* ---- LEDs: die Statussprache der Anlage ----------------- */
.led { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0;
       background:var(--txt3); }
.led-run   { background:var(--run);     box-shadow:0 0 8px rgba(46,224,138,0.9);  animation:pulse 2.2s ease-in-out infinite; }
.led-blue  { background:var(--blue-hi); box-shadow:0 0 8px rgba(93,180,240,0.9);  animation:blink 1.4s steps(2,start) infinite; }
.led-warn  { background:var(--amber);   box-shadow:0 0 8px rgba(255,180,84,0.9); }
.led-fault { background:var(--red);     box-shadow:0 0 8px rgba(255,107,107,0.9); animation:blink 1s steps(2,start) infinite; }
.led-idle  { background:var(--txt3); }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.15} }

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

/* ---- Bausteine der Hauptseite --------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px; border-radius:var(--rad); font-family:var(--font-d);
  font-size:0.94rem; font-weight:500; transition:all 0.25s var(--ease);
  border:1px solid transparent;
}
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--blue-hi); }
.btn-primary:disabled { opacity:0.55; cursor:default; }
.btn-ghost { border-color:var(--line2); color:var(--txt2); }
.btn-ghost:hover { border-color:var(--blue); color:var(--txt); }

.f-label {
  display:block; font-family:var(--font-m); font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--txt3); margin:18px 0 8px;
}
.form-input {
  width:100%; background:var(--bg1); border:1px solid var(--line2);
  border-radius:var(--rad); padding:13px 14px; color:var(--txt);
  transition:border-color 0.2s;
}
.form-input:focus { outline:none; border-color:var(--blue); }
.form-error { color:var(--red); font-size:0.85rem; margin-top:14px; }

.panel-bar {
  display:flex; align-items:center; gap:9px; padding:11px 14px;
  background:var(--bg3); border-bottom:1px solid var(--line);
}
.panel-title {
  font-family:var(--font-m); font-size:0.72rem; color:var(--txt3); letter-spacing:0.05em;
}

/* ============================================================
   Anmeldung
   ============================================================ */
.gate {
  min-height:100dvh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, #101a2c 0%, var(--bg1) 60%);
}
.gate-panel {
  width:100%; max-width:400px; background:var(--bg2);
  border:1px solid var(--line); border-radius:var(--rad); overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.gate-body { padding:26px 22px 24px; }
.gate-h {
  font-family:var(--font-d); font-size:1.7rem; font-weight:600;
  letter-spacing:-0.01em; margin-bottom:6px;
}
.gate-btn { width:100%; margin-top:24px; }
.gate-note {
  margin-top:18px; text-align:center; font-size:0.68rem;
  letter-spacing:0.04em; color:var(--txt3);
}

/* ============================================================
   Rahmen der App
   ============================================================ */
.app { min-height:100dvh; display:flex; flex-direction:column; }

.topbar {
  position:sticky; top:0; z-index:40;
  height:calc(var(--topbar-h) + var(--safe-t)); padding-top:var(--safe-t);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:16px; background:rgba(10,15,24,0.92);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.topbar-l,.topbar-r { display:flex; align-items:center; gap:10px; }
.topbar-title { font-size:0.76rem; letter-spacing:0.12em; color:var(--txt2); }
.sync-state { font-size:0.64rem; letter-spacing:0.06em; color:var(--txt3); }
.icon-btn { width:34px; height:34px; padding:7px; color:var(--txt2); border-radius:8px; }
.icon-btn:hover { background:var(--bg3); color:var(--txt); }

.view {
  flex:1; padding:20px 16px calc(var(--capture-h) + var(--tabbar-h) + var(--safe-b) + 24px);
  max-width:820px; width:100%; margin:0 auto;
}
.view:focus { outline:none; }

/* ---- Abschnitt ------------------------------------------ */
.sec { margin-bottom:34px; }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.sec-h {
  font-family:var(--font-d); font-size:1.15rem; font-weight:600; letter-spacing:-0.01em;
}
.sec-act { font-family:var(--font-m); font-size:0.68rem; letter-spacing:0.08em;
           text-transform:uppercase; color:var(--blue); }

/* ============================================================
   HEUTE — hoechstens drei Karten. Das ist keine Layoutfrage,
   das ist der Kern: mehr sichtbare Aufgaben heisst weniger
   erledigte Aufgaben.
   ============================================================ */
.today { display:grid; gap:12px; }

.tcard {
  position:relative; background:var(--bg2); border:1px solid var(--line);
  border-radius:var(--rad); padding:18px 16px; overflow:hidden;
  transition:border-color 0.25s var(--ease), transform 0.25s var(--ease);
  touch-action:pan-y;
}
.tcard::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--blue); opacity:0.55;
}
.tcard[data-prio="1"]::before { background:var(--amber); opacity:0.9; }
.tcard[data-overdue="1"]::before { background:var(--red); opacity:0.9; }
.tcard-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.tcard-area {
  font-family:var(--font-m); font-size:0.64rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--txt3);
}
.tcard-title { font-family:var(--font-d); font-size:1.05rem; font-weight:500; line-height:1.35; }
.tcard-trigger {
  margin-top:10px; padding-left:12px; border-left:2px solid var(--run-dim);
  font-size:0.82rem; color:var(--txt2); font-style:italic;
}
.tcard-meta {
  margin-top:12px; display:flex; flex-wrap:wrap; gap:8px;
  font-family:var(--font-m); font-size:0.64rem; letter-spacing:0.06em; color:var(--txt3);
}
.tcard-actions { margin-top:14px; display:flex; gap:8px; }
.mini {
  padding:8px 12px; border-radius:8px; border:1px solid var(--line2);
  font-family:var(--font-m); font-size:0.68rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--txt2); transition:all 0.2s;
}
.mini:hover { border-color:var(--blue); color:var(--txt); }
.mini-done { border-color:rgba(46,224,138,0.35); color:var(--run); }
.mini-done:hover { border-color:var(--run); background:var(--run-dim); }

/* Quittung beim Abhaken — sichtbarer Fortschritt ist der Treibstoff */
.tcard.is-done { border-color:rgba(46,224,138,0.4); }
.tcard.is-leaving { transform:translateX(110%); opacity:0; }

/* ---- Leerer Zustand: nie tadeln, immer einladen ---------- */
.empty {
  text-align:center; padding:38px 20px; border:1px dashed var(--line2);
  border-radius:var(--rad); color:var(--txt3);
}
.empty-h { font-family:var(--font-d); font-size:1.05rem; color:var(--txt2); margin-bottom:6px; }
.empty-p { font-size:0.88rem; }

/* ============================================================
   Bereichs-Kacheln — das HMI-Uebersichtsbild
   ============================================================ */
.areas { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.area {
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--rad);
  padding:14px; transition:border-color 0.25s, background 0.25s; text-align:left;
}
.area:hover { border-color:var(--line2); background:var(--bg3); }
.area-top { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.area-name {
  font-family:var(--font-m); font-size:0.68rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--txt2);
}
.area-num { font-family:var(--font-d); font-size:1.5rem; font-weight:600; line-height:1; }
.area-sub { font-family:var(--font-m); font-size:0.62rem; color:var(--txt3); margin-top:4px; letter-spacing:0.06em; }

/* ---- Betriebsstunden (Streaks, ohne Strafcharakter) ------ */
.hours { background:var(--bg2); border:1px solid var(--line); border-radius:var(--rad); padding:16px; }
.hours-top { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.hours-n { font-family:var(--font-d); font-size:1.4rem; font-weight:600; }
.hours-l { font-family:var(--font-m); font-size:0.64rem; letter-spacing:0.1em;
           text-transform:uppercase; color:var(--txt3); }
.hours-track { display:flex; gap:3px; }
.hours-day { flex:1; height:26px; border-radius:3px; background:var(--bg3); }
.hours-day.on   { background:var(--run); box-shadow:0 0 6px rgba(46,224,138,0.45); }
.hours-day.skip { background:var(--line2); }
.hours-day.today { outline:1px solid var(--blue-hi); outline-offset:1px; }

/* ---- Fortschrittsleiste (von der Hauptseite) ------------- */
.progress-track { height:3px; background:var(--bg3); border-radius:2px; overflow:hidden; }
.progress-fill  { height:100%; background:var(--blue); transition:width 0.5s var(--ease); }

/* ============================================================
   EINGANG — Triage per Wischen
   ============================================================ */
.inbox-list { display:grid; gap:10px; }
.ibx {
  position:relative; background:var(--bg2); border:1px solid var(--line);
  border-radius:var(--rad); overflow:hidden; touch-action:pan-y;
}
.ibx-inner {
  padding:16px; background:var(--bg2); position:relative; z-index:2;
  transition:transform 0.28s var(--ease);
}
.ibx-title { font-family:var(--font-d); font-size:1rem; font-weight:500; line-height:1.4; }
.ibx-hint {
  margin-top:8px; font-family:var(--font-m); font-size:0.64rem;
  letter-spacing:0.06em; color:var(--txt3);
}
.ibx-behind {
  position:absolute; inset:0; z-index:1; display:flex;
  align-items:center; justify-content:space-between; padding:0 20px;
  font-family:var(--font-m); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
}
.ibx-behind .left  { color:var(--run); }
.ibx-behind .right { color:var(--txt3); }
.ibx.swipe-right .ibx-inner { transform:translateX(60px); }
.ibx.swipe-left  .ibx-inner { transform:translateX(-60px); }
.ibx.is-leaving { opacity:0; transform:scale(0.96); transition:all 0.25s var(--ease); }

.ibx-actions { display:flex; gap:8px; padding:0 16px 14px; flex-wrap:wrap; }

/* ---- Auswahl von Bereich/Typ ---------------------------- */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  padding:7px 12px; border-radius:999px; border:1px solid var(--line2);
  font-family:var(--font-m); font-size:0.66rem; letter-spacing:0.06em;
  color:var(--txt2); transition:all 0.2s;
}
.chip:hover { border-color:var(--blue); color:var(--txt); }
.chip[aria-pressed="true"] { background:var(--blue-dim); border-color:var(--blue); color:var(--blue-hi); }

/* ============================================================
   Listen
   ============================================================ */
.rows { border:1px solid var(--line); border-radius:var(--rad); overflow:hidden; }
.row {
  display:flex; align-items:flex-start; gap:12px; padding:14px 16px;
  background:var(--bg2); border-bottom:1px solid var(--line); width:100%; text-align:left;
}
.row:last-child { border-bottom:0; }
.row:hover { background:var(--bg3); }
.row-check {
  width:20px; height:20px; flex-shrink:0; margin-top:2px; border-radius:5px;
  border:1.5px solid var(--line2); transition:all 0.2s; display:grid; place-items:center;
}
.row-check:hover { border-color:var(--run); }
.row-check.on { background:var(--run); border-color:var(--run); }
.row-check svg { width:12px; height:12px; stroke:var(--bg0); stroke-width:3; opacity:0; }
.row-check.on svg { opacity:1; }
.row-body { flex:1; min-width:0; }
.row-title { font-size:0.95rem; line-height:1.4; }
.row.done .row-title { color:var(--txt3); text-decoration:line-through; }
.row-sub { margin-top:4px; font-family:var(--font-m); font-size:0.62rem;
           letter-spacing:0.06em; color:var(--txt3); }

/* ============================================================
   Erfassen — die Kommandozeile
   ============================================================ */
.capture {
  position:fixed; left:0; right:0; z-index:45;
  bottom:calc(var(--tabbar-h) + var(--safe-b));
  background:rgba(6,9,15,0.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.capture-form {
  display:flex; align-items:center; gap:10px; height:var(--capture-h);
  padding:0 14px; max-width:820px; margin:0 auto;
}
.capture-caret { color:var(--run); font-size:0.95rem; flex-shrink:0; }
.capture-input {
  flex:1; background:none; border:0; outline:none; color:var(--txt);
  font-size:0.92rem; min-width:0;
}
.capture-input::placeholder { color:var(--txt3); }
.capture-mic { width:34px; height:34px; padding:7px; color:var(--txt3); flex-shrink:0; border-radius:8px; }
.capture-mic:hover { color:var(--blue-hi); }
.capture-mic.rec { color:var(--red); animation:blink 1s steps(2,start) infinite; }
.capture.is-armed { border-top-color:var(--run); }

/* ============================================================
   Tableiste
   ============================================================ */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:calc(var(--tabbar-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(6,9,15,0.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.tab {
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; color:var(--txt3); transition:color 0.2s;
}
.tab svg { width:20px; height:20px; }
.tab span { font-family:var(--font-m); font-size:0.56rem; letter-spacing:0.08em; text-transform:uppercase; }
.tab.on { color:var(--blue-hi); }
.tab-badge {
  position:absolute; top:8px; left:calc(50% + 8px);
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--amber); color:var(--bg0);
  font-family:var(--font-m); font-size:0.6rem; font-weight:700;
  display:grid; place-items:center;
}

/* ============================================================
   Meldung
   ============================================================ */
.toast {
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + var(--capture-h) + var(--safe-b) + 16px);
  z-index:60; max-width:calc(100% - 32px);
  background:var(--bg3); border:1px solid var(--line2); border-radius:var(--rad);
  padding:12px 18px; font-size:0.86rem; color:var(--txt);
  box-shadow:0 12px 32px rgba(0,0,0,0.5);
  animation:toast-in 0.25s var(--ease);
}
.toast.ok   { border-color:rgba(46,224,138,0.45); }
.toast.warn { border-color:rgba(255,180,84,0.45); }
.toast.err  { border-color:rgba(255,107,107,0.45); }
@keyframes toast-in { from{opacity:0; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)} }

/* ============================================================
   Grosser Bildschirm — aus dem Handy-Leitstand wird die Warte
   ============================================================ */
@media (min-width:820px) {
  :root { --tabbar-h:0px; }

  .app { display:grid; grid-template-columns:210px 1fr; grid-template-rows:auto 1fr; }
  .topbar { grid-column:1/-1; }

  .tabbar {
    position:sticky; top:calc(var(--topbar-h) + var(--safe-t)); align-self:start;
    height:auto; padding:14px 10px; grid-template-columns:1fr; gap:2px;
    background:none; border-top:0; border-right:1px solid var(--line);
    min-height:calc(100dvh - var(--topbar-h));
  }
  .tab { flex-direction:row; justify-content:flex-start; gap:12px; padding:11px 14px; border-radius:8px; }
  .tab:hover { background:var(--bg2); color:var(--txt2); }
  .tab.on { background:var(--blue-dim); }
  .tab span { font-size:0.66rem; }
  .tab-badge { position:static; margin-left:auto; }

  .view { padding:28px 32px 130px; grid-column:2; }
  .capture { left:210px; bottom:0; }
  .today { grid-template-columns:repeat(3,1fr); }
  .toast { bottom:calc(var(--capture-h) + 16px); }
}