/* Farben, Rundungen und Schatten sind dieselben wie in BS-CHAT und in der
   Handy-App unter /app: Türkis #00898f (Bonke-Systems), 14 px Rundung, weiche
   Schatten statt harter Linien. Wer am Vormittag im Büro bucht und mittags am
   Schrank mit dem Telefon, soll dieselbe Anwendung vor sich sehen.

   Was hier anders ist als auf dem Telefon, ist das Werkzeug: Bootstrap, weil
   die Bürooberfläche aus Tabellen und Formularen besteht. Die Marken liegen
   darüber, der Aufbau bleibt Bootstrap.

   Ergänzt um das, was BS-CHAT nicht kennt: die Betriebswahl in der Kopfleiste
   und das Rollenschild. Beides muss auffallen - wer für zwei Firmen bucht,
   darf sich nicht darüber täuschen, in welche er gerade schreibt. */

:root {
  --brand-teal: #00898f;
  --brand-teal-dark: #006c71;
  --brand-teal-light: #e3f4f4;
  --page-bg: #f3f5f6;
  --card-bg: #ffffff;
  --text-body: #1b2326;
  --text-muted: #66757a;
  --border-color: #dde3e5;
  --danger: #c62828;
  --danger-light: #fde8e8;
  --success: #2e7d32;
  --warn: #b45309;
  --warn-light: #fff4e0;
  --schatten: 0 1px 2px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06);
  --rund: 14px;

  /* Was Bootstrap selbst zeichnet - Felder, Tabellen, Aufklappmenüs - soll
     dieselben Töne treffen wie der Rest. Ohne das stünde in einem Eingabefeld
     Bootstraps Grau neben unserem. */
  --bs-body-color: var(--text-body);
  --bs-border-color: var(--border-color);
  --bs-secondary-color: var(--text-muted);
}

/* Dunkel nach Systemeinstellung. Das Attribut setzt das kurze Skript im Kopf
   des Rahmens; Bootstrap färbt ab 5.3 seine eigenen Bausteine danach, hier
   stehen nur die Töne des Hauses daneben.

   Gehangen wird am Attribut und nicht an "prefers-color-scheme", damit beide
   dasselbe lesen - stünde die Medienabfrage hier und das Attribut dort,
   liefen sie irgendwann auseinander. */
[data-bs-theme="dark"] {
  --brand-teal: #20a9ae;
  --brand-teal-dark: #5cc6ca;
  --brand-teal-light: #11373a;
  --page-bg: #0f1416;
  --card-bg: #1e2427;
  --text-body: #e6ecee;
  --text-muted: #93a2a7;
  --border-color: #2c3438;
  --danger: #ef5350;
  --danger-light: #3a1f20;
  --success: #66bb6a;
  --warn: #e0a048;
  --warn-light: #3a2d18;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4);

  /* Was Bootstrap selbst zeichnet, soll dieselben Flächen treffen. */
  --bs-body-bg: var(--page-bg);
  --bs-body-color: var(--text-body);
  --bs-border-color: var(--border-color);
  --bs-secondary-color: var(--text-muted);
  --bs-emphasis-color: var(--text-body);
  --bs-tertiary-bg: #161b1d;
}

html {
  font-size: 15px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

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

.inhalt { padding-top: 1.25rem; }

.app-footer {
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: center;
  padding: 0.9rem 0;
  margin-top: 2rem;
}

a { color: var(--brand-teal-dark); }

.kleiner { font-size: 0.85rem; }

.btn-primary {
  background-color: var(--brand-teal);
  border-color: var(--brand-teal);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brand-teal-dark);
  border-color: var(--brand-teal-dark);
}

.btn-outline-primary {
  color: var(--brand-teal-dark);
  border-color: var(--brand-teal);
}

.btn-outline-primary:hover {
  background-color: var(--brand-teal);
  border-color: var(--brand-teal);
}

.form-control:focus, .form-select:focus, .btn:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 0.2rem rgba(0, 137, 143, 0.18);
}

/* Runde Knöpfe und weich gerundete Felder - dieselbe Form wie auf dem Telefon.
   Die Höhe bleibt die von Bootstrap: Am Schreibtisch wird mit der Maus
   getroffen, da kostet die Daumenhöhe nur Platz. */
.btn { border-radius: 2rem; padding-left: 1.1rem; padding-right: 1.1rem; }

