/* Getränke Bärlin × SKYLNX – dunkles Design.
   Nur Farben: wird nach app.css und shell.css geladen und legt sich als
   eigene Ebene darüber - dunkle Flächen mit Petrol-Schimmer, eine
   Akzentfarbe (Petrol). Aufbau und Maße stehen in shell.css. Der
   Design-Knopf (theme.js) schaltet diese Datei ab, darunter liegt das helle
   Design. Die Bedeutung der Farben bleibt: Grün = sicher, Gelb = Rückfrage,
   Rot = Fehler. Alles steht in @media screen - gedruckt wird weiter hell. */

@media screen {

:root {
  color-scheme: dark;

  /* Akzent: Petrol */
  --brand: #3fb6a2;
  --brand-600: #35a08e;
  --brand-700: #86dccb;
  --brand-050: #11302c;
  --sky: #6fd9c4;
  --accent: var(--brand);
  --accent-dark: var(--brand-600);
  --on-accent: #04201b;

  /* Flächen, von tief nach hoch */
  --dark: #070b0d;
  --dark-2: #0f1619;
  --dark-line: rgba(255, 255, 255, 0.07);
  --dark-ink: #8a979c;
  --bg: #0b1114;
  --panel: #121b1f;
  --panel-2: #182327;
  --field: #0e1619;

  /* Schrift und Linien */
  --text: #e6edef;
  --ink: #e6edef;
  --ink-2: #b3c0c4;
  --muted: #7f8d92;
  --line: #1f2b30;
  --line-strong: #2d3b41;

  /* Bedeutung */
  --ok: #5cc98f;
  --ok-bg: #102820;
  --ok-line: #2f6f4d;
  --warn: #e9b949;
  --warn-bg: #2a2111;
  --warn-line: #b38a2a;
  --warn-text: #efc466;
  --err: #f0766b;
  --err-bg: #2c1515;
  --err-line: #7c3530;
  --err-solid: #a3352c;

  /* Kanäle und Typen, auf Dunkel abgestimmt */
  --green-ink: #6fd39c;
  --green-line: #2e6b4b;
  --blue-ink: #92bdf0;
  --blue-line: #34557f;
  --blue-bg: #13213a;
  --violet: #6a4bb8;
  --violet-ink: #bba6f0;
  --violet-line: #4d3c80;
  --brown-ink: #e0b48a;
  --brown-line: #6b4a2c;

  /* Schatten tragen das Schwarz des Untergrunds */
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 14px 30px -22px rgba(0, 0, 0, 0.95);
  --shadow-lift: 0 22px 48px -24px rgba(0, 0, 0, 0.95);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0) 46%);
}

