:root {
  color-scheme: light dark;

  --color-primary: #0b2a4a;
  --color-bg: #f5f7fa;
  --color-text: #1a1a1a;
  --color-text-muted: #666;
  --color-text-faint: #999;
  --color-placeholder: #bbb;

  --color-surface: #ffffff;
  --color-surface-alt: #f7f7f7;
  --color-tint: #eef2f7;
  --color-readonly-bg: #eee;

  --color-border: #ddd;
  --color-border-soft: #ccc;
  --color-border-strong: #999;
  --color-border-faint: #eee;

  --color-accent: #0b2a4a;
  --color-danger: #8a2c2c;
  --color-success: #1b7a3d;
  --color-warn: #e67e00;
  --color-note-bg: #fff8e1;
  /* Im Hellmodus fuellt die Notiz-Zeile/-Karte komplett gelb (siehe
     --color-note-bg), ein zusaetzlicher Rand braucht es dafuer nicht -
     0px sorgt dafuer, dass der border-left unten im Hellmodus keinen
     Platz beansprucht (anders als "transparent", das trotzdem 3px breit
     waere). */
  --color-note-accent: transparent;
  --color-note-accent-width: 0px;
  --color-overlay: rgba(0, 0, 0, 0.4);
  --color-shadow: rgba(0, 0, 0, 0.1);
}

/* Dieselben Variablen mit dunklen Gegenstuecken - folgt automatisch der
   Geraete-/Browser-Einstellung, kein manueller Umschalter. --color-primary
   bleibt unveraendert: es faerbt immer eigene, in sich geschlossene
   Farbflaechen (Header, Buttons, Timer, Tabellenkopf) mit weisser Schrift,
   die in beiden Modi gleich funktionieren. --color-accent dagegen steht
   direkt auf einer Oberflaeche (z.B. Icon-Buttons auf Kartenhintergrund)
   und braucht deshalb im Dunkelmodus einen helleren Ton fuer genug
   Kontrast. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14171c;
    --color-text: #e8eaed;
    --color-text-muted: #a9b0ba;
    --color-text-faint: #767c86;
    --color-placeholder: #5f6670;

    --color-surface: #1e2229;
    --color-surface-alt: #1e2229; /*262b33*/
    --color-tint: #232a35;
    --color-readonly-bg: #1e2229;

    --color-border: #3a4048;
    --color-border-soft: #454c56;
    --color-border-strong: #5a6068;
    --color-border-faint: #2c3138;

    --color-accent: #7fb3e0;
    --color-danger: #c0392b;
    --color-success: #2ea043;
    --color-warn: #e08a2b;
    /* Volles Gelb wirkt im Dunkelmodus schnell schmutzig/braun - deshalb
       hier stattdessen dieselbe neutrale Kartenflaeche wie ueberall sonst,
       plus ein duenner gelber Rand links als Hinweis "das ist eine
       Notiz". */
    --color-note-bg: var(--color-surface);
    --color-note-accent: #e0a83c;
    --color-note-accent-width: 3px;
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-shadow: rgba(0, 0, 0, 0.5);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

.app-header {
  background: var(--color-primary);
  color: #fff;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-header h1 {
  font-size: 1.1rem;
  margin: 0;
}

.status {
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.15);
}

.status--online {
  background: var(--color-success);
}

.status--offline {
  background: var(--color-danger);
}

main {
  padding: 1rem;
  max-width: 640px;
  margin: 0 auto;
}

.back-link {
  color: #fff;
  text-decoration: none;
  font-size: 1.3rem;
  line-height: 1;
}

.card {
  background: var(--color-surface);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px var(--color-shadow);
}

.card h2 {
  margin-top: 0;
  font-size: 1rem;
}

label {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.25rem;
  font-size: 1rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 0.3rem;
  background: var(--color-surface);
  color: var(--color-text);
}

textarea {
  font-family: inherit;
  resize: vertical;
}

input[readonly] {
  background: var(--color-readonly-bg);
  color: var(--color-text-muted);
}

button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 0.3rem;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.mode-toggle {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

/* Hoehere Spezifitaet als ".modal-box label" (Formular-Feldabstand) noetig:
   sonst greift dessen margin-top nur beim ersten der zwei Radio-Labels
   (per :first-of-type zufaellig ausgenommen), das zweite bekaeme den
   Feldabstand mit und wuerde gegenueber dem ersten nach unten verrutschen. */
.modal-box .mode-toggle label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
  font-weight: normal;
}

