/* ============================================================================
   Erscheinungsbilder
   ============================================================================
   Drei wählbare Anmutungen derselben Oberfläche: hell (Standard), warm und
   klassisch. Umgeschaltet wird über data-wp-theme an der Hülle (MainLayout).

   Zwei Grundsätze, an die sich alles hier hält:

   1. KLASSISCH DEFINIERT NICHTS. Wer "klassisch" wählt, bekommt keinerlei
      Überschreibung — die Oberfläche sieht dann Pixel für Pixel so aus wie
      vor der Umstellung. Das ist die einzige Zusage, die man wirklich halten
      kann: keine Regel, die man vergessen könnte, greift.
      Deshalb steht in den Bausteindateien überall
      var(--wp-xyz, <klassischer Wert>) — der Rückfallwert IST das alte
      Aussehen.

   2. DIE FARBE GEHOERT DEN DIENSTEN. Die Bedienelemente sind zurückhaltend;
      kräftig wird nur, was Bedeutung trägt: die Schichtfarbe eines Dienstes,
      Bernstein für "noch zu besetzen", Rot für einen harten Regelverstoß,
      Grün für veröffentlicht/bestätigt.

   Schrift: bewusst eine System-Schriftfamilie und KEIN Webfont von einem
   fremden Anbieter — die Anwendung soll ohne Verbindung nach draußen laufen
   (Kommunen, ISO-Netze, DSGVO). Wer eine eigene Hausschrift will, legt die
   woff2-Dateien unter wwwroot/fonts ab, ergänzt hier ein @font-face und setzt
   --wp-font. Sonst ändert sich nichts.
   ========================================================================= */

/* ---------------------------------------------------------------- HELL --- */

