/* ============================================================================
   MODERN — vierte, eigenständige Anzeige

   MainLayout setzt für dieses Erscheinungsbild data-wp-theme="hell", damit alle
   fachlich erprobten Komponentenregeln weiterverwendet werden, und zusätzlich
   data-wp-style="modern". Diese Datei liegt nach theme.css und überschreibt nur
   die moderne Variante. Hell, Warm und Klassisch bleiben dadurch unangetastet.
   ============================================================================ */

[data-wp-style="modern"] {
    --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: #f0f2f7;
    --wp-line: #e2e5ed;
    --wp-line-strong: #d6dbe6;

    --wp-ink: #1b1f2d;
    --wp-ink-2: #555d70;
    --wp-ink-3: #697086;

    --wp-accent: #6658e8;
    --wp-accent-2: #5142cf;
    --wp-accent-soft: #eeecff;
    --wp-accent-rgb: 102, 88, 232;

    --wp-ok: #087a4d;
    --wp-ok-soft: #e4f5ed;
    --wp-open: #875200;
    --wp-open-soft: #fbefd9;
    --wp-danger: #bd3933;
    --wp-danger-soft: #fbe9e8;

    --wp-rail-bg: #ffffff;
    --wp-rail-ink: #50586b;
    --wp-rail-ink-2: #697086;
    --wp-rail-brand: #1b1f2d;
    --wp-rail-line: #e2e5ed;
    --wp-rail-border: 1px solid #e2e5ed;
    --wp-rail-hover-bg: #f0f2f7;
    --wp-rail-hover-ink: #1b1f2d;
    --wp-rail-active-bg: #eeecff;
    --wp-rail-active-bar: transparent;
    --wp-rail-active-ink: #5142cf;
    --wp-rail-radius: 10px;
    --wp-rail-active-weight: 600;
    --wp-rail-brand-weight: 700;
    --wp-rail-w: 232px;
    --wp-nav-pad-x: .6rem;

    --wp-radius: 14px;
    --wp-radius-sm: 10px;
    --wp-shadow: 0 1px 2px rgba(27, 31, 45, .04), 0 9px 28px rgba(27, 31, 45, .07);
    --wp-shadow-sm: 0 2px 8px rgba(27, 31, 45, .07);

    --wp-duty-bar: 3px;
    --wp-duty-open-bar: 3px;
    --wp-duty-fill: 13%;
    --wp-duty-radius: 8px;
    --wp-duty-pad: .4rem .55rem;
    --wp-duty-time-weight: 700;
    --wp-duty-label: color-mix(in srgb, var(--duty-color, #6658e8) 72%, #111827);
    --wp-duty-time-color: var(--wp-duty-label);

    --wp-cell-weekend: #f8f9fc;
    --wp-cell-today: #f0efff;
    --wp-row-min: 64px;

    --wp-avatar-size: 2rem;
    --wp-avatar-font: .72rem;
    --wp-avatar-bg: color-mix(in srgb, var(--emp-color, #6658e8) 14%, #ffffff);
    --wp-avatar-fg: color-mix(in srgb, var(--emp-color, #6658e8) 80%, #111827);
    --wp-emp-name-weight: 600;
    --wp-toolbar-plan-weight: 600;
    --wp-chip-radius: 7px;
    --wp-coverage-h: 4px;
    --wp-coverage-short: #b36d00;
    --wp-gapbar-radius: 6px;
    --wp-gapbar-fill: #f2d49e;
}

/* App-Rahmen und Kopfzeile */

[data-wp-style="modern"].wp-theme-root {
    background: var(--wp-ground);
}

[data-wp-style="modern"] .wp-topbar {
    height: 60px;
    background: color-mix(in srgb, var(--wp-surface) 94%, transparent);
    border-bottom-color: var(--wp-line);
    box-shadow: 0 1px 0 rgba(27, 31, 45, .025);
    backdrop-filter: blur(12px) saturate(130%);
}

[data-wp-style="modern"] .wp-brand {
    height: 60px;
}

[data-wp-style="modern"] .wp-brand > i {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .65rem;
    color: var(--wp-accent-2);
    background: var(--wp-accent-soft);
}

[data-wp-style="modern"] .wp-nav-link {
    min-height: 2.35rem;
    transition: color .15s ease, background-color .15s ease;
}

[data-wp-style="modern"] .wp-nav-link i {
    color: color-mix(in srgb, currentColor 88%, transparent);
}

[data-wp-style="modern"] .wp-nav-group {
    padding-top: 1.05rem;
    font-weight: 600;
    letter-spacing: .075em;
}

[data-wp-style="modern"] .wp-topbar-action {
    min-height: 36px;
    padding-inline: .7rem;
}

[data-wp-style="modern"] .wp-user-menu {
    min-height: 38px;
    padding: .35rem .65rem !important;
    border-radius: 999px;
    color: var(--wp-ink-2);
}

[data-wp-style="modern"] .wp-user-menu:hover {
    color: var(--wp-ink);
    background: var(--wp-sunken);
}

/* Seitentitel und Inhaltsbausteine */

[data-wp-style="modern"] .wp-page-header {
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: .95rem;
    border-bottom: 1px solid var(--wp-line);
}

[data-wp-style="modern"] .wp-page-heading {
    min-width: min(100%, 22rem);
}

[data-wp-style="modern"] .wp-page-title {
    margin-bottom: .3rem !important;
    /* Der Seitentitel muss das groesste Element der Seite sein. Vorher war das die
       Kennzahl einer Handlungskarte mit 30,4 px — auf der Uebersicht stand damit das
       Wort „Okt" groesser da als die Ueberschrift „Uebersicht". */
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    line-height: 1.18;
    letter-spacing: -.025em;
}

/* Die Groessen der Handlungskarten stehen als Grundregel in Home.razor.css — die Hierarchie war
   in ALLEN vier Erscheinungsbildern falsch (die Kennzahl war groesser als der Seitentitel).
   Modern setzt hier nur noch die eigene Strichstaerke. */
[data-wp-style="modern"] .wp-task-title {
    font-weight: 650;
}

[data-wp-style="modern"] .wp-page-subtitle {
    max-width: 72ch;
    color: var(--wp-ink-2) !important;
    font-size: .9rem;
    line-height: 1.45;
}

[data-wp-style="modern"] .card {
    --bs-card-border-color: var(--wp-line);
    box-shadow: var(--wp-shadow);
}

[data-wp-style="modern"] .card > .card-header {
    padding-top: .85rem;
    padding-bottom: .85rem;
}

[data-wp-style="modern"] .table > thead > tr > th {
    background-color: color-mix(in srgb, var(--wp-sunken) 68%, var(--wp-surface));
    border-bottom-color: var(--wp-line-strong);
    color: var(--wp-ink-2);
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .025em;
}

[data-wp-style="modern"] .form-control,
[data-wp-style="modern"] .form-select,
[data-wp-style="modern"] .input-group-text {
    min-height: 2.5rem;
}

[data-wp-style="modern"] .form-control-sm,
[data-wp-style="modern"] .form-select-sm {
    min-height: 2rem;
}

[data-wp-style="modern"] .text-secondary,
[data-wp-style="modern"] .text-body-secondary {
    color: var(--wp-ink-2) !important;
}

[data-wp-style="modern"] .wp-empty-state {
    max-width: 34rem;
    margin-inline: auto;
}

[data-wp-style="modern"] .wp-empty-icon {
    display: grid !important;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-inline: auto;
    border-radius: 1.25rem;
    color: var(--wp-accent);
    background: var(--wp-accent-soft);
}

[data-wp-style="modern"] .wp-empty-title {
    color: var(--wp-ink);
    font-size: 1.05rem;
}

/* Semantische Bootstrap-Zustände, die in der gemeinsamen Theme-Datei bisher
   nicht vollständig abgedeckt sind. */

[data-wp-style="modern"] .btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--wp-open);
    --bs-btn-border-color: var(--wp-open);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #704300;
    --bs-btn-hover-border-color: #704300;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #613a00;
    --bs-btn-active-border-color: #613a00;
}

[data-wp-style="modern"] .badge.text-bg-info,
[data-wp-style="modern"] .alert-primary,
[data-wp-style="modern"] .alert-info {
    background-color: var(--wp-accent-soft) !important;
    color: var(--wp-accent-2) !important;
}

[data-wp-style="modern"] .alert-light {
    background-color: var(--wp-surface);
    border-color: var(--wp-line) !important;
    color: var(--wp-ink-2);
}

[data-wp-style="modern"] .table-warning {
    --bs-table-color: var(--wp-ink);
}

[data-wp-style="modern"] .table-danger {
    --bs-table-bg: var(--wp-danger-soft);
    --bs-table-color: var(--wp-ink);
}

[data-wp-style="modern"] .table-active {
    --bs-table-bg-state: var(--wp-accent-soft);
    --bs-table-color-state: var(--wp-ink);
}

[data-wp-style="modern"] .border-primary,
[data-wp-style="modern"] .border-info {
    border-color: var(--wp-accent) !important;
}

[data-wp-style="modern"] .border-success { border-color: var(--wp-ok) !important; }
[data-wp-style="modern"] .border-warning { border-color: var(--wp-open) !important; }
[data-wp-style="modern"] .bg-primary-subtle { background-color: var(--wp-accent-soft) !important; }
[data-wp-style="modern"] .text-warning { color: var(--wp-open) !important; }
[data-wp-style="modern"] .text-info { color: var(--wp-accent-2) !important; }

/* Plantafel: Orientierung bleibt bei breiten Zeiträumen erhalten. */

[data-wp-style="modern"] .wp-board-table .wp-rowhead,
[data-wp-style="modern"] .wp-month-table .wp-rowhead {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--wp-surface);
    box-shadow: 1px 0 0 var(--wp-line);
}

[data-wp-style="modern"] .wp-board-table thead .wp-rowhead,
[data-wp-style="modern"] .wp-month-table thead .wp-rowhead {
    z-index: 4;
    background: var(--wp-sunken);
}

[data-wp-style="modern"] .wp-open-row .wp-rowhead {
    background: var(--wp-open-soft);
}

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

[data-wp-style="modern"] .wp-duty-assign {
    background: var(--wp-ok);
}

[data-wp-style="modern"] .wp-duty-grip {
    color: var(--wp-ink-2);
    background: color-mix(in srgb, var(--wp-ink) 8%, transparent);
}

[data-wp-style="modern"] .wp-cell.wp-move-target {
    outline-color: var(--wp-accent);
}

[data-wp-style="modern"] .wp-day-body {
    background-image: repeating-linear-gradient(to bottom,
        var(--wp-line) 0, var(--wp-line) 1px,
        transparent 1px, transparent var(--wp-day-hour-px));
}

[data-wp-style="modern"] .wp-day-hour {
    border-top-color: var(--wp-line);
    color: var(--wp-ink-3);
}

[data-wp-style="modern"] .wp-day-body.wp-day-absent,
[data-wp-style="modern"] .wp-cell.wp-absent {
    background-color: var(--wp-sunken);
}

[data-wp-style="modern"] .wp-day-body:hover {
    background-color: color-mix(in srgb, var(--wp-accent-soft) 38%, var(--wp-surface));
}

[data-wp-style="modern"] .wp-day-absence,
[data-wp-style="modern"] .wp-absence {
    color: var(--wp-ink-2);
    background: repeating-linear-gradient(45deg,
        var(--wp-sunken), var(--wp-sunken) 6px,
        var(--wp-surface) 6px, var(--wp-surface) 12px);
}

[data-wp-style="modern"] .wp-absence {
    border-color: var(--wp-line-strong);
}

[data-wp-style="modern"] .wp-shift-duty.wp-duty-open .wp-duty-time {
    color: var(--wp-open);
}

[data-wp-style="modern"] .wp-duty-focus {
    animation-name: wp-modern-focus-pulse;
    outline-color: var(--wp-accent);
}

[data-wp-style="modern"] .wp-month-cell:hover {
    outline-color: var(--wp-accent);
}

[data-wp-style="modern"] .wp-month-chip[data-conflict="True"] {
    outline-color: var(--wp-danger);
}

[data-wp-style="modern"] .wp-add {
    border-color: var(--wp-line-strong);
    color: var(--wp-ink-3);
}

[data-wp-style="modern"] .wp-duty:focus-within .wp-duty-assign,
[data-wp-style="modern"] .wp-cell:focus-within .wp-add {
    display: block;
}

/* ============================================================================
   DIAGRAMME — eigene Form für Modern
   ============================================================================
   Modern erbt data-wp-theme="hell", damit alle erprobten Komponentenregeln
   gelten. Bei den Diagrammen war das zu viel des Guten: Die Übersicht sah in
   Modern Strich für Strich aus wie in Hell — dieselbe Höhe, dieselbe dicke
   Linie, dieselbe Fläche, dieselben dicken Balken. Wer umschaltet, soll den
   Unterschied aber genau dort sehen, wo die Seite am meisten Fläche hat.

   Die Modern-Handschrift: hohe Diagramme, eine HAARFEINE, rund gezeichnete
   Linie über einer weichen Fläche, ein gepunktetes statt durchgezogenes
   Raster und schlanke Kapsel-Balken mit viel Luft dazwischen. Damit steht sie
   klar neben Hell (dick und weich), Warm (kompakt und gedruckt) und Klassisch
   (sachlich, mitteldicht).

   Was hier NICHT variiert: Zahlen, Achsengrenzen und beschriftete Punkte —
   dieselbe Grenze wie in theme.css. Aussehen darf sich ändern, die Aussage
   nicht.
   ========================================================================= */

[data-wp-style="modern"] .wp-chart {
    height: 200px;
}

[data-wp-style="modern"] .wp-chart-line {
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Fläche kräftiger als in Hell, Linie dafür dünner: Die Aussage trägt hier die
   Form, nicht der Strich. */
[data-wp-style="modern"] .wp-chart-area {
    opacity: .3;
}

[data-wp-style="modern"] .wp-chart-grid {
    stroke-dasharray: 1 7;
    stroke-linecap: round;
    opacity: .75;
}

[data-wp-style="modern"] .wp-chart-dot {
    stroke-width: 2.5;
}

[data-wp-style="modern"] .wp-mix-track,
[data-wp-style="modern"] .wp-load-track,
[data-wp-style="modern"] .wp-bal-track {
    height: 10px;
}

/* Volle Kapselrundung — der eine Wert, den weder Hell (7px) noch Warm (2px)
   noch Klassisch verwendet. */
[data-wp-style="modern"] .wp-mix-fill,
[data-wp-style="modern"] .wp-load-fill,
[data-wp-style="modern"] .wp-bal-fill,
[data-wp-style="modern"] .wp-load-track,
[data-wp-style="modern"] .wp-mix-track,
[data-wp-style="modern"] .wp-bal-track {
    border-radius: 999px;
}

[data-wp-style="modern"] .wp-mix,
[data-wp-style="modern"] .wp-load,
[data-wp-style="modern"] .wp-bal {
    gap: 1rem;
}

[data-wp-style="modern"] .wp-load-row,
[data-wp-style="modern"] .wp-bal-row {
    grid-template-columns: minmax(0, 10rem) 1fr 4.5rem;
    gap: 1rem;
}

/* Feine Schraffur für die offenen Anteile: passt zur dünnen Linie und wirkt
   neben den runden Kapseln ruhiger als das weite Streifenmuster. */
[data-wp-style="modern"] .wp-mix-fill.open {
    background-image: repeating-linear-gradient(135deg,
        currentColor 0 1px, transparent 1px 5px);
}

[data-wp-style="modern"] .wp-chart-switch {
    border-color: transparent;
    background: var(--wp-sunken);
    border-radius: 999px;
    color: var(--wp-ink-2);
}

[data-wp-style="modern"] .wp-chart-switch:hover {
    background: var(--wp-accent-soft);
    color: var(--wp-accent-2);
}

@keyframes wp-modern-focus-pulse {
    0%, 60% { box-shadow: 0 0 0 4px rgba(var(--wp-accent-rgb), .3); }
    100% { box-shadow: 0 0 0 0 rgba(var(--wp-accent-rgb), 0); }
}

/* Sichtbarer Tastaturfokus für eigene interaktive Flächen. */

[data-wp-style="modern"] :is(.wp-nav-link, .wp-mday, .wp-mrow, .wp-open-chip,
    .wp-palette-item, .wp-duty, .wp-month-cell):focus-visible {
    outline: 3px solid var(--wp-accent);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    [data-wp-style="modern"] .wp-topbar {
        min-height: 56px;
        height: auto;
    }

    [data-wp-style="modern"] .wp-content {
        padding-inline: 1rem !important;
    }
}

@media (max-width: 575.98px) {
    [data-wp-style="modern"] .wp-page-actions {
        width: 100%;
    }

    /* Wie in theme.css: Auf dem Telefon steht der Name ÜBER dem Balken. Ohne
       diesen Block gewänne die 10-rem-Spalte von oben und der Name wäre wieder
       auf wenige Zeichen gestutzt. */
    [data-wp-style="modern"] .wp-load-row,
    [data-wp-style="modern"] .wp-bal-row {
        grid-template-columns: 1fr auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-wp-style="modern"] *,
    [data-wp-style="modern"] *::before,
    [data-wp-style="modern"] *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}