/* ============================================================
   PNRM-Tourenplanungstool — Oberflaeche
   Farb-/Typo-Tokens: Palliativ Netzwerk Rhein-Maas Design-System
   (petrol teal, deep navy, sky, magenta-Akzent, Open Sans)
   ============================================================ */

:root {
  --pnrm-teal-50:  #ecf8fb;
  --pnrm-teal-100: #d3eff5;
  --pnrm-teal-200: #a7dfeb;
  --pnrm-teal-400: #2fadcd;
  --pnrm-teal-500: #0098bd;
  --pnrm-teal-600: #007fa1;
  --pnrm-teal-700: #006783;
  --pnrm-navy-100: #c8d5de;
  --pnrm-navy-700: #06384f;
  --pnrm-navy-900: #002c40;
  --pnrm-sky-50:  #f4fafc;
  --pnrm-sky-100: #e8f4f8;
  --pnrm-sky-200: #cfe9f1;
  --pnrm-aqua-500: #12c2c9;
  --pnrm-magenta-500: #fb1d9a;
  --pnrm-gray-0:   #ffffff;
  --pnrm-gray-50:  #f4f6f7;
  --pnrm-gray-100: #e9edef;
  --pnrm-gray-200: #dce2e5;
  --pnrm-gray-300: #c3ccd1;
  --pnrm-gray-400: #9aa6ad;
  --pnrm-gray-500: #6f7c83;
  --pnrm-gray-700: #444b4f;
  --pnrm-gray-900: #1f2427;
  --status-info-bg: var(--pnrm-sky-100);
  --status-info-fg: var(--pnrm-teal-700);
  --status-success-bg: #eaf5ee;
  --status-success-fg: #2c7a51;
  --status-warning-bg: #fdf3e4;
  --status-warning-fg: #b07a23;
  --status-danger-bg: #fcecec;
  --status-danger-rule: #d23b46;
  --status-danger-fg: #a72b34;
  --schatten-karte: 0 2px 10px rgba(6, 56, 79, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Open Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pnrm-gray-700);
  background: var(--pnrm-sky-50);
}

/* --- Kopfzeile ------------------------------------------------ */
header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 28px;
  background: var(--pnrm-gray-0);
  border-bottom: 1px solid var(--pnrm-gray-200);
}
header img { height: 44px; }
header h1 {
  font-size: 19px;
  color: var(--pnrm-navy-700);
  margin: 0;
  font-weight: 700;
}
header h1 small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--pnrm-gray-500);
}
.entwurf-badge {
  margin-left: auto;
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
  border-radius: 999px;
  padding: 3px 14px;
  font-size: 12px;
  font-weight: 600;
}
.benutzer-bereich { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pnrm-gray-500); }
.benutzer-bereich:empty { display: none; }
.benutzer-bereich .name { color: var(--pnrm-navy-700); font-weight: 600; }
.benutzer-bereich button {
  border: 1px solid var(--pnrm-gray-300); background: var(--pnrm-gray-0);
  color: var(--pnrm-teal-600); border-radius: 999px; padding: 4px 12px;
  font: inherit; font-size: 12px; cursor: pointer;
}
.benutzer-bereich button:hover { background: var(--pnrm-teal-50); }
.benutzer-bereich a.knopf-dienstplan {
  border: 1px solid var(--pnrm-teal-600); background: var(--pnrm-teal-600);
  color: #fff; border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.benutzer-bereich a.knopf-dienstplan:hover { opacity: 0.92; }

/* --- Navigation ------------------------------------------------ */
nav {
  display: flex;
  gap: 4px;
  padding: 0 28px;
  background: var(--pnrm-gray-0);
  border-bottom: 1px solid var(--pnrm-gray-200);
}
nav button {
  border: 0;
  background: none;
  padding: 12px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pnrm-gray-500);
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
nav button:hover { color: var(--pnrm-teal-600); }
nav button.aktiv {
  color: var(--pnrm-navy-700);
  border-bottom-color: var(--pnrm-magenta-500);
}

main { padding: 24px 28px 60px; max-width: 1400px; margin: 0 auto; }

.seite { display: none; }
.seite.aktiv { display: block; }

h2 {
  color: var(--pnrm-navy-700);
  font-size: 22px;
  margin: 6px 0 2px;
}
h2 + .unterstrich {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--pnrm-magenta-500);
  margin-bottom: 18px;
}
h3 { color: var(--pnrm-navy-700); font-size: 16px; margin: 22px 0 8px; }