[data-wp-theme="hell"] {
    --wp-font: ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --wp-ground: #f4f5fa;
    --wp-surface: #ffffff;
    --wp-sunken: #f1f2f8;
    --wp-line: #ecedf4;
    --wp-line-strong: #dee0ec;

    --wp-ink: #1c1e2b;
    --wp-ink-2: #5a5f72;
    /* Sekundärtext bleibt auch in kleiner Schrift auf Weiß oberhalb WCAG AA (5,29:1). */
    --wp-ink-3: #656b80;

    --wp-accent: #5948dc;
    --wp-accent-2: #4937c4;
    --wp-accent-soft: #eeecfe;
    --wp-accent-rgb: 89, 72, 220;

    --wp-ok: #087a4f;
    --wp-ok-soft: #e6f7ef;
    --wp-open: #7a4b00;
    --wp-open-soft: #fdf4e4;
    --wp-danger: #a92e27;
    --wp-danger-soft: #fdeeec;

    /* Die Seitenleiste ist die größte zusammenhängende Fläche der Anwendung. Solange sie in allen
       Erscheinungsbildern dunkel bleibt, sehen alle drei fast gleich aus — deshalb ist sie hier HELL.
       Das ist der eine Eingriff, den man beim Umschalten sofort sieht. */
    --wp-rail-bg: #ffffff;
    --wp-rail-ink: #4a4f63;
    /* Auf Weiß muss die Gruppenüberschrift dunkler sein als auf Dunkelblau — sonst rutscht
       der Kontrast unter das Lesbare (gemessen: #9095a8 ergäbe nur 2,9:1). */
    --wp-rail-ink-2: #6b7085;
    --wp-rail-brand: #1c1e2b;
    --wp-rail-line: #ecedf4;
    --wp-rail-border: 1px solid #e7e8f1;
    --wp-rail-hover-bg: #f4f5fa;
    --wp-rail-hover-ink: #1c1e2b;
    --wp-rail-active-bg: #eeecfe;
    --wp-rail-active-bar: transparent;
    --wp-rail-active-ink: #5546dd;
    --wp-rail-radius: 9px;
    --wp-rail-active-weight: 600;
    --wp-rail-brand-weight: 700;
    --wp-rail-w: 232px;
    --wp-nav-pad-x: .55rem;

    --wp-radius: 12px;
    --wp-radius-sm: 9px;
    --wp-shadow: 0 1px 2px rgba(28, 30, 43, .04), 0 6px 20px rgba(28, 30, 43, .06);
    --wp-shadow-sm: 0 1px 2px rgba(28, 30, 43, .05);

    /* Dienstkachel: gefüllte Pastellfläche statt weiß mit Farbbalken. */
    --wp-duty-bar: 0px;
    --wp-duty-open-bar: 1px;
    --wp-duty-fill: 16%;
    --wp-duty-radius: 9px;
    --wp-duty-pad: .38rem .55rem;
    --wp-duty-time-weight: 700;
    --wp-duty-label: color-mix(in srgb, var(--duty-color, #6a5cf0) 74%, #0d1526);
    --wp-duty-time-color: var(--wp-duty-label);

    --wp-cell-weekend: #fafbfe;
    --wp-cell-today: #f4f3fe;
    --wp-row-min: 62px;

    /* Kürzel-Kreis statt Farbpunkt: helle Fläche, farbige Schrift. */
    --wp-avatar-size: 2rem;
    --wp-avatar-font: .72rem;
    --wp-avatar-bg: color-mix(in srgb, var(--emp-color, #6a5cf0) 15%, #ffffff);
    --wp-avatar-fg: color-mix(in srgb, var(--emp-color, #6a5cf0) 82%, #0d1526);
    --wp-emp-name-weight: 600;
    --wp-toolbar-plan-weight: 600;
    --wp-chip-radius: 20px;
    --wp-coverage-h: 4px;
    --wp-coverage-short: #e0a344;
    --wp-gapbar-radius: 6px;
    --wp-gapbar-fill: #f3d9a6;
}

/* ---------------------------------------------------------------- WARM --- */

[data-wp-theme="warm"] {
    --wp-font: ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* Deutlich cremiger als hell — der Unterschied muss beim Umschalten sofort auffallen. */
    --wp-ground: #f5efe4;
    --wp-surface: #fffdf9;
    --wp-sunken: #ece4d6;
    --wp-line: #e0d7c7;
    --wp-line-strong: #cdc2ad;

    --wp-ink: #201b14;
    --wp-ink-2: #5c5347;
    /* Sekundärtext auf der cremefarbenen Fläche: 5,61:1 statt zuvor 3,67:1. */
    --wp-ink-3: #6f6559;

    /* Kupfer statt Blau: die warme Richtung bekommt einen warmen Akzent. */
    --wp-accent: #a4551f;
    --wp-accent-2: #843f13;
    --wp-accent-soft: #f7e6d6;
    --wp-accent-rgb: 164, 85, 31;

    --wp-ok: #3d6b3a;
    --wp-ok-soft: #e9f0e4;
    --wp-open: #8a5a12;
    --wp-open-soft: #f8ecd8;
    --wp-danger: #a03225;
    --wp-danger-soft: #f7e5e0;

    /* Warm setzt bewusst den Gegenpol: tiefes, warmes Braunschwarz statt Weiß. */
    --wp-rail-bg: #241f1a;
    --wp-rail-ink: #cec6ba;
    --wp-rail-ink-2: #8a8175;
    --wp-rail-brand: #ffffff;
    --wp-rail-line: rgba(255, 255, 255, .09);
    --wp-rail-border: 0;
    --wp-rail-hover-bg: rgba(255, 255, 255, .06);
    --wp-rail-hover-ink: #ffffff;
    --wp-rail-active-bg: rgba(214, 168, 106, .18);
    --wp-rail-active-bar: transparent;
    --wp-rail-active-ink: #f0c78a;
    --wp-rail-radius: 6px;
    --wp-rail-active-weight: 600;
    --wp-rail-brand-weight: 600;
    --wp-rail-w: 224px;
    --wp-nav-pad-x: .5rem;

    --wp-radius: 10px;
    --wp-radius-sm: 7px;
    --wp-shadow: 0 1px 2px rgba(60, 42, 20, .07), 0 3px 8px rgba(60, 42, 20, .05);
    --wp-shadow-sm: 0 1px 2px rgba(60, 42, 20, .07);

    /* Dichte Tafel: schmaler Farbbalken, sehr helle Fläche. */
    --wp-duty-bar: 3px;
    --wp-duty-open-bar: 3px;
    --wp-duty-fill: 9%;
    --wp-duty-radius: 6px;
    --wp-duty-pad: .3rem .5rem;
    --wp-duty-time-weight: 400;
    --wp-duty-label: var(--wp-ink);
    --wp-duty-time-color: var(--wp-ink-3);

    --wp-cell-weekend: #f7f1e6;
    --wp-cell-today: #fbeee1;
    --wp-row-min: 58px;

    --wp-avatar-size: 1.75rem;
    --wp-avatar-font: .66rem;
    --wp-avatar-bg: color-mix(in srgb, var(--emp-color, #a4551f) 17%, #fffdf9);
    --wp-avatar-fg: color-mix(in srgb, var(--emp-color, #a4551f) 80%, #14100c);
    --wp-emp-name-weight: 500;
    --wp-toolbar-plan-weight: 600;
    --wp-chip-radius: 6px;
    --wp-coverage-h: 3px;
    --wp-coverage-short: #c98f3e;
    --wp-gapbar-radius: 4px;
    --wp-gapbar-fill: #e8d3ad;
}

/* ==========================================================================
   Ab hier: die Bausteine. Alles greift NUR, wenn ein Erscheinungsbild gesetzt
   ist — der :not-Selektor hält "klassisch" komplett heraus.
   ========================================================================== */

[data-wp-theme="hell"],
[data-wp-theme="warm"] {
    font-family: var(--wp-font);
    color: var(--wp-ink);

    /* Bootstrap folgt über seine eigenen Variablen mit. */
    --bs-body-font-family: var(--wp-font);
    --bs-body-color: var(--wp-ink);
    --bs-body-bg: var(--wp-ground);
    --bs-secondary-color: var(--wp-ink-2);
    --bs-tertiary-color: var(--wp-ink-3);
    --bs-border-color: var(--wp-line);
    --bs-border-color-translucent: var(--wp-line);
    --bs-border-radius: var(--wp-radius-sm);
    --bs-border-radius-sm: calc(var(--wp-radius-sm) - 3px);
    --bs-border-radius-lg: var(--wp-radius);
    --bs-primary: var(--wp-accent);
    --bs-primary-rgb: var(--wp-accent-rgb);
    --bs-link-color: var(--wp-accent);
    --bs-link-color-rgb: var(--wp-accent-rgb);
    --bs-link-hover-color: var(--wp-accent-2);
    --bs-secondary-bg: var(--wp-sunken);
    --bs-tertiary-bg: var(--wp-sunken);
    --bs-emphasis-color: var(--wp-ink);
    --bs-heading-color: var(--wp-ink);
}

/* --- Schaltflächen ------------------------------------------------------- */
/* Bootstrap schreibt die Farben je Variante als feste Werte in --bs-btn-*;
   ein Überschreiben von --bs-primary allein reicht deshalb nicht. */

[data-wp-theme="hell"] .btn,
[data-wp-theme="warm"] .btn {
    --bs-btn-border-radius: var(--wp-radius-sm);
    --bs-btn-font-weight: 500;
    font-weight: 500;
}

[data-wp-theme="hell"] .btn-primary,
[data-wp-theme="warm"] .btn-primary {
    --bs-btn-bg: var(--wp-accent);
    --bs-btn-border-color: var(--wp-accent);
    --bs-btn-hover-bg: var(--wp-accent-2);
    --bs-btn-hover-border-color: var(--wp-accent-2);
    --bs-btn-active-bg: var(--wp-accent-2);
    --bs-btn-active-border-color: var(--wp-accent-2);
    --bs-btn-disabled-bg: var(--wp-accent);
    --bs-btn-disabled-border-color: var(--wp-accent);
    --bs-btn-font-weight: 600;
}

[data-wp-theme="hell"] .btn-outline-primary,
[data-wp-theme="warm"] .btn-outline-primary {
    --bs-btn-color: var(--wp-accent);
    --bs-btn-border-color: color-mix(in srgb, var(--wp-accent) 40%, var(--wp-surface));
    --bs-btn-hover-bg: var(--wp-accent);
    --bs-btn-hover-border-color: var(--wp-accent);
    --bs-btn-active-bg: var(--wp-accent-2);
    --bs-btn-active-border-color: var(--wp-accent-2);
    --bs-btn-disabled-color: var(--wp-accent);
    --bs-btn-disabled-border-color: var(--wp-line-strong);
}

[data-wp-theme="hell"] .btn-success,
[data-wp-theme="warm"] .btn-success {
    --bs-btn-bg: var(--wp-ok);
    --bs-btn-border-color: var(--wp-ok);
    --bs-btn-hover-bg: color-mix(in srgb, var(--wp-ok) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--wp-ok) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--wp-ok) 80%, #000);
    --bs-btn-disabled-bg: var(--wp-ok);
    --bs-btn-disabled-border-color: var(--wp-ok);
    --bs-btn-font-weight: 600;
}

[data-wp-theme="hell"] .btn-outline-success,
[data-wp-theme="warm"] .btn-outline-success {
    --bs-btn-color: var(--wp-ok);
    --bs-btn-border-color: color-mix(in srgb, var(--wp-ok) 40%, var(--wp-surface));
    --bs-btn-hover-bg: var(--wp-ok);
    --bs-btn-hover-border-color: var(--wp-ok);
    --bs-btn-active-bg: var(--wp-ok);
    --bs-btn-disabled-color: var(--wp-ok);
}

[data-wp-theme="hell"] .btn-danger,
[data-wp-theme="warm"] .btn-danger {
    --bs-btn-bg: var(--wp-danger);
    --bs-btn-border-color: var(--wp-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--wp-danger) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--wp-danger) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--wp-danger) 80%, #000);
    --bs-btn-disabled-bg: var(--wp-danger);
    --bs-btn-disabled-border-color: var(--wp-danger);
}

/* Die auffälligste Änderung: Konflikt- und Kostenknopf schreien nicht mehr.
   Sie zeigen einen Zustand an, statt eine Gefahr zu behaupten. */
[data-wp-theme="hell"] .btn-outline-danger,
[data-wp-theme="warm"] .btn-outline-danger {
    --bs-btn-color: var(--wp-danger);
    --bs-btn-bg: var(--wp-danger-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--wp-danger);
    --bs-btn-hover-border-color: var(--wp-danger);
    --bs-btn-active-bg: var(--wp-danger);
    --bs-btn-disabled-color: var(--wp-danger);
    --bs-btn-disabled-border-color: transparent;
}

/* Zustandsanzeigen (Konfliktzähler, Plankosten) sind KEINE gefährlichen Aktionen.
   Ein Entwurf mit offenen Schichten ist der Normalfall — er darf nicht aussehen wie ein Notfall.
   Löschen und „Trotzdem einteilen“ bleiben davon unberührt kräftig rot. */
[data-wp-theme="hell"] .wp-state-btn.btn-danger,
[data-wp-theme="warm"] .wp-state-btn.btn-danger {
    --bs-btn-bg: var(--wp-danger-soft);
    --bs-btn-color: var(--wp-danger);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: color-mix(in srgb, var(--wp-danger) 16%, var(--wp-surface));
    --bs-btn-hover-color: var(--wp-danger);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: color-mix(in srgb, var(--wp-danger) 22%, var(--wp-surface));
    --bs-btn-active-color: var(--wp-danger);
    --bs-btn-active-border-color: transparent;
    background-color: var(--wp-danger-soft);
    border-color: transparent;
    color: var(--wp-danger);
}

[data-wp-theme="hell"] .wp-state-btn.btn-warning,
[data-wp-theme="warm"] .wp-state-btn.btn-warning {
    --bs-btn-bg: var(--wp-open-soft);
    --bs-btn-color: var(--wp-open);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: color-mix(in srgb, var(--wp-open) 16%, var(--wp-surface));
    --bs-btn-hover-color: var(--wp-open);
    --bs-btn-hover-border-color: transparent;
    background-color: var(--wp-open-soft);
    border-color: transparent;
    color: var(--wp-open);
}

[data-wp-theme="hell"] .wp-state-btn.btn-outline-success,
[data-wp-theme="warm"] .wp-state-btn.btn-outline-success {
    --bs-btn-bg: var(--wp-ok-soft);
    --bs-btn-color: var(--wp-ok);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: color-mix(in srgb, var(--wp-ok) 16%, var(--wp-surface));
    --bs-btn-hover-color: var(--wp-ok);
    --bs-btn-hover-border-color: transparent;
}

[data-wp-theme="hell"] .wp-state-btn,
[data-wp-theme="warm"] .wp-state-btn {
    font-weight: 600;
}

[data-wp-theme="hell"] .btn-secondary,
[data-wp-theme="warm"] .btn-secondary {
    --bs-btn-bg: var(--wp-sunken);
    --bs-btn-border-color: var(--wp-line-strong);
    --bs-btn-color: var(--wp-ink);
    --bs-btn-hover-bg: var(--wp-line);
    --bs-btn-hover-border-color: var(--wp-line-strong);
    --bs-btn-hover-color: var(--wp-ink);
    --bs-btn-active-bg: var(--wp-line-strong);
    --bs-btn-active-color: var(--wp-ink);
}

[data-wp-theme="hell"] .btn-outline-secondary,
[data-wp-theme="warm"] .btn-outline-secondary {
    --bs-btn-color: var(--wp-ink);
    --bs-btn-bg: var(--wp-surface);
    --bs-btn-border-color: var(--wp-line-strong);
    --bs-btn-hover-bg: var(--wp-sunken);
    --bs-btn-hover-border-color: var(--wp-line-strong);
    --bs-btn-hover-color: var(--wp-ink);
    --bs-btn-active-bg: var(--wp-line);
    --bs-btn-active-color: var(--wp-ink);
    --bs-btn-active-border-color: var(--wp-line-strong);
    --bs-btn-disabled-color: var(--wp-ink-3);
    --bs-btn-disabled-border-color: var(--wp-line);
}

[data-wp-theme="hell"] .btn-link,
[data-wp-theme="warm"] .btn-link {
    --bs-btn-color: var(--wp-accent);
    --bs-btn-hover-color: var(--wp-accent-2);
}

[data-wp-theme="hell"] .btn:focus-visible,
[data-wp-theme="warm"] .btn:focus-visible,
[data-wp-theme="hell"] .form-control:focus,
[data-wp-theme="warm"] .form-control:focus,
[data-wp-theme="hell"] .form-select:focus,
[data-wp-theme="warm"] .form-select:focus,
[data-wp-theme="hell"] .form-check-input:focus,
[data-wp-theme="warm"] .form-check-input:focus {
    border-color: color-mix(in srgb, var(--wp-accent) 55%, var(--wp-surface));
    box-shadow: 0 0 0 .2rem rgba(var(--wp-accent-rgb), .22);
    outline: 0;
}

[data-wp-theme="hell"] .form-check-input:checked,
[data-wp-theme="warm"] .form-check-input:checked {
    background-color: var(--wp-accent);
    border-color: var(--wp-accent);
}

/* --- Flächen ------------------------------------------------------------- */

[data-wp-theme="hell"] .card,
[data-wp-theme="warm"] .card {
    --bs-card-bg: var(--wp-surface);
    --bs-card-border-color: transparent;
    --bs-card-border-radius: var(--wp-radius);
    --bs-card-inner-border-radius: calc(var(--wp-radius) - 1px);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--wp-shadow);
}

[data-wp-theme="hell"] .card > .card-header,
[data-wp-theme="warm"] .card > .card-header {
    border-bottom-color: var(--wp-line);
}

[data-wp-theme="hell"] .table,
[data-wp-theme="warm"] .table {
    --bs-table-color: var(--wp-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--wp-line);
    --bs-table-hover-bg: var(--wp-sunken);
    --bs-table-hover-color: var(--wp-ink);
    --bs-table-striped-bg: var(--wp-sunken);
}

[data-wp-theme="hell"] .table > thead,
[data-wp-theme="warm"] .table > thead {
    color: var(--wp-ink-2);
}

[data-wp-theme="hell"] .table-secondary,
[data-wp-theme="warm"] .table-secondary {
    --bs-table-bg: var(--wp-sunken);
    --bs-table-color: var(--wp-ink-3);
}

[data-wp-theme="hell"] .form-control,
[data-wp-theme="warm"] .form-control,
[data-wp-theme="hell"] .form-select,
[data-wp-theme="warm"] .form-select,
[data-wp-theme="hell"] .input-group-text,
[data-wp-theme="warm"] .input-group-text {
    background-color: var(--wp-surface);
    border-color: var(--wp-line-strong);
    color: var(--wp-ink);
    border-radius: var(--wp-radius-sm);
}

[data-wp-theme="hell"] .form-control::placeholder,
[data-wp-theme="warm"] .form-control::placeholder {
    color: var(--wp-ink-3);
}

[data-wp-theme="hell"] .dropdown-menu,
[data-wp-theme="warm"] .dropdown-menu {
    --bs-dropdown-bg: var(--wp-surface);
    --bs-dropdown-border-color: transparent;
    --bs-dropdown-border-radius: var(--wp-radius);
    --bs-dropdown-link-color: var(--wp-ink);
    --bs-dropdown-link-hover-bg: var(--wp-sunken);
    --bs-dropdown-link-hover-color: var(--wp-ink);
    --bs-dropdown-link-active-bg: var(--wp-accent-soft);
    --bs-dropdown-link-active-color: var(--wp-accent);
    --bs-dropdown-divider-bg: var(--wp-line);
    box-shadow: 0 8px 28px rgba(28, 30, 43, .14);
}

[data-wp-theme="hell"] .modal-content,
[data-wp-theme="warm"] .modal-content {
    background-color: var(--wp-surface);
    border: 0;
    border-radius: var(--wp-radius);
    box-shadow: 0 16px 48px rgba(28, 30, 43, .2);
}

[data-wp-theme="hell"] .modal-header,
[data-wp-theme="warm"] .modal-header,
[data-wp-theme="hell"] .modal-footer,
[data-wp-theme="warm"] .modal-footer {
    border-color: var(--wp-line);
}

[data-wp-theme="hell"] .list-group,
[data-wp-theme="warm"] .list-group {
    --bs-list-group-bg: var(--wp-surface);
    --bs-list-group-color: var(--wp-ink);
    --bs-list-group-border-color: var(--wp-line);
    --bs-list-group-action-hover-bg: var(--wp-sunken);
    --bs-list-group-action-hover-color: var(--wp-ink);
    --bs-list-group-border-radius: var(--wp-radius);
}

[data-wp-theme="hell"] .progress,
[data-wp-theme="warm"] .progress {
    --bs-progress-bg: var(--wp-sunken);
    --bs-progress-bar-bg: var(--wp-accent);
    --bs-progress-border-radius: 20px;
}

/* --- Zustandsfarben ------------------------------------------------------ */

[data-wp-theme="hell"] .badge.text-bg-primary,
[data-wp-theme="warm"] .badge.text-bg-primary {
    background-color: var(--wp-accent-soft) !important;
    color: var(--wp-accent-2) !important;
}

[data-wp-theme="hell"] .badge.text-bg-success,
[data-wp-theme="warm"] .badge.text-bg-success {
    background-color: var(--wp-ok-soft) !important;
    color: var(--wp-ok) !important;
}

[data-wp-theme="hell"] .badge.text-bg-danger,
[data-wp-theme="warm"] .badge.text-bg-danger {
    background-color: var(--wp-danger-soft) !important;
    color: var(--wp-danger) !important;
}

[data-wp-theme="hell"] .badge.text-bg-warning,
[data-wp-theme="warm"] .badge.text-bg-warning {
    background-color: var(--wp-open-soft) !important;
    color: var(--wp-open) !important;
}

[data-wp-theme="hell"] .badge.text-bg-secondary,
[data-wp-theme="warm"] .badge.text-bg-secondary,
[data-wp-theme="hell"] .badge.text-bg-light,
[data-wp-theme="warm"] .badge.text-bg-light {
    background-color: var(--wp-sunken) !important;
    color: var(--wp-ink-2) !important;
    border-color: transparent !important;
}

[data-wp-theme="hell"] .badge,
[data-wp-theme="warm"] .badge {
    --bs-badge-border-radius: 20px;
    font-weight: 600;
    padding: .3em .7em;
}

[data-wp-theme="hell"] .alert,
[data-wp-theme="warm"] .alert {
    --bs-alert-border-color: transparent;
    --bs-alert-border-radius: var(--wp-radius);
}

[data-wp-theme="hell"] .alert-warning,
[data-wp-theme="warm"] .alert-warning {
    --bs-alert-bg: var(--wp-open-soft);
    --bs-alert-color: var(--wp-open);
}

[data-wp-theme="hell"] .alert-danger,
[data-wp-theme="warm"] .alert-danger {
    --bs-alert-bg: var(--wp-danger-soft);
    --bs-alert-color: var(--wp-danger);
}

[data-wp-theme="hell"] .alert-success,
[data-wp-theme="warm"] .alert-success {
    --bs-alert-bg: var(--wp-ok-soft);
    --bs-alert-color: var(--wp-ok);
}

[data-wp-theme="hell"] .alert-info,
[data-wp-theme="warm"] .alert-info {
    --bs-alert-bg: var(--wp-accent-soft);
    --bs-alert-color: var(--wp-accent-2);
}

[data-wp-theme="hell"] .alert-secondary,
[data-wp-theme="warm"] .alert-secondary {
    --bs-alert-bg: var(--wp-sunken);
    --bs-alert-color: var(--wp-ink-2);
}

[data-wp-theme="hell"] .text-danger,
[data-wp-theme="warm"] .text-danger { color: var(--wp-danger) !important; }

[data-wp-theme="hell"] .text-success,
[data-wp-theme="warm"] .text-success { color: var(--wp-ok) !important; }

[data-wp-theme="hell"] .text-secondary,
[data-wp-theme="warm"] .text-secondary,
[data-wp-theme="hell"] .text-body-secondary,
[data-wp-theme="warm"] .text-body-secondary { color: var(--wp-ink-3) !important; }

[data-wp-theme="hell"] .text-primary,
[data-wp-theme="warm"] .text-primary { color: var(--wp-accent) !important; }

[data-wp-theme="hell"] .border,
[data-wp-theme="warm"] .border,
[data-wp-theme="hell"] .border-bottom,
[data-wp-theme="warm"] .border-bottom,
[data-wp-theme="hell"] .border-top,
[data-wp-theme="warm"] .border-top,
[data-wp-theme="hell"] .border-start,
[data-wp-theme="warm"] .border-start { border-color: var(--wp-line) !important; }

[data-wp-theme="hell"] .border-danger,
[data-wp-theme="warm"] .border-danger { border-color: var(--wp-danger) !important; }

[data-wp-theme="hell"] .bg-light,
[data-wp-theme="warm"] .bg-light,
[data-wp-theme="hell"] .bg-body-tertiary,
[data-wp-theme="warm"] .bg-body-tertiary { background-color: var(--wp-sunken) !important; }

[data-wp-theme="hell"] .bg-white,
[data-wp-theme="warm"] .bg-white { background-color: var(--wp-surface) !important; }

/* ==========================================================================
   Die Plantafel. Hier entscheidet sich, ob ein Erscheinungsbild etwas taugt —
   auf diesen Bildschirm schaut ein Planer den ganzen Tag.

   Der Eingriff: Das Gitternetz verschwindet. Statt jeder Zelle einen Rahmen zu
   geben, trennen nur noch feine Linien die ZEILEN; die Spalten hält die
   Ausrichtung zusammen. Dadurch treten die Dienstkacheln hervor, statt in einem
   Karonetz unterzugehen — genau das, was die Tafel heute schwer lesbar macht.
   ========================================================================== */

[data-wp-theme="hell"] .wp-board,
[data-wp-theme="warm"] .wp-board,
[data-wp-theme="hell"] .wp-conflicts,
[data-wp-theme="warm"] .wp-conflicts,
[data-wp-theme="hell"] .wp-palette,
[data-wp-theme="warm"] .wp-palette {
    border: 0;
    border-radius: var(--wp-radius);
    box-shadow: var(--wp-shadow);
    overflow: hidden;
}

/* Die Tafel bleibt bei mittleren Fensterbreiten horizontal erreichbar. Ein pauschales overflow:hidden
   an der Karte schnitt zuvor die rechten Wochentage ab, obwohl die Komponente selbst Scrollen vorsieht. */
[data-wp-theme="hell"] .wp-board,
[data-wp-theme="warm"] .wp-board {
    overflow-x: auto;
    overflow-y: hidden;
}

/* Kein Karonetz mehr: nur Zeilentrenner. */
[data-wp-theme="hell"] .wp-board-table th,
[data-wp-theme="warm"] .wp-board-table th,
[data-wp-theme="hell"] .wp-board-table td,
[data-wp-theme="warm"] .wp-board-table td {
    border: 0;
    border-bottom: 1px solid var(--wp-line);
}

/* Der Spaltenkopf trägt keine Fläche mehr — er trennt sich durch eine kräftigere Linie. */
[data-wp-theme="hell"] .wp-board-table thead th,
[data-wp-theme="warm"] .wp-board-table thead th {
    background: var(--wp-surface);
    border-bottom: 1px solid var(--wp-line-strong);
    padding: .6rem .5rem .55rem;
    text-align: left;
}

[data-wp-theme="hell"] .wp-rowhead,
[data-wp-theme="warm"] .wp-rowhead {
    background: var(--wp-surface);
    padding: .55rem .75rem !important;
    width: 210px;
}

[data-wp-theme="hell"] .wp-board-table,
[data-wp-theme="warm"] .wp-board-table {
    background: var(--wp-surface);
}

/* Wochenende und Heute nur andeuten — im Karonetz musste die Tönung kräftig sein,
   ohne Gitter reicht ein Hauch. */
[data-wp-theme="hell"] .wp-cell.wp-weekend,
[data-wp-theme="warm"] .wp-cell.wp-weekend,
[data-wp-theme="hell"] .wp-board-table th.wp-weekend,
[data-wp-theme="warm"] .wp-board-table th.wp-weekend {
    background: var(--wp-cell-weekend);
}

[data-wp-theme="hell"] .wp-cell.wp-today,
[data-wp-theme="warm"] .wp-cell.wp-today,
[data-wp-theme="hell"] .wp-board-table th.wp-today,
[data-wp-theme="warm"] .wp-board-table th.wp-today {
    background: var(--wp-cell-today) !important;
}

[data-wp-theme="hell"] .wp-board-table th.wp-today .wp-dayname,
[data-wp-theme="warm"] .wp-board-table th.wp-today .wp-dayname {
    color: var(--wp-accent);
}

/* Die Zeile „Zu besetzen“ wird zu einem ruhigen Band statt zu einem Stapel Warnschilder. */
[data-wp-theme="hell"] .wp-open-row > td,
[data-wp-theme="warm"] .wp-open-row > td {
    background: var(--wp-open-soft);
    border-bottom: 1px solid var(--wp-line-strong);
}

[data-wp-theme="hell"] .wp-open-row .wp-rowhead,
[data-wp-theme="warm"] .wp-open-row .wp-rowhead {
    background: var(--wp-open-soft);
    color: var(--wp-open);
    font-weight: 600;
}

/* ============================================================================
   ÜBERSICHT UND DIAGRAMME
   ============================================================================
   Hier trennen sich die drei Anmutungen am deutlichsten, und zwar mit Absicht:
   Eine Umschaltung, die nur den Blauton wechselt, merkt niemand. Also ändert
   sich die FORM mit — Höhe, Rundung, Strichstärke, Fläche, Dichte.

     klassisch  sachlich, mitteldicht, gerundete Balken, blaue Serie
                (definiert hier nichts; die Bausteine tragen diese Werte selbst)
     hell       luftig und weich: höhere Diagramme, dicke runde Balken, eine
                deutlich sichtbare Fläche unter der Linie, viel Weißraum
     warm       kompakt und gedruckt: flache, fast eckige Balken, gestricheltes
                Raster, kräftige Linie ohne Fläche, engere Zeilen

   Was NICHT variiert: die Zahlen, die Achsengrenzen und welche Punkte
   beschriftet werden. Ein Erscheinungsbild darf hübscher aussehen, aber es
   darf die Aussage nicht verschieben.
   ========================================================================= */

/* ── hell: luftig ─────────────────────────────────────────────────────────── */

[data-wp-theme="hell"] .wp-chart {
    height: 172px;
}

[data-wp-theme="hell"] .wp-chart-line {
    stroke-width: 2.5;
}

/* Die Fläche unter der Kurve trägt hier mit: sie macht aus einer dünnen Linie
   eine Form, die man auch aus drei Metern Entfernung noch erkennt. */
[data-wp-theme="hell"] .wp-chart-area {
    opacity: .16;
}

[data-wp-theme="hell"] .wp-chart-grid {
    stroke-dasharray: none;
}

[data-wp-theme="hell"] .wp-mix-track,
[data-wp-theme="hell"] .wp-load-track,
[data-wp-theme="hell"] .wp-bal-track {
    height: 14px;
}

[data-wp-theme="hell"] .wp-mix-fill,
[data-wp-theme="hell"] .wp-load-fill,
[data-wp-theme="hell"] .wp-bal-fill,
[data-wp-theme="hell"] .wp-load-track {
    border-radius: 7px;
}

[data-wp-theme="hell"] .wp-mix,
[data-wp-theme="hell"] .wp-load,
[data-wp-theme="hell"] .wp-bal {
    gap: .8rem;
}

[data-wp-theme="hell"] .wp-load-row,
[data-wp-theme="hell"] .wp-bal-row {
    grid-template-columns: minmax(0, 9rem) 1fr 4.25rem;
    gap: .8rem;
}

/* ── warm: kompakt und gedruckt ───────────────────────────────────────────── */

[data-wp-theme="warm"] .wp-chart {
    height: 132px;
}

/* Reine Linie ohne Füllung: wirkt technischer, wie eine Kurve auf Millimeter-
   papier — und passt zu den engeren Zeilen darunter. */
[data-wp-theme="warm"] .wp-chart-area {
    opacity: 0;
}

[data-wp-theme="warm"] .wp-chart-line {
    stroke-width: 3;
    stroke-linejoin: miter;
    stroke-linecap: butt;
}

[data-wp-theme="warm"] .wp-chart-grid {
    stroke-dasharray: 2 4;
}

[data-wp-theme="warm"] .wp-chart-dot {
    stroke-width: 1.5;
}

[data-wp-theme="warm"] .wp-mix-track,
[data-wp-theme="warm"] .wp-load-track,
[data-wp-theme="warm"] .wp-bal-track {
    height: 8px;
}

[data-wp-theme="warm"] .wp-mix-fill,
[data-wp-theme="warm"] .wp-load-fill,
[data-wp-theme="warm"] .wp-bal-fill,
[data-wp-theme="warm"] .wp-load-track {
    border-radius: 2px;
}

[data-wp-theme="warm"] .wp-mix,
[data-wp-theme="warm"] .wp-load,
[data-wp-theme="warm"] .wp-bal {
    gap: .3rem;
}

[data-wp-theme="warm"] .wp-load-row,
[data-wp-theme="warm"] .wp-bal-row {
    grid-template-columns: minmax(0, 7rem) 1fr 3.75rem;
    gap: .45rem;
    font-size: .78rem;
}

/* Die Schraffur der offenen Anteile enger stellen — im kompakten Raster wirkt
   die weite Schraffur sonst wie ein Streifenmuster statt wie eine Fläche. */
[data-wp-theme="warm"] .wp-mix-fill.open {
    background-image: repeating-linear-gradient(135deg,
        currentColor 0 1.5px, transparent 1.5px 4px);
}

/* Auf dem Telefon steht der Name über dem Balken (siehe TeamLoad/BalanceSpread). Diese Datei wird
   ZULETZT geladen und hat dieselbe Gewichtung wie die Bausteinregel — ohne diesen Block gewännen die
   drei Spalten von oben, und der Name wäre wieder auf sieben Zeichen gestutzt. */
@media (max-width: 575.98px) {
    [data-wp-theme="hell"] .wp-load-row,
    [data-wp-theme="warm"] .wp-load-row,
    [data-wp-theme="hell"] .wp-bal-row,
    [data-wp-theme="warm"] .wp-bal-row {
        grid-template-columns: 1fr auto;
    }
}

/* ── Umschalter an der Diagrammkarte ──────────────────────────────────────── */

[data-wp-theme="hell"] .wp-chart-switch,
[data-wp-theme="warm"] .wp-chart-switch {
    border-color: transparent;
    background: var(--wp-sunken);
    color: var(--wp-ink-2);
}

[data-wp-theme="hell"] .wp-chart-switch:hover,
[data-wp-theme="warm"] .wp-chart-switch:hover {
    background: var(--wp-accent-soft);
    color: var(--wp-accent-2);
}

[data-wp-theme="hell"] .wp-open-chip,
[data-wp-theme="warm"] .wp-open-chip {
    border-style: solid;
    border-color: transparent;
    background: var(--wp-surface);
    box-shadow: var(--wp-shadow-sm);
    padding: .18rem .6rem;
    white-space: nowrap;
}

/* Ein Konflikt ist ein Punkt, kein roter Rahmen um die ganze Kachel.
   Bei 55 Konflikten in einem Entwurf ist sonst fast jede Kachel eingerahmt — dann
   sagt die Markierung nichts mehr aus, sie schreit nur. */
[data-wp-theme="hell"] .wp-duty-conflict,
[data-wp-theme="warm"] .wp-duty-conflict {
    outline: 0;
    position: relative;
}

[data-wp-theme="hell"] .wp-duty-conflict::after,
[data-wp-theme="warm"] .wp-duty-conflict::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wp-danger);
    box-shadow: 0 0 0 2px var(--wp-surface);
    pointer-events: none;
}

/* Der Griff zum Verschieben sitzt oben rechts — mit Konfliktpunkt rückt er nach links. */
[data-wp-theme="hell"] .wp-duty-conflict .wp-duty-grip,
[data-wp-theme="warm"] .wp-duty-conflict .wp-duty-grip {
    right: 16px;
}

[data-wp-theme="hell"] .wp-open-chip:hover,
[data-wp-theme="warm"] .wp-open-chip:hover {
    border-color: color-mix(in srgb, var(--wp-open) 45%, var(--wp-surface));
    background: var(--wp-surface);
}

/* Monatsansicht und Tagesansicht erben dieselbe Ruhe. */
[data-wp-theme="hell"] .wp-month-table th,
[data-wp-theme="warm"] .wp-month-table th,
[data-wp-theme="hell"] .wp-month-table td,
[data-wp-theme="warm"] .wp-month-table td {
    border: 0;
    border-bottom: 1px solid var(--wp-line);
}

[data-wp-theme="hell"] .wp-month-chip,
[data-wp-theme="warm"] .wp-month-chip {
    border-radius: 5px;
    padding: 0 4px;
}

[data-wp-theme="hell"] .wp-day-col,
[data-wp-theme="warm"] .wp-day-col {
    border-right-color: var(--wp-line);
}

[data-wp-theme="hell"] .wp-day-duty,
[data-wp-theme="warm"] .wp-day-duty {
    box-shadow: var(--wp-shadow-sm);
}

/* Die Palette rechts: Karten statt Kästchen. */
[data-wp-theme="hell"] .wp-palette-item,
[data-wp-theme="warm"] .wp-palette-item {
    border-color: transparent;
    background: var(--wp-surface);
}

[data-wp-theme="hell"] .wp-palette-item:hover,
[data-wp-theme="warm"] .wp-palette-item:hover {
    background: var(--wp-sunken);
    border-color: transparent;
}

[data-wp-theme="hell"] .wp-palette-item.active,
[data-wp-theme="warm"] .wp-palette-item.active {
    background: var(--wp-accent-soft);
    border-color: transparent;
    box-shadow: none;
}

/* Zahlen, die untereinander stehen, sollen fluchten. */
[data-wp-theme="hell"] table,
[data-wp-theme="warm"] table,
[data-wp-theme="hell"] .wp-duty-time,
[data-wp-theme="warm"] .wp-duty-time,
[data-wp-theme="hell"] kbd,
[data-wp-theme="warm"] kbd {
    font-variant-numeric: tabular-nums;
}

/* Überschriften eine Spur enger — wirkt aufgeräumter, ohne Platz zu kosten. */
[data-wp-theme="hell"] h1,
[data-wp-theme="warm"] h1,
[data-wp-theme="hell"] h2,
[data-wp-theme="warm"] h2,
[data-wp-theme="hell"] h3,
[data-wp-theme="warm"] h3 {
    letter-spacing: -.02em;
    font-weight: 600;
}