:root {
  color-scheme: light;
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-2: #f7f9fb;
  --color-surface-3: #f0f3f6;
  --color-hover: #eef2f7;
  --color-line: #eef1f4;
  --color-text: #1f2933;
  --color-muted: #5f6b7a;
  --color-muted-strong: #4b5563;
  --color-border: #d9dee5;
  --color-input-border: #9aa5b1;
  --color-neutral-bg: #e6e9ee;
  --color-primary: #1f5fa8;
  --color-primary-dark: #174a84;
  --color-accent-bg: #e3ecf7;
  --color-accent-fg: #1c3d66;
  --color-today-bg: #f3f7fc;
  --color-danger: #b42318;
  --color-warn: #b7791f;
  --color-ok: #1e7f4f;
  --color-ok-bg: #e2f4ea; --color-ok-fg: #155b3a; --color-ok-border: #9ad2b3;
  --color-error-bg: #fdecea; --color-error-fg: #7a1c15; --color-error-border: #f0a9a2;
  --color-warn-bg: #fff2d9; --color-warn-fg: #6b4300; --color-warn-border: #f2cf8a;
  --color-info-bg: #e8f0fa; --color-info-border: #a9c4e8;
  --color-draft-bg: #fdf1c7; --color-draft-fg: #6b4f00;
  --color-holiday-bg: #fff8e6;
  --color-toast-bg: #1f2933;
  --color-focus: #ffbf47;
  --color-grid-hour: #e9edf1;
  --color-grid-half: #f3f5f7;
  --shadow: rgba(0, 0, 0, .08);
  --shadow-strong: rgba(0, 0, 0, .2);
  --backdrop: rgba(0, 0, 0, .35);
  --radius: 6px;
  --sidenav-width: 220px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #12161c;
  --color-surface: #1b2129;
  --color-surface-2: #20272f;
  --color-surface-3: #252d36;
  --color-hover: #2a333d;
  --color-line: #262e37;
  --color-text: #e6e9ed;
  --color-muted: #9aa5b1;
  --color-muted-strong: #b4bdc7;
  --color-border: #343d48;
  --color-input-border: #4a5563;
  --color-neutral-bg: #2c343e;
  --color-primary: #5b9bdf;
  --color-primary-dark: #7fb1e8;
  --color-accent-bg: #1f3550;
  --color-accent-fg: #c9def5;
  --color-today-bg: #1a2a3d;
  --color-danger: #f08a7e;
  --color-warn: #e0b25a;
  --color-ok: #6fcf9d;
  --color-ok-bg: #173527; --color-ok-fg: #a9e6c5; --color-ok-border: #2f6a4c;
  --color-error-bg: #3a1d1a; --color-error-fg: #f5b8b0; --color-error-border: #6e3029;
  --color-warn-bg: #3a2e14; --color-warn-fg: #f0d28f; --color-warn-border: #6e5523;
  --color-info-bg: #1b2c40; --color-info-border: #34557a;
  --color-draft-bg: #3a3214; --color-draft-fg: #ecd98a;
  --color-holiday-bg: #33291a;
  --color-toast-bg: #2c343e;
  --color-grid-hour: #2b333c;
  --color-grid-half: #232a32;
  --shadow: rgba(0, 0, 0, .4);
  --shadow-strong: rgba(0, 0, 0, .6);
  --backdrop: rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #12161c;
    --color-surface: #1b2129;
    --color-surface-2: #20272f;
    --color-surface-3: #252d36;
    --color-hover: #2a333d;
    --color-line: #262e37;
    --color-text: #e6e9ed;
    --color-muted: #9aa5b1;
    --color-muted-strong: #b4bdc7;
    --color-border: #343d48;
    --color-input-border: #4a5563;
    --color-neutral-bg: #2c343e;
    --color-primary: #5b9bdf;
    --color-primary-dark: #7fb1e8;
    --color-accent-bg: #1f3550;
    --color-accent-fg: #c9def5;
    --color-today-bg: #1a2a3d;
    --color-danger: #f08a7e;
    --color-warn: #e0b25a;
    --color-ok: #6fcf9d;
    --color-ok-bg: #173527; --color-ok-fg: #a9e6c5; --color-ok-border: #2f6a4c;
    --color-error-bg: #3a1d1a; --color-error-fg: #f5b8b0; --color-error-border: #6e3029;
    --color-warn-bg: #3a2e14; --color-warn-fg: #f0d28f; --color-warn-border: #6e5523;
    --color-info-bg: #1b2c40; --color-info-border: #34557a;
    --color-draft-bg: #3a3214; --color-draft-fg: #ecd98a;
    --color-holiday-bg: #33291a;
    --color-toast-bg: #2c343e;
    --color-grid-hour: #2b333c;
    --color-grid-half: #232a32;
  --color-grid-hour: #2b333c;
  --color-grid-half: #232a32;
    --shadow: rgba(0, 0, 0, .4);
    --shadow-strong: rgba(0, 0, 0, .6);
    --backdrop: rgba(0, 0, 0, .6);
  }
}
* { box-sizing: border-box; }
html { font-family: var(--font); font-size: 16px; color: var(--color-text); background: var(--color-bg); }
body { margin: 0; line-height: 1.45; }
a { color: var(--color-primary); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-focus); outline-offset: 2px;
}
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
code { font-size: .9em; background: var(--color-line); padding: .1em .3em; border-radius: 3px; }
.muted { color: var(--color-muted); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-surface); padding: .5rem; }
.skip-link:focus { left: .5rem; z-index: 100; }

/* layout */
.layout { display: grid; grid-template-columns: var(--sidenav-width) minmax(0, 1fr); grid-template-rows: 52px 1fr; min-height: 100vh; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; padding: 0 1rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.brand { font-weight: 600; text-decoration: none; color: var(--color-text); }
.brand--center { text-align: center; display: block; margin: 0 0 1rem; color: var(--color-muted); }
.topbar-user { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.user-name { font-weight: 500; }
.nav-toggle { display: none; }
.sidenav { background: var(--color-surface); border-right: 1px solid var(--color-border); padding: 1rem 0; }
.sidenav ul { list-style: none; margin: 0; padding: 0; }
.sidenav a { display: block; padding: .5rem 1.25rem; color: var(--color-text); text-decoration: none; }
.sidenav a:hover { background: var(--color-hover); }
.sidenav a[aria-current="page"] { background: var(--color-accent-bg); border-right: 3px solid var(--color-primary); font-weight: 600; }
.nav-group { margin: 1.25rem 1.25rem .25rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.nav-version { margin: 1.5rem 1.25rem 0; font-size: .75rem; color: var(--color-muted); }
.main { padding: 1.25rem 1.5rem 3rem; min-width: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.breadcrumb { font-size: .9rem; color: var(--color-muted); margin-bottom: .5rem; }

.minimal { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem 1rem; box-sizing: border-box; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; }
.card--center { width: 100%; max-width: 520px; }
.card--inner { margin: 0 0 1rem; }
fieldset.card--inner { border: 1px solid var(--color-border); }
legend { font-weight: 600; padding: 0 .4rem; }
.grid { display: grid; gap: 1rem; }
.grid--two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }

/* forms */
.field { margin: 0 0 1rem; }
.field label { display: block; font-weight: 500; margin-bottom: .3rem; }
.field--checkbox label, .field--radio label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin-right: 1rem; }
.field--radio { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="time"], input[type="tel"], select, textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--color-input-border); border-radius: var(--radius); font: inherit; background: var(--color-surface); color: var(--color-text);
}
textarea { min-height: 6rem; resize: vertical; }
.input--short { width: 6rem; }
.inline-fields { display: inline-flex; gap: .4rem; align-items: center; }
.inline-fields select { width: auto; }
.req { color: var(--color-danger); }
.field--error input, .field--error select, .field--error textarea { border-color: var(--color-danger); }
.field-error { color: var(--color-danger); margin: .3rem 0 0; font-size: .9rem; }
.field-help { color: var(--color-muted); margin: .3rem 0 0; font-size: .85rem; }
.password-wrap { display: flex; gap: .4rem; }
.readonly { margin: 0; padding: .5rem 0; }
.form-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.25rem; flex-wrap: wrap; }
.form-actions .btn:first-child:not(.btn--primary) { margin-right: auto; }
form.inline { display: inline; }

