/* ==========================================================================
   betterRES – Ressourcen & Kalender
   Bildsprache des Fabric-Prototyps, übersetzt in die Haus-Token (--bp-*).
   Das Erkennungszeichen ist das 24-Stunden-Band (.res-band): Schicht = Petrol,
   Pause = Lücke, Minderung = Rot, Zusatz = Grün. Früh = Blau, Spät = Petrol,
   Abwesend = Warn-Gelb – dieselben Farben in Akte, Monat, Rotation und Tafel.
   Keine Verläufe, keine Schatten (DESIGN.md); Tönungen über color-mix.
   ========================================================================== */

.res-page {
    --res-work: var(--bp-petrol);
    --res-early: var(--bp-saldo);
    --res-late: var(--bp-petrol);
    --res-night: var(--bp-purple);
    --res-plus: var(--bp-credit);
    --res-reduced: var(--bp-debit);
    --res-absent: var(--bp-warn);
    --res-holiday: var(--bp-petrol);
    --res-line: var(--bp-panel-border);
    --res-tint: color-mix(in srgb, var(--bp-text) 4%, transparent);
    font-variant-numeric: tabular-nums;
}

.res-page ::selection { background: color-mix(in srgb, var(--bp-yellow) 35%, transparent); color: var(--bp-text); }

/* ---- Kopfband & Grundraster -------------------------------------------- */
.res-head { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; min-width: 0; }
.res-head__title { font-family: var(--bp-font-head); font-size: 1.5rem; font-weight: 600; color: var(--bp-text); margin: 0; letter-spacing: -0.01em; }
.res-head__sub { color: var(--bp-text-muted); font-size: 0.875rem; }

.res-body { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 2rem; min-width: 0; }
.res-tiles { --bp-stat-cols: 4; }
.res-tiles--3 { --bp-stat-cols: 3; }
.res-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.res-h2 { font-family: var(--bp-font-head); font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0; color: var(--bp-text); }
.res-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.res-code { font-family: var(--bp-font-head); font-weight: 600; letter-spacing: 0.02em; color: var(--bp-text); }
.res-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.res-center { text-align: center; }
.res-muted { color: var(--bp-text-muted); margin: 0; font-size: 0.875rem; }
.res-small { color: var(--bp-text-muted); font-size: 0.8125rem; }
.res-hint { color: var(--bp-text-muted); font-size: 0.8125rem; margin: 0; line-height: 1.5; max-width: 80ch; }
.res-danger { color: var(--bp-debit); }
.res-plus { color: var(--bp-credit); }
.res-error { color: var(--bp-debit); margin: 0; font-size: 0.875rem; }

.res-iconbtn {
    appearance: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem;
    background: none; border: 1px solid transparent; border-radius: var(--bp-radius-ctl);
    color: var(--bp-text-muted); cursor: pointer; transition: color 120ms ease-out, background-color 120ms ease-out;
}
.res-iconbtn:hover { color: var(--bp-text); background: var(--bp-panel-hover); }
.res-iconbtn:focus-visible, .res-linkbtn:focus-visible { outline: 2px solid var(--bp-yellow); outline-offset: 2px; }
.res-iconbtn--danger:hover { color: var(--bp-debit); }
.res-linkbtn {
    appearance: none; background: none; border: 0; padding: 0.25rem 0; cursor: pointer;
    color: var(--bp-text-muted); font: inherit; font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 3px;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.res-linkbtn:hover { color: var(--bp-text); }

/* ---- Wochen-/Monatsschalter -------------------------------------------- */
.res-week { display: inline-flex; align-items: center; gap: 0.25rem; }
.res-week__label { display: inline-flex; align-items: baseline; gap: 0.6rem; padding: 0 0.35rem; color: var(--bp-text-muted); font-size: 0.875rem; white-space: nowrap; }
.res-week__label strong { font-family: var(--bp-font-head); color: var(--bp-text); font-weight: 600; font-size: 0.95rem; }
.res-week__caption { color: var(--bp-text-faint); }

/* ---- Typ-Marke (kleines Quadrat je Ressourcenart) ---------------------- */
.res-type { display: inline-block; width: 0.625rem; height: 0.625rem; flex: none; background: var(--bp-text-muted); border-radius: 2px; }
.res-type--lg { width: 2.5rem; height: 2.5rem; border-radius: var(--bp-radius-ctl); }
.res-type--machine, .res-type--workplace { background: var(--res-work); }
.res-type--pool { background: transparent; box-shadow: inset 0 0 0 2px var(--res-work); }
.res-type--person, .res-type--team { background: var(--res-early); border-radius: 50%; }
.res-type--tool, .res-type--gauge { background: var(--bp-orange); transform: rotate(45deg) scale(0.85); }
.res-type--lg.res-type--tool, .res-type--lg.res-type--gauge { transform: rotate(45deg) scale(0.72); }
.res-type--external { background: transparent; box-shadow: inset 0 0 0 2px var(--bp-text-muted); border-radius: 50%; }
.res-type--vehicle { background: var(--bp-mint); }

/* ---- Split: Baum | Akte ------------------------------------------------ */
.res-split { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 1rem; align-items: start; }

.res-tree { padding: 0.75rem 0.5rem; position: sticky; top: 0.75rem; max-height: calc(100vh - 7rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bp-panel-border) transparent; }
.res-tree__search { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 0.5rem 0.75rem; border-bottom: 1px solid var(--res-line); margin-bottom: 0.5rem; }
.res-tree__area + .res-tree__area { margin-top: 0.5rem; }
.res-tree__areahead { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.5rem 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bp-text-muted); }
.res-tree__areahead .res-code { color: var(--bp-yellow); letter-spacing: 0.06em; }
.res-tree__areaname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-tree__areahead .res-iconbtn { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }

.res-tree__grouphead, .res-tree__item {
    appearance: none; width: 100%; display: flex; align-items: center; gap: 0.5rem; text-align: left;
    background: none; border: 0; border-radius: var(--bp-radius-ctl); color: var(--bp-text); font: inherit; cursor: pointer;
    transition: background-color 120ms ease-out;
}
.res-tree__grouphead { padding: 0.4rem 0.5rem; font-size: 0.875rem; font-weight: 500; }
.res-tree__grouphead:hover, .res-tree__item:hover { background: var(--bp-panel-hover); }
.res-tree__grouphead:focus-visible, .res-tree__item:focus-visible { outline: 2px solid var(--bp-yellow); outline-offset: -2px; }
/* Gruppenzeile: Auf-/Zuklapp-Knopf und daneben das Bearbeiten-Symbol (keine verschachtelten Knöpfe). */
.res-tree__grouprow { display: flex; align-items: center; gap: 0.25rem; }
.res-tree__grouprow .res-iconbtn { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; flex: none; }
.res-tree__group.is-inactive .res-tree__grouphead { color: var(--bp-text-muted); }

/* Kennzeichen „inaktiv" an Bereich, Gruppe und Modell — leise, ohne Signalfarbe (umkehrbarer Zustand). */
.res-chip--inactive { font-size: 0.6875rem; text-transform: none; letter-spacing: 0; color: var(--bp-text-muted); }

/* Dialogfuß: Löschen/Deaktivieren links abgesetzt, Abbrechen/Speichern rechts. */
.res-dlgfoot { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; width: 100%; }
.res-dlgfoot__start { display: flex; align-items: center; gap: 0.5rem; margin-right: auto; }

.res-tree__caret { font-size: 0.7rem; color: var(--bp-text-muted); width: 0.75rem; }
.res-tree__groupname, .res-tree__itemname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-tree__groupname { color: var(--bp-text-muted); font-weight: 400; }
.res-tree__flag { font-size: 0.6875rem; }
.res-tree__hours { color: var(--bp-text-muted); font-size: 0.8125rem; white-space: nowrap; }
.res-tree__items { list-style: none; margin: 0 0 0.25rem; padding: 0 0 0 1.25rem; }
.res-tree__item { padding: 0.35rem 0.5rem; font-size: 0.875rem; position: relative; }
.res-tree__item .res-code { font-size: 0.8125rem; min-width: 4.5rem; }
.res-tree__item.is-selected { background: color-mix(in srgb, var(--bp-yellow) 10%, transparent); }
.res-tree__item.is-selected::before { content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--bp-yellow); border-radius: 1px; }
.res-tree__item.is-inactive { opacity: 0.5; }
.res-tree__exc { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--res-absent); flex: none; }

