/*
 * ARIKRO App – Design-Vorlage (Theme)
 * ------------------------------------
 * Alle Farben, Schriften, Schriftgrößen, Rundungen, Abstände und Schatten stehen nur hier,
 * übernommen aus dem Stil des ARIKRO Hub (dunkel mit Bernstein-Akzent, hell wie Palette „hell-1“).
 * In app.css und app.js stehen nur Verweise wie var(--accent).
 * Dunkel ist der Standard; hell folgt dem Gerät oder der Wahl im Menü (data-theme am <html>).
 */
:root {
  color-scheme: dark;

  /* Flächen */
  --bg: #0f1419;
  --bg-kopf: #121920;
  --panel: #161d24;
  --panel-2: #1c252e;
  --overlay: rgba(5, 8, 11, 0.72);
  --shadow: rgba(0, 0, 0, 0.45);

  /* Linien */
  --border: #243039;
  --border-2: #2a3742;
  --divider: #1e272f;

  /* Text */
  --text: #e6edf3;
  --text-2: #c9d3dc;
  --text-strong: #ffffff;
  --muted: #9aa7b2;
  --customer: #8fb3d9;

  /* Akzent und Zustände */
  --accent: #f5a524;
  --accent-fg: #1a1203;
  --green: #4ade80;
  --red: #dc2626;
  --ok-bg: #163322;     --ok-fg: #86efac;     --ok-border: #1f4d33;
  --warn-bg: #4a3410;   --warn-fg: #ffd58a;   --warn-border: #6b4c16;
  --danger-bg: #5a1e1e; --danger-fg: #ffb4b4; --danger-border: #6b2a2a;
  --info-bg: #1e3348;   --info-fg: #a9d2ff;

  /* Case-Status wie im Hub (Pillenform) */
  --status-offen-bg: #1e3a5c;    --status-offen-fg: #b0d4ff;
  --status-active-bg: #4a3410;   --status-active-fg: #ffd58a;
  --status-pending-bg: #3b2a5c;  --status-pending-fg: #d4bfff;
  --status-standby-bg: #2c3744;  --status-standby-fg: #c9d3dc;
  --status-closed-bg: #163322;   --status-closed-fg: #86efac;

  /* „läuft“ / aktiv: intensives Blau (Özden 31.10.), neu im Theme, in allen Farbsätzen */
  --aktiv: #2f81f7;
  --aktiv-bg: #12233f;
  --aktiv-fg: #79b0ff;
  --aktiv-border: #1f4a8a;

  /* Unterschriftsfeld: Papier und Tinte bleiben in beiden Themen gleich */
  --unterschrift-bg: #ffffff;
  --unterschrift-tinte: #0f1419;

  /* Schrift */
  --font: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Textformate (jeder Text folgt einem davon) */
  --fs-seitentitel: 22px;
  --fs-bereich: 12px;
  --fs-fliess: 16px;
  --fs-tabelle: 15px;
  --fs-hinweis: 13px;
  --fs-zeit: 44px;
  --fw-normal: 400;
  --fw-mittel: 500;
  --fw-fett: 600;
  --lh: 1.4;
  --ls-bereich: 0.08em;

  /* Rundungen, Abstände, Größen */
  --r-klein: 6px;
  --r-mittel: 10px;
  --r-knopf: 8px;        /* Knöpfe wie im Hub (--radius-md) */
  --r-pille: 999px;
  --abst-1: 4px;
  --abst-2: 8px;
  --abst-3: 12px;
  --abst-4: 16px;
  --abst-5: 24px;
  --tap: 48px;
  --tab-hoehe: 64px;
  --kopf-hoehe: 56px;
  --app-breite: 480px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f6f8;
    --bg-kopf: #ffffff;
    --panel: #ffffff;
    --panel-2: #f1f4f7;
    --overlay: rgba(20, 30, 40, 0.45);
    --shadow: rgba(20, 30, 40, 0.18);
    --border: #dde3e9;
    --border-2: #c9d2db;
    --divider: #e8edf2;
    --text: #1b2430;
    --text-2: #2f3b48;
    --text-strong: #000000;
    --muted: #5d6b7a;
    --customer: #1d5fa6;
    --accent: #d98a00;
    --green: #15803d;
    --red: #c62828;
  --aktiv: #2f81f7;
  --aktiv-bg: #dbe8fd;
  --aktiv-fg: #1a5fc8;
  --aktiv-border: #9cc2fa;
    --ok-bg: #dcfce7;     --ok-fg: #14532d;     --ok-border: #86efac;
    --warn-bg: #fff1d6;   --warn-fg: #7a4b00;   --warn-border: #f5c76a;
    --danger-bg: #fde2e2; --danger-fg: #8b1a1a; --danger-border: #f5b5b5;
    --info-bg: #dbeafe;   --info-fg: #1d4f91;
    --status-offen-bg: #dbeafe;    --status-offen-fg: #1e3a8a;
    --status-active-bg: #fff1d6;   --status-active-fg: #7a4b00;
    --status-pending-bg: #ede9fe;  --status-pending-fg: #4c1d95;
    --status-standby-bg: #e2e8f0;  --status-standby-fg: #334155;
    --status-closed-bg: #dcfce7;   --status-closed-fg: #14532d;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f8;
  --bg-kopf: #ffffff;
  --panel: #ffffff;
  --panel-2: #f1f4f7;
  --overlay: rgba(20, 30, 40, 0.45);
  --shadow: rgba(20, 30, 40, 0.18);
  --border: #dde3e9;
  --border-2: #c9d2db;
  --divider: #e8edf2;
  --text: #1b2430;
  --text-2: #2f3b48;
  --text-strong: #000000;
  --muted: #5d6b7a;
  --customer: #1d5fa6;
  --accent: #d98a00;
  --green: #15803d;
  --red: #c62828;
  --aktiv: #2f81f7;
  --aktiv-bg: #dbe8fd;
  --aktiv-fg: #1a5fc8;
  --aktiv-border: #9cc2fa;
  --ok-bg: #dcfce7;     --ok-fg: #14532d;     --ok-border: #86efac;
  --warn-bg: #fff1d6;   --warn-fg: #7a4b00;   --warn-border: #f5c76a;
  --danger-bg: #fde2e2; --danger-fg: #8b1a1a; --danger-border: #f5b5b5;
  --info-bg: #dbeafe;   --info-fg: #1d4f91;
  --status-offen-bg: #dbeafe;    --status-offen-fg: #1e3a8a;
  --status-active-bg: #fff1d6;   --status-active-fg: #7a4b00;
  --status-pending-bg: #ede9fe;  --status-pending-fg: #4c1d95;
  --status-standby-bg: #e2e8f0;  --status-standby-fg: #334155;
  --status-closed-bg: #dcfce7;   --status-closed-fg: #14532d;
}