.btn { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--color-input-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover { background: var(--color-surface-3); }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--danger { background: var(--color-surface); border-color: var(--color-danger); color: var(--color-danger); }
.btn--danger:hover { background: var(--color-error-bg); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--small { padding: .25rem .6rem; font-size: .85rem; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
.linklike { background: none; border: 0; padding: 0; color: var(--color-primary); font: inherit; cursor: pointer; text-decoration: underline; }

.menu summary { cursor: pointer; list-style: none; padding: .3rem .6rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.menu summary::-webkit-details-marker { display: none; }
.menu { position: relative; }
.menu-items { position: absolute; right: 0; top: 2.2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); min-width: 180px; padding: .4rem 0; z-index: 20; box-shadow: 0 4px 12px var(--shadow); }
.menu-items a, .menu-items button { display: block; width: 100%; text-align: left; padding: .45rem .9rem; color: var(--color-text); text-decoration: none; }
.menu-items a:hover, .menu-items button:hover { background: var(--color-hover); }

/* feedback */
.flashes { margin: 0 0 1rem; }
.flash { padding: .6rem .9rem; border-radius: var(--radius); border: 1px solid; margin-bottom: .5rem; }
.flash--success { background: var(--color-ok-bg); border-color: var(--color-ok-border); color: var(--color-ok-fg); }
.flash--error { background: var(--color-error-bg); border-color: var(--color-error-border); color: var(--color-error-fg); }
.flash--warning { background: var(--color-warn-bg); border-color: var(--color-warn-border); color: var(--color-warn-fg); }
.flash--info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-accent-fg); }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; background: var(--color-neutral-bg); color: var(--color-text); }
.badge--ok { background: var(--color-ok-bg); color: var(--color-ok-fg); }
.badge--warn { background: var(--color-warn-bg); color: var(--color-warn-fg); }
.badge--error { background: var(--color-error-bg); color: var(--color-error-fg); }
.badge--role { background: var(--color-accent-bg); color: var(--color-primary-dark); }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--color-muted); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius); }
.status-list { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.25rem; margin: 0 0 1rem; }
.status-list dt { color: var(--color-muted); }
.status-list dd { margin: 0; }
.checklist { list-style: none; padding: 0; }
.checklist li { padding: .3rem 0; }
.plain-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.plain-list li { padding: .35rem 0; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.step-indicator { color: var(--color-muted); margin: .25rem 0 1.25rem; font-size: .9rem; }

/* tables */
.filterbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 0 0 1rem; }
.table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.table th, .table td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table th { background: var(--color-surface-3); font-weight: 600; font-size: .9rem; }
.table tbody tr:hover { background: var(--color-surface-2); }
.col-actions { text-align: right; white-space: nowrap; }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--color-border); margin: 0 0 1rem; }
.tabs a { padding: .5rem .8rem; text-decoration: none; color: var(--color-text); border-bottom: 3px solid transparent; }
.tabs a[aria-current="page"] { border-bottom-color: var(--color-primary); font-weight: 600; }

.toast-region { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 50; }
.toast { background: var(--color-toast-bg); color: #fff; padding: .6rem .9rem; border-radius: var(--radius); box-shadow: 0 4px 12px var(--shadow-strong); }
.toast--error { background: var(--color-danger); }

dialog { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0; max-width: min(720px, 95vw); width: 100%; }
dialog::backdrop { background: var(--backdrop); }
.dialog-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); font-weight: 600; }
.dialog-body { padding: 1rem 1.25rem; max-height: 70vh; overflow: auto; }
.dialog-foot { padding: .75rem 1.25rem; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: .5rem; }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .nav-toggle { display: inline-flex; }
  .sidenav { display: none; grid-column: 1; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .sidenav.is-open { display: block; }
  .main { padding: 1rem; }
  .user-name { display: none; }
  dialog { max-width: 100vw; height: 100vh; max-height: 100vh; }
}
@media print {
  .topbar, .sidenav, .page-actions, .filterbar, .form-actions, .toast-region { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; }
}
.preview { white-space: pre-wrap; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius); padding: .75rem; font: inherit; font-size: .95rem; }