/* --- Auswahlleiste (Tour/Jahr/KW) ------------------------------ */
.auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  background: var(--pnrm-gray-0);
  border: 1px solid var(--pnrm-gray-200);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: var(--schatten-karte);
  margin-bottom: 18px;
}
.feld { display: flex; flex-direction: column; gap: 2px; }
.feld label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pnrm-gray-500);
}
select, input[type="text"], input[type="number"], input[type="time"], input[type="date"], textarea {
  font: inherit;
  font-size: 14px;
  color: var(--pnrm-gray-900);
  border: 1px solid var(--pnrm-gray-300);
  border-radius: 8px;
  padding: 7px 10px;
  background: var(--pnrm-gray-0);
}
select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--pnrm-teal-400);
  outline-offset: 1px;
  border-color: var(--pnrm-teal-400);
}

/* --- Knoepfe ---------------------------------------------------- */
button.primaer, button.sekundaer, button.leise {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.15s ease;
}
button.primaer {
  background: var(--pnrm-teal-500);
  border: 1px solid var(--pnrm-teal-500);
  color: #fff;
}
button.primaer:hover { background: var(--pnrm-teal-600); }
button.sekundaer {
  background: var(--pnrm-gray-0);
  border: 1px solid var(--pnrm-teal-500);
  color: var(--pnrm-teal-600);
}
button.sekundaer:hover { background: var(--pnrm-teal-50); }
button.leise {
  background: none;
  border: 0;
  color: var(--pnrm-gray-500);
  padding: 6px 10px;
}
button.leise:hover { color: var(--status-danger-fg); }