/* ---- Akte -------------------------------------------------------------- */
.res-file { min-width: 0; }
.res-file__empty { display: grid; place-items: center; gap: 0.75rem; min-height: 16rem; color: var(--bp-text-muted); text-align: center; }
.res-file__empty .e-icons { font-size: 2rem; opacity: 0.5; }
.res-akte { display: flex; flex-direction: column; gap: 1rem; }
.res-akte__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; }
.res-akte__id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.res-akte__title { font-family: var(--bp-font-head); font-size: 1.25rem; font-weight: 500; margin: 0 0 0.35rem; color: var(--bp-text); }
.res-akte__title .res-code { font-size: 1.25rem; margin-right: 0.35rem; }
.res-akte__chips { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.res-akte__cal { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--bp-text-muted); font-size: 0.8125rem; margin-left: 0.25rem; }
.res-akte__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.res-akte__week { padding: 1rem 1.25rem 0.75rem; }
.res-akte__total { color: var(--bp-text-muted); font-family: var(--bp-font-body); font-weight: 400; font-size: 0.8125rem; }
.res-akte__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.res-akte__wide { grid-column: 1 / -1; }

/* Wochenverlauf: Datum | 24-h-Band | Stunden */
.res-days { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem; row-gap: 0.15rem; }
.res-days__scale, .res-days__row { display: contents; }
.res-days__scale > span { padding-bottom: 0.25rem; }
.res-days__date { font-size: 0.8125rem; color: var(--bp-text-muted); align-self: center; padding: 0.3rem 0; }
.res-days__band { position: relative; align-self: center; }
.res-days__hours { font-size: 0.8125rem; text-align: right; align-self: center; color: var(--bp-text); }
.res-days__hours.is-reduced { color: var(--bp-warn); }
.res-days__row.is-weekend .res-days__date { color: var(--bp-text-faint); }
.res-days__row.is-today .res-days__date { color: var(--bp-yellow); font-weight: 600; }
.res-days__holiday {
    position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%);
    font-size: 0.6875rem; color: var(--res-holiday); background: var(--bp-surface); padding: 0 0.35rem; border-radius: 3px; pointer-events: none;
}

/* ---- Das Band ---------------------------------------------------------- */
.res-band { display: block; width: 100%; height: 26px; }
.res-band--compact { height: 14px; }
.res-band__base { fill: var(--res-tint); }
.res-band__seg { transition: opacity 120ms ease-out; }
.res-band__seg--work { fill: var(--res-work); }
.res-band__seg--partial { fill: color-mix(in srgb, var(--res-work) 55%, transparent); }
.res-band__seg--break { fill: var(--bp-surface); }
.res-band__seg--reduced { fill: color-mix(in srgb, var(--res-reduced) 70%, transparent); }
.res-band__seg--plus { fill: var(--res-plus); }
.res-band__tick { stroke: var(--bp-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.res-band:hover .res-band__seg { opacity: 0.9; }

.res-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--bp-text-muted); }
.res-legend__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.res-legend__item::before { content: ""; width: 0.75rem; height: 0.5rem; border-radius: 2px; background: var(--res-tint); }
.res-legend__item--work::before { background: var(--res-work); }
.res-legend__item--partial::before { background: color-mix(in srgb, var(--res-work) 55%, transparent); }
.res-legend__item--expiring::before { background: none; box-shadow: inset 0 0 0 1px var(--bp-warn); }
.res-legend__item--expired::before { background: none; box-shadow: inset 0 0 0 1px var(--bp-debit); }
.res-legend__note { color: var(--bp-text-faint); }

/* ---- Fakten, Qualifikationen, Ereignisse ------------------------------- */
.res-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; font-size: 0.875rem; }
.res-facts dt { color: var(--bp-text-muted); }
.res-facts dd { margin: 0; color: var(--bp-text); text-align: right; min-width: 0; overflow-wrap: anywhere; }

.res-quals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.res-qual { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0.5rem; border-radius: var(--bp-radius-ctl); font-size: 0.875rem; }
.res-qual .res-code { min-width: 4.5rem; }
.res-qual__until { margin-left: auto; color: var(--bp-text-muted); font-size: 0.75rem; }
.res-qual.is-expiring { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bp-warn) 60%, transparent); }
.res-qual.is-expiring .res-qual__until { color: var(--bp-warn); }
.res-qual.is-expired { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bp-debit) 60%, transparent); }
.res-qual.is-expired .res-qual__until { color: var(--bp-debit); }