/* --- P04: calendar, course editor, occurrence page --- */
.cal-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.cal-nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cal-nav input[type="date"] { width: auto; padding: .3rem .4rem; }
.cal-title { margin-left: .5rem; }
.segmented { display: inline-flex; border: 1px solid var(--color-input-border); border-radius: var(--radius); overflow: hidden; }
.segmented a { padding: .35rem .8rem; text-decoration: none; color: var(--color-text); border-right: 1px solid var(--color-border); }
.segmented a:last-child { border-right: 0; }
.segmented a[aria-current="page"] { background: var(--color-primary); color: #fff; }
.checkbox-inline { display: inline-flex; align-items: center; gap: .35rem; }
.filterbar select[multiple] { min-width: 10rem; height: auto; }
.timegrid { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow-x: auto; }
.timegrid-head, .timegrid-body { display: grid; grid-template-columns: 56px repeat(var(--cols, 7), minmax(110px, 1fr)); }
.timegrid--day .timegrid-head, .timegrid--day .timegrid-body { grid-template-columns: 56px 1fr; }
.timegrid-head { border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-surface); z-index: 2; }
.timegrid-daylabel { padding: .4rem; text-align: center; font-weight: 600; font-size: .9rem; border-left: 1px solid var(--color-border); }
.timegrid-daylabel a { color: inherit; text-decoration: none; }
.timegrid-daylabel.is-today { background: var(--color-accent-bg); }
.timegrid-gutter { font-size: .75rem; color: var(--color-muted); }
.timegrid-hour { height: 60px; padding: 0 .3rem; text-align: right; transform: translateY(-.5em); }
.timegrid-col { position: relative; border-left: 1px solid var(--color-border); }
.timegrid-col.is-today { background: var(--color-surface-2); }
.timegrid-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--color-grid-hour); }
.timegrid-line--half { border-top: 1px dashed var(--color-grid-half); }
.cal-entry { position: absolute; display: flex; flex-direction: column; gap: .05rem; padding: .2rem .35rem; margin: 1px; border-radius: 4px; font-size: .78rem; line-height: 1.2; text-decoration: none; color: var(--color-accent-fg); background: var(--color-accent-bg); border-left: 3px solid var(--color-primary); overflow: hidden; }
.cal-entry:hover, .cal-entry:focus { z-index: 3; outline: 2px solid var(--color-primary); }
.cal-entry--completed { background: var(--color-line); border-left-color: var(--color-input-border); color: var(--color-muted-strong); }
.cal-entry--cancelled { background: var(--color-surface-2); border-left-color: var(--color-input-border); color: var(--color-muted-strong); text-decoration: line-through; }
.cal-entry--overbooked { border-left-color: var(--color-warn); }
.cal-entry-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-entry-meta { color: inherit; opacity: .85; }
.monthgrid { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.monthgrid-head, .monthgrid-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.monthgrid-head div { padding: .4rem; text-align: center; font-weight: 600; font-size: .85rem; border-bottom: 1px solid var(--color-border); }
.monthgrid-day { min-height: 110px; padding: .3rem; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); display: flex; flex-direction: column; gap: .15rem; }
.monthgrid-day.is-outside { background: var(--color-surface-2); color: var(--color-muted); }
.monthgrid-day.is-today { background: var(--color-today-bg); }
.monthgrid-daynum { align-self: flex-end; font-size: .8rem; text-decoration: none; color: inherit; padding: .1rem .3rem; }
.month-entry { display: block; font-size: .72rem; padding: .1rem .3rem; border-radius: 3px; background: var(--color-accent-bg); color: var(--color-accent-fg); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--color-primary); }
.month-more { font-size: .72rem; color: var(--color-muted); }
.table-group td { background: var(--color-surface-3); font-weight: 600; }
tr.is-cancelled td { color: var(--color-danger); text-decoration: line-through; }
tr.is-cancelled td a { color: var(--color-danger); }
tr.is-cancelled td a, tr.is-cancelled td .btn { text-decoration: none; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: .75rem 1rem; }
.kpi-value { display: block; font-size: 1.6rem; font-weight: 600; }
.kpi-label { color: var(--color-muted); font-size: .85rem; }
.grid--two-wide { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.section-head h2 { margin: 0; }
.rule-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rule-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: .75rem; display: flex; flex-direction: column; gap: .3rem; }
.rule-card.is-disabled { opacity: .7; }
.rule-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: .85rem; background: var(--color-surface); }
.chip--link { text-decoration: none; color: var(--color-primary); }
.chip--muted { color: var(--color-muted); background: var(--color-neutral-bg); }
.label-like { display: block; font-weight: 500; margin-bottom: .3rem; }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-actions--top { margin: 0 0 1rem; }
.menu-note { display: block; padding: .45rem .9rem; font-size: .85rem; }
.table--compact th, .table--compact td { padding: .3rem .5rem; font-size: .85rem; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.dialog .table-scroll { max-height: none; }
.occ-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1rem; }
.occ-date { font-size: 1.05rem; margin: 0 0 .4rem; }
.occ-occupancy { min-width: 220px; text-align: right; }
.occ-number { font-size: 1.4rem; font-weight: 600; }
.bar { height: 10px; background: var(--color-neutral-bg); border-radius: 999px; overflow: hidden; margin: .4rem 0; }
.bar-fill { height: 100%; background: var(--color-primary); }
.bar-fill--over { background: var(--color-warn); }
.pagination { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.row-link { cursor: pointer; }
@media (max-width: 900px) { .grid--two-wide { grid-template-columns: 1fr; } .occ-occupancy { text-align: left; } }

/* --- 0.3.0: status colours, selects, time inputs, tag picker, deadline mask, bulk actions, locations --- */
.badge--status-published { background: var(--color-ok-bg); color: var(--color-ok-fg); }
.badge--status-draft { background: var(--color-draft-bg); color: var(--color-draft-fg); }
.badge--status-archived { background: var(--color-neutral-bg); color: var(--color-muted-strong); }
.page-head h1 .badge { vertical-align: middle; font-size: .8rem; margin-left: .4rem; }
.tag-line { margin: -.5rem 0 1rem; font-size: .85rem; color: var(--color-muted); }
.tag-line-label { font-weight: 300; }
.tag-link { color: var(--color-muted); text-decoration: none; border-bottom: 1px dotted currentColor; }
.tag-link:hover { color: var(--color-primary); }
select { appearance: none; -webkit-appearance: none; padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6b7a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 12px 8px; }
select[multiple] { background-image: none; padding-right: .6rem; }
.select--auto { width: auto; min-width: 8rem; }
input[type="date"] { min-height: 2.35rem; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
.time-input { width: 5.5rem; font-variant-numeric: tabular-nums; text-align: center; }
.time-input.is-invalid { border-color: var(--color-danger); }
.inline-fields .field { margin-bottom: .6rem; }
.tag-picker { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; position: relative; }
.tag-picker .chips { display: contents; }
.chip--tag { background: var(--color-accent-bg); border-color: var(--color-info-border); color: var(--color-primary-dark); }
.chip-remove { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0 0 .2rem; }
.chip--add { cursor: pointer; color: var(--color-primary); border-style: dashed; font: inherit; font-size: .85rem; }
.tag-search { position: relative; min-width: 16rem; }
.tag-search-input { padding: .3rem .6rem; border-radius: 999px; }
.tag-suggestions { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: .25rem 0; list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 4px 12px var(--shadow); max-height: 16rem; overflow: auto; }
.tag-suggestion { padding: .4rem .75rem; cursor: pointer; }
.tag-suggestion.is-active, .tag-suggestion:hover { background: var(--color-hover); }
.tag-suggestion--create { border-top: 1px solid var(--color-border); color: var(--color-primary); font-weight: 500; }
.tag-suggestion--empty { color: var(--color-muted); cursor: default; }
fieldset.deadline { border: 1px solid var(--color-border); border-radius: var(--radius); padding: .75rem 1rem; margin: 0 0 1rem; }
.segmented--inline { display: inline-flex; }
.segmented--inline label { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; cursor: pointer; border-right: 1px solid var(--color-border); margin: 0; font-weight: 400; }
.segmented--inline label:last-child { border-right: 0; }
.segmented--inline input { margin: 0; }
.segmented--inline label:has(input:checked) { background: var(--color-primary); color: #fff; }
.deadline-individual { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.radio-line { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-weight: 400; margin: .3rem 0; }
.tabs a.tab--disabled { color: var(--color-input-border); cursor: not-allowed; }
.bulkbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .75rem; margin: 0 0 .75rem; background: var(--color-accent-bg); border-radius: var(--radius); }
.col-check { width: 2rem; }
tr.is-holiday td { background: var(--color-holiday-bg); }
.chip--holiday { border-color: var(--color-warn-border); background: var(--color-holiday-bg); }
.rule-title { font-size: 1rem; }
.dialog--small { max-width: min(480px, 95vw); }
.row-link { cursor: pointer; }
.row-link .row-title { color: var(--color-text); text-decoration: none; font-weight: 500; }
.row-link:hover .row-title { color: var(--color-primary); }
.location-row { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 2fr) 6rem 5rem auto auto; gap: .5rem; align-items: center; }
.location-name { display: flex; align-items: center; gap: .3rem; }
.row-room .location-name { padding-left: 1.25rem; }
.row-place td { background: var(--color-surface-2); }
tr.is-inactive { opacity: .65; }
.location-usage { text-align: center; color: var(--color-muted); }
.location-actions { display: inline-flex; gap: .35rem; justify-content: flex-end; }
@media (max-width: 900px) { .location-row { grid-template-columns: 1fr 1fr; } }

/* --- 0.4.0: occurrence dialog --- */
.dialog--wide { max-width: min(980px, 96vw); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-surface); z-index: 2; }
.panel-title { margin: 0; font-size: 1.15rem; }
.panel-close { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--color-muted); padding: 0 .3rem; }
.panel-close:hover { color: var(--color-text); }
.panel-body { padding: 1rem 1.25rem 1.25rem; max-height: 80vh; overflow: auto; }
.panel-loading { padding: 2rem; text-align: center; }
.occ-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.occ-links { margin: 0 0 .5rem; }
.card--flat { border: 0; padding: 0; background: transparent; }

/* --- 0.4.0: header menu, theme switch --- */
.user-menu summary { font-weight: 500; border: 0; padding: .35rem .6rem; border-radius: var(--radius); }
.user-menu summary:hover { background: var(--color-hover); }
.user-menu summary::after { content: " ▾"; color: var(--color-muted); font-size: .8em; }
.menu-items form { margin: 0; }
.menu-sep { border-top: 1px solid var(--color-border); margin: .3rem 0; }
.menu-label { display: block; padding: .3rem .9rem 0; font-size: .75rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.theme-switch { display: flex; gap: .25rem; padding: .3rem .9rem .5rem; }
.theme-switch button { flex: 1; padding: .25rem .4rem; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius); cursor: pointer; font: inherit; font-size: .8rem; }
.theme-switch button[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.brand-logo { height: 32px; width: auto; display: block; }
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.login-logo { display: block; max-height: 64px; max-width: 220px; margin: 0 auto .75rem; }
.logo-box { display: grid; gap: .5rem; padding: 0 0 1rem; margin: 0 0 1rem; border-bottom: 1px solid var(--color-border); }
.logo-box .login-logo { margin: .3rem 0; }

/* --- 0.4.0: calendar toolbar, date inputs, ranges --- */
.cal-nav .btn, .filterbar .btn--small, .filterbar input[type="date"] { min-height: 2.35rem; display: inline-flex; align-items: center; }
.cal-nav input[type="date"], .filterbar input[type="date"] { padding: .35rem .6rem; border-radius: var(--radius); }
input[type="date"] { font-variant-numeric: tabular-nums; }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: var(--picker-filter, none); }
:root[data-theme="dark"] { --picker-filter: invert(.85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --picker-filter: invert(.85); } }
input.is-invalid { border-color: var(--color-danger); }
.range-warning { margin: .3rem 0 0; font-size: .85rem; color: var(--color-warn-fg); background: var(--color-warn-bg); padding: .3rem .5rem; border-radius: var(--radius); }

/* --- 0.5.0: booking dialogs --- */
.occupancy-line { font-weight: 600; margin: 0 0 .75rem; }
.add-section { margin: 0 0 1rem; }
.add-section h3 { margin: .25rem 0 .5rem; font-size: .95rem; }
.person-hits, .selection-list { list-style: none; margin: .4rem 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius); max-height: 14rem; overflow: auto; }
.person-hits:empty { display: none; }
.person-hit, .selection-item, .selection-list > li { padding: .45rem .75rem; border-bottom: 1px solid var(--color-line); }
.person-hit:last-child, .selection-item:last-child { border-bottom: 0; }
.person-hit { cursor: pointer; }
.person-hit:hover, .person-hit:focus { background: var(--color-hover); outline: none; }
.person-hit.is-disabled { cursor: default; opacity: .7; }
.selection-item { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.candidate-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem 0; flex-wrap: wrap; }
.radio-line.indent { padding-left: 1.6rem; }
.person-fields { gap: 0 1rem; }
.kpis--compact { margin: 0; flex: 1; min-width: 280px; }
.heading-ref { font-size: .9rem; font-weight: 400; }
.pick-list { max-height: 50vh; }

