/* ------------------------------------------------------------------ *
 * Farbtokens. Helles Schema als Standard, dunkles Schema wird aus der
 * Systemeinstellung des Betriebssystems uebernommen.
 * ------------------------------------------------------------------ */
:root {
  color-scheme: light;

  --bg:             #f4f6f8;
  --text:           #172033;
  --text-soft:      #4a5565;
  --muted:          #697586;
  --surface:        #fff;
  --surface-alt:    #f7f9fb;
  --border:         #e1e6ec;
  --border-soft:    #e5e9ee;
  --input-bg:       #fff;
  --input-border:   #cbd3dd;
  --shadow:         rgba(20, 35, 55, .06);
  --tooltip-shadow: rgba(16, 24, 40, .28);

  --accent:         #2463eb;
  --accent-text:    #fff;
  --accent-ring:    rgba(36, 99, 235, .2);
  --secondary:      #e8edf3;
  --secondary-text: #263448;
  --danger:         #d64545;
  --danger-text:    #fff;

  --error:          #c62828;
  --success:        #26734d;
  --separator-bg:   #fff7d6;

  --tooltip-bg:     #1d2939;
  --tooltip-text:   #fff;
  --tooltip-soft:   #e4e7ec;

  --overlay:        rgba(16, 24, 40, .45);

  /* Vom Diagramm ueber getComputedStyle ausgelesen. */
  --chart-grid:     #d9dee5;
  --chart-tick:     #e5e9ee;
  --chart-label:    #667085;
  --chart-dot-ring: #fff;
  --chart-sys:      #d14343;
  --chart-dia:      #2f6fed;
  --chart-pul:      #2f855a;
}

/* Die beiden folgenden Bloecke sind inhaltsgleich und muessen es bleiben.
   Getrennt noetig, weil CSS nicht auf Custom Properties selektieren kann:
     - ohne data-theme  -> Systemeinstellung entscheidet (auch ohne JavaScript)
     - data-theme="dark"  -> ausdrueckliche Wahl schlaegt die Systemeinstellung
     - data-theme="light" -> ausdrueckliche Wahl blockt das dunkle Schema ab */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:             #0f1520;
    --text:           #e6eaf0;
    --text-soft:      #aab4c2;
    --muted:          #8d99a9;
    --surface:        #18202d;
    --surface-alt:    #1f2937;
    --border:         #2a3444;
    --border-soft:    #26303e;
    --input-bg:       #111823;
    --input-border:   #3a4657;
    --shadow:         rgba(0, 0, 0, .45);
    --tooltip-shadow: rgba(0, 0, 0, .55);

    --accent:         #4f86f7;
    --accent-text:    #0b1018;
    --accent-ring:    rgba(79, 134, 247, .28);
    --secondary:      #273244;
    --secondary-text: #d3dbe6;
    --danger:         #e0645f;
    --danger-text:    #180a0a;

    --error:          #f2837d;
    --success:        #5ec48f;
    --separator-bg:   #3a3520;

    --tooltip-bg:     #e8edf4;
    --tooltip-text:   #10151d;
    --tooltip-soft:   #3c4655;

    --overlay:        rgba(0, 0, 0, .62);

    --chart-grid:     #2c3645;
    --chart-tick:     #343f50;
    --chart-label:    #9aa6b6;
    --chart-dot-ring: #18202d;
    --chart-sys:      #f2837d;
    --chart-dia:      #6f9dfa;
    --chart-pul:      #5ec48f;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:             #0f1520;
  --text:           #e6eaf0;
  --text-soft:      #aab4c2;
  --muted:          #8d99a9;
  --surface:        #18202d;
  --surface-alt:    #1f2937;
  --border:         #2a3444;
  --border-soft:    #26303e;
  --input-bg:       #111823;
  --input-border:   #3a4657;
  --shadow:         rgba(0, 0, 0, .45);
  --tooltip-shadow: rgba(0, 0, 0, .55);

  --accent:         #4f86f7;
  --accent-text:    #0b1018;
  --accent-ring:    rgba(79, 134, 247, .28);
  --secondary:      #273244;
  --secondary-text: #d3dbe6;
  --danger:         #e0645f;
  --danger-text:    #180a0a;

  --error:          #f2837d;
  --success:        #5ec48f;
  --separator-bg:   #3a3520;

  --tooltip-bg:     #e8edf4;
  --tooltip-text:   #10151d;
  --tooltip-soft:   #3c4655;

  --overlay:        rgba(0, 0, 0, .62);

  --chart-grid:     #2c3645;
  --chart-tick:     #343f50;
  --chart-label:    #9aa6b6;
  --chart-dot-ring: #18202d;
  --chart-sys:      #f2837d;
  --chart-dia:      #6f9dfa;
  --chart-pul:      #5ec48f;
}