.res-pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.res-pips__dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bp-text) 25%, transparent); }
.res-pips__dot.is-on { background: var(--res-early); box-shadow: none; }
.res-pips--l1 .res-pips__dot.is-on { background: color-mix(in srgb, var(--res-early) 45%, transparent); }
.res-pips--l4 .res-pips__dot.is-on { background: var(--bp-yellow); }

.res-mini { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.res-mini th { color: var(--bp-text-muted); font-weight: 500; font-size: 0.75rem; text-align: left; padding: 0 0 0.35rem; }
.res-mini td { padding: 0.35rem 0; border-top: 1px solid var(--res-line); }

.res-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.res-event { display: grid; grid-template-columns: 8.5rem 11rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--res-line); font-size: 0.875rem; }
.res-event:first-child { border-top: 0; }
.res-event__when { color: var(--bp-text); white-space: nowrap; }
.res-event__what { color: var(--bp-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-event__src { color: var(--bp-text-faint); font-size: 0.75rem; }

/* ---- Formulare in Dialogen --------------------------------------------- */
.res-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.res-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.res-field > label, .res-field > div > label, .res-fieldset > legend { color: var(--bp-text-muted); font-size: 0.8125rem; }
.res-field--wide { grid-column: 1 / -1; }
.res-field--check { justify-content: flex-end; padding-bottom: 0.35rem; }
.res-field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.res-field--pair > div { display: flex; flex-direction: column; gap: 0.35rem; }
.res-fieldset { border: 1px solid var(--res-line); border-radius: var(--bp-radius-ctl); padding: 0.75rem 1rem 1rem; margin: 0; gap: 0.75rem; }
.res-fieldset > legend { padding: 0 0.35rem; }
.res-inline { display: flex; align-items: center; gap: 1rem; }
.res-inline > :first-child { flex: 1; }

.res-seg { display: inline-flex; flex-wrap: nowrap; gap: 0.25rem; padding: 0.2rem; background: var(--res-tint); border-radius: var(--bp-radius-ctl); }
.res-seg--wrap { flex-wrap: wrap; }
.res-seg__opt {
    appearance: none; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.7rem;
    background: none; border: 0; border-radius: 6px; color: var(--bp-text-muted); font: inherit; font-size: 0.8125rem; cursor: pointer; white-space: nowrap;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}
.res-seg__opt:hover { color: var(--bp-text); }
.res-seg__opt.is-on { background: var(--bp-panel-solid-2); color: var(--bp-text); box-shadow: inset 0 0 0 1px var(--bp-panel-border); }
.res-seg__opt:focus-visible { outline: 2px solid var(--bp-yellow); outline-offset: 1px; }

.res-preview { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--res-tint); border-radius: var(--bp-radius-ctl); }
.res-preview__row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 5.5rem; align-items: center; gap: 0.75rem; }
.res-preview__label { color: var(--bp-text-muted); font-size: 0.8125rem; }
.res-preview__hours { text-align: right; font-size: 0.875rem; }

.res-breakrow { display: flex; align-items: center; gap: 0.5rem; }

.res-weekgrid { display: flex; flex-direction: column; gap: 0.25rem; }
.res-weekgrid__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 4rem; align-items: center; gap: 0.75rem; padding: 0.25rem 0; border-top: 1px solid var(--res-line); }
.res-weekgrid__row:first-child { border-top: 0; }
.res-weekgrid__day { color: var(--bp-text-muted); font-size: 0.875rem; }
.res-weekgrid__shifts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.res-weekgrid__hours { text-align: right; font-size: 0.875rem; }
.res-weekgrid__total { text-align: right; font-family: var(--bp-font-head); font-weight: 600; padding-top: 0.5rem; border-top: 1px solid var(--res-line); }