/* --- 0.6.0: cancellation dialog --- */
.steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: step; }
.steps li { flex: 1; padding: .35rem .6rem; border-radius: var(--radius); background: var(--color-surface-3); color: var(--color-muted); font-size: .85rem; }
.steps li::before { counter-increment: step; content: counter(step) ". "; }
.steps li.is-current { background: var(--color-accent-bg); color: var(--color-accent-fg); font-weight: 600; }
.steps li.is-done { color: var(--color-ok-fg); }
.weekday-filter { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin: .5rem 0; }
.impact-summary { font-weight: 600; padding: .6rem .8rem; background: var(--color-error-bg); color: var(--color-error-fg); border-radius: var(--radius); }
.confirm-line { align-items: flex-start; font-weight: 500; }
.confirm-line input { margin-top: .25rem; }
/* --- 0.7.0: mail log, audit --- */
.kpis--inline { grid-template-columns: repeat(3, minmax(120px, 180px)); }
a.kpi { text-decoration: none; color: inherit; }
a.kpi:hover { border-color: var(--color-primary); }
.kpi--alert .kpi-value { color: var(--color-danger); }
.mail-table tbody.mail-entry tr:first-child td { border-bottom: 0; }
.mail-details-row td { padding-top: 0; }
.mail-details-row summary { cursor: pointer; color: var(--color-primary); font-size: .85rem; }
.badge--mail-sent { background: var(--color-ok-bg); color: var(--color-ok-fg); }
.badge--mail-failed { background: var(--color-error-bg); color: var(--color-error-fg); }
.badge--mail-pending, .badge--mail-sending { background: var(--color-warn-bg); color: var(--color-warn-fg); }
.diff-table tr.is-changed td { background: var(--color-warn-bg); }
.diff-table td { word-break: break-word; max-width: 40ch; }
.report-definition { font-size: .85rem; }
.export-form .radio-line { margin: .25rem 0; }
.key-field { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; width: 100%; margin: .4rem 0; }
tr.is-conflict td { background: var(--color-error-bg); }
tr.is-changed td { background: var(--color-warn-bg); }
.steps-text li { margin: .35rem 0; }
.import-row--error td { background: var(--color-error-bg); }
.import-row--skipped td, .import-row--exists td, .import-row--duplicate td { color: var(--color-muted); }
.import-kpis { grid-template-columns: repeat(4, minmax(110px, 1fr)); }

/* --- UI round 1: calendar grid --- */
.timegrid-body { max-height: 70vh; overflow-y: auto; }
.timegrid-col.is-weekend, .timegrid-daylabel.is-weekend { background: var(--color-surface-3); }
.timegrid-col.is-today { background: var(--color-today-bg); }
.timegrid-hour { height: 60px; }
.month-day.is-weekend { background: var(--color-surface-3); }