.btn-sm { border-radius: 2rem; padding-left: .8rem; padding-right: .8rem; }

.form-control, .form-select { border-radius: .65rem; }

.form-control-sm, .form-select-sm { border-radius: .55rem; }

.input-group > .form-control, .input-group > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.input-group > .input-group-text:first-child {
  border-top-left-radius: .65rem;
  border-bottom-left-radius: .65rem;
}

.form-check-input:checked { background-color: var(--brand-teal); border-color: var(--brand-teal); }

.form-check-input:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 0.2rem rgba(0, 137, 143, 0.18);
}

.alert { border-radius: var(--rund); }

.table { --bs-table-border-color: var(--border-color); }

.feld-kurz { max-width: 7rem; }

.feld-mittel { max-width: 16rem; }

/* ---------- Kopfleiste ---------- */

/* Helle Leiste wie in BS-CHAT. Der dunkle Balken von früher war aus BS-WORKLIST
   übernommen; er trennt die Seite schärfer ab, als sie getrennt gehört, und
   zwingt jedes Schild darin zu einer eigenen hellen Farbe. */
.navbar {
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-body) !important;
  font-weight: 600;
  padding: 0.7rem 0;
}

.brand-text { letter-spacing: 0.06em; font-size: 0.95rem; }

.navbar .nav-link {
  color: var(--text-muted) !important;
  font-weight: 500;
  padding: 0.8rem 0.95rem !important;
  border-bottom: 3px solid transparent;
}

.navbar .nav-link:hover { color: var(--text-body) !important; background-color: var(--page-bg); }

.navbar .nav-link.active {
  color: var(--brand-teal-dark) !important;
  font-weight: 700;
  border-bottom-color: var(--brand-teal);
}

.navbar-toggler { border-color: var(--border-color); }

/* Das Bootstrap-Symbol für die Umschalttaste ist für dunklen Grund gezeichnet -
   auf heller Leiste wäre es unsichtbar. */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2366757a' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2393a2a7' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-user {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.btn-abmelden {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 0.4rem;
  line-height: 1;
}

.btn-abmelden:hover { color: var(--text-body); }

.btn-abmelden svg { width: 1rem; height: 1rem; }

/* ---------- Betrieb in der Kopfleiste ----------

   Türkis abgesetzt und nicht in der Farbe der übrigen Kopfleiste: Der gewählte
   Betrieb entscheidet, in welchen Bestand gebucht wird. Er muss ins Auge fallen,
   auch wenn niemand hinsieht. */

.betriebswahl, .betrieb-fest {
  background-color: var(--brand-teal-light);
  border: 1px solid transparent;
  color: var(--brand-teal-dark);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.6rem;
}

.betriebswahl { cursor: pointer; }

.betriebswahl:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 137, 143, 0.3);
}

/* Die Liste selbst wird vom Betriebssystem gezeichnet - dunkle Schrift, damit
   sie dort lesbar bleibt. */
.betriebswahl option { color: var(--text-body); background: var(--card-bg); }

.betrieb-fest { cursor: default; }

/* ---------- Karten und Überschriften ---------- */

.karte {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
}

.karte > h2, .karte > h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.85rem; }

.formular-schmal { max-width: 24rem; }

.angaben {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 0.9rem;
}

.angaben dt { font-weight: 600; color: var(--text-muted); }

.angaben dd { margin: 0; }

/* ---------- Rolle ---------- */

.rollenschild {
  display: inline-block;
  background: var(--brand-teal-light);
  color: var(--brand-teal-dark);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
}

/* ---------- Zugänge je Betrieb (Benutzerseite) ---------- */