* {
  box-sizing: border-box;
}

:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.hidden {
  display: none !important;
}

h1, h2, p {
  margin-top: 0;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  border-radius: 8px;
  padding: 10px 15px;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

button:hover {
  filter: brightness(.96);
}

button:disabled {
  opacity: .6;
  cursor: wait;
}

button.secondary {
  background: var(--secondary);
  color: var(--secondary-text);
}

button.danger {
  padding: 6px 10px;
  background: var(--danger);
  color: var(--danger-text);
  font-size: .85rem;
}

input {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 10px 11px;
  background: var(--input-bg);
  color: var(--text);
}

input:focus {
  outline: 2px solid var(--accent-ring);
  border-color: var(--accent);
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.muted {
  color: var(--muted);
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 18px var(--shadow);
  padding: 22px;
  margin-bottom: 20px;
}

.login-card {
  width: min(420px, 100%);
}

.login-card input {
  margin-bottom: 15px;
}

.login-card button {
  width: 100%;
}

.error {
  color: var(--error);
  margin-top: 10px;
  min-height: 20px;
}

.status {
  color: var(--success);
  min-height: 20px;
  margin-top: 10px;
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 15px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.theme-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: var(--secondary);
}

.theme-switch button {
  padding: 6px 12px;
  border-radius: 6px;
  background: transparent;
  color: var(--secondary-text);
  font-size: .85rem;
  font-weight: 600;
}

.theme-switch button:hover {
  filter: none;
  background: var(--surface-alt);
}

.theme-switch button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px var(--shadow);
}

.topbar h1 {
  margin-bottom: 2px;
}

.container {
  width: min(1400px, calc(100% - 32px));
  margin: 22px auto;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}

.section-head h2 {
  margin: 0;
}

.measurement-form {
  display: grid;
  grid-template-columns: 110px 110px 110px minmax(150px, 1fr) minmax(110px, 160px) auto;
  gap: 12px;
  align-items: end;
}

.range-head {
  align-items: center;
}

.range-controls {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.range-controls label {
  margin: 0 0 8px 5px;
}

.range-controls input {
  width: 90px;
}

.filter-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}

.filter-group {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.filter-group .filter-label {
  font-weight: 700;
  color: var(--secondary-text);
  margin-bottom: 9px;
}

.filter-controls label {
  margin: 0 0 9px;
  font-weight: 500;
  color: var(--muted);
}

.filter-controls input {
  width: auto;
  min-width: 0;
  padding: 8px 10px;
}

.filter-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.filter-info {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
  min-height: 20px;
}

.range-info {
  font-weight: 600;
  color: var(--text-soft);
  margin: 5px 0 12px;
  min-height: 22px;
}

/* Letztes Element der Auswahl-Karte – unten kein zusaetzlicher Abstand. */
.range-info.last {
  margin-bottom: 0;
}

/* Ohne aktiven Filter wuerde hier sonst eine leere Zeile Platz wegnehmen. */
.filter-info:empty {
  display: none;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 9px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  white-space: nowrap;
}

th {
  background: var(--surface-alt);
  font-size: .9rem;
}

td.num {
  text-align: center;
}

tr.separator td {
  background: var(--separator-bg);
  font-weight: 600;
}

.chart-toggles {
  display: flex;
  align-items: center;
  gap: 18px;
}

.chart-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.chart-toggles input {
  width: auto;
}

.chart-wrap {
  width: 100%;
  overflow-x: auto;
}

#chart {
  display: block;
  width: 100%;
  min-width: 700px;
  height: 380px;
}

.chart-tooltip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  padding: 8px 11px;
  border-radius: 8px;
  font-size: .85rem;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow: 0 6px 20px var(--tooltip-shadow);
}

.chart-tooltip .tt-date {
  font-weight: 600;
}

.chart-tooltip .tt-value {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  color: var(--tooltip-soft);
}

.chart-tooltip .tt-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--overlay);
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px var(--shadow);
  padding: 22px;
}

.modal h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.modal p {
  margin: 0 0 14px;
  color: var(--text-soft);
}

.modal-record {
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 18px;
  line-height: 1.6;
}

.modal-record .mr-date {
  font-weight: 600;
}

.modal-record .mr-values {
  color: var(--text-soft);
  font-size: .9rem;
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-actions button {
  flex: 1;
}

.modal-actions .danger {
  padding: 10px 15px;
  font-size: 1rem;
}

/* ---- Druckdialog ---- */
.print-range {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.print-range > div {
  flex: 1;
  /* Ohne min-width:0 schrumpft ein Datumsfeld nicht unter die Breite
     seines nativen Auswaehlers – der Dialog liefe sonst seitlich aus. */
  min-width: 0;
}

.print-range input {
  width: 100%;
}

.print-options {
  display: flex;
  gap: 18px;
  margin-bottom: 10px;
}

.print-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-weight: 500;
}

.print-options input {
  width: auto;
}

.print-hint {
  min-height: 20px;
  margin-bottom: 14px;
  font-weight: 600;
  color: var(--text-soft);
}

.print-hint.warn {
  color: var(--error);
}

.print-note {
  margin: 0 0 14px;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted);
}