/* Schicht-Kürzel (Früh/Spät/Nacht) – auch als Schalter im Wochenmodell */
.res-shiftchip {
    appearance: none; display: inline-block; min-width: 2.25rem; padding: 0.1rem 0.45rem; margin: 0 0.1rem;
    border: 1px solid currentColor; border-radius: 6px; font-family: var(--bp-font-head); font-size: 0.75rem; font-weight: 600; text-align: center;
    background: none; color: var(--bp-text-muted);
}
.res-shiftchip--early { color: var(--res-early); }
.res-shiftchip--late { color: var(--res-late); }
.res-shiftchip--night { color: var(--res-night); }
button.res-shiftchip { cursor: pointer; transition: background-color 120ms ease-out, opacity 120ms ease-out; }
button.res-shiftchip.is-off { opacity: 0.45; border-style: dashed; }
button.res-shiftchip.is-on { background: color-mix(in srgb, currentColor 18%, transparent); opacity: 1; }
button.res-shiftchip:focus-visible { outline: 2px solid var(--bp-yellow); outline-offset: 2px; }

/* ---- Tabellen ---------------------------------------------------------- */
.res-tablecard { padding: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--bp-panel-border) transparent; }
.res-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.res-table th { text-align: left; font-weight: 500; font-size: 0.75rem; color: var(--bp-text-muted); padding: 0.75rem 1rem 0.5rem; border-bottom: 1px solid var(--res-line); white-space: nowrap; }
.res-table td { padding: 0.55rem 1rem; border-bottom: 1px solid var(--res-line); vertical-align: middle; }
.res-table tbody tr:last-child td, .res-table tbody tr:last-child th { border-bottom: 0; }
.res-table tbody tr:hover > td { background: var(--bp-panel-hover); }
.res-table tr.is-inactive td { color: var(--bp-text-faint); }
.res-table__band { width: 30%; min-width: 220px; }
.res-actions { width: 1%; white-space: nowrap; text-align: right; }
.res-scale { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--bp-text-faint); }

/* Rotation */
.res-rota__date { display: block; font-size: 0.6875rem; color: var(--bp-text-faint); font-weight: 400; }
.res-rota__cell { text-align: center; font-size: 0.8125rem; font-weight: 500; padding: 0.45rem 0.5rem !important; }
.res-rota__cell--early { background: color-mix(in srgb, var(--res-early) 16%, transparent); color: var(--res-early); }
.res-rota__cell--late { background: color-mix(in srgb, var(--res-late) 16%, transparent); color: var(--res-late); }
.res-rota__cell--night { background: color-mix(in srgb, var(--res-night) 18%, transparent); color: var(--res-night); }
.res-rota__cell--day { background: var(--res-tint); color: var(--bp-text); }
.res-rota__cell--absent { background: color-mix(in srgb, var(--res-absent) 16%, transparent); color: var(--res-absent); }
.res-rota__cell--none { color: var(--bp-text-faint); }

/* ---- Monatsraster ------------------------------------------------------ */
.res-month-wrap { display: flex; flex-direction: column; gap: 0.75rem; }
.res-month { display: flex; flex-direction: column; gap: 4px; }
.res-month__head, .res-month__row { display: grid; grid-template-columns: 2rem repeat(7, minmax(0, 1fr)); gap: 4px; }
.res-month__head span { font-size: 0.75rem; color: var(--bp-text-muted); font-weight: 600; text-align: center; padding: 0.15rem; }
.res-month__kw { font-size: 0.6875rem; color: var(--bp-text-faint); text-align: center; padding-top: 0.5rem; }
.res-day {
    display: flex; flex-direction: column; gap: 3px; min-height: 6.25rem; min-width: 0; padding: 0.4rem 0.45rem;
    background: var(--bp-panel); border: 1px solid var(--res-line); border-radius: 8px; font-size: 0.6875rem;
}
.res-day__num { font-family: var(--bp-font-head); font-size: 0.875rem; font-weight: 600; color: var(--bp-text); }
.res-day__cap { margin-top: auto; color: var(--bp-text-muted); }
.res-day__more { color: var(--bp-text-faint); }
.res-day.is-weekend { background: var(--res-tint); }
.res-day.is-weekend .res-day__num { color: var(--bp-text-muted); }
.res-day.is-other { opacity: 0.45; }
.res-day.is-holiday { border-color: color-mix(in srgb, var(--res-holiday) 45%, transparent); }
.res-day.is-today { box-shadow: inset 0 0 0 2px var(--bp-yellow); border-color: transparent; }
.res-day.is-today .res-day__num { color: var(--bp-yellow); }