.mode-toggle input {
  /* Feste, gleich grosse Box statt "width: auto" - der native Radio-Button
     kann je nach Browser im markierten Zustand geringfuegig anders gross
     gerendert werden, was sonst zu einem sichtbaren Versatz zwischen den
     beiden Optionen fuehrt. */
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

/* Protokollseite: nur die Tabelle scrollt, Kopf/Timer bleiben stehen. */
body.wide {
  /* Nur "overflow: hidden" reicht auf iOS nicht: Safari verschiebt die
     Seite trotzdem nach oben, wenn die Bildschirmtastatur ein Eingabefeld
     einblendet, und faehrt danach nicht zuverlaessig wieder zurueck.
     "position: fixed" auf dem body ist der uebliche iOS-feste Weg, das
     zu verhindern. */
  position: fixed;
  /* top+bottom (statt einer festen Hoehe wie 100vh) ueberlaesst die
     tatsaechliche Hoehe dem Browser - 100vh zaehlt auf iOS Safari die
     Werkzeugleiste mit, auch wenn sie gerade sichtbar/eingeblendet ist,
     wodurch der untere Rand des Inhalts dahinter verschwindet. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.wide .app-header {
  flex-shrink: 0;
  position: relative;
}

/* Ungleich breite Seitenelemente (Pfeil links, Status+Sync rechts) wuerden
   eine mittig im Freiraum liegende Ueberschrift aus der echten Kopfzeilen-
   mitte schieben. Deshalb wird der Titel unabhaengig vom Flex-Fluss absolut
   auf die Mitte des gesamten Headers gesetzt. */
body.wide .app-header h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

body.wide main {
  max-width: none;
  margin: 0;
  padding: 1rem 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

body.wide #protocol-header,
body.wide .timers,
body.wide .sync-console {
  flex-shrink: 0;
}

.sync-console {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  text-align: center;
  color: #fff;
}

.sync-console--ok {
  background: var(--color-success);
}

.sync-console--error {
  background: var(--color-danger);
}

body.wide .table-scroll,
body.wide .protocol-cards {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Timer-Widgets */
.timers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.timer {
  background: var(--color-primary);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  text-align: center;
  min-width: 130px;
}

.timer--overdue {
  background: var(--color-danger);
}

/* Passend zum roten Timer: genau die Felder markieren, die gerade faellig
   sind (!important, damit es unabhaengig von Zebra-Streifen/Notiz-Farbe
   immer sichtbar bleibt - das ist bewusst ein dringlicher Hinweis). */
#protocol-table td.field--overdue,
.chip.field--overdue {
  background: var(--color-danger) !important;
  color: #fff !important;
}

.chip.field--overdue .chip__label {
  color: #f3c9c9;
}

.timer__label {
  display: block;
  font-size: 0.85rem;
  opacity: 0.85;
}

.timer__value {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Tabelle */
.table-scroll {
  overflow-x: auto;
  background: var(--color-surface);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px var(--color-shadow);
  margin-bottom: 1rem;
}

#protocol-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
  font-size: 0.7rem;
}

#protocol-table th,
#protocol-table td {
  border: 1px solid var(--color-border);
  text-align: center;
}

#protocol-table td {
  padding: 0.85rem 0.35rem;
}

#protocol-table thead th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.65rem;
  padding: 0.2rem 0.35rem;
  white-space: normal;
}

.cell {
  cursor: pointer;
  min-width: 44px;
}

.cell:hover {
  background: var(--color-tint);
}

.cell--readonly {
  cursor: default;
  color: var(--color-text-muted);
}

.cell--num {
  font-weight: 600;
  min-width: auto;
  width: 2rem;
}

.drag-handle {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

#protocol-table tbody tr.row--dragging td {
  opacity: 0.4;
}

#protocol-table tbody tr.drop-target-before td {
  border-top: 3px solid var(--color-warn);
}

#protocol-table tbody tr.drop-target-after td {
  border-bottom: 3px solid var(--color-warn);
}

/* Zeilenweise alternierende Hintergrundfarbe; Buddytauchgang-Zeilen
   zaehlen dabei als eine gemeinsame "Zeile" (gleiche Farbe fuer die
   ganze Gruppe), damit Zusammengehoerigkeit und Lesbarkeit zugleich
   erkennbar sind. Notiz-Zeilen behalten ihre eigene Farbe. */
#protocol-table tr.row--odd td:not(.cell--note) {
  background-color: var(--color-surface-alt);
}

/* .cell:hover (oben) verliert gegen die Zebra-Streifen-Regel: die hat mit
   #protocol-table eine ID im Selektor, .cell:hover nur Klassen - dadurch
   blieb der Hover-Effekt auf den grauen (ungeraden) Zeilen unsichtbar,
   waehrend er auf den weissen (geraden) Zeilen normal funktionierte. Diese
   Regel ist genauso spezifisch (ebenfalls mit #protocol-table) und gewinnt
   deshalb auch dort. */
#protocol-table tr.row--odd td.cell:hover {
  background-color: var(--color-tint);
}