/* --- UI round 1: control sizes (A1), icon buttons, chips, combobox --- */
.ctl { box-sizing: border-box; }
.ctl.ctl-xs { width: 6rem; min-width: 6rem; }
.ctl.ctl-s { width: 10rem; min-width: 10rem; }
.ctl.ctl-m { width: 14rem; min-width: 14rem; }
.ctl.ctl-l { width: 18rem; min-width: 12rem; max-width: 100%; }
.ctl.ctl-full { width: 100%; }
select.ctl, input.ctl, .combobox.ctl, details.ctl { flex: 0 0 auto; }
.btn--icon { padding: .35rem .5rem; line-height: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 2.35rem; }
.cal-pick { margin: 0 .25rem; }
.chips--filter { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.chip--toggle { cursor: pointer; user-select: none; }
.chip--toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip--toggle.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.combobox { position: relative; display: inline-block; vertical-align: middle; }
.combobox-native { position: absolute !important; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.combobox-input { width: 100%; padding-right: 1.8rem; text-overflow: ellipsis; }
.combobox-clear { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; color: var(--color-muted); font-size: 1.1rem; line-height: 1; }
.combobox-list { position: absolute; z-index: 40; left: 0; min-width: 100%; max-width: 32rem; top: calc(100% + 2px); margin: 0; padding: .25rem 0; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 4px 12px var(--shadow); max-height: 18rem; overflow: auto; }
.combobox-option { padding: .4rem .75rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combobox-option.is-active, .combobox-option:hover { background: var(--color-hover); }
.combobox-option.is-selected { font-weight: 600; }
.combobox-option--empty { color: var(--color-muted); cursor: default; }
.sidenav .nav-group:first-child { margin-top: 0; }

/* --- UI round 1: tables --- */
.table-toolbar { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; flex-wrap: wrap; }
.table-search { padding: .45rem .7rem; }
th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.is-sortable:hover { color: var(--color-primary); }
th .sort-mark::after { content: "↕"; opacity: .35; margin-left: .3rem; font-size: .8em; }
th.is-sorted-asc .sort-mark::after { content: "↑"; opacity: 1; }
th.is-sorted-desc .sort-mark::after { content: "↓"; opacity: 1; }
.chip--more { background: var(--color-neutral-bg); cursor: help; }
.tag-cell { display: flex; flex-wrap: nowrap; gap: .3rem; white-space: nowrap; overflow: hidden; align-items: center; }
.dashboard-date { font-size: 1.05rem; margin: -.5rem 0 1rem; color: var(--color-muted); }
.kpis--two { grid-template-columns: repeat(2, minmax(180px, 320px)); }
.section-head .table-toolbar { margin: 0; }

/* --- UI round 1: login --- */
.auth-card { width: 100%; max-width: 420px; padding: 2rem 2.25rem; box-shadow: 0 10px 30px var(--shadow); }
.auth-brand { text-align: center; margin: 0 0 1.25rem; }
.auth-brand .login-logo { max-height: 72px; margin: 0 auto .75rem; }
.auth-brand .brand--center { font-size: 1.15rem; font-weight: 600; color: var(--color-text); margin: 0; }
.auth-card h1 { font-size: 1.25rem; margin: 0 0 1rem; }
.auth-version { margin: 1rem 0 0; font-size: .8rem; color: var(--color-muted); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 2.6rem; }
.password-eye { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--color-muted); cursor: pointer; padding: .2rem; line-height: 0; border-radius: 4px; }
.password-eye:hover { color: var(--color-text); }
.password-eye .eye-slash { display: none; }
.password-eye[aria-pressed="true"] .eye-slash { display: block; }

/* --- UI round 1: occurrence dialog --- */
.panel-head--occ { align-items: flex-start; }
.panel-titles { min-width: 0; }
.panel-time { font-weight: 400; color: var(--color-muted); margin-left: .35rem; }
.panel-subtitle { margin: .15rem 0 0; color: var(--color-muted); }
.panel-tools { display: flex; align-items: center; gap: .35rem; }
.menu--kebab summary { font-size: 1.4rem; line-height: 1; padding: .1rem .5rem; border-radius: var(--radius); cursor: pointer; list-style: none; }
.menu--kebab summary::-webkit-details-marker { display: none; }
.menu--kebab summary:hover { background: var(--color-hover); }
.menu-items .linklike { display: block; width: 100%; text-align: left; padding: .45rem .9rem; }
.occ-summary { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.bar--inline { flex: 0 0 160px; }
.form-actions--left { justify-content: flex-start; margin-top: .75rem; }
.heading-sub { font-size: 1rem; font-weight: 400; color: var(--color-muted); }
/* --- UI round 2: deadline row --- */
fieldset.deadline--row { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; padding: .5rem .9rem; }
fieldset.deadline--row legend { float: left; padding: 0; margin: 0; font-weight: 500; }
fieldset.deadline--row .deadline-individual { grid-column: 1 / -1; padding-top: .3rem; border-top: 1px dashed var(--color-border); }
.switch-line { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0; white-space: nowrap; }
.deadline-central { font-weight: 400; }
/* --- UI round 2: series cards, selection rows, back link --- */
.rule-cards--stacked { display: flex; flex-direction: column; gap: .5rem; }
.rule-cards--stacked .rule-card { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; box-sizing: border-box; text-align: left; }
.rule-cards--stacked .rule-actions { margin: 0; flex: 0 0 auto; }
.rule-card__main { min-width: 0; }
.back-link { margin: -.25rem 0 .75rem; font-size: .9rem; }
.back-link a { text-decoration: none; color: var(--color-muted); }
.back-link a:hover { color: var(--color-primary); }
.danger-zone { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .75rem; border-top: 1px dashed var(--color-border); }
tr.row-select { cursor: pointer; }
tr.row-select.is-selected td { background: var(--color-accent-bg); }
.remove-x { border: 0; background: none; color: var(--color-danger); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }
.remove-x:hover { background: var(--color-error-bg); border-radius: 4px; }
.steps li .linklike { color: inherit; text-decoration: none; padding: 0; font: inherit; }
/* --- UI round 2: reports --- */
.filterbar--stacked { flex-direction: column; align-items: stretch; gap: .4rem; }
.filter-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.filter-label { color: var(--color-muted); font-size: .85rem; min-width: 3.5rem; }
.bar-cell { white-space: nowrap; }
.bar-mini { display: inline-block; width: 120px; height: .6rem; background: var(--color-surface-3); border-radius: 3px; vertical-align: middle; margin-right: .4rem; overflow: hidden; }
.bar-mini__fill { display: block; height: 100%; background: var(--color-primary); }
@media print { body.printing-dialog > *:not(#dlg-fragment) { display: none !important; } body.printing-dialog #dlg-fragment { position: static; border: 0; box-shadow: none; max-width: none; } }
/* --- UI round 3: compact log tables --- */
.mail-table td, .mail-table th { padding: .35rem .5rem; font-size: .9rem; }
.mail-details-row td { padding-top: 0; padding-bottom: .35rem; }
tr.is-inactive td { color: var(--color-muted); }
.preview--dialog { max-height: 24rem; overflow: auto; }


/* --- UI round 4: foundations --- */
[hidden] { display: none !important; }
/* One filter bar for the whole application: one row, equal heights, wraps on narrow screens. */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .9rem; }
.filterbar > input, .filterbar > select, .filterbar > .combobox > .combobox-input, .filterbar > details.multiselect > summary, .filterbar > label > input[type="date"], .filterbar > .btn, .filterbar > label.inline-fields { min-height: 2.35rem; box-sizing: border-box; }
.filterbar > label.inline-fields { display: inline-flex; align-items: center; gap: .35rem; margin: 0; white-space: nowrap; }
.filterbar .checkbox-inline { display: inline-flex; align-items: center; gap: .35rem; margin: 0; white-space: nowrap; min-height: 2.35rem; }
.filterbar .filter-count { color: var(--color-muted); white-space: nowrap; }
.combobox-input { min-height: 2.35rem; }
/* Multi-select dropdown (checkbox list behind a compact summary). */
details.multiselect { position: relative; }
details.multiselect > summary { list-style: none; cursor: pointer; border: 1px solid var(--color-input-border); border-radius: var(--radius); background: var(--color-input-bg); padding: .45rem 2rem .45rem .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
details.multiselect > summary::-webkit-details-marker { display: none; }
details.multiselect > summary::after { content: ""; position: absolute; right: .7rem; top: 50%; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); }
details.multiselect[open] > summary { border-color: var(--color-primary); }
details.multiselect > .multiselect-menu { position: absolute; z-index: 40; top: calc(100% + 2px); left: 0; min-width: 100%; max-height: 18rem; overflow: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 4px 12px var(--shadow); padding: .3rem 0; }
details.multiselect .multiselect-option { display: flex; align-items: center; gap: .45rem; padding: .35rem .75rem; white-space: nowrap; cursor: pointer; }
details.multiselect .multiselect-option:hover { background: var(--color-hover); }
details.multiselect .multiselect-empty { padding: .35rem .75rem; color: var(--color-muted); }
/* Tag "+n" bubble with an instant tooltip of the application (no browser title delay). */
.chip--more { position: relative; cursor: default; }
.chip--more::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; background: var(--color-text); color: var(--color-surface); padding: .3rem .55rem; border-radius: 4px; font-size: .8rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s; }
.chip--more:hover::after, .chip--more:focus::after { opacity: 1; }
/* Danger button in solid form (confirm steps). */
.btn--danger.btn--solid { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn--danger.btn--solid:hover { filter: brightness(.92); background: var(--color-danger); }
/* Occurrence dialog: stable size across tabs. */
/* Size only; display stays with the browser (closed dialogs must remain hidden). */
#dlg-occurrence-panel { width: min(1180px, 96vw); height: min(860px, 90vh); }
#dlg-occurrence-panel[open] { display: flex; flex-direction: column; }
#dlg-occurrence-panel > [data-panel-content] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#dlg-occurrence-panel .panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.cancel-quick { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 .75rem; }

/* Combobox input always fills its wrapper (the wrapper carries the size class). */
.combobox > .combobox-input { width: 100%; box-sizing: border-box; }
.monthgrid-day.is-weekend, .monthgrid-head .is-weekend { background: var(--color-surface-3); }
.back-link { margin: .1rem 0 .2rem; }
/* In stacked forms and dialogs a wide field fills its column (still capped), selects keep their class width. */
.field > input.ctl.ctl-l, .field > textarea { width: 100%; max-width: 36rem; }
.dialog .field > input.ctl.ctl-l { max-width: none; }
tr.is-weekend td { background: var(--color-surface-3); }
.dialog-foot__left { margin-right: auto; }
.switch-line { display: flex; margin: .45rem 0 .2rem; }
details.names summary { cursor: pointer; color: var(--color-primary); }
details.names[open] { white-space: normal; max-width: 28rem; }
.add-search { margin-bottom: .35rem; }
.add-search .ctl.ctl-l { flex: 1 1 18rem; max-width: 32rem; }
.add-new { margin: .5rem 0 .75rem; }
.add-selection-title { margin: .75rem 0 .35rem; font-size: 1rem; }


/* --- Mobile & density pass (verified with screenshots) --- */
/* Compact table rows: no wrapping of short values; long text columns opt in with .col-wrap. */
.table th, .table td { white-space: nowrap; }
.table td.col-wrap, .table th.col-wrap { white-space: normal; min-width: 14rem; }
/* Wide dialogs really get their width (the generic dialog max-width must not cap them). */
#dlg-occurrence-panel { max-width: min(1180px, 96vw); }
dialog.dialog--wide { width: min(980px, 96vw); }
/* Header controls */
.nav-toggle { align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); cursor: pointer; padding: 0; }
.user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-accent-bg); color: var(--color-primary); font-weight: 600; font-size: .85rem; }
.user-menu > summary { display: inline-flex; align-items: center; gap: .45rem; }
/* Time grid: first hour label fully visible */
.timegrid-body { padding-top: .6rem; }
@media (max-width: 900px) {
  .topbar { gap: .6rem; }
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kpis--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head { flex-wrap: wrap; gap: .5rem; }
  /* Filter bars: one control per row, full width; checkboxes stay compact */
  .filterbar > input, .filterbar > select, .filterbar > .combobox, .filterbar > details.multiselect, .filterbar > label.inline-fields { flex: 1 1 100%; width: 100% !important; min-width: 0 !important; max-width: none !important; }
  .filterbar > label.inline-fields > input { flex: 1 1 auto; width: auto !important; }
  .cal-toolbar, .cal-nav { flex-wrap: wrap; gap: .4rem; }
  .cal-pick { flex: 1 1 100%; }
  /* Dialogs become full screens */
  dialog, dialog.dialog--wide, dialog.dialog--small, #dlg-occurrence-panel { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .panel-head { position: sticky; top: 0; z-index: 2; background: var(--color-surface); }
  .occ-summary .bar--inline { flex-basis: 100px; }
  .timegrid { min-width: 720px; }
  .timegrid-wrap, .calendar-scroll { overflow-x: auto; }
}
.filter-count:empty { display: none; }
.table td { vertical-align: middle; }
.cancel-quick > .btn, .cancel-quick > select { min-height: 2.35rem; }
@media (max-width: 900px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs > a { white-space: nowrap; flex: 0 0 auto; }
}
.page-actions .menu--kebab > summary, .panel-tools .menu--kebab > summary { display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; min-width: 2.35rem; box-sizing: border-box; border: 1px solid var(--color-border); background: var(--color-surface); }
.history-box { margin: 1rem 0; } .history-box > summary { cursor: pointer; color: var(--color-primary); margin-bottom: .5rem; }
.nav-version { margin: 1.5rem 1.25rem 0; font-size: .75rem; color: var(--color-muted); }
.ctl.ctl-xl { width: 24rem; min-width: 14rem; max-width: 100%; }
.filterbar > .filter-chips { flex: 1 1 100%; display: flex; flex-direction: column; gap: .35rem; }
.filter-chips__row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.chip--filter { display: inline-flex; align-items: center; gap: .3rem; background: var(--color-accent-bg); border-color: var(--color-primary); color: var(--color-primary); }
.chip-remove { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .1rem; }
.chip-remove:hover { color: var(--color-danger); }
.filter-sep { width: 1px; align-self: stretch; background: var(--color-border); margin: 0 .25rem; }
@media (max-width: 900px) { .filter-sep { display: none; } }

/* --- One control height for the whole application (buttons, inputs, selects, dropdowns, view switch) --- */
:root { --ctl-h: 2.5rem; }
.btn:not(.btn--small), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="time"], input[type="tel"], select, .combobox-input, details.multiselect > summary {
  min-height: var(--ctl-h); height: var(--ctl-h); box-sizing: border-box;
}
.btn:not(.btn--small) { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding-top: 0; padding-bottom: 0; }
.btn--icon { width: var(--ctl-h); min-width: var(--ctl-h); padding: 0; }
.segmented { height: var(--ctl-h); box-sizing: border-box; }
.segmented a { display: inline-flex; align-items: center; padding: 0 .9rem; }
.page-actions .menu--kebab > summary, .panel-tools .menu--kebab > summary { min-height: var(--ctl-h); min-width: var(--ctl-h); }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.cal-nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cal-nav .cal-pick { margin: 0; }
.cal-nav .filterbar { margin: 0; }