body {
  background:
    radial-gradient(1100px 620px at 100% -8%, rgba(63, 182, 162, 0.11), transparent 62%),
    radial-gradient(900px 640px at 8% 112%, rgba(63, 182, 162, 0.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
}
a { color: var(--brand); }
::selection { background: var(--sky); color: var(--on-accent); }
.grain { opacity: 0.035; }

/* ---------- Leiste und Kopfzeile: nur Farben ---------- */
/* Aufbau und Maße stehen in shell.css und gelten für beide Designs. */

.side-mark { background: #f4f7f8; }
.side-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.side-link.on { color: var(--brand); }
.side-avatar { background: linear-gradient(145deg, #1f3a38, #16252a); border-color: var(--line-strong); color: var(--ink); }
.side-out:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }

.top .pill { color: var(--brand-700); }
.tool-btn:hover, .top-more[open] > .tool-btn { background: rgba(255, 255, 255, 0.06); }
.top-menu { background: var(--panel-2); border-color: var(--line-strong); }
.menu-row:hover { background: rgba(255, 255, 255, 0.05); }

/* ---------- Flächen ---------- */

.panel, .card, .stat, .stop, .tsum {
  background: var(--sheen), var(--panel);
  outline-color: var(--line);
}
.panel, .card, .stop, .tsum { outline: 1px solid var(--line); }
.stat { border-color: var(--line); }
.stat-key { background: var(--ok-bg); border-color: var(--ok-line); }
.card:hover { outline-color: var(--line-strong); }
.card-vorgang::before { background: #3a4a50; }
.card-foot { border-top-color: var(--line); }
.card-text { color: var(--ink-2); }
.card-items li { color: var(--ink); }
.card-items li.open { color: var(--warn-text); }
.panel.empty h2 { color: var(--ink); }
.change.done { background: var(--panel); }

/* ---------- Abzeichen ---------- */

.badge { background: transparent; border-color: var(--line-strong); color: var(--ink-2); }
.badge-whatsapp { border-color: var(--green-line); color: var(--green-ink); }
.badge-telefon { border-color: var(--blue-line); color: var(--blue-ink); }
.badge-mail { border-color: var(--violet-line); color: var(--violet-ink); }
.badge-persoenlich { border-color: var(--brown-line); color: var(--brown-ink); }
.badge-shop { color: var(--muted); }
.badge-neu { background: var(--brand-050); border-color: var(--brand-600); color: var(--brand-700); }
.badge-offen { background: var(--blue-bg); border-color: var(--blue-line); color: var(--blue-ink); }
.badge-erledigt { background: var(--panel-2); color: var(--muted); }
.badge-rueckfrage, .badge-aenderung, .badge-mindestwert, .badge-erinnert { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text); }
.badge-freigegeben, .badge-angebot { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.badge-verloren { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.badge-typ { background: #2a363b; border-color: #2a363b; color: var(--ink); }
.badge-typ.badge-reklamation, .badge-ausserhalb { background: var(--err-solid); border-color: var(--err-solid); color: #fff; }
.badge-typ.badge-frage, .badge-neukunde { background: var(--violet); border-color: var(--violet); color: #fff; }
.badge-typ.badge-kommission { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.badge-typ.badge-sonstiges { background: var(--line-strong); border-color: var(--line-strong); color: var(--ink); }
.chip { background: var(--panel-2); border-color: var(--line); color: var(--ink-2); }
.chip-wait { background: var(--brand-050); border-color: var(--brand-600); color: var(--brand-700); }
.rail i { background: #26343a; }
.rail i.on { background: var(--brand); }

/* ---------- Schaltflächen ---------- */

.btn { background: var(--panel-2); border-color: var(--line-strong); color: var(--ink); }
.btn:hover { background: var(--brand-050); border-color: var(--brand); color: var(--brand-700); }
.btn-primary {
  background: linear-gradient(135deg, #1b6d74, #2f9a8a); border-color: transparent; color: #fff;
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.9);
}
.btn-primary:hover { background: linear-gradient(135deg, #20808a, #38ae9c); border-color: transparent; color: #fff; box-shadow: 0 16px 28px -14px rgba(0, 0, 0, 0.9); }
.btn-danger { background: transparent; color: var(--err); border-color: var(--err-line); }
.btn-danger:hover { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.btn.dirty { border-color: var(--brand); color: var(--brand-700); }
.btn small { background: var(--brand-050); color: var(--brand-700); }
.btn-icon { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
.btn-quiet { background: none; border-color: transparent; color: var(--muted); }
.link { color: var(--brand); }
.link-btn:hover { color: var(--err); background: var(--err-bg); }

/* ---------- Felder und Listen ---------- */

input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], input[type="search"], input[type="tel"], input[type="email"], select, textarea {
  background: var(--field); border-color: var(--line-strong); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input[disabled], select[disabled] { background: var(--panel); color: var(--muted); }
kbd { background: var(--panel-2); border-color: var(--line); }
.raw { background: var(--panel-2); color: var(--ink-2); }
.dropdown { background: var(--panel-2); outline-color: var(--line-strong); border-color: var(--line-strong); }
.dropdown .opt { border-bottom-color: var(--line); }
.kv-row, .items td, table.eval td, .samples li { border-bottom-color: var(--line); }
.msg-text, .bubble { background: #1a2529; color: var(--ink); }
.msg-out .msg-text, .bubble-out { background: #12302a; }
.stopwatch { background: var(--field); }
.stop-handle { color: #4a5a60; }
.stop-nr { color: var(--on-accent); box-shadow: none; }
.stop { outline-color: var(--line); }
.driver-tab { background: var(--panel); border-color: var(--line); color: var(--ink); box-shadow: none; }
.driver-tab.on { background: var(--brand-050); border-color: var(--brand); color: var(--brand-700); }
.driver-tab.on .muted { color: var(--brand-700); }
.stop-driver { background: var(--field); border-color: var(--line-strong); color: var(--ink); }
.via label { outline-color: var(--line); }
.via label:has(input:checked) { background: var(--brand); color: var(--on-accent); }
.tour-map { background: #111a1d; }
.leaflet-marker-icon.stop-marker { color: var(--on-accent); }
.leaflet-marker-icon.stop-marker-depot { background: #2a363b; color: #fff; }
.leaflet-marker-icon.stop-marker.stop-marker-sel { background: var(--warn); color: #1b1405; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel-2); color: var(--ink); }

/* ---------- Meldungen ---------- */

.toast { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-strong); }
.toast.ok { background: #1d5b3e; border-color: #1d5b3e; color: #fff; }
.toast.error, .conn { background: #8e2c25; border-color: #8e2c25; color: #fff; }
.hinweis { background: var(--panel-2); border-color: var(--line-strong); }

/* ---------- Anmeldung ---------- */

.login-brand > img { background: #f4f7f8; }

}