/* Zeilen innerhalb derselben Buddygruppe: gestrichelte statt durchgezogene
   Trennlinie, damit die Zusammengehoerigkeit auf einen Blick klar ist. */
#protocol-table tbody tr.row--continued td {
  border-top: 1px dashed var(--color-border-soft);
}

#protocol-table tbody tr.row--has-next td {
  border-bottom: 1px dashed var(--color-border-soft);
}

.cell__placeholder {
  color: var(--color-placeholder);
}

/* Alle Zellen der Notiz-Zeile (auch # und die Loeschen-Spalte) einheitlich
   eingefaerbt, nicht nur die Textzelle. Der gelbe Rand links (im Hellmodus
   0px breit, siehe --color-note-accent-width) sitzt bewusst nur an der
   ersten Zelle - das markiert die ganze Zeile, ohne dass jede einzelne
   Zelle einen eigenen Rand braucht. */
#protocol-table tr.note-row td {
  background: var(--color-note-bg);
}

#protocol-table tr.note-row td:first-child {
  border-left: var(--color-note-accent-width) solid var(--color-note-accent);
}

.cell--note {
  font-style: italic;
  cursor: pointer;
  white-space: pre-line;
}

/* Hoehere Spezifitaet als "#protocol-table td { text-align: center; padding:
   ... }" noetig (ID im Selektor schlaegt sonst die Klasse hier) - Notizen
   sollen links ausgerichtet sein, mit zusaetzlichem Einrueck-Padding analog
   zum PDF-Export. */
#protocol-table td.cell--note {
  text-align: left;
  padding-left: 2rem;
}

.cell--actions {
  white-space: nowrap;
}

.icon-btn {
  border: 1px solid var(--color-accent);
  background: var(--color-surface);
  color: var(--color-accent);
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1;
  padding: 0;
  margin: 0 0.1rem;
  cursor: pointer;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn .icon,
.back-link .icon {
  width: 1rem;
  height: 1rem;
  display: block;
  pointer-events: none;
}

.back-link {
  display: inline-flex;
  align-items: center;
}

/* Nur sichtbar im Expertenmodus (?expertmode=true) - deutlich als
   gefaehrliche Aktion abgesetzt, wie die anderen Loeschen-Buttons. */
.icon-btn--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* Zell-Editor Popup */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-box {
  background: var(--color-surface);
  border-radius: 0.5rem;
  padding: 1.25rem;
  width: 100%;
  max-width: 320px;
}

.modal-box label {
  margin-top: 1.1rem;
}

.modal-box label:first-of-type {
  margin-top: 0;
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.modal-actions button {
  flex: 1;
  margin-top: 0;
}

.btn-secondary {
  background: var(--color-border-soft);
  color: var(--color-text);
}

.btn-danger,
#cell-modal-clear,
#settings-force-resync {
  display: block;
  width: 100%;
}

.btn-danger {
  background: var(--color-surface);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.btn-danger-solid {
  background: var(--color-danger);
  color: #fff;
}

#confirm-modal-message {
  margin: 0;
  font-size: 1rem;
}

#new-protocol-btn {
  display: block;
  width: 100%;
  margin-top: 0;
  margin-bottom: 1rem;
}

.protocol-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.protocol-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-border-faint);
}

.protocol-list li:last-child {
  border-bottom: none;
}

.protocol-list__link {
  flex: 1;
  display: block;
  padding: 0.6rem 0;
  color: var(--color-text);
  text-decoration: none;
}

.empty-hint {
  color: var(--color-text-muted);
  font-style: italic;
}

.settings-hint {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

#protocol-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
}

#protocol-header-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

#protocol-header strong {
  font-weight: 600;
}

.ph-row2 {
  display: contents;
}