/* Column configuration */
th.col-config, td.col-config { width: 2.2rem; padding-left: 0; padding-right: .4rem; text-align: right; }
.col-config-btn { border: 1px solid transparent; background: none; color: var(--color-muted); cursor: pointer; border-radius: var(--radius); width: 1.8rem; height: 1.8rem; display: inline-flex; align-items: center; justify-content: center; }
.col-config-btn:hover { border-color: var(--color-border); color: var(--color-primary); background: var(--color-surface); }
.columns-editor { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: .75rem; align-items: center; }
.columns-list h3 { font-size: .9rem; margin: 0 0 .35rem; color: var(--color-muted); font-weight: 600; }
.columns-list ul { list-style: none; margin: 0; padding: .25rem; min-height: 14rem; max-height: 22rem; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.columns-list li { padding: .45rem .65rem; border-radius: calc(var(--radius) - 2px); cursor: pointer; user-select: none; }
.columns-list li:hover { background: var(--color-hover); }
.columns-list li.is-selected { background: var(--color-primary); color: #fff; }
.columns-list li.columns-empty { color: var(--color-muted); cursor: default; font-size: .9rem; }
.columns-arrows { display: flex; flex-direction: column; gap: .4rem; }
@media (max-width: 600px) { .columns-editor { grid-template-columns: 1fr; } .columns-arrows { flex-direction: row; justify-content: center; } }
.tree-indent { color: var(--color-muted); margin: 0 .4rem 0 .6rem; }
tr.row-place td { font-weight: 500; }
.columns-editor { align-items: start; }
.columns-list ul { height: 20rem; min-height: 0; max-height: none; }
.columns-arrows { align-self: center; margin-top: 1.6rem; }
[data-location-edit-only] { align-items: flex-end; gap: 1rem; }
[data-location-edit-only] .checkbox-inline { min-height: var(--ctl-h); display: inline-flex; align-items: center; margin-bottom: .9rem; }
.back-link { margin: .25rem 0 .6rem; }
.back-link .btn { display: inline-flex; align-items: center; gap: .35rem; }
.conflict-box ul { margin: .35rem 0 .25rem 1.1rem; }
.conflict-box p { margin: .2rem 0 0; }
.conflict-box--dialog { margin: 0 1.25rem .75rem; }
tr.is-conflict td { background: var(--color-warning-bg, #fff6e5); }

.ext-tree tr.ext-course td, tr.ext-course td { background: var(--color-surface-3); }
td.ext-indent { padding-left: 1.6rem; }
.rule-exceptions { margin-top: .75rem; }
.exception-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .5rem; }
.exception-weekday { font-weight: 600; }
.exception-detail { display: inline-flex; align-items: center; gap: .35rem; }
.exception-detail[hidden] { display: none !important; }
.exception-row { flex-wrap: nowrap; } .exception-remove { margin-left: auto; color: var(--color-danger); }
@media (max-width: 900px) { .exception-row { flex-wrap: wrap; } }
tr.is-existing td { color: var(--color-muted); }
.month-label { min-width: 9rem; text-align: center; }
.program-lines { list-style: none; margin: .1rem 0; padding: 0; }
.program-lines li { padding: .05rem 0; }
.program-lines li.is-cancelled-line { color: var(--color-danger); text-decoration: line-through; }
.program-note { margin: .15rem 0 0; }
tr.is-past td { color: var(--color-muted); }
.program-lines-title { margin: 1rem 0 .5rem; font-size: 1rem; }
.program-line { display: flex; gap: .5rem; align-items: center; margin: 0 0 .5rem; }
.program-line [data-pd-text] { flex: 1 1 auto; }
.program-line-tools { display: inline-flex; gap: .25rem; margin-left: auto; }
.program-add { display: flex; gap: .5rem; }
.default-submit { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kpis--small .kpi { padding: .55rem .8rem; } .kpis--small .kpi-value { font-size: 1.25rem; } .kpis--small .kpi-label { font-size: .8rem; }
.kpis--small { align-items: stretch; align-self: start; } .kpis--small .kpi { min-height: 0; height: auto; }
.pick-table { max-height: 55vh; overflow: auto; }
.text-danger { color: var(--color-danger); }
.program-table tr.program-day td { border-top: 2px solid var(--color-border); }
.program-table td.program-sub { padding-left: 1.6rem; }
.program-time { font-variant-numeric: tabular-nums; margin-right: .35rem; }
.program-new { margin: .6rem 0 0; }
.program-new-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.color-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .45rem; border: 1px solid var(--color-border); vertical-align: -1px; }
.color-input { width: 3.5rem; height: var(--ctl-h); padding: .15rem; border: 1px solid var(--color-input-border); border-radius: var(--radius); background: var(--color-surface); }
/* Weekly plan grid: weekdays with one sub-column per room */
.plan-scroll { overflow-x: auto; }
.plan { display: grid; grid-template-columns: 3.5rem repeat(var(--plan-cols), minmax(6.5rem, 1fr)); min-width: max-content; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.plan-corner, .plan-day, .plan-room { padding: .35rem .4rem; text-align: center; border-bottom: 1px solid var(--color-border); background: var(--color-surface-3); font-weight: 600; font-size: .85rem; }
.plan-day { border-left: 1px solid var(--color-border); }
.plan-room { font-weight: 500; color: var(--color-muted); font-size: .8rem; border-left: 1px solid var(--color-border); }
.plan-corner--rooms { color: var(--color-muted); font-weight: 500; font-size: .8rem; }
.plan .is-weekend { background: color-mix(in srgb, var(--color-surface-3) 70%, var(--color-border)); }
.plan-hours { position: relative; height: var(--plan-height); }
.plan-hour { font-size: .75rem; color: var(--color-muted); text-align: right; padding: .1rem .35rem 0 0; border-top: 1px solid var(--color-border); box-sizing: border-box; }
.plan-col { position: relative; height: var(--plan-height); border-left: 1px solid var(--color-border); }
.plan-slot { border-top: 1px solid var(--color-border); box-sizing: border-box; }
.plan-slot.is-gap, .plan-hour.is-gap { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--color-surface-3) 6px 8px); }
.plan-col.is-day-start { border-left: 2px solid var(--color-input-border); }
.plan-entry { position: absolute; left: 3px; right: 3px; display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; overflow: hidden; text-align: left;
  padding: .2rem .35rem; border-radius: 4px; border: 0; cursor: pointer; font: inherit; font-size: .78rem; line-height: 1.2;
  background: var(--entry-color, var(--color-accent-bg)); color: var(--color-primary); }
.plan-entry.has-color { color: #fff; }
.plan-entry strong { font-size: .8rem; }
.plan-entry em { font-style: normal; font-size: .72rem; opacity: .9; }
.plan-entry.is-hidden { opacity: .45; outline: 1px dashed var(--color-muted); }
.plan-entry:hover { filter: brightness(.95); outline: 2px solid var(--color-primary); }
@media (max-width: 640px) {
  .rule-cards--stacked .rule-card, .rule-card { flex-direction: column; align-items: stretch; gap: .5rem; }
  .rule-cards--stacked .rule-actions { justify-content: flex-start; }
  .kpis--small { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .kpis--small .kpi { padding: .45rem .6rem; }
}
.check-list { display: flex; flex-direction: column; gap: .35rem; margin: .6rem 0 0; max-height: 14rem; overflow: auto; }
.inline-label { display: inline-flex; align-items: center; gap: .35rem; color: var(--color-muted); font-size: .9rem; }
.month-block { margin: 0 0 1.75rem; }
.month-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 .5rem; }
.month-block.is-past .month-title { color: var(--color-muted); }
.program-line-label { flex: 0 1 auto; min-width: 12rem; padding: .35rem .5rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-3); }
/* weekly plan: days clearly separated */
.plan-day, .plan-room.is-day-start, .plan-col.is-day-start { border-left: 1px solid var(--color-input-border) !important; }
.plan-col.is-alt { background: color-mix(in srgb, var(--color-surface) 92%, var(--color-text)); }
.plan-day.is-alt, .plan-room.is-alt { background: color-mix(in srgb, var(--color-surface-3) 90%, var(--color-text)); }
.plan-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .75rem 0 1.5rem; padding: 0; }
.plan-legend li { display: inline-flex; align-items: center; }
.section-title { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.plan-setting { border: 0; padding: 0; margin: 0 0 1rem; }
.plan-setting legend { font-weight: 600; margin-bottom: .35rem; }
.plan-setting__fixed { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0 0 1.5rem; }
.color-palette { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.color-swatch { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); cursor: pointer; padding: 0; }
.color-swatch:hover, .color-swatch:focus-visible { box-shadow: 0 0 0 2px var(--color-primary); }
.cm-tooltip { position: fixed; z-index: 1000; max-width: min(32rem, 90vw); padding: .55rem .75rem; border-radius: var(--radius); background: var(--color-text); color: var(--color-surface);
  font-size: .85rem; line-height: 1.45; white-space: pre-line; box-shadow: 0 6px 20px rgba(0,0,0,.18); pointer-events: none; }
.text-clip { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 42rem; }
/* inside dialogs the suggestion list sits in the flow, so the dialog grows instead of clipping it */
.dialog .bulk-tag-picker .tag-suggestions { position: static; max-height: 14rem; overflow: auto; margin-top: .25rem; box-shadow: none; }
.bulk-tag-picker { margin-top: .6rem; min-height: 2.5rem; }
.check-list--tall { max-height: 22rem; }
.row-expandable { cursor: pointer; }
.col-toggle { white-space: nowrap; }
.row-toggle { display: inline-block; width: 1.2rem; height: 1.2rem; margin-right: .4rem; border: 0; padding: 0; background: none; cursor: pointer; vertical-align: -2px; color: var(--color-muted); }
.row-toggle::before { content: ""; display: inline-block; border: 5px solid transparent; border-left: 7px solid currentColor; margin-left: 3px; transition: transform .12s; }
.row-expandable.is-expanded .row-toggle::before { transform: rotate(90deg); transform-origin: 3px 5px; }
.row-expandable.is-expanded td { border-bottom-color: transparent; }
.mail-details-row > td { background: var(--color-surface-3); }
.quick-search { margin-bottom: 1rem; }
.quick-search__fields { display: grid; grid-template-columns: 1fr; gap: .75rem; max-width: 44rem; }
.quick-search__box { display: flex; flex-direction: column; gap: .3rem; padding: .6rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-3); }
.quick-search__box label { font-weight: 600; font-size: .9rem; }
.quick-search__results:not(:empty) { margin-top: .9rem; }
.quick-search__results h3 { font-size: .95rem; margin: 0 0 .4rem; }
.qs-people { list-style: none; margin: 0; padding: 0; }
.qs-people li { padding: .45rem 0; border-bottom: 1px solid var(--color-border); }
.qs-next { font-size: .88rem; margin-top: .15rem; }
@media (max-width: 760px) { .quick-search__fields { grid-template-columns: 1fr; } }
.chip--count { display: inline-flex; align-items: center; padding: 0 .45rem; height: 1.3rem; border-radius: 999px; background: var(--color-accent-bg); color: var(--color-primary); font-size: .78rem; font-weight: 600; cursor: default; }
/* "Für Termin anmelden": fixed size, the dialog does not jump while searching */
#dlg-pick-occurrence .dialog-body { height: min(70vh, 40rem); display: flex; flex-direction: column; }
#dlg-pick-occurrence .pick-table { flex: 1 1 auto; max-height: none; min-height: 0; overflow: auto; }
.pick-pager { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; padding-top: .6rem; }
.pick-pager .btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.qs-block { border: 1px solid var(--color-border); border-radius: var(--radius); margin: 0 0 .5rem; background: var(--color-surface); }
.qs-block__head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; padding: .55rem .75rem; cursor: pointer; }
.qs-block__head:hover { background: var(--color-surface-3); }
.qs-block__meta { color: var(--color-muted); font-size: .88rem; }
.qs-block__actions { margin-left: auto; display: inline-flex; gap: .4rem; }
.qs-block__body { padding: 0 .75rem .75rem; }
.qs-caret { display: inline-block; border: 5px solid transparent; border-left: 7px solid var(--color-muted); transition: transform .12s; }
.qs-block.is-open .qs-caret { transform: rotate(90deg); transform-origin: 3px 5px; }