/* --- KPI-Kacheln ------------------------------------------------ */
.kpis { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.kpi {
  flex: 1 1 150px;
  background: var(--pnrm-gray-0);
  border: 1px solid var(--pnrm-gray-200);
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: var(--schatten-karte);
}
.kpi .wert { font-size: 24px; font-weight: 700; color: var(--pnrm-teal-600); }
.kpi .beschriftung { font-size: 12px; color: var(--pnrm-gray-500); }

/* --- Tabellen --------------------------------------------------- */
.tabellen-halter { overflow-x: auto; background: var(--pnrm-gray-0); border: 1px solid var(--pnrm-gray-200); border-radius: 10px; box-shadow: var(--schatten-karte); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pnrm-gray-500);
  background: var(--pnrm-sky-100);
  padding: 9px 10px;
  border-bottom: 1px solid var(--pnrm-gray-200);
  white-space: nowrap;
}
td { padding: 8px 10px; border-bottom: 1px solid var(--pnrm-gray-100); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.tag-trenner td {
  background: var(--pnrm-sky-50);
  color: var(--pnrm-navy-700);
  font-weight: 700;
  border-top: 1px solid var(--pnrm-gray-200);
}
tr.klickbar { cursor: pointer; }
tr.klickbar:hover td { background: var(--pnrm-teal-50); }
td.rechts, th.rechts { text-align: right; }
td.gedimmt { color: var(--pnrm-gray-400); }
/* Stopp-Tabelle kraeftiger + kontrastreicher fuer bessere Lesbarkeit (Wunsch DB) */
#stopp-tabelle td { font-weight: 500; }
#stopp-tabelle .gedimmt { color: var(--pnrm-gray-700); }
#stopp-tabelle .berechnet { color: var(--pnrm-gray-700); }
.berechnet { color: var(--pnrm-gray-500); font-style: italic; }

/* --- Hinweise --------------------------------------------------- */
.hinweis {
  border-left: 4px solid var(--pnrm-teal-500);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
  border-radius: 0 8px 8px 0;
  padding: 10px 16px;
  margin: 14px 0;
  font-size: 13.5px;
}
.hinweis.warnung { border-left-color: var(--status-warning-fg); background: var(--status-warning-bg); color: var(--status-warning-fg); }
.hinweis.fehler { border-left-color: var(--status-danger-rule); background: var(--status-danger-bg); color: var(--status-danger-fg); }
.hinweis.erfolg { border-left-color: var(--status-success-fg); background: var(--status-success-bg); color: var(--status-success-fg); }

/* --- Formular-Dialog (Stopp bearbeiten) ------------------------- */
dialog {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(6, 56, 79, 0.25);
  padding: 0;
  width: min(720px, 94vw);
}
dialog::backdrop { background: rgba(6, 56, 79, 0.35); }
dialog .dialog-kopf {
  background: var(--pnrm-navy-700);
  color: #fff;
  padding: 14px 22px;
  font-weight: 700;
}
dialog form { padding: 18px 22px; }
.dialog-meldung { padding: 0 22px; }
.dialog-meldung .hinweis { margin: 12px 0 0; }
.formular-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.formular-raster .breit { grid-column: 1 / -1; }
.modul-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.dialog-fuss { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.dialog-fuss .rechte-gruppe { display: flex; gap: 10px; }

input.variabel-noetig {
  border-color: var(--status-danger-rule);
  background: var(--status-danger-bg);
}

/* --- Wochenansicht ---------------------------------------------- */
.wochen-tabelle th { min-width: 130px; }
.wochen-tabelle td { font-size: 12.5px; }
.wochen-zelle .ma {
  color: var(--pnrm-teal-700);
  font-weight: 600;
  font-size: 11.5px;
  border-bottom: 1px solid var(--pnrm-sky-200);
  margin-bottom: 2px;
}
.wochen-zelle .patient { font-weight: 700; color: var(--pnrm-navy-700); }
.wochen-zelle .adresse { color: var(--pnrm-gray-500); }
.wochen-zelle .zeit { color: var(--pnrm-teal-600); font-weight: 600; }
.wochen-zelle .notiz { color: var(--pnrm-gray-500); font-style: italic; }
.stopp-etikett { font-weight: 700; color: var(--pnrm-navy-700); white-space: nowrap; }
.ma-zeile td { background: var(--pnrm-sky-100); font-weight: 600; color: var(--pnrm-navy-700); }

/* --- Stammdaten-Karten ------------------------------------------ */
.karten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.karte {
  background: var(--pnrm-gray-0);
  border: 1px solid var(--pnrm-gray-200);
  border-radius: 10px;
  box-shadow: var(--schatten-karte);
  padding: 16px 18px;
}
.karte h3 { margin-top: 0; }
.inaktiv { opacity: 0.45; }

/* --- QM-Seite ---------------------------------------------------- */
.qm-tabelle td:first-child { font-weight: 600; color: var(--pnrm-navy-700); white-space: nowrap; }

.werkzeuge { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.fussnote { font-size: 12px; color: var(--pnrm-gray-400); margin-top: 26px; }
/* Route-Pruefen-Hinweise (u. a. Fixtermin-Kollision) kraeftig + gut lesbar (Wunsch DB) */
.hinweis-fix { font-size: 12.5px; font-weight: 600; color: var(--pnrm-gray-900); margin-top: 8px; line-height: 1.4; }

/* --- Druck (Mitarbeiteransicht) ---------------------------------- */
/* Ziel: Breite passt IMMER auf eine A4-Querseite (feste Spaltenaufteilung,
   kein horizontales Abschneiden); leere Stopp-Zeilen werden ausgeblendet.
   Läuft ein voller Tag über die Blatthöhe, bricht die Tabelle sauber
   zwischen den Zeilen um und wiederholt die Kopfzeile auf Folgeseiten. */
@media print {
  header, nav, .auswahl, .werkzeuge, .hinweis, .fussnote { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .seite { display: none !important; }
  .seite.druckbar { display: block !important; }
  h2 { font-size: 14pt; margin: 0 0 2mm; }
  h2 + .unterstrich { margin-bottom: 3mm; }

  .tabellen-halter { box-shadow: none; border: none; overflow: visible; }
  .wochen-tabelle {
    table-layout: fixed;          /* feste Spalten: 1 schmale + 7 gleiche */
    width: 100%;
    font-size: 8pt;
    line-height: 1.25;            /* kompakter als Bildschirm (1.7) */
  }
  .wochen-tabelle th { min-width: 0; }
  .wochen-tabelle th:first-child { width: 6%; }
  .wochen-tabelle th, .wochen-tabelle td {
    padding: 1mm 1.5mm;
    overflow-wrap: break-word;    /* lange Adressen umbrechen statt abschneiden */
    border: 0.3pt solid #999;
  }
  .wochen-tabelle td.stopp-etikett { white-space: normal; }
  .wochen-tabelle .zeile-leer { display: none; }
  .wochen-tabelle thead { display: table-header-group; }  /* Kopf je Seite */
  .wochen-tabelle tr { break-inside: avoid; }

  @page { size: A4 landscape; margin: 10mm; }
}

/* Unsichtbarer Mess-Klon fuer die Druck-Autoanpassung (app.js):
   spiegelt die @media-print-Tabellenregeln, damit die Hoehe in echter
   Druckbreite VOR dem Druck gemessen werden kann. Bei Aenderungen oben
   hier synchron halten. */
.druck-messung table {
  table-layout: fixed;
  width: 100%;
  font-size: 8pt;
  line-height: 1.25;
  border-collapse: collapse;
}
.druck-messung th { min-width: 0; }
.druck-messung th:first-child { width: 6%; }
.druck-messung th, .druck-messung td {
  padding: 1mm 1.5mm;
  overflow-wrap: break-word;
  border: 0.3pt solid #999;
}
.druck-messung .zeile-leer { display: none; }