.print-note em {
  font-style: normal;
  font-weight: 600;
  color: var(--text-soft);
}

/* Der Druckbereich existiert immer im DOM, wird aber nur beim Drucken
   sichtbar - so kann er mit echten Elementen aufgebaut werden. */
#printArea {
  display: none;
}

.global-error {
  margin: 0 0 25px;
}

@media (max-width: 900px) {
  .measurement-form {
    grid-template-columns: repeat(3, 1fr);
  }

  .measurement-form .date-field,
  .measurement-form .time-field {
    grid-column: span 1;
  }

  .measurement-form button {
    grid-column: span 3;
  }

  .filter-actions {
    margin-left: 0;
  }

  .range-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(100% - 18px, 1400px);
    margin: 10px auto;
  }

  .card {
    padding: 15px;
  }

  /* Titel oben, darunter Umschalter und Abmelden nebeneinander –
     sonst laeuft die Leiste auf schmalen Schirmen ueber den Rand. */
  .topbar {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .theme-switch {
    flex: 1;
    min-width: 0;
  }

  .theme-switch button {
    flex: 1;
    min-width: 0;
    padding: 7px 6px;
    font-size: .8rem;
  }

  .measurement-form {
    grid-template-columns: 1fr 1fr;
  }

  /* Datum und Uhrzeit gehoeren zusammen und bekommen eine eigene Zeile. */
  .measurement-form .date-field {
    grid-column: 1;
  }

  .measurement-form button {
    grid-column: 1 / -1;
  }

  /* Diagramm-Kopf: Ueberschrift und Kurven-Schalter passen nebeneinander
     nicht mehr in die Kartenbreite – "Puls" wurde sonst abgeschnitten. */
  .section-head {
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  .chart-toggles {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  /* Zwei Datumsfelder passen auf dem Handy nicht nebeneinander. */
  .print-range {
    flex-direction: column;
    gap: 10px;
  }

  .filter-controls {
    gap: 14px;
  }

  /* Schmale Schirme: Beschriftung ueber die beiden Felder, damit ein
     Datumsfeld nicht auf "tt.mm" abgeschnitten wird. */
  .filter-group {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    align-items: center;
  }

  .filter-group .filter-label {
    grid-column: 1 / -1;
    margin: 0;
  }

  .filter-controls label {
    margin: 0;
  }

  .filter-controls input {
    width: 100%;
  }

  .filter-actions {
    width: 100%;
    margin-left: 0;
  }

  .filter-actions button {
    flex: 1;
  }

  .range-controls {
    width: 100%;
  }

  .range-controls input {
    width: 80px;
  }

  .range-controls button {
    flex: 1;
  }

  .chart-toggles {
    gap: 12px;
  }
}

.total-count {
  margin-left: 14px;
  color: var(--muted);
  font-weight: 500;
}


/* ------------------------------------------------------------------ *
 * Ausdruck
 *
 * Bewusst mit festen Farben statt der Tokens: ein Ausdruck muss auch
 * dann schwarz auf weiss sein, wenn am Bildschirm das dunkle Schema
 * laeuft. Sonst kommt eine dunkle Flaeche aus dem Drucker.
 * ------------------------------------------------------------------ */
@media print {
  @page {
    size: A4 portrait;
    margin: 14mm 12mm;
  }



  /* Alles ausser dem Druckbereich verschwindet. */
  body > *:not(#printArea) {
    display: none !important;
  }

  :root,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  #printArea {
    display: block !important;
    font-size: 10.5pt;
    color: #000;
  }

  .print-head {
    border-bottom: 1.5pt solid #000;
    padding-bottom: 4mm;
    margin-bottom: 5mm;
  }

  .print-head h1 {
    margin: 0 0 1mm;
    font-size: 17pt;
  }

  .print-period {
    font-size: 12pt;
    font-weight: 600;
  }

  .print-meta {
    margin-top: 1mm;
    font-size: 9pt;
    color: #444;
  }

  .print-stats {
    margin-bottom: 5mm;
    font-size: 10pt;
    line-height: 1.7;
  }

  .print-stats b {
    display: inline-block;
    min-width: 22mm;
  }

  /* Das Diagramm bekommt eine eigene Seite im GEWOEHNLICHEN Hochformat,
     sein Inhalt wird darauf um 90 Grad gedreht. So bleibt das Blatt quer
     lesbar, ohne dass das Seitenformat wechselt - ein Wechsel laesst
     Firefox am Dokumentende eine leere Seite anlegen.

     Masse: A4 hoch ist 210 x 297 mm, abzueglich 12 mm seitlich und 14 mm
     oben/unten blieben rechnerisch 186 x 269 mm. Am gedruckten PDF
     nachgemessen sind es aber nur rund 267,8 mm Hoehe - das Blatt ist
     297,2 mm lang und der untere Rand faellt groesser aus. Ein Block von
     269 mm passt dadurch nicht mehr aufs Blatt und schiebt eine leere
     Folgeseite nach. Darum 255 mm: knapp 13 mm Reserve, die auch eine
     abweichende Randeinstellung im Druckdialog auffaengt. */
  .print-chart {
    break-before: page;
    break-inside: avoid;
    position: relative;
    height: 255mm;
    margin: 0;
    /* Der ungedrehte Block ist breiter als die Seite. Nach der Drehung
       passt er genau, manche Browser rechnen den Ueberlauf aber vor der
       Transformation und haengen dafuer eine Seite an. */
    overflow: hidden;
  }

  .print-chart-rot {
    position: absolute;
    top: 0;
    left: 0;
    width: 255mm;
    height: 186mm;
    /* Drehpunkt auf halber Hoehe beider Achsen: danach liegt der Block
       buendig im Bereich 0,0 bis 186 x 269 mm. */
    transform-origin: 93mm 93mm;
    transform: rotate(90deg);
  }

  .print-chart-rot > *:last-child {
    margin-bottom: 0;
  }

  .print-chart canvas {
    width: 100%;
    height: auto;
  }

  .print-chart .chart-title {
    margin: 0 0 3mm;
    font-size: 13pt;
    font-weight: 700;
  }

  .print-legend {
    margin: 3mm 0 0;
    font-size: 10pt;
  }

  .print-legend .k {
    margin-left: 7mm;
    font-size: 13pt;
    line-height: 1;
  }

  .print-legend .k:first-child { margin-left: 0; }

  .k-sys { color: #c62828; }
  .k-dia { color: #1446a0; }
  .k-pul { color: #1b6b3a; }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
  }

  /* Wiederholt die Kopfzeile auf jeder Folgeseite. */
  .print-table thead {
    display: table-header-group;
  }

  .print-table tr {
    break-inside: avoid;
  }

  /* Nur waagerechte Trennlinien, kein Gitternetz.
     Zeilenhoehen sind selten ganzzahlig, darum liegen Rahmenlinien auf
     Zwischenpixeln: haarduenne Linien wirken dadurch mal kraeftig, mal
     blass. Mit einer Linienart und etwas mehr Staerke faellt das weg. */
  /* Alle senkrechten Masse in ganzen Punkt: 14 + 4 + 4 + 1 = 23 pt je
     Zeile. Krumme Zeilenhoehen (vorher 28,81 px) legen die Trennlinien auf
     Zwischenpixel, wodurch sie beim Rastern mal kraeftig, mal blass oder
     gar nicht erscheinen – genau das Fehlerbild im PDF. */
  .print-table th,
  .print-table td {
    border: 0;
    /* 1,5 pt und kraeftig: Zeilenhoehen lassen sich nicht zuverlaessig auf
       ganze Punkt bringen (im Ausdruck gemessen: 22,5 pt), die Linien
       wandern dadurch durchs Pixelraster. Eine duenne, helle Linie wirkt
       dann mal kraeftig, mal fast unsichtbar. Breiter und dunkler bleibt
       sie bei jeder Rasterung gleich gut lesbar. */
    border-bottom: 1.5pt solid #777;
    padding: 4pt 2mm;
    line-height: 14pt;
    text-align: right;
    white-space: nowrap;
  }

  .print-table th {
    border-bottom: 1.5pt solid #000;
    font-weight: 700;
  }

  .print-table tbody tr:last-child td {
    border-bottom: 1.5pt solid #000;
  }

  .print-table td.left,
  .print-table th.left {
    text-align: left;
  }

  /* Feste Spaltenbreiten – sonst bekommt die Datumsspalte den ganzen
     Rest und die Zahlen stehen weit auseinander. */
  .print-table { table-layout: fixed; }
  .print-table .c-date { width: 32%; }
  .print-table .c-time { width: 18%; }
  .print-table .c-val  { width: 16.6%; }

  /* Im Ausdruck keine Flaechenfarben: die Bildschirmregeln (etwa die
     gelbe Trennzeile) wuerden sonst durchschlagen und je nach Farbschema
     unterschiedlich aussehen. */
  .print-table th,
  .print-table td,
  .print-table tr.separator td {
    background: transparent !important;
  }

  .print-table tr.separator td {
    font-style: italic;
    text-align: center;
    color: #555;
  }
}