/* small screens: nothing may push the page sideways */
@media (max-width: 760px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .tabs a { flex: 0 0 auto; white-space: nowrap; }
  .kpis--inline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis--inline .kpi { min-width: 0; padding: .6rem .7rem; }
  .kpis--inline .kpi-label { overflow-wrap: anywhere; }
  .monthgrid { overflow-x: auto; }
  .monthgrid-head, .monthgrid-week { min-width: 640px; }
  .status-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .status-list dt { margin-top: .45rem; font-size: .85rem; }
  .status-list dd { overflow-wrap: anywhere; }
}
@media (max-width: 760px) { .logo-box { max-width: 100%; flex-wrap: wrap; } .logo-box > * { min-width: 0; max-width: 100%; } }
@media (max-width: 760px) { .logo-box .inline-fields { flex-wrap: wrap; } .logo-box input[type="file"] { max-width: 100%; min-width: 0; } }
.fieldset-plain { border: 0; padding: 0; margin: .25rem 0 .75rem; min-width: 0; }
.flash--actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* quick search: busy indicator, compact one-line collapsed rows */
.qs-busy { display: flex; align-items: center; gap: .6rem; color: var(--color-muted); margin: .75rem 0 0; }
.spinner { width: 1.1rem; height: 1.1rem; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: cm-spin .7s linear infinite; flex: 0 0 auto; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
.qs-block { margin: 0 0 .35rem; }
.qs-block__head { flex-wrap: nowrap; padding: .4rem .65rem; min-height: 2.6rem; }
.qs-block__head > strong { white-space: nowrap; }
.qs-sep { color: var(--color-muted); }
.qs-contact { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.qs-block__meta { white-space: nowrap; margin-left: .25rem; }
@media (max-width: 760px) { .qs-block__head { flex-wrap: wrap; } .qs-block__actions { margin-left: 0; width: 100%; } }

/* U8: weekly plan entries in bar style – light tint of the entry colour, coloured border and bar, dark text
   (readable for every colour, also pale yellow) */
.plan-entry, .plan-entry.has-color {
  --tone: var(--entry-color, #8a949e);
  background: color-mix(in srgb, var(--tone) 14%, var(--color-surface));
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--tone) 70%, var(--color-surface));
  border-left: 5px solid var(--tone);
  border-radius: 4px;
}
.plan-entry em { opacity: 1; color: var(--color-muted); }
.plan-entry:hover { filter: none; background: color-mix(in srgb, var(--tone) 24%, var(--color-surface)); outline: none; box-shadow: 0 0 0 2px var(--color-primary); }
/* U9: deviating times of a series (e.g. 1st Wednesday longer) dashed behind the base appointment */
.plan-variant { position: absolute; left: 3px; right: 3px; z-index: 1; border: 1.5px dashed var(--entry-color, #8a949e); border-radius: 4px;
  background: color-mix(in srgb, var(--entry-color, #8a949e) 6%, transparent); display: flex; align-items: flex-end; padding: .15rem .35rem; pointer-events: none; }
.plan-variant.is-above { align-items: flex-start; }
.plan-variant span { font-size: .7rem; color: var(--color-text); line-height: 1.15; background: var(--color-surface); padding: 0 .2rem; border-radius: 2px; }
.plan-entry { z-index: 2; height: auto; }
.plan-entry:hover, .plan-entry:focus-visible { z-index: 3; }
.plan-variant { border-color: color-mix(in srgb, var(--entry-color, #8a949e) 75%, #000); }
/* X1: name at most 2 lines with "…", time always visible, the rest in the own tooltip */
.plan-entry { height: auto; }
.plan-entry strong { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 0 0 auto; max-width: 100%; }
.plan-entry span { flex: 0 0 auto; white-space: nowrap; }
.plan-entry em { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.field-warning { margin: .3rem 0 0; color: var(--color-warning-text, #8a5300); font-size: .88rem; max-width: 26rem; }
/* course image: preview round, as on the website */
.course-image__row { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.course-image__preview, .course-image__empty { width: 6rem; height: 6rem; border-radius: 50%; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--color-border); }
.course-image__empty { display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent-bg); color: var(--color-primary); font-size: 2rem; font-weight: 700; }
.course-image .inline-fields { flex-wrap: wrap; margin-bottom: .5rem; }
.course-image input[type="file"] { max-width: 100%; }
/* FB1-1: extension label – two lines if there is room, else one shortened line; full text in the tooltip */
.plan-variant span { pointer-events: auto; cursor: default; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.plan-variant.is-oneline span { display: block; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.plan-entry em { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; flex: 0 0 auto; }
.tip-wrap { display: inline-block; } .tip-wrap > [disabled] { pointer-events: none; }
.quick-ranges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; } .quick-ranges .btn.is-active { border-color: var(--color-primary); color: var(--color-primary); }
/* FB2-14: weekly plan views */
/* FB10-6: same joined switch as the course-dates views (no separate buttons in a box) */
.plan-views { margin: 0 0 .75rem; }
.segmented button { all: unset; cursor: pointer; padding: .35rem .8rem; color: var(--color-text); border-right: 1px solid var(--color-border); }
.segmented button:last-child { border-right: 0; }
.segmented button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
.segmented button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.plan.plan--fill .plan-entry.has-color { background: var(--entry-color); color: #fff; border-color: var(--entry-color); }
.plan.plan--fill .plan-entry.has-color em { color: rgba(255, 255, 255, .9); }
.plan.plan--fill .plan-entry.has-color.is-light { color: #1f1f1f; }
.plan.plan--fill .plan-entry.has-color.is-light em { color: #333; }
.plan-list__day h3 { font-size: 1rem; margin: 1rem 0 .4rem; padding-bottom: .25rem; border-bottom: 1px solid var(--color-border); }
.plan-list__day ul { list-style: none; margin: 0; padding: 0; }
.plan-list__day li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; padding: .4rem .6rem; border-left: 4px solid var(--entry-color, var(--color-input-border)); margin: 0 0 .3rem; background: var(--color-surface); }
.plan-list__time { font-variant-numeric: tabular-nums; color: var(--color-muted); }
.page-hint { color: var(--color-muted); margin: 0 0 .75rem; max-width: 60rem; font-size: .92rem; }
/* FB2-15: report options */
.report-options .toggle-row { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius, 6px); background: var(--color-surface); max-width: 44rem; cursor: pointer; }
.report-options .toggle-row input { margin-top: .25rem; }
.report-options h3 { margin: 1.5rem 0 .5rem; font-size: 1rem; }
.report-options__bar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin: 0 0 .75rem; }
.course-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .5rem; }
.course-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .3rem .6rem; padding: .55rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius, 6px); background: var(--color-surface); cursor: pointer; }
.course-tile:hover { border-color: var(--color-input-border); }
.course-tile.is-excluded { background: var(--color-muted-bg, #f1f3f5); border-style: dashed; }
.course-tile.is-excluded .course-tile__title { color: var(--color-muted); text-decoration: line-through; }
.course-tile__state { grid-column: 2 / 4; font-size: .8rem; color: var(--color-muted); }
.course-tile.is-excluded .course-tile__state::before { content: "wird nicht ausgewertet"; }
.course-tile.is-by-rule .course-tile__state::before { content: "nicht ausgewertet (Entwurf)"; }
.status-pill { font-size: .72rem; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--color-border); white-space: nowrap; }
.status-pill--draft { background: #fff4e0; border-color: #f0c987; color: #7a4d00; }
.status-pill--published { background: #e6f4ea; border-color: #9fd3ad; color: #1e5b2c; }
.status-pill--archived { background: #eef0f2; color: #555; }
.renamed-mark { color: var(--color-muted); font-size: .9em; cursor: default; margin-left: .15rem; }
/* FB4-1/2: "Für Termin anmelden" – taller dialog (never larger than the screen), scrollbar always visible,
   weekday and date in two columns that look like one */
.dialog--tall { max-height: calc(100dvh - 2rem); }
.dialog--tall form { display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); }
.dialog--tall .dialog-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pick-scroll { flex: 1 1 auto; min-height: 8rem; max-height: 62vh; overflow-y: scroll; scrollbar-gutter: stable; border: 1px solid var(--color-border); border-radius: var(--radius, 6px); }
.pick-scroll::-webkit-scrollbar { width: 10px; }
.pick-scroll::-webkit-scrollbar-track { background: var(--color-surface-2, #f1f3f5); }
.pick-scroll::-webkit-scrollbar-thumb { background: #b9bec4; border-radius: 6px; border: 2px solid var(--color-surface-2, #f1f3f5); }
.pick-scroll { scrollbar-width: auto; scrollbar-color: #b9bec4 var(--color-surface-2, #f1f3f5); }
.pick-table thead th { position: sticky; top: 0; background: var(--color-surface, #fff); z-index: 1; }
.pick-table .col-check { width: 2rem; text-align: center; }
.pick-table .col-wd { width: 2.2rem; padding-right: 0; }
.pick-table .col-date { padding-left: .25rem; font-variant-numeric: tabular-nums; }
.pick-table tr.is-selected td { background: var(--color-accent-bg, #e8f0fb); }
.pick-options { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: .75rem 0 0; }
.pick-options [hidden] { display: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* FB4-7..10: overview */
.heading-date { font-weight: 400; color: var(--color-muted); font-size: .8em; }
.col-dot { width: 1.5rem; padding-right: 0 !important; }
.live-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: #2f6fd6; vertical-align: middle; cursor: default; position: relative; }
.live-dot.is-past { background: #a8aeb5; }
.live-dot.is-cancelled { background: #c62828; }
.live-dot.is-upcoming { background: #2f6fd6; }
.live-dot.is-soon { background: #2f6fd6; animation: live-pulse-blue 1.6s ease-out infinite; }
.live-dot.is-running { background: #2e9d4a; animation: live-pulse-green 1.6s ease-out infinite; }
@keyframes live-pulse-blue { 0% { box-shadow: 0 0 0 0 rgba(47, 111, 214, .55); } 100% { box-shadow: 0 0 0 .55rem rgba(47, 111, 214, 0); } }
@keyframes live-pulse-green { 0% { box-shadow: 0 0 0 0 rgba(46, 157, 74, .55); } 100% { box-shadow: 0 0 0 .55rem rgba(46, 157, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot.is-soon, .live-dot.is-running { animation: none; outline: 2px solid currentColor; outline-offset: 2px; } }
.today-refresh { margin-left: auto; font-size: .9rem; color: var(--color-muted); }
.notify-stack { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 900; max-width: min(24rem, calc(100vw - 2rem)); }
.notify { display: flex; align-items: flex-start; gap: .65rem; padding: .65rem .8rem; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-left: 4px solid #2f6fd6;
  border-radius: var(--radius, 6px); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); font-size: .9rem; animation: notify-in .25s ease-out; }
.notify .live-dot { margin-top: .3rem; flex: 0 0 auto; }
.notify__text { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; }
.notify__close { all: unset; cursor: pointer; color: var(--color-muted); font-size: 1.1rem; line-height: 1; padding: 0 .15rem; }
.notify__close:hover { color: var(--color-text); }
@keyframes notify-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
.pick-table tr.row-select { user-select: none; }
/* FB10-7: no colour = grey with a red diagonal line (instead of the default green) */
.color-input.is-none::-webkit-color-swatch { background: linear-gradient(to top right, #eceff2 calc(50% - 1.5px), #c62828 calc(50% - 1px), #c62828 calc(50% + 1px), #eceff2 calc(50% + 1.5px)) !important; }
.color-input.is-none::-moz-color-swatch { background: linear-gradient(to top right, #eceff2 calc(50% - 1.5px), #c62828 calc(50% - 1px), #c62828 calc(50% + 1px), #eceff2 calc(50% + 1.5px)) !important; }
.color-dot.is-none { background: linear-gradient(to top right, #eceff2 calc(50% - 1.5px), #c62828 calc(50% - 1px), #c62828 calc(50% + 1px), #eceff2 calc(50% + 1.5px)); border: 1px solid var(--color-border); }
.reset-data { border-color: #f0c2c2; } .reset-form { display: grid; gap: .75rem; max-width: 34rem; margin-top: .75rem; }
.kpi-wrap { display: flex; flex-direction: column; gap: .4rem; } .kpi-wrap .kpi { flex: 1 1 auto; } .kpi-reset { margin: 0; }