/* Kurzform des TaEF-Labels ist nur fuer die schmale Ansicht gedacht. */
.ph-label-short {
  display: none;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Karten-Ansicht (Smartphone/Hochformat) - gleiche Daten und Zell-
   Bearbeitung wie die Tabelle, siehe Media Query weiter unten fuer die
   Umschaltung. */
.protocol-cards {
  display: none;
}

.diver-card,
.note-card {
  background: var(--color-surface);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px var(--color-shadow);
  padding: 0.35rem 0.75rem;
  margin-bottom: 0.75rem;
}

.diver-card--odd {
  background: var(--color-surface-alt);
}

/* border-collapse betrifft nur Tabellen - bei Karten (Blockelemente)
   reicht eine gestrichelte Kante auf einer Seite, kein Konflikt moeglich. */
.diver-card--continued {
  margin-top: -0.75rem;
  padding-top: 0.35rem;
  border-top: 2px dashed var(--color-border-strong);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Beruehrende Kanten innerhalb einer Buddygruppe eckig lassen, damit die
   Karten wie eine grosse, durch die gestrichelte Linie geteilte Karte
   wirken statt wie einzelne gestapelte Kacheln. */
.diver-card--has-next {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.diver-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.diver-card__num {
  min-width: 1.5rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.diver-card__name {
  flex: 1;
  padding: 0.4rem;
  border-radius: 0.3rem;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  /* Absichtlich kein "gap": das wuerde auch neben komplett auf 0 kollabierten
     (chip--hidden) Chips Abstand reservieren. Der Abstand kommt stattdessen
     ueber die margin an jedem einzelnen .chip, die beim Ausblenden korrekt
     mit auf 0 geht. */
  margin-bottom: 0.4rem;
}

.chip-row:last-child {
  margin-bottom: 0;
}

.chip {
  min-width: 3rem;
  max-width: 12rem;
  padding: 0.35rem 0.6rem;
  margin: 0 0.4rem 0.4rem 0;
  background: var(--color-tint);
  border-radius: 0.4rem;
  cursor: pointer;
  text-align: center;
  max-height: 3rem;
  overflow: hidden;
  opacity: 1;
  transform: scale(1);
  transition: opacity 650ms ease, max-height 650ms ease, max-width 650ms ease,
    min-width 650ms ease, padding 650ms ease, margin 650ms ease, transform 650ms ease;
}

.chip--readonly {
  background: var(--color-readonly-bg);
  color: var(--color-text-muted);
  cursor: default;
}

/* Automatisch ausgeblendete Felder: sobald eine Stammdaten-Gruppe
   (Ausruestung, Planung, Sicherungstaucher, Signalmann, Ein-Druck) komplett
   ausgefuellt ist, loest sich sie sich von der Karte auf, statt abrupt zu
   verschwinden - siehe CARD_AUTO_HIDE_GROUPS in protocol.js. Der
   Toggle-Button erzwingt bei Bedarf die volle Ansicht (dann wird diese
   Klasse gar nicht erst vergeben). Kein display:none, damit .chip's
   transition (siehe oben) tatsaechlich ablaufen kann. */
.chip--hidden {
  opacity: 0;
  max-height: 0;
  max-width: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  transform: scale(0.85);
  pointer-events: none;
}

.chip__label {
  display: block;
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.chip__value {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
}

.note-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-note-bg);
  border-left: var(--color-note-accent-width) solid var(--color-note-accent);
  font-style: italic;
}

.note-card__text {
  flex: 1;
  cursor: pointer;
  white-space: pre-line;
  padding-left: 1rem;
}

#protocol-cards > .row--dragging {
  opacity: 0.4;
}

#protocol-cards > .drop-target-before {
  border-top: 3px solid var(--color-warn);
}

#protocol-cards > .drop-target-after {
  border-bottom: 3px solid var(--color-warn);
}

/* Waehrend des Ziehens auf schmalen Bildschirmen alle Karten auf Kopfzeile
   einklappen, damit die komplette Liste auf einmal sichtbar ist und man
   ueberhaupt sortieren kann. */
#protocol-cards.is-dragging .chip-row {
  display: none;
}

#protocol-cards.is-dragging .diver-card,
#protocol-cards.is-dragging .note-card {
  margin-bottom: 0.4rem;
  padding: 0.4rem 0.75rem;
}

#protocol-cards.is-dragging .diver-card__header {
  margin-bottom: 0;
}

#protocol-cards.is-dragging .diver-card--continued {
  margin-top: -0.4rem;
  padding-top: 0.65rem;
}

@media (max-width: 960px) {
  .table-scroll {
    display: none;
  }

  .protocol-cards {
    display: block;
  }

  /* Kopf-Kasten auf zwei kompakte Zeilen umstellen: OV (fett) / Icons / Datum
     in Zeile 1 ohne Label, TaEF/stellv. TaEF mit Kurzlabel in Zeile 2. */
  #protocol-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "ov actions datum"
      "row2 row2 row2";
    align-items: center;
    gap: 0.3rem 0.5rem;
  }

  #protocol-header-content {
    display: contents;
  }

  .ph-ov { grid-area: ov; text-align: left; }
  .ph-datum { grid-area: datum; text-align: right; white-space: nowrap; }

  .ph-row2 {
    grid-area: row2;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
  }

  .ph-taef,
  .ph-stellv {
    white-space: nowrap;
  }

  .ph-ov .ph-label,
  .ph-datum .ph-label {
    display: none;
  }

  .ph-ov-value {
    font-weight: bold;
  }

  .ph-label-full {
    display: none;
  }

  .ph-label-short {
    display: inline;
  }

  #protocol-header .header-actions {
    grid-area: actions;
    justify-content: center;
  }
}