.res-mark { display: block; padding: 1px 5px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.6875rem; line-height: 1.5; }
.res-legend .res-mark { display: inline-block; }
.res-mark--holiday { background: color-mix(in srgb, var(--res-holiday) 18%, transparent); color: var(--res-holiday); }
.res-mark--planned { background: color-mix(in srgb, var(--bp-warn) 16%, transparent); color: var(--bp-warn); }
.res-mark--disruption { background: color-mix(in srgb, var(--res-reduced) 18%, transparent); color: var(--res-reduced); }
.res-mark--plus { background: color-mix(in srgb, var(--res-plus) 16%, transparent); color: var(--res-plus); }
.res-mark--absence { background: color-mix(in srgb, var(--res-early) 14%, transparent); color: var(--res-early); }

/* ---- Verfügbarkeit ----------------------------------------------------- */
.res-avail { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.res-avail .bp-card { display: flex; flex-direction: column; gap: 0.75rem; }
.res-intervals { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.res-intervals li { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1rem; padding: 0.35rem 0; border-top: 1px solid var(--res-line); }
.res-intervals li:first-child { border-top: 0; }

/* ---- Qualifikationsmatrix ---------------------------------------------- */
.res-matrix { width: auto; min-width: 100%; }
.res-matrix th, .res-matrix td { padding: 0.4rem 0.5rem; }
.res-matrix__corner, .res-matrix__person { position: sticky; left: 0; background: var(--bp-panel-solid); z-index: 1; min-width: 14rem; }
.res-matrix__person { display: flex; align-items: baseline; gap: 0.5rem; font-weight: 400; color: var(--bp-text); }
.res-matrix__person .res-small { margin-left: auto; }
.res-matrix__col { text-align: center; min-width: 4.5rem; vertical-align: bottom; }
.res-matrix__colbtn { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-family: var(--bp-font-head); font-weight: 600; color: var(--bp-text); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.res-matrix__col > span:first-child { font-family: var(--bp-font-head); font-weight: 600; color: var(--bp-text); }
.res-matrix__cover { display: block; font-size: 0.6875rem; color: var(--bp-text-faint); font-weight: 400; }
.res-matrix__col.is-single .res-matrix__cover { color: var(--bp-debit); font-weight: 600; }
.res-matrix__col.is-none .res-matrix__cover { color: var(--bp-warn); }
.res-matrix__cell { text-align: center; }
.res-matrix__cell.is-expiring { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bp-warn) 60%, transparent); }
.res-matrix__cell.is-expired { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bp-debit) 60%, transparent); }
.res-matrix__btn { appearance: none; background: none; border: 0; padding: 0.35rem 0.5rem; border-radius: 6px; cursor: pointer; line-height: 1; }
.res-matrix__btn:hover { background: var(--bp-panel-hover); }
.res-matrix__btn:focus-visible { outline: 2px solid var(--bp-yellow); outline-offset: 1px; }
.res-matrix__empty { color: var(--bp-text-faint); font-size: 1rem; }

.res-levels { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; }
.res-levels__opt { appearance: none; display: flex; align-items: center; gap: 1rem; padding: 0.55rem 0.75rem; background: none; border: 1px solid transparent; border-radius: var(--bp-radius-ctl); color: var(--bp-text); font: inherit; cursor: pointer; text-align: left; }
.res-levels__opt:hover { background: var(--bp-panel-hover); }
.res-levels__opt.is-on { border-color: var(--bp-yellow); background: color-mix(in srgb, var(--bp-yellow) 8%, transparent); }
.res-levels__opt .res-pips, .res-levels__opt .res-matrix__empty { min-width: 2.5rem; }

/* ---- Abwesenheitstafel ------------------------------------------------- */
.res-board th, .res-board td { padding: 0; text-align: center; }
.res-board__corner, .res-board__person { position: sticky; left: 0; background: var(--bp-panel-solid); z-index: 1; text-align: left !important; padding: 0.4rem 0.75rem !important; min-width: 13rem; white-space: nowrap; font-weight: 400; color: var(--bp-text); }
.res-board__day { min-width: 1.85rem; padding: 0.4rem 0 !important; font-weight: 600; color: var(--bp-text); }
.res-board__day span { display: block; }
.res-board__wd { font-size: 0.625rem; font-weight: 400; color: var(--bp-text-faint); }
.res-board__day.is-weekend, .res-board__cell.is-weekend { background: var(--res-tint); }
.res-board__day.is-today { color: var(--bp-yellow); }
.res-board__cell { height: 2rem; border-left: 1px solid color-mix(in srgb, var(--res-line) 60%, transparent); }
.res-board__add { appearance: none; width: 100%; height: 2rem; background: none; border: 0; cursor: pointer; }
.res-board__add:hover { background: color-mix(in srgb, var(--bp-yellow) 10%, transparent); }
.res-board__add:focus-visible { outline: 2px solid var(--bp-yellow); outline-offset: -2px; }