.zugaenge {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.zugang-form { min-width: 11rem; }

.zugang-form label {
  display: block;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

/* ---------- Kacheln der Übersicht ---------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.9rem;
}

.kachel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--brand-teal);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
}

/* Noch nicht gebaut: sichtbar blass, damit auf der Übersicht niemand darauf
   wartet, dass sich etwas tut. */
.kachel-offen { border-top-color: #b9c4cc; }

.kachel-kopf { font-weight: 600; margin-bottom: 0.3rem; }

.kachel-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  flex: 1 1 auto;
  margin-bottom: 0.5rem;
}

.kachel-stufe {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--page-bg);
  border-radius: 10px;
  padding: 0.1rem 0.4rem;
}

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

.anmeldung {
  max-width: 22rem;
  margin: 3.5rem auto;
}

/* Trennstrich zwischen „Mit BS-CHAT anmelden" und dem Weg über Anmeldename und Kennwort. */
.oder {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0 0.9rem;
  color: var(--bs-secondary, #6c757d);
  font-size: 0.82rem;
}

.oder::before,
.oder::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--bs-border-color, #dee2e6);
}

/* ---------- Importvorschau ----------

   Eine Zeile je Satz mit Häkchen. Abgewählte stehen blasser da, mit dem Grund
   daneben - man soll auf einen Blick sehen, was nicht mitkommt und warum. */

.importliste {
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.importzeile {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .3rem .6rem;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  font-size: .88rem;
}

.importzeile:last-child { border-bottom: none; }

.importzeile:hover { background: var(--page-bg); }

.importzeile.abgewaehlt { background: var(--page-bg); color: var(--text-muted); }

.importtext { flex: 0 1 auto; font-weight: 500; }

.importgrund { margin-left: auto; color: var(--warn); white-space: nowrap; }

/* ---------- Ausgabe: Nummernwahl ----------

   Die eingeschlagenen Nummern als Kacheln, nicht als Liste: Am Schrank wird eine
   Nummer angetippt, nicht gelesen. Die Fläche ist absichtlich groß genug für
   einen Finger. */

.ausgabegruppe { border-bottom: 1px solid var(--border-color); padding: .6rem .7rem; }

.ausgabegruppe:last-child { border-bottom: none; }

.ausgabekopf { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }

.ausgabekopf .kleiner { font-weight: 400; }

.nummernwahl { display: flex; flex-wrap: wrap; gap: .35rem; }

.nummer {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: .25rem .5rem;
  font-size: .85rem;
  cursor: pointer;
  background: var(--card-bg);
}

.nummer:hover { border-color: var(--brand-teal); }

.nummer:has(input:checked) {
  background: var(--brand-teal-light);
  border-color: var(--brand-teal);
  font-weight: 600;
}

/* ---------- Hauptbuch ---------- */

.vorgangszeile { padding: .6rem .9rem; margin-bottom: .45rem; }

.importzeile.ueberfaellig { background: var(--warn-light); }

.verlustkarte { border-top-color: var(--danger); background: var(--danger-light); }

/* --- Unterschrift am Vorgang (Stufe 3) ---------------------------------- */

/* Weisser Grund und Rahmen: Das PNG ist selbst weiss hinterlegt, aber ohne
   Rahmen schwebt der Strich im Nichts und sieht nicht aus wie das, was er ist -
   eine Unterschrift auf einem Blatt. Die Hoehe ist begrenzt, damit ein Tablet
   mit grosser Zeichenflaeche die Seite nicht sprengt. */
.unterschriftsbild {
  display: block;
  max-width: 22rem;
  max-height: 7rem;
  width: auto;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: .25rem .5rem;
  margin-bottom: .6rem;
}

/* --- Was anliegt (Stufe 4) ---------------------------------------------- */

/* Die Zahl im Menue. Sie muss auffallen, ohne zu blinken: Wer sie taeglich
   sieht, soll sie nicht ausblenden lernen. Rot bleibt deshalb dem Dringenden
   vorbehalten - Verlust und Austritt -, alles andere ist ruhig. */
.meldungszahl {
  display: inline-block;
  min-width: 1.35rem;
  padding: 0 .35rem;
  margin-left: .25rem;
  border-radius: 999px;
  background: var(--brand-teal-light);
  color: var(--brand-teal-dark);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
  vertical-align: 1px;
}

.meldungszahl.dringend { background: var(--danger); color: #fff; }

.meldungskarte { border-left: 4px solid var(--brand-teal); }
.meldungskarte.dringend { border-left-color: var(--danger); }

.meldungsschild {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .1rem .45rem;
  border-radius: 10px;
  background: var(--brand-teal-light);
  color: var(--brand-teal-dark);
}

.meldungsschild.dringend { background: var(--danger-light); color: var(--danger); }

/* --- Zaehlliste --------------------------------------------------------- */

/* Die Zeile wird beim Zaehlen mit dem Daumen getroffen, nicht mit der Maus -
   deshalb ist die Trefferflaeche gross und der Zustand am Rand ablesbar. */
.zaehlzeile { border-left: 4px solid transparent; }
.zaehlzeile.gezaehlt { border-left-color: var(--success); background: rgba(46, 125, 50, .08); }
.zaehlzeile.abweichung { border-left-color: var(--warn); background: var(--warn-light); }

.zaehlnummer {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Die Menueleiste darf umbrechen statt waagerecht ueber den Rand zu laufen.
   Das ist die Rueckfallebene: Das Auslagern selten gebrauchter Punkte in
   "Verwalten" haelt sie kurz, aber ein langer Betriebsname oder eine grosse
   Schrift koennen sie trotzdem sprengen. Ein waagerechter Bildlauf in der
   Kopfleiste faellt niemandem auf - die Punkte sind dann einfach fort. */
.navbar-nav { flex-wrap: wrap; }

/* Das Aufklappmenue haengt an einer hellen Leiste und braucht deshalb Kante
   und Schatten - sonst steht es ohne Grenze auf der Seite. */
.navbar .dropdown-menu {
  border-color: var(--border-color);
  border-radius: 12px;
  box-shadow: var(--schatten);
}

.navbar .dropdown-item.active, .navbar .dropdown-item:active {
  background-color: var(--brand-teal-light);
  color: var(--brand-teal-dark);
}

/* Eine stillgelegte Niederlassung steht blasser da: Sie ist aus den
   Auswahlfeldern fort, aber nicht geloescht - und das soll man auf der
   Pflegeseite sehen, ohne es zu lesen. */
.karte.stillgelegt { opacity: .62; }

/* ---------- Unterschrift ---------- */

/* Dieselbe Flaeche wie in der Handy-App. Breit und flach, mit einer Linie
   darunter: Ohne die Linie zeichnen die Leute in die Mitte, und auf der
   Quittung wirkt das Bild verrutscht.

   Sie bleibt auch im Dunkelmodus ein weisses Blatt - unterschrieben wird mit
   dunkler Tinte, und genau so geht das Bild in die Quittung. Linie und Hinweis
   darin tragen deshalb feste Farben; die hellen Toene des Dunkelmodus waeren
   auf Weiss nicht zu sehen. */
.zeichenflaeche {
  position: relative;
  margin-top: .4rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  height: 10rem;
  max-width: 34rem;
  overflow: hidden;
  /* Ohne das scrollt ein Finger auf dem Tastbildschirm die Seite, statt zu
     zeichnen - der Browser nimmt die Geste sonst fuer sich. */
  touch-action: none;
  cursor: crosshair;
}

.zeichenflaeche canvas { display: block; width: 100%; height: 100%; }

.zeichenlinie {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 2.1rem;
  border-bottom: 1px solid #c9d2d5;
}

.zeichenwink {
  position: absolute;
  left: 1.3rem;
  bottom: .7rem;
  font-size: .85rem;
  color: #8b989d;
  pointer-events: none;
}

/* ---------- Uebersicht: Kennzahlen ---------- */

/* Die Zahl ist die Aussage, nicht die Beschriftung darunter - deshalb steht
   sie gross und zuerst. Wer die Seite morgens aufmacht, soll sie im
   Voruebergehen lesen koennen. */
.zahl-gross {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-teal-dark);
  font-variant-numeric: tabular-nums;
}

.zahl-gross.dringend { color: var(--danger); }

.kachel.kennzahl {
  text-decoration: none;
  color: inherit;
  gap: .15rem;
}

.kachel.kennzahl:hover { border-color: var(--brand-teal); }

.kachel.kennzahl .kachel-kopf { margin-bottom: 0; }

.kachel.kennzahl .kachel-text { margin-bottom: 0; }

.kachel.warnt { border-top-color: var(--danger); }

/* Ueberschrift ueber einer Gruppe von Kacheln - leise, sie ordnet nur. */
.bereichskopf {
  margin: 1.4rem 0 .5rem;
  color: var(--brand-teal-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .8rem;
  font-weight: 700;
}

.bereichskopf:first-of-type { margin-top: 0; }

/* Die Meldungskarte oben ist anklickbar und soll das auch aussehen. */
a.karte { color: inherit; display: block; }

a.karte:hover { border-color: var(--brand-teal); }

/* Das Zahnrad oben rechts fuehrt in die Verwaltung der Anwendung. Steht man
   auf einer ihrer Seiten, ist es tuerkis - sonst wuesste niemand, wo er
   gerade ist, seit der Menuepunkt aus der Leiste fort ist. */
.btn-abmelden.aktiv { color: var(--brand-teal-dark); }

.btn-abmelden::after { display: none; }