/* Gemeinsames Aussehen für die eigenen Seiten und die Verwaltung (Django-Admin). */

:root {
  --dp-marine: #17324d;
  --dp-marine-2: #22476b;
  --dp-akzent: #2f6fb0;
  --dp-akzent-hell: #8fc1f0;
  --dp-flaeche: #f4f6f9;
  --dp-karte: #ffffff;
  --dp-rand: #e1e6ed;
  --dp-text: #1d2433;
  --dp-leise: #5b6576;
  --dp-gruen-bg: #e3f2e1; --dp-gruen: #2e6b2a;
  --dp-gelb-bg: #fff3d1;  --dp-gelb: #7a5800;
  --dp-blau-bg: #e3eefa;  --dp-blau: #1f5c99;
  --dp-grau-bg: #eceff3;  --dp-grau: #5b6576;
  --dp-rot-bg: #fbe4e4;   --dp-rot: #a12a2a;
}

/* ---------- Kopfzeile (eigene Seiten und Verwaltung) ---------- */
.dp-kopfleiste {
  background: var(--dp-marine); color: #fff;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 0 28px; gap: 12px;
}
.dp-kopf { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.dp-marke, #header .dp-marke:link, #header .dp-marke:visited {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 600; font-size: 17px; text-decoration: none; padding: 12px 0;
}
.dp-marke svg { width: 24px; height: 24px; }
.dp-test {
  background: #f2c14e; color: #3d2c00; font-weight: 700; font-size: 13px;
  padding: 3px 10px; border-radius: 999px; letter-spacing: 0.02em;
}
.dp-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.dp-nav a, #header .dp-nav a:link, #header .dp-nav a:visited {
  color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 15px;
  padding: 17px 2px 14px; border-bottom: 3px solid transparent;
}
.dp-nav a:hover, #header .dp-nav a:hover { color: #fff; text-decoration: none; }
.dp-nav a.aktiv, #header .dp-nav a.aktiv:link, #header .dp-nav a.aktiv:visited {
  color: #fff; border-bottom-color: var(--dp-akzent-hell);
}
.dp-nutzer { display: flex; align-items: center; gap: 14px; font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.dp-nutzer form { margin: 0; }
.dp-nutzer button {
  background: none; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff;
  border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit;
}
.dp-nutzer button:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- Verwaltung: Farben an den Dienstplan anpassen ---------- */
html[data-theme="light"], :root {
  --primary: #2b5c8a;
  --secondary: var(--dp-marine);
  --accent: var(--dp-akzent-hell);
  --header-bg: var(--dp-marine);
  --header-color: #fff;
  --header-branding-color: #fff;
  --breadcrumbs-bg: var(--dp-marine-2);
  --link-fg: var(--dp-blau);
  --link-selected-fg: var(--dp-marine);
  --button-bg: var(--dp-marine);
  --button-hover-bg: var(--dp-marine-2);
  --default-button-bg: var(--dp-akzent);
  --default-button-hover-bg: var(--dp-marine-2);
  --selected-row: #fff7d6;
}
#header { padding: 0 28px; background: var(--dp-marine); }
#header #branding { flex: 1; }
#header #user-tools { color: rgba(255, 255, 255, 0.78); }
div.breadcrumbs, nav .breadcrumbs { background: var(--dp-marine-2); padding: 10px 28px; }

/* ---------- Eigene Seiten ---------- */
body.dp {
  margin: 0; font-family: "Segoe UI", system-ui, sans-serif; font-size: 15px;
  color: var(--dp-text); background: var(--dp-flaeche);
}
body.dp main { max-width: 1280px; margin: 24px auto 48px; padding: 0 20px; }
body.dp h1 { font-size: 24px; font-weight: 600; margin: 0; }
body.dp h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
body.dp h3 { font-size: 15px; font-weight: 600; margin: 16px 0 8px; }
body.dp main a { color: var(--dp-blau); }
.karte {
  background: var(--dp-karte); border: 1px solid var(--dp-rand); border-radius: 12px;
  padding: 18px 22px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.klein { font-size: 13px; color: var(--dp-leise); }
.zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zeile + .zeile { margin-top: 12px; }
body.dp table { border-collapse: collapse; }
body.dp th, body.dp td { text-align: left; padding: 5px 14px 5px 0; }

.knopf {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--dp-marine); color: #fff; border: 1px solid var(--dp-marine); border-radius: 8px;
  padding: 7px 15px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
}
body.dp a.knopf { color: #fff; }
.knopf:hover { background: var(--dp-marine-2); }
.knopf.hell, body.dp a.knopf.hell { background: #fff; color: var(--dp-marine); border-color: var(--dp-rand); font-weight: 500; }
.knopf.hell:hover { background: var(--dp-flaeche); border-color: #c9d2de; }
.knopf:disabled { opacity: 0.6; cursor: wait; }

.meldung { padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; border: 1px solid transparent; }
.meldung.success { background: var(--dp-gruen-bg); color: var(--dp-gruen); }
.meldung.info { background: var(--dp-blau-bg); color: var(--dp-blau); }
.meldung.warning { background: var(--dp-gelb-bg); color: var(--dp-gelb); }
.meldung.error { background: var(--dp-rot-bg); color: var(--dp-rot); }

.abzeichen {
  display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--dp-grau-bg); color: var(--dp-grau); white-space: nowrap;
}
.abzeichen.entwurf { background: var(--dp-gelb-bg); color: var(--dp-gelb); }
.abzeichen.vorlaeufig { background: var(--dp-blau-bg); color: var(--dp-blau); }
.abzeichen.gueltig { background: var(--dp-gruen-bg); color: var(--dp-gruen); }

/* ---------- Monatskopf mit Monatswechsel und drei Schritten ---------- */
.monatskopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.monatskopf .wechsel {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 8px; border: 1px solid var(--dp-rand); background: #fff; color: var(--dp-marine);
  text-decoration: none; font-size: 18px;
}
.monatskopf .wechsel:hover { background: var(--dp-flaeche); }
.monatskopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.schritt, body.dp a.schritt {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px;
  background: #fff; border: 1px solid var(--dp-rand); color: var(--dp-text); text-decoration: none;
}
.schritt:hover { border-color: #c9d2de; }
.schritt .nummer {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 600; background: var(--dp-grau-bg); color: var(--dp-grau);
}
.schritt strong { display: block; font-size: 15px; }
.schritt span.unter { font-size: 13px; color: var(--dp-leise); }
.schritt.aktiv { border: 2px solid var(--dp-akzent); padding: 11px 15px; }
.schritt.aktiv .nummer { background: var(--dp-akzent); color: #fff; }
.schritt.fertig .nummer { background: var(--dp-gruen-bg); color: var(--dp-gruen); }

/* ---------- Monatsübersicht ---------- */
.monate { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.monat, body.dp a.monat {
  display: block; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--dp-rand);
  color: var(--dp-text); text-decoration: none;
}
.monat:hover { border-color: #c9d2de; }
.monat strong { display: block; font-size: 16px; margin-bottom: 6px; }

/* ---------- Freigabe: Status als Ablauf ---------- */
.ablauf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.ablauf .stufe { padding: 6px 14px; border-radius: 999px; background: var(--dp-grau-bg); color: var(--dp-grau); font-weight: 600; font-size: 14px; }
.ablauf .stufe.erreicht { background: var(--dp-gruen-bg); color: var(--dp-gruen); }
.ablauf .stufe.jetzt { background: var(--dp-akzent); color: #fff; }
.ablauf .pfeil { color: #a3adbb; }

/* ---------- Planraster wie im PDF ---------- */
.raster { font-size: 13px; }
body.dp .raster th, body.dp .raster td { border: 1px solid #d5dce5; padding: 3px 7px; text-align: center; min-width: 30px; }
body.dp .raster th { background: #eef2f7; font-weight: 600; }
body.dp .raster .tag { text-align: left; white-space: nowrap; }
.raster tr.frei td { background: #f1f3f6; }
.raster tr.sonntag td { border-bottom: 2px solid #4a5568; }
/* "tr td.X" ist so stark wie "tr.frei td" und steht danach: die Zellfarbe gewinnt am Wochenende */
.raster tr td.TD { background: #cfe3f3; } .raster tr td.ND { background: #34567f; color: #fff; }
.raster tr td.df { background: #e6e6e6; } .raster tr td.F { background: #fce5cd; }
.raster tr td.U, .probe.U { background: #d9ead3; } .raster tr td.FB, .probe.FB { background: #fff2cc; }
.raster tr td.A, .probe.A { background: #ead1dc; } .raster tr td.TZ, .probe.TZ { background: #ece4f5; }
.raster tr td.OP { background: #dff1f0; } .raster tr td.Sp { background: #f3ead6; }
.raster td.vg a, .raster td.bereich a { color: var(--dp-marine); text-decoration: none; display: block; }
.raster td.bereich:hover { outline: 2px solid var(--dp-akzent); outline-offset: -2px; }
.raster td.info a { color: inherit; text-decoration: none; display: block; }
.raster td.info:hover { outline: 1px dashed var(--dp-leise); outline-offset: -2px; }
.plan-tabelle td.vg, .plan-tabelle td.bereich, .plan-tabelle td.info { cursor: pointer; }
.raster td.bereich.fest { font-weight: 700; outline: 2px solid var(--dp-marine); outline-offset: -3px; }
.raster td.bereich sup { font-size: 9px; color: var(--dp-leise); margin-left: 1px; }
.raster tr td.vg.leer { background: #f4cccc; }
.raster td.vg.fest { font-weight: 700; outline: 2px solid var(--dp-marine); outline-offset: -3px; }
.hinweis { margin: 3px 0; }
.hinweis.verstoss, .hinweis.festsetzung { color: var(--dp-rot); font-weight: 600; }
.hinweis.unbesetzt { color: var(--dp-rot); }
.hinweis.behoben { color: var(--dp-gruen); }

/* Plan: Bearbeitungsfeld neben der Tabelle, läuft beim Scrollen mit */
.plan-bereich { display: flex; align-items: flex-start; gap: 20px; }
.plan-tabelle { flex: 1; min-width: 0; overflow-x: auto; }
.bearbeiten {
  position: sticky; top: 16px; flex-shrink: 0; width: 320px; padding: 14px 16px;
  border: 1px solid var(--dp-rand); border-radius: 10px; background: var(--dp-flaeche);
}
.bearbeiten h3 { margin-top: 0; }
.bearbeiten select, .bearbeiten input[name=notiz] { width: 100%; }
.bearbeiten .meldung { margin-bottom: 8px; }
.bearbeiten .folgen:not(:empty) {
  margin: 10px 0; padding: 8px 10px; border: 1px solid var(--dp-rand); border-radius: 8px;
  background: var(--dp-karte); font-size: 13px; max-height: 45vh; overflow-y: auto;
}
.bearbeiten .ausgleich { margin-top: 8px; }
.bearbeiten .ausgleich ul, dialog.frage ul { margin: 4px 0; padding-left: 20px; }
dialog.frage {
  max-width: 480px; padding: 18px 22px; border: 1px solid var(--dp-rand); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
}
dialog.frage::backdrop { background: rgba(16, 24, 40, 0.35); }
dialog.frage h3 { margin-top: 0; }
.raster td.gewaehlt { outline: 3px solid var(--dp-akzent); outline-offset: -3px; }
.plan-tabelle tr.zuletzt td { box-shadow: inset 0 0 0 999px rgba(255, 196, 0, 0.25); }
.plan-tabelle .raster td { transition: box-shadow 1s; }
@media (max-width: 900px) {
  .plan-bereich { flex-direction: column; }
  .bearbeiten { position: static; width: auto; order: -1; }
}

/* Kalenderraster für Wünsche und Abwesenheiten */
.werkzeug.aktiv, body.dp .knopf.hell.werkzeug.aktiv { background: var(--dp-marine); color: #fff; border-color: var(--dp-marine); }
.raster.eingaben { user-select: none; }
.raster td.eingabe { cursor: pointer; }
.raster td.eingabe:hover { outline: 2px solid var(--dp-akzent); outline-offset: -2px; }
.raster td.wunsch, .probe.wunsch { font-style: italic; font-weight: 600; color: #7a3e00; }
.raster td.fest-zelle { color: #8a94a3; }
/* Kopfzeile oben und Knopfleiste unten bleiben beim Scrollen durch den Kalender sichtbar */
.raster.eingaben tr:first-child th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 #d5dce5; }
.werkzeugleiste {
  position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  font-size: 13px;
  margin: 12px -22px 8px; padding: 10px 22px; background: var(--dp-karte);
  border-top: 1px solid var(--dp-rand); box-shadow: 0 -4px 12px rgba(16, 24, 40, 0.06);
}
.werkzeugleiste .trenner { width: 1px; align-self: stretch; margin: 2px 6px; background: var(--dp-rand); }
.werkzeugleiste .knopf { padding: 4px 8px; font-size: 13px; font-weight: 500; }
.werkzeugleiste .meldung { flex-basis: 100%; margin: 0; }
/* Rückmeldung-Knopf über die Knopfleiste heben, damit er „löschen“ nicht verdeckt */
body:has(.werkzeugleiste) .dp-rm-knopf { bottom: 76px; }
.probe {
  min-width: 26px; padding: 0 4px; border: 1px solid #d5dce5; border-radius: 4px;
  text-align: center; font-size: 13px; color: var(--dp-text);
}
.raster tr td.markiert { outline: 2px solid var(--dp-akzent); outline-offset: -2px; box-shadow: inset 0 0 0 999px rgba(47, 111, 176, 0.12); }

/* ---------- Rückmeldung: Knopf unten rechts und Fenster ---------- */
.dp-zahl {
  display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px;
  background: #f2c14e; color: #3d2c00; font-size: 12px; font-weight: 700; text-align: center; line-height: 18px;
}
.dp-rm-knopf {
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--dp-marine); color: #fff; border: none; cursor: pointer;
  font: 600 14px "Segoe UI", system-ui, sans-serif; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.18);
}
.dp-rm-knopf:hover { background: var(--dp-marine-2); }
.dp-rm-knopf svg { width: 18px; height: 18px; }
.dp-rm {
  width: min(520px, calc(100vw - 32px)); border: none; border-radius: 14px; padding: 22px 24px;
  font: 15px "Segoe UI", system-ui, sans-serif; color: var(--dp-text); background: #fff;
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.25);
}
.dp-rm::backdrop { background: rgba(23, 50, 77, 0.35); }
.dp-rm h2 { font-size: 18px; font-weight: 600; margin: 0 0 6px; color: var(--dp-text); background: none; padding: 0; }
.dp-rm-leise { font-size: 13px; color: var(--dp-leise); margin: 6px 0 12px; }
.dp-rm-arten { display: flex; gap: 8px; margin-bottom: 12px; }
.dp-rm-arten input { position: absolute; opacity: 0; pointer-events: none; }
.dp-rm-arten span {
  display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--dp-rand);
  cursor: pointer; font-size: 14px; color: var(--dp-text);
}
.dp-rm-arten input:checked + span { background: var(--dp-marine); color: #fff; border-color: var(--dp-marine); }
.dp-rm-arten input:focus-visible + span { outline: 2px solid var(--dp-akzent); outline-offset: 2px; }
.dp-rm textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--dp-rand); border-radius: 10px; padding: 10px 12px;
  font: inherit; resize: vertical;
}
.dp-rm textarea:focus { outline: 2px solid var(--dp-akzent); border-color: transparent; }
.dp-rm-knoepfe { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.dp-rm-knoepfe button { font: 600 14px "Segoe UI", system-ui, sans-serif; border-radius: 8px; padding: 8px 16px; cursor: pointer; }
.dp-rm-abbrechen { background: #fff; color: var(--dp-marine); border: 1px solid var(--dp-rand); }
.dp-rm-senden { background: var(--dp-marine); color: #fff; border: 1px solid var(--dp-marine); }

/* ---------- Zeitraum-Kalender in der Verwaltung (web/static/web/zeitraum.js) ---------- */
.zr-knopf {
  margin-left: 10px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
  background: #fff; color: var(--dp-marine); border: 1px solid #c9d2de; font: 600 13px "Segoe UI", system-ui, sans-serif;
}
.zr-knopf:hover { background: var(--dp-flaeche); }
.zr-tafel {
  position: absolute; z-index: 1000; background: #fff; color: var(--dp-text);
  border: 1px solid var(--dp-rand); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18); font: 13px "Segoe UI", system-ui, sans-serif;
}
.zr-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 600; }
.zr-kopf button, .zr-fuss button {
  border: 1px solid var(--dp-rand); background: #fff; color: var(--dp-marine); border-radius: 6px;
  padding: 3px 10px; cursor: pointer; font: inherit;
}
.zr-monate { display: flex; gap: 18px; }
.zr-tafel table { border-collapse: collapse; }
.zr-tafel caption { font-weight: 600; padding: 4px 0; color: var(--dp-marine); }
.zr-tafel th { font-weight: 600; color: var(--dp-leise); padding: 2px; font-size: 12px; text-align: center; background: none; }
.zr-tafel td { padding: 1px; border: none; }
.zr-tag {
  width: 30px; height: 28px; border: none; border-radius: 6px; background: none; cursor: pointer;
  font: inherit; color: var(--dp-text);
}
.zr-tag:hover { outline: 2px solid var(--dp-akzent); }
.zr-tag.wochenende { color: #8a94a3; background: #f4f6f9; }
.zr-tag.drin { background: #d9e8f7; color: var(--dp-marine); }
.zr-tag.anfang, .zr-tag.ende { background: var(--dp-marine); color: #fff; font-weight: 700; }
.zr-fuss { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--dp-leise); }
.zr-fuss span { margin-right: auto; }

@media (max-width: 760px) {
  .schritte { grid-template-columns: 1fr; }
  .dp-kopfleiste, #header { padding: 0 14px; }
}

/* Musterwochen: Muster A/B als farbige Tage über der Auswahl */
.musterwochen td, .musterwochen th { vertical-align: middle; }
.musterwochen tr.muster-zeile td { padding-top: 2px; padding-bottom: 12px; }
.muster { display: inline-flex; gap: 4px; }
.muster-tag {
  display: flex; flex-direction: column; align-items: center; width: 34px; padding: 3px 0;
  border-radius: 6px; border: 1px solid; font-weight: 700; font-size: 13px; line-height: 1.25;
}
.muster-tag small { font-size: 10px; font-weight: 500; color: var(--dp-leise); }
.muster-tag.OP { background: #dff1f0; border-color: #9fd3cf; color: #1f5f5a; }
.muster-tag.Sp { background: #f3ead6; border-color: #e0c98f; color: #7a5800; }