.res-abs { display: inline-block; padding: 0 0.45rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500; line-height: 1.6; background: color-mix(in srgb, var(--res-absent) 18%, transparent); color: var(--res-absent); }
.res-abs--sick { background: color-mix(in srgb, var(--res-reduced) 18%, transparent); color: var(--res-reduced); }
.res-abs--training { background: color-mix(in srgb, var(--res-early) 16%, transparent); color: var(--res-early); }
.res-abs--businesstrip { background: color-mix(in srgb, var(--res-late) 16%, transparent); color: var(--res-late); }
.res-abs--other, .res-abs--hidden { background: color-mix(in srgb, var(--bp-text) 10%, transparent); color: var(--bp-text-muted); }
.res-abs--cell { display: grid; place-items: center; width: 100%; height: 2rem; padding: 0; border-radius: 0; font-family: var(--bp-font-head); font-weight: 600; }
.res-abs.is-requested { opacity: 0.55; }

/* Herkunft einer Abwesenheit aus betterHR: leiser Vermerk neben dem Status, keine Farbe – die Zeile ist nur gespiegelt. */
.res-source { margin-left: 0.5rem; font-size: 0.6875rem; font-weight: 600; color: var(--bp-text-muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }

/* ---- Einstellungen ----------------------------------------------------- */
/* Im Einstellungsbereich (ResSettingsEditor), Bauart der Fabric-Maske: Gruppen als SettingsBlock, die Speicherleiste
   zählt offene und eigene Werte. Eine Zeile = Wirkung links, Eingabe rechts; die Vorgabe steht immer darunter, damit
   „geändert“ ohne Nachschlagen lesbar ist. */
.res-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; padding: 0.7rem 1rem; border-radius: var(--bp-radius-ctl); font-size: 0.8125rem; color: var(--bp-text); }
.res-banner--warn { background: color-mix(in srgb, var(--bp-warn) 14%, transparent); }
.res-setedit > .res-banner { margin-bottom: var(--bp-space-4); }
.res-setedit__hint { margin-top: var(--bp-space-4); }
.res-setedit__state { display: flex; flex-direction: column; gap: 0.15rem; margin-right: auto; font-size: 0.875rem; color: var(--bp-text); }
.res-setedit__count { font-size: 0.75rem; color: var(--bp-text-muted); }
.res-set__rows { display: flex; flex-direction: column; }
.res-set__row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); gap: 0.5rem 1.5rem; align-items: start;
    padding: 0.85rem 0; border-top: 1px solid var(--res-line);
}
.res-set__row:first-child { border-top: 0; }
.res-set__row.is-pending { background: color-mix(in srgb, var(--bp-yellow) 9%, transparent); padding-inline: 0.85rem; margin-inline: -0.85rem; border-radius: var(--bp-radius-ctl); }
.res-set__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.res-set__label { font-size: 0.875rem; font-weight: 600; color: var(--bp-text); display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.res-set__flag { font-size: 0.6875rem; font-weight: 600; color: var(--bp-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.res-set__why { font-size: 0.8125rem; color: var(--bp-text-muted); line-height: 1.5; max-width: 70ch; }
.res-set__input { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.res-set__num { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.res-set__unit { font-size: 0.8125rem; color: var(--bp-text-muted); white-space: nowrap; }
.res-set__mono input { font-family: var(--bp-font-head); letter-spacing: 0.02em; }
.res-set__default { font-size: 0.75rem; color: var(--bp-text-muted); display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.res-set__reset { font-size: 0.75rem; }
.res-set__prio { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; align-items: center; gap: 0.3rem 0.75rem; }
.res-set__prio-label { font-size: 0.8125rem; color: var(--bp-text); min-width: 0; }
.res-set__prio input { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .res-set__row { grid-template-columns: minmax(0, 1fr); }
}