:root {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --bg: #f4f6fb;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    /* Same colour as --surface-muted everywhere it's already opaque (Light/Warm) - only Dark gives
       this its own value, since --surface-muted there carries alpha for subtle hover/panel blending.
       Use this instead of --surface-muted wherever something must fully occlude content behind it
       (e.g. the Basisstundenplan's frozen header row), so it can never show scrolled rows through. */
    --surface-muted-opaque: var(--surface-muted);
    --border: #e6eaf2;
    --border-soft: #eef1f7;
    --ink: #0f172a;
    --ink-soft: #475569;
    --muted: #94a3b8;
    --primary: #2563eb;
    --primary-strong: #1d4ed8;
    --primary-soft: #eff6ff;
    --primary-soft-2: #dbeafe;
    --success: #16a34a;
    --success-soft: #dcfce7;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --purple: #9333ea;
    --purple-soft: #f3e8ff;
    --pink: #db2777;
    --pink-soft: #fce7f3;
    --radius-lg: 12px;
    --radius-md: 9px;
    --radius-sm: 6px;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .06);
    --shadow-pop: 0 18px 44px rgba(15, 23, 42, .16);
    --gold: var(--primary);
    --accent: var(--primary);
    --event: var(--primary);
    --event-2: var(--primary-strong);
    /* These three read the custom properties above (rather than hardcoding light values) so that
       the html element itself - not just elements inside .app-shell - follows the active theme.
       That's what the browser/OS actually paints behind a PWA's system status/nav bars and in the
       iOS overscroll area, so it has to track dark mode too, not just app content. */
    color-scheme: light;
    color: var(--ink);
    background: var(--bg);
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; }
/* Hard guarantee against page-wide horizontal scroll/pinch-zoom: no matter which nested
   flex/grid item's automatic-minimum-size quirk lets a wide child (a table, a multi-column week
   grid, ...) push its ancestor wider than the viewport, the page itself can never grow past
   100% width - only elements that opt in via their own overflow-x:auto (e.g. .week-surface) can
   scroll horizontally, and only within themselves. */
/* Both use different values on purpose: "hidden" on <html> is propagated to the viewport (a plain page
   scroll, so position:fixed bars such as .mobile-bottom-nav stay put), whereas "hidden" on <body> as well
   would turn <body> into its own scroll container - and fixed elements misbehave inside that on phones
   and in Firefox's responsive mode. "clip" blocks the horizontal overflow without creating a scroller. */
html { overflow-x: hidden; }
body { overflow-x: hidden; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); }

/* Hidden by default - Blazor's runtime only reveals this on a genuine unhandled exception.
   Without an explicit "display: none" here it renders as a normal block element and flashes
   on every page load before the WASM runtime finishes booting. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: .85rem 3rem .85rem 1.25rem;
    background: var(--danger-soft);
    color: #7f1d1d;
    border-top: 1px solid color-mix(in srgb, var(--danger), transparent 55%);
    font-size: .88rem;
}
#blazor-error-ui .reload { color: var(--danger); font-weight: 700; text-decoration: underline; margin-left: .4rem; }
#blazor-error-ui .dismiss { position: absolute; right: 1rem; top: .75rem; cursor: pointer; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

.navigation-toggle {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Shell: full-height sidebar on the left, topbar + content column on the right. */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    background: var(--bg);
}

.sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: sticky;
    top: 0;
    color: var(--ink);
    background: var(--surface);
    border-right: 1px solid var(--border);
    transition: width .2s ease, padding .2s ease, opacity .18s ease, transform .2s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 14px;
}
/* The app icon (brand-icon.png) is a fixed illustration with its own baked-in background and
   rounded corners - it intentionally does NOT follow --primary/theme colors, so it looks identical
   in Light/Dark/Warm. The PNG has real transparency outside the rounded shape; border-radius is
   only a safety clip so a stray edge pixel never shows as a square on dark surfaces. */
.brand-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: block;
    border-radius: 22%;
    object-fit: cover;
}
.brand-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }

.menu-toggle {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--ink-soft);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    box-shadow: none;
}
.menu-toggle:hover { background: var(--surface-muted); }
.menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.nav-menu {
    display: grid;
    align-content: start;
    gap: 2px;
    width: 100%;
    padding: 6px 12px;
    overflow-y: auto;
}
.nav-menu a,
.nav-module-link {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    pointer-events: auto;
    border-radius: var(--radius-sm);
    transition: background .14s ease, color .14s ease;
}
.nav-menu a:hover { color: var(--ink); background: var(--surface-muted); }
.nav-menu a > * { pointer-events: none; }
.nav-menu a { touch-action: manipulation; user-select: none; }
.nav-menu a.active {
    color: var(--primary-strong);
    background: var(--primary-soft);
}
.nav-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.nav-icon svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px;
    max-height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-label { display: block; width: 100%; font-size: .89rem; line-height: 1.2; text-align: left; }
.nav-separator { height: 1px; margin: 10px 12px; background: var(--border); }

.sidebar-footer { margin-top: auto; padding: 14px; border-top: 1px solid var(--border); }
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border-radius: var(--radius-md);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}
.sidebar-user:hover { background: var(--surface-muted); }
.sidebar-user-name { font-size: .88rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-email { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-text { min-width: 0; flex: 1; text-align: left; }
.sidebar-user-caret { flex: 0 0 auto; color: var(--muted); }
.sidebar-user-caret svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.main-column { grid-column: 2; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }

.topbar {
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 74px;
    padding: 0 24px;
    background: var(--bg);
    border-bottom: 1px solid transparent;
}
/* The bell's dialog is rendered inside the topbar, whose own z-index (25) puts its whole stacking
   context - and thus the dialog overlay - below the sidebar (30). Lift the topbar while it is open. */
.topbar:has(.notification-overlay) { z-index: 100; }
.topbar-spacer { flex: 1; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-icon {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: none;
}
.header-icon:hover { background: var(--surface-muted); }
.header-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    border: 2px solid var(--bg);
}

.profile-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    border: 0;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .28);
}
.avatar-menu { position: relative; }
.avatar-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.avatar-menu > summary::-webkit-details-marker { display: none; }
.avatar-menu-caret { color: var(--muted); }
.avatar-menu-caret svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.avatar-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    width: 200px;
    padding: 8px;
    display: grid;
    gap: 2px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
}
.avatar-menu-panel a, .avatar-menu-panel button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: .55rem .7rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-weight: 600;
    font-size: .86rem;
    text-align: left;
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
}
.avatar-menu-panel a:hover, .avatar-menu-panel button:hover { background: var(--surface-muted); color: var(--ink); }

.content { grid-column: 2; min-width: 0; min-height: 0; flex: 1; }
.page { max-width: 1580px; margin: 0 auto; padding: 4px 24px 40px; }
h1, h2, h3 { color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
h1 { margin: .1rem 0 .75rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
h2 { font-size: 1.05rem; }
.page-kicker { display: block; margin-bottom: 3px; color: var(--primary); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.muted { color: var(--muted); }

button, .button-link {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: .68rem .95rem;
    cursor: pointer;
    font-weight: 700;
    font-size: .88rem;
    color: #fff;
    background: linear-gradient(180deg, var(--primary), var(--primary-strong));
    box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
}
button:hover, .button-link:hover { filter: brightness(1.04); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
button.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--border); box-shadow: none; }
button.ghost:hover { background: var(--surface-muted); }
button:disabled { opacity: .6; cursor: not-allowed; filter: none; }

input, select, textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .68rem .78rem;
    color: var(--ink);
    background: var(--surface);
}
textarea { min-height: 64px; resize: vertical; }
::placeholder { color: var(--muted); opacity: 1; }
/* The generic input padding above (.68rem .78rem) leaves almost no room for a color input's
   native swatch - browsers give <input type="color"> a small intrinsic height, so that padding
   alone ate ~80% of it, squashing the visible color down to a thin sliver. A fixed compact size
   with minimal padding is needed wherever no more specific rule already overrides this. */
input[type="color"] { width: 52px; height: 43px; padding: 4px; flex: 0 0 auto; cursor: pointer; }

/* General pages */
.hero, .card, .form-card, .list-row, .table-wrap, .loading-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}
.hero { border-radius: var(--radius-lg); padding: 2.25rem; }
.hero h1 { max-width: 800px; font-size: clamp(1.8rem, 4vw, 2.75rem); }
.eyebrow { color: var(--primary); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.card, .form-card, .list-row { border-radius: var(--radius-md); padding: 1.1rem; }
.card { transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.form-card { max-width: 650px; display: grid; gap: 1rem; }
.form-card + .form-card { margin-top: 1.5rem; }
.form-card label { display: grid; gap: .4rem; color: var(--ink-soft); font-weight: 700; font-size: .88rem; }
/* ".form-card label" above would otherwise turn checkbox toggles into a grid (box above/offset from its text) */
.form-card label.inline-toggle { display: flex; flex-direction: row; align-items: center; gap: .55rem; font-weight: 600; }
.form-card label.inline-toggle input[type="checkbox"] { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin: 0; padding: 0; }
.form-actions { display: flex; align-items: center; gap: .8rem; }
.form-actions-secondary { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.page-actions { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; }
.form-row { display: flex; gap: .7rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.form-row input:not([type="color"]) { flex: 1 1 190px; }
.form-row input[type="color"] { width: 52px; height: 43px; padding: 4px; }
.stack { display: grid; gap: .55rem; }
.list-row { display: flex; align-items: center; gap: .75rem; }
.list-row-clickable { cursor: pointer; transition: background .12s ease; }
.list-row-clickable:hover { background: var(--surface-muted); }
.list-row-editable { flex-wrap: wrap; }
.list-row-editable input:not([type="color"]) { flex: 1 1 160px; width: auto; }
.list-row-editable input[type="color"] { width: 44px; height: 38px; padding: 3px; flex: 0 0 44px; }
.list-row-editable .row-actions, .list-row .row-actions { display: flex; gap: .5rem; margin-left: auto; }
.plan-header-card { max-width: 900px; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.plan-header-card label { flex: 1 1 220px; }
.plan-header-card .form-field-wide { flex-basis: 100%; }
/* A short-code field (e.g. a subject's Kürzel) rarely needs more than a handful of characters -
   capping its width keeps it from stretching across the whole form-card like a full name field. */
.form-field-narrow { max-width: 110px; }
.card-subsection { flex-basis: 100%; padding-top: 16px; border-top: 1px solid var(--border); }
.card-subsection .panel-header { margin-bottom: 10px; }
.card-subsection .panel-header h2 { font-size: 1rem; }
/* ".form-card label" (below) would otherwise win on specificity, stretching this upload label full-width and greying out its text */
.card-subsection .scan-upload-label { display: inline-flex; color: #fff; }
.inline-toggle { display: flex; align-items: center; gap: .4rem; color: var(--ink-soft); font-weight: 600; font-size: .85rem; flex: 0 0 auto; }
.inline-toggle input { width: auto; }
.label-with-info { display: inline-flex; align-items: center; gap: .35rem; }
/* Tap/click-to-open info icon (InfoHint.razor). The bubble is positioned against the enclosing
   <label>, not the icon, so it spans that field's width and never overflows a narrow viewport.
   The icon's 28px box (icon 20px + padding) keeps a finger-sized tap target. */
label:has(.info-hint) { position: relative; }
.info-hint { display: inline-block; }
.info-hint > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin: -6px -4px; border-radius: 50%; color: var(--muted); flex: 0 0 auto;
}
.info-hint > summary::-webkit-details-marker { display: none; }
.info-hint > summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.info-hint > summary:hover, .info-hint > summary:focus-visible, .info-hint[open] > summary { color: var(--primary); }
.info-hint-bubble {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; padding: .6rem .75rem;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-soft);
    box-shadow: var(--shadow-pop); font-size: .8rem; font-weight: 500; line-height: 1.4; text-align: left;
}
button.danger { background: var(--danger); border-color: transparent; box-shadow: none; }
button.danger:hover { filter: brightness(1.08); }
.dot, .subject-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--subject-color, var(--primary)); flex: 0 0 10px; }
.success { color: var(--success); margin-left: .8rem; font-weight: 700; }
.error { color: var(--danger); }
.compact { font-size: .78rem; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 18px; }

.table-wrap { overflow: auto; border-radius: var(--radius-md); margin-bottom: 1rem; }
.timetable { border-collapse: collapse; width: 100%; min-width: 1000px; color: var(--ink); }
.timetable th, .timetable td { border: 1px solid var(--border); padding: .55rem; vertical-align: top; }
/* Opaque, not --surface-muted - the frozen-header overlay (teacherdeskStickyHeader) clones this row
   and fixes it on top of the scrolling table body, so a see-through background would let scrolled-
   past rows show through underneath it. */
.timetable th { background: var(--surface-muted-opaque); font-weight: 700; }
.timetable td { min-width: 180px; background: var(--surface); }
.timetable td select, .timetable td input { margin-bottom: .35rem; }

/* Jahresplanung grid - reuses .timetable's table chrome, cells are plain clickable/droppable divs
   instead of select/input pairs. */
.yearplan-table td.yearplan-cell { min-width: 130px; padding: 0; height: 44px; cursor: pointer; }
.yearplan-cell:hover { background: var(--surface-muted); }
.yearplan-cell.disabled { background: color-mix(in srgb, var(--ink-soft) 10%, var(--surface-muted)); cursor: not-allowed; }
.yearplan-cell.occupied, .yearplan-cell.continuation {
    background: color-mix(in srgb, var(--chip, var(--primary)) 18%, var(--surface));
    border-left: 3px solid var(--chip, var(--primary));
}
/* Direct child only - .yearplan-cell-sequence below is also a <strong> but nested one level deeper
   inside .yearplan-cell-content, and must NOT pick up this padding (it has its own). */
.yearplan-cell.occupied > strong { display: block; padding: .4rem .5rem; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yearplan-cell.continuation { opacity: .7; }
.yearplan-cell.tail { border-bottom: 3px solid var(--chip, var(--primary)); }
/* A topic-based assignment shows its topic name on every row of its span (not just the anchor), with
   the sequence's own name above it on the anchor row only - see Jahresplanung.razor. The sequence
   name is styled identically to the topicless case above (same size/weight/color) so a sequence reads
   the same whether or not it has topics; only the topic name underneath is lighter. Both lines are
   forced to a single line (ellipsis, no wrap) - a wrapped name would otherwise grow the cell past the
   grid's fixed row height instead of just truncating. */
.yearplan-cell-content { padding: .3rem .5rem; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.yearplan-cell-content .yearplan-cell-sequence { display: block; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Smaller than the sequence name so an anchor cell (sequence name + topic name stacked) still fits
   the grid's fixed row height instead of growing it. */
.yearplan-cell-content .yearplan-cell-topic { display: block; font-size: .66rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.section-heading { margin: 1.6rem 0 .3rem; font-size: 1.1rem; }

.timing-cell { min-width: 110px !important; }
.timing-cell input[type="time"] { margin-bottom: .35rem; }
.timing-cell input[type="time"]:last-child { margin-bottom: 0; }

.timetable tr.break-row td, .timetable tr.supervision-row td { background: var(--surface-muted); padding: .4rem .5rem; }
.timetable td.break-row-label { color: var(--ink-soft); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.timetable td.break-row-label input[type="number"] { width: 55px; margin: 0 .3rem; text-align: center; }
.timetable td.break-day-cell { min-width: 110px; padding: .3rem .4rem; }
.timetable td.break-day-cell input { width: 100%; margin-bottom: 0; }
.timetable td.break-row-remove { width: 40px; text-align: center; padding: .2rem; }
.timetable td.break-row-remove .icon-link-button { width: 26px; height: 26px; font-size: .95rem; color: var(--danger); }
.add-break-button {
    background: none; border: 1px dashed var(--border); border-radius: var(--radius-sm, 6px);
    color: var(--muted); font-size: .74rem; font-weight: 600; padding: .3rem .8rem; cursor: pointer;
}
.add-break-button:hover { color: var(--accent, var(--ink)); border-color: var(--accent, var(--border)); }

.week-break-row, .schedule-break-row { min-height: 34px; border-bottom: 1px solid var(--border-soft); background: var(--surface-muted); }
.schedule-break-label {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.break-period-label { background: var(--surface-muted); padding: 2px 4px; }
/* Compound selector (both classes) so this reliably beats .period-label strong/span below on
   specificity - they were equal before, and the later, larger-font rule was silently winning. */
.period-label.break-period-label strong { color: var(--muted); font-size: .7rem; line-height: 1.1; font-weight: 700; }
.period-label.break-period-label span { color: var(--muted); font-size: .62rem; line-height: 1.1; }
.break-cell { background: var(--surface-muted); }
.break-attribute-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }

.week-supervision-row { min-height: 34px; border-bottom: 1px solid var(--border-soft); background: var(--surface-muted); }
.supervision-cell { display: flex; align-items: center; padding: 6px; min-width: 0; }
.supervision-chip {
    display: inline-flex; align-items: center; gap: .3rem; width: fit-content; max-width: 100%;
    padding: .25rem .3rem .25rem .45rem; border-left: 3px solid var(--purple); border-radius: 6px;
    background: var(--purple-soft); color: color-mix(in srgb, var(--purple), black 20%);
    font-size: .68rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Header sync button */
.header-actions > button.ghost { color: var(--ink-soft); border-color: var(--border); padding: .5rem .72rem; font-size: .78rem; }

/* Calendar heading */
.calendar-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; --heading-gap: 14px; margin: 0 0 var(--heading-gap); }
/* Fixed width, just wide enough for the longest possible title (the day view's "Donnerstag,
   28.09.2026") plus a couple px of slack, so the nav arrows either side of it never shift as the
   title text changes length between views/dates, while still sitting close to shorter titles. */
.calendar-title-group h1 { margin: 0; color: var(--ink); font-size: clamp(1.5rem, 2.6vw, 2rem); width: 20ch; text-align: center; white-space: nowrap; }
.calendar-title-nav { display: flex; align-items: center; gap: 9px; }
.round-nav-button {
    width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
    border-radius: 50%; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border); box-shadow: none;
    font-size: 1.3rem; line-height: 1;
}
.round-nav-button:hover { background: var(--surface-muted); }
.calendar-toolbar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
/* Platzhalter in der Listenansicht: belegt den Platz des Knopfs, ist aber unsichtbar und nicht bedienbar. */
.toolbar-placeholder { visibility: hidden; pointer-events: none; }
.toolbar-slot { position: relative; display: inline-flex; }
.toolbar-slot-top { position: absolute; top: 0; right: 0; bottom: 0; }
.segmented { display: flex; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.segmented button { min-width: 64px; padding: .5rem .8rem; background: transparent; border: 0; border-radius: 999px; color: var(--ink-soft); box-shadow: none; font-weight: 600; }
.segmented button.active { color: #fff; background: linear-gradient(180deg, var(--primary), var(--primary-strong)); }
.date-picker { position: relative; width: 44px; height: 40px; display: grid; place-items: center; color: var(--ink-soft); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); overflow: hidden; }
.date-picker svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; pointer-events: none; }
.date-picker input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* Print button (PrintButton.razor) - looks like the date picker above, with a printer. */
button.print-button { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 40px; padding: 0; color: var(--ink-soft); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: none; }
button.print-button:hover { background: var(--surface-muted); filter: none; }
button.print-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.calendar-selector { min-width: 160px; color: var(--ink-soft); background: var(--surface); border-color: var(--border); border-radius: 999px; box-shadow: none; }
.calendar-selector span { margin-left: 12px; }

/* Planner surfaces (week / month grids) */
.planner-surface {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--ink);
}
.week-surface { overflow-x: auto; overflow-y: visible; min-width: 0; }
.week-board { --day-columns: 5; min-width: 860px; }
.week-board.day-mode { min-width: 420px; }
.week-grid { display: grid; grid-template-columns: 64px repeat(var(--day-columns), minmax(0, 1fr)); }
.week-grid > * { border-right: 1px solid var(--border-soft); }
.week-grid > *:last-child { border-right: 0; }
.week-grid-header { min-height: 43px; border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.period-heading { display: grid; place-items: center; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
/* Flat like the Stundenplan overview's .schedule-header cells (no radius, no shadow) - this is a
   <button>, so without box-shadow:none it keeps the app-wide button style's blue drop shadow
   (see the base "button" rule), which reads as a framed/outlined edge around each cell instead of
   sitting flush in the header row like Stundenplan's plain, un-styled <div> cells. */
.day-heading { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 8px 10px; font-weight: 700; font-size: .95rem; width: 100%; height: 100%; border: 0; background: transparent; color: inherit; font-family: inherit; cursor: pointer; border-radius: 0; box-shadow: none; transition: background .14s ease; overflow: hidden; }
.day-heading .day-date { color: var(--muted); font-size: .76rem; font-weight: 500; }
.day-heading:hover { background: var(--surface-muted); }
.day-heading.today { background: var(--primary-soft); color: var(--primary-strong); }
.day-heading.today:hover { background: var(--primary-soft); filter: brightness(0.97); }

/* Weekday column headers (Calendar week/day view, Timetable editor): show the full name where
   there's room, an abbreviation (Mo/Di/Mi...) where columns must be narrow - see the
   max-width: 900px override below. */
.day-name-short { display: none; }

/* Dashboard calendar tile: shows the full week normally, collapses to a single-day view on mobile (see breakpoint below). */
.dashboard-calendar-day-label { display: none; }

.week-grid-summary { min-height: 92px; border-bottom: 1px solid var(--border); }
.summary-spacer { background: var(--surface-muted); }
/* border:0 (needed to strip the app-wide <button> border/shadow) also strips the column separator
   that ".week-grid > *" gives every other cell in the row - restore just the right edge here so the
   Tagesnotiz cells keep the same vertical divider as the rest of the grid. */
.day-summary {
    position: relative; min-width: 0; padding: 6px 7px 10px; background: var(--surface);
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    width: 100%; border: 0; border-right: 1px solid var(--border-soft); border-radius: 0; box-shadow: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.day-summary:hover { background: var(--surface-muted); }
/* The cell the open side panel is editing (Calendar.razor): highlighted in the primary color, hover or not. */
.day-summary.editing, button.week-cell.editing, button.week-cell.editing:hover {
    background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); position: relative; z-index: 1;
}
.day-banners { display: flex; flex-wrap: wrap; gap: 4px; min-height: 25px; }
.holiday-banner, .holiday {
    display: inline-flex; align-items: center; width: fit-content; max-width: 100%;
    padding: .28rem .48rem; border-radius: 6px; background: var(--success-soft); color: #15803d; font-size: .72rem; font-weight: 700;
}
.attribute-chip, .month-attribute {
    display: inline-flex; align-items: center; width: fit-content; max-width: 100%;
    padding: .25rem .45rem; border: 1px solid color-mix(in srgb, var(--chip), transparent 45%);
    border-left: 5px solid var(--chip); border-radius: 6px;
    background: color-mix(in srgb, var(--chip), white 88%); color: color-mix(in srgb, var(--chip), black 55%); font-size: .7rem; font-weight: 700;
}
/* "Krank" marker of a day (Kalender -> Tag -> Krank) */
.sick-chip {
    display: inline-flex; align-items: center; width: fit-content; max-width: 100%; min-width: 0;
    padding: .28rem .48rem; border-radius: 6px; background: var(--danger-soft); color: #b91c1c; font-size: .72rem; font-weight: 700;
}
/* AttributeMultiSelect.razor - the app-wide multiselect dropdown for picking Tagesattribute.
   Reuses .avatar-menu/.avatar-menu-panel (same <details>/<summary> + app.js click-outside-close as
   the profile/school menus), styled as a normal form field so it drops into a <label> like any
   other input/select. */
.attribute-multiselect-trigger, .attribute-multiselect-readonly {
    min-height: 43px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: .4rem .78rem; background: var(--surface); color: var(--ink);
}
.attribute-multiselect-trigger { justify-content: space-between; }
.attribute-multiselect-trigger:hover { border-color: color-mix(in srgb, var(--border), var(--ink-soft) 35%); }
details.attribute-multiselect[open] > .attribute-multiselect-trigger { border-color: var(--primary); }
.attribute-multiselect-readonly { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; opacity: .75; }
.attribute-multiselect-chips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.attribute-multiselect-panel { left: 0; right: auto; width: max(100%, 240px); max-height: 280px; overflow-y: auto; }
.attribute-multiselect-panel .attribute-multiselect-option {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: .55rem .7rem;
    border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; font-size: .86rem; cursor: pointer;
}
.attribute-multiselect-option:hover { background: var(--surface-muted); }
.attribute-multiselect-option input { width: 16px; height: 16px; margin: 0; padding: 0; border: none; accent-color: var(--primary); flex: 0 0 auto; }
.attribute-multiselect-swatch { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.attribute-multiselect-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appointment-chip {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: fit-content; max-width: 100%;
    padding: .22rem .48rem; border-radius: 6px; cursor: pointer;
    background: color-mix(in srgb, var(--chip), white 85%); color: color-mix(in srgb, var(--chip), black 60%);
    font-size: .68rem; line-height: 1.25;
}
.appointment-chip strong { font-size: .66rem; font-weight: 800; }
.appointment-chip span { font-weight: 600; }
.appointment-chip:hover { filter: brightness(0.97); }
.birthday-chip {
    display: inline-flex; align-items: center; width: fit-content; max-width: 100%;
    padding: .22rem .48rem; border-radius: 6px;
    background: var(--pink-soft); color: var(--pink); font-size: .68rem; font-weight: 700;
}

.week-grid-row { min-height: 89px; border-bottom: 1px solid var(--border-soft); }
.week-grid-row:last-child { border-bottom: 0; }
.period-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--ink-soft); background: var(--surface-muted); text-align: center; }
.period-label strong { font-size: 1rem; font-weight: 800; }
/* The time range often wraps onto two lines in this narrow column - once it wraps, the flex item's
   width is forced out to the column's full available width (align-items:center on the flex parent
   only matters when the item is narrower than that), so without its own text-align the wrapped
   lines default left instead of following the "1." above them. */
.period-label span { color: var(--muted); font-size: .68rem; text-align: center; }
.week-cell { position: relative; min-width: 0; padding: 6px; background: var(--surface); }
button.week-cell {
    display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; min-height: 89px;
    border-top: 0; border-left: 0; border-bottom: 0; border-radius: 0; box-shadow: none; text-align: left; cursor: pointer;
    color: inherit; font-weight: 400; font-size: inherit; transition: background .14s ease;
}
button.week-cell:hover { background: var(--surface-muted); }
/* Fach/Klasse filter (Calendar.razor): dims non-matching periods instead of hiding them outright,
   so the grid's shape and every cell's click target stay exactly as they are with no filter set. */
button.week-cell.filtered-out { opacity: .28; }
button.week-cell.filtered-out:hover { opacity: .55; }
.month-lesson.filtered-out { opacity: .28; }
button.break-cell:hover { background: color-mix(in srgb, var(--surface-muted), var(--ink) 4%); }
/* Pause/Aufsicht cells are also <button class="week-cell ..."> now (for the side-panel click
   target), but must stay at the row's own compact height, not the 89px full lesson-period height. */
button.week-cell.break-cell, button.week-cell.supervision-cell { min-height: 34px; justify-content: center; }
/* Subject on its own line, Klasse/Raum stacked below it on a second line - rather than inline next
   to the subject - so both stay readable even in the dashboard's narrower cell. */
.base-lesson {
    position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1px; min-width: 0;
    padding: 1px 3px; color: var(--muted); font-size: .68rem; font-weight: 600; overflow: hidden;
}
.base-lesson-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.base-lesson-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.base-lesson strong { color: var(--ink-soft); }
.base-lesson .subject-dot { background: var(--subject-color); }
.lesson-meta { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Day/week view (but not the dashboard tile, which reuses the same markup): show the subject
   abbreviation and its color dot larger than the Klasse/Raum line below it. */
.week-board:not(.dashboard-calendar) .base-lesson { gap: 2px; }
.week-board:not(.dashboard-calendar) .base-lesson-top strong { font-size: .78rem; }
.week-board:not(.dashboard-calendar) .lesson-meta { font-size: .78rem; }
.week-board:not(.dashboard-calendar) .base-lesson .subject-dot { width: 11px; height: 11px; flex: 0 0 11px; }

/* The dashboard tile's lesson rows otherwise inherit the full calendar's 89px min-height meant for
   comfortable click targets there - on the read-only dashboard preview that just wastes vertical
   space, so let each row shrink to whatever its tallest cell (now up to two lines: subject, then
   Klasse/Raum) actually needs. */
.dashboard-calendar .week-grid-row { min-height: 0; }

.sequence-lesson {
    position: relative; z-index: 2; min-width: 0; padding: 2px 4px; margin-top: 2px;
    border-left: 3px solid var(--chip, var(--primary)); background: color-mix(in srgb, var(--chip, var(--primary)), transparent 88%);
    display: flex; flex-direction: column; gap: 1px; font-size: .68rem; line-height: 1.15; overflow: hidden;
}
.sequence-lesson strong { color: var(--ink-soft); overflow-wrap: break-word; }
.sequence-lesson span { color: var(--muted); overflow-wrap: break-word; }

.scheduled-topic-info {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px; border-radius: var(--radius-md);
    border-left: 3px solid var(--chip, var(--primary)); background: color-mix(in srgb, var(--chip, var(--primary)), transparent 90%);
}
.scheduled-topic-info div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.scheduled-topic-info strong { color: var(--ink-soft); }
.scheduled-topic-info span { color: var(--muted); font-size: .85rem; }
.scheduled-topic-info .row-actions { flex-direction: row; flex: 0 0 auto; gap: .4rem; }

.scheduled-topic-link {
    display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto;
    background: none; border: 0; box-shadow: none; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.scheduled-topic-link:hover strong { text-decoration: underline; }

.sequence-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.sequence-detail-topic { border-left: 3px solid transparent; }
.sequence-detail-topic.highlighted { border-left-color: var(--primary); background: var(--primary-soft); }
.link-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.link-list a { color: var(--primary); text-decoration: none; word-break: break-word; }
.link-list a:hover { text-decoration: underline; }

/* Sequence/topic drag-and-drop planning: a persistent side-by-side panel (not a modal overlay),
   so the calendar grid stays visible and droppable while dragging from it. Desktop-only - the
   toggle button is hidden below the mobile breakpoint (see .drag-panel-toggle further down),
   since drag-and-drop needs more screen space than a small display offers. */
.calendar-with-panel { display: flex; align-items: flex-start; gap: 16px; }
.calendar-with-panel .planner-surface { flex: 1 1 auto; min-width: 0; }
.calendar-with-panel .calendar-skeleton-slot { flex: 1 1 auto; min-width: 0; }
.drag-plan-panel {
    flex: 0 0 300px; position: sticky; top: 12px; align-self: flex-start; max-height: calc(100vh - 24px); overflow-y: auto;
    display: grid; gap: .9rem; padding: 1.2rem; border-radius: var(--radius-lg); background: var(--surface);
    border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.drag-plan-panel label { display: grid; gap: .4rem; color: var(--ink-soft); font-weight: 700; font-size: .88rem; }
.drag-plan-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.drag-plan-header h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.drag-plan-list { gap: .5rem; }
.drag-plan-sequence { border: 1px solid var(--border); border-left: 3px solid var(--chip, var(--primary)); border-radius: var(--radius-sm); overflow: hidden; }
.drag-plan-sequence-header { display: flex; align-items: center; gap: 8px; padding: .5rem .6rem; cursor: grab; background: var(--surface); }
.drag-plan-sequence-header:active { cursor: grabbing; }
.drag-plan-sequence-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.drag-plan-sequence-info span { font-size: .76rem; }
.drag-plan-topics { padding: 0 .6rem .5rem 2rem; gap: .35rem; }
.drag-plan-topic {
    display: flex; flex-direction: column; gap: 1px; padding: .4rem .6rem; border-radius: var(--radius-sm);
    background: var(--surface-muted); cursor: grab; font-size: .82rem;
}
.drag-plan-topic:active { cursor: grabbing; }
.drag-plan-topic span { font-size: .74rem; }
@media (max-width: 900px) {
    .calendar-with-panel { display: block; }
    .drag-panel-toggle, .drag-plan-panel { display: none; }
}

/* Jahresplanung: same side-by-side panel layout as .calendar-with-panel (desktop-only drag-and-drop
   panel, hidden below the mobile breakpoint by the generic .drag-plan-panel rule above). On narrow/
   touch screens - and as an alternative on desktop too - clicking an empty cell opens the
   .picker-sequence-* overlay below instead, so placing a sequence never depends on the panel. */
.jahresplanung-with-panel { display: flex; align-items: flex-start; gap: 16px; }
.jahresplanung-with-panel .yearplan-grid-wrap { flex: 1 1 auto; min-width: 0; }
.drag-plan-sequence.selected { outline: 2px solid var(--primary); outline-offset: -1px; }

/* The picker dialog reuses .drag-plan-sequence/-header/-topics/-topic from the side panel above for
   visual parity (same collapsible-sequence layout) but is click-to-pick, not drag-to-place, so it
   overrides their grab cursor and adds hover feedback; .drag-plan-topic is a <button> here instead
   of the panel's draggable <div>, so its default button chrome needs resetting too. */
.picker-sequence-list { gap: .5rem; max-height: 50vh; overflow-y: auto; }
.picker-sequence-list .drag-plan-sequence-header { cursor: pointer; }
.picker-sequence-list .drag-plan-sequence-header:hover { background: var(--surface-muted); }
.picker-sequence-list button.drag-plan-topic {
    width: 100%; text-align: left; border: 0; box-shadow: none; font: inherit; color: inherit; cursor: pointer;
}
.picker-sequence-list button.drag-plan-topic:hover { background: color-mix(in srgb, var(--surface-muted), var(--ink) 4%); }

/* Month */
.month-surface { padding: 0; overflow: auto; }
.month-weekdays, .month-grid { min-width: 760px; display: grid; grid-template-columns: repeat(var(--month-columns, 7), minmax(0, 1fr)); }
.month-weekdays { background: var(--surface-muted); border-bottom: 1px solid var(--border); }
.month-weekdays div { padding: 10px; text-align: center; border-right: 1px solid var(--border-soft); font-weight: 700; color: var(--ink-soft); }
.month-weekdays div:last-child { border-right: 0; }
.month-grid { gap: 0; }
.month-day {
    min-height: 125px; min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
    padding: 8px; color: var(--ink); background: var(--surface); border: 0; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); border-radius: 0; box-shadow: none; text-align: left;
}
.month-day:nth-child(7n) { border-right: 0; }
.month-day.outside { opacity: .45; }
.month-day.today { box-shadow: inset 0 0 0 2px var(--primary); }
.month-day > strong { font-size: .98rem; }
.note-preview { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .72rem; }
.note-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
.note-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Faint "+" for a day without a note - only shown where the "+ Tagesnotiz" text is hidden (narrow screens). */
.note-add { display: none; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); opacity: .55; }
.note-add svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deviation-icon { display: inline-flex; align-items: center; justify-content: center; width: 11px; height: 11px; flex: 0 0 auto; color: var(--warning); }
.deviation-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deviation-note { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--warning); font-size: .85rem; font-weight: 600; }
.deviation-note .deviation-icon { width: 16px; height: 16px; }

/* Day view only: full note text (not just the icon), with line breaks preserved as entered. */
.note-text {
    margin: 2px 0 0; padding: 5px 7px; border-radius: 6px; background: var(--surface-muted);
    color: var(--ink-soft); font-size: .78rem; font-weight: 400; line-height: 1.4;
    white-space: pre-wrap; word-break: break-word; text-align: left;
}
.month-attribute { font-size: .64rem; }
.month-lessons { display: flex; flex-wrap: wrap; gap: 3px; width: 100%; }
.month-lesson {
    display: inline-flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%;
    padding: .15rem .4rem; border-radius: 5px; background: var(--surface-muted); color: var(--ink-soft);
    font-size: .64rem; font-weight: 700;
}
.month-lesson::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--chip); }
.month-appointments { display: flex; flex-wrap: wrap; gap: 3px; width: 100%; }
.month-appointment {
    display: inline-flex; align-items: center; width: fit-content; max-width: 100%; cursor: pointer;
    padding: .15rem .4rem; border-left: 3px solid var(--chip); border-radius: 4px;
    background: color-mix(in srgb, var(--chip), white 85%); color: color-mix(in srgb, var(--chip), black 60%);
    font-size: .64rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.month-appointment:hover { filter: brightness(0.97); }
.month-birthday {
    display: inline-flex; align-items: center; width: fit-content; max-width: 100%;
    padding: .15rem .4rem; border-radius: 4px;
    background: var(--pink-soft); color: var(--pink);
    font-size: .64rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.appointment-form-overlay {
    position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
    background: rgba(15, 23, 42, .45); padding: 20px;
}
/* AppDialogService's global alert/confirm - it can be triggered from inside an already-open side
   panel (see CalendarEntryPanel's Fach change), so it must outrank every other overlay, not just
   the ones opened while no panel is showing. */
.app-dialog-overlay { z-index: 999; }
.confirm-code { font-size: 1.4rem; letter-spacing: .2em; color: var(--danger); }
.appointment-form-card {
    width: min(440px, 100%); max-height: 90vh; overflow-y: auto; padding: 1.5rem;
    border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop);
    display: grid; gap: 1rem;
}
.appointment-form-card h2 { margin: 0; }

/* Topbar bell dialog (NotificationBell.razor): header stays put, only the list scrolls. */
.notification-dialog { width: min(560px, 100%); max-height: min(85vh, 720px); padding: 0; gap: 0; overflow: hidden; grid-template-rows: auto minmax(0, 1fr); }
.notification-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); }
/* Every notification is its own card on a slightly tinted list background; unread ("Neu") cards get
   a primary accent stripe and tint so they stand out from ones already seen. */
.notification-list { overflow-y: auto; padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .85rem; background: var(--bg); }
.notification-item {
    position: relative; display: grid; gap: .5rem; padding: 1rem 1.1rem 1rem 1.25rem; flex: 0 0 auto;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
    box-shadow: var(--shadow-card); overflow: hidden;
}
.notification-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--border); }
.notification-item.is-new { background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.notification-item.is-new::before { background: var(--primary); }
.notification-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.notification-item-header h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.notification-item > small { display: flex; align-items: center; gap: .35rem; }
.notification-body { padding-top: .6rem; border-top: 1px solid var(--border-soft); }
.notification-new-tag { flex: 0 0 auto; padding: .1rem .5rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary-strong); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.notification-body { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere; }
.notification-body > :first-child { margin-top: 0; }
.notification-body > :last-child { margin-bottom: 0; }
.notification-body img { display: block; max-width: 100%; height: auto; margin: .5rem 0; border-radius: var(--radius-sm); }
.notification-body a { color: var(--primary); text-decoration: underline; }
.notification-body table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.notification-body th, .notification-body td { border: 1px solid var(--border); padding: .3rem .5rem; }
.admin-notification-form { width: min(720px, 100%); }
.admin-notification-form .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.html-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; min-height: 160px; }
.admin-notification-preview { padding: .85rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--surface-muted); }
.notification-status { margin: .75rem 0 0; text-align: center; }
.notification-sentinel { height: 1px; }
.appointment-form-card label { display: grid; gap: .4rem; color: var(--ink-soft); font-weight: 700; font-size: .88rem; }
.appointment-form-card .inline-toggle { display: flex; flex-direction: row; align-items: center; gap: .5rem; }
.material-preview-card {
    width: min(900px, 95vw); max-height: 92vh; overflow-y: auto; padding: 1.25rem;
    border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop);
    display: grid; gap: .75rem;
}
.material-preview-card h2 { margin: 0; font-size: 1rem; word-break: break-word; }
.material-preview-body img, .material-preview-body video { max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; border-radius: 8px; }
.material-preview-body iframe { width: 100%; height: 75vh; border: 0; border-radius: 8px; background: var(--surface-muted); }

/* Read-only schedule */
.schedule-surface { overflow-x: auto; }
.schedule-board { min-width: 820px; }
.schedule-grid { display: grid; grid-template-columns: 66px repeat(5, minmax(0, 1fr)); }
.schedule-grid > * { border-right: 1px solid var(--border-soft); }
.schedule-grid > *:last-child { border-right: 0; }
.schedule-header { border-bottom: 1px solid var(--border); }
.schedule-header > div { padding: 11px 8px; text-align: center; font-weight: 700; color: var(--ink-soft); background: var(--surface-muted); }
.schedule-row { min-height: 67px; border-bottom: 1px solid var(--border-soft); }
.schedule-row:last-child { border-bottom: 0; }
/* Every lesson is three lines: Fach, Klasse (or Lehrkraft), Raum - on wide and narrow screens alike. */
.schedule-cell { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 9px; min-width: 0; }
/* Its own row so dot+Fach stay paired on one line even when .schedule-cell itself switches to a
   column layout on narrow screens (see the @media block below) - otherwise the dot, subject and
   Klasse/Raum each became their own stacked line instead of dot+Fach sharing the first one. */
/* Supervision rows keep their own chip layout. */
.schedule-cell.supervision-cell { flex-direction: row; justify-content: flex-start; align-items: center; }
.schedule-cell-subject { display: flex; align-items: center; gap: 6px; min-width: 0; }
.schedule-cell-line { display: block; min-height: 1.25em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .78rem; }
.schedule-free { color: var(--muted); font-size: .76rem; }

.loading-card { width: fit-content; padding: .9rem 1.1rem; border-radius: var(--radius-sm); color: var(--ink-soft); }

.fullscreen-loading-overlay {
    position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
    background: rgba(15, 23, 42, .45); cursor: wait;
}
.fullscreen-loading-overlay .spinner {
    width: 48px; height: 48px; border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .35); border-top-color: #fff;
    animation: spin .8s linear infinite;
}
/* A spinner inside a white card (class list scan): the overlay's white ring would vanish there. */
.fullscreen-loading-overlay .upload-progress-card .spinner { border-color: var(--border); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }

.upload-progress-card {
    display: grid; gap: .75rem; justify-items: center; padding: 1.5rem 2rem;
    width: min(420px, 90vw); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
    text-align: center; cursor: default;
}
.upload-progress-filename { font-weight: 700; color: var(--ink); word-break: break-word; margin: 0; }
.upload-progress-bar-track { width: 100%; height: 10px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; }
.upload-progress-bar-fill { height: 100%; background: var(--primary); transition: width .15s ease; }
.upload-progress-text { margin: 0; color: var(--ink-soft); font-size: .85rem; font-weight: 600; }

/* Shimmer loading skeletons */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
    background-image: linear-gradient(90deg, var(--surface-muted) 25%, var(--border-soft) 37%, var(--surface-muted) 63%);
    background-size: 400px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-line { height: 14px; border-radius: 7px; margin-bottom: 10px; }
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 65%; }
.skeleton-line.full { width: 100%; }
.skeleton-block { width: 100%; border-radius: var(--radius-md); }
.skeleton-lines { padding: 1.4rem; }
.skeleton-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.skeleton-panel-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; }
.skeleton-dashboard, .skeleton-grid-page { padding: 4px 0 1rem; }
.auth-loading-shell { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 24px; }
.auth-loading-card { width: min(420px, 100%); padding: 1.6rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.subscription-gate-card { width: min(460px, 100%); text-align: center; }
.subscription-gate-plans { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.2rem; }
.subscription-gate-tax-note { font-size: .78rem; margin-top: .5rem; }
.subscription-gate-redeem { display: flex; gap: .6rem; margin-top: 1.4rem; }
.subscription-gate-redeem input { flex: 1 1 auto; }
.subscription-gate-logout { margin-top: 1.4rem; width: 100%; }

.legal-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.legal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.6rem; }
.legal-back { color: var(--ink-soft); font-size: .88rem; font-weight: 600; text-decoration: none; }
.legal-back:hover { color: var(--primary); }
.legal-content { flex: 1 1 auto; display: flex; justify-content: center; padding: 0 1.2rem 2rem; }
.legal-card { width: min(720px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 2rem clamp(1.2rem, 4vw, 2.4rem); }
.legal-card h1 { margin-top: 0; }
.legal-card h2 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
.legal-card p, .legal-card li { color: var(--ink-soft); line-height: 1.6; }
.legal-updated { color: var(--muted); font-size: .85rem; margin-top: -.6rem; }
.legal-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 1.6rem 2rem; color: var(--muted); font-size: .82rem; }
.legal-footer-links { display: flex; gap: 1rem; }
.legal-footer-links a { color: var(--muted); }
.legal-footer-links a:hover { color: var(--primary); }

@media (max-width: 900px) {
    .skeleton-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skeleton-panel-grid { grid-template-columns: 1fr; }
}

.page-error-card {
    max-width: 720px;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--danger-soft);
    border-radius: var(--radius-md);
    color: #7f1d1d;
    background: var(--danger-soft);
    box-shadow: var(--shadow-card);
}
.page-error-card h1 { color: #991b1b; font-size: clamp(1.4rem, 3vw, 1.8rem); }
.page-error-card p { margin-bottom: 0; line-height: 1.55; }

/* Holiday overview */
.holiday-list { display: grid; gap: 10px; max-width: 850px; }
.holiday-card { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); }
.holiday-card h2 { margin: 0 0 3px; }
.holiday-card p { margin: 0; }
.holiday-date { width: 58px; height: 58px; flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--primary-strong); background: var(--primary-soft); }
.holiday-date strong { font-size: 1.25rem; line-height: 1; }
.holiday-date span { margin-top: 3px; font-size: .66rem; text-transform: uppercase; font-weight: 700; }

/* ---------------- Dashboard ---------------- */
.dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dashboard-header h1 { margin: 0 0 4px; font-size: clamp(1.5rem, 2.8vw, 1.9rem); }
.dashboard-header p { margin: 0; color: var(--muted); font-size: .92rem; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.stat-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: var(--radius-md); }
.stat-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stat-icon.stat-blue { background: var(--primary-soft); color: var(--primary-strong); }
.stat-icon.stat-green { background: var(--success-soft); color: #15803d; }
.stat-icon.stat-purple { background: var(--purple-soft); color: var(--purple); }
.stat-icon.stat-pink { background: var(--pink-soft); color: var(--pink); }
.stat-icon.stat-orange { background: var(--warning-soft); color: var(--warning); }
.stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.stat-label { color: var(--muted); font-size: .82rem; font-weight: 600; line-height: 1.3; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.dashboard-main { display: grid; gap: 18px; min-width: 0; }
.dashboard-side { display: grid; gap: 18px; min-width: 0; }

.panel { border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); padding: 18px 20px; min-width: 0; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.panel-header h2 { margin: 0; }
.panel-actions { display: flex; align-items: center; gap: 6px; }
.chip-button { padding: .4rem .75rem; border-radius: 999px; font-size: .78rem; box-shadow: none; background: var(--surface-muted); color: var(--ink-soft); }
.chip-button:hover { background: var(--border-soft); }
.chip-button.active { background: var(--primary); color: #fff; }
.chip-button.active:hover { background: var(--primary-strong); }

.topic-position { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--surface-muted); color: var(--ink-soft); font-weight: 700; font-size: .84rem; align-self: flex-start; }

.birthday-greeting-banner { display: flex; align-items: center; gap: .65rem; padding: .9rem 1.1rem; margin-bottom: 1rem; border-radius: var(--radius-md); background: linear-gradient(135deg, color-mix(in srgb, var(--pink), transparent 78%), color-mix(in srgb, var(--purple), transparent 82%)); border: 1px solid color-mix(in srgb, var(--pink), transparent 60%); color: var(--ink); font-weight: 700; font-size: 1rem; }
.birthday-greeting-icon { font-size: 1.3rem; }

.holiday-countdown-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 1rem; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); color: var(--ink); }
.holiday-countdown-icon { font-size: 1.6rem; flex: 0 0 auto; }
.holiday-countdown-title { font-weight: 700; font-size: 1rem; }
.holiday-countdown-range { color: var(--muted); font-size: .84rem; margin-top: 2px; }

.setup-hints { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.setup-hint { display: flex; align-items: center; gap: .65rem; padding: .85rem 1.1rem; border-radius: var(--radius-md); background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning), transparent 55%); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; transition: transform .15s ease; }
.setup-hint:hover { transform: translateY(-1px); }
.setup-hint-icon { flex: 0 0 auto; color: var(--warning); font-size: 1.05rem; }
.setup-hint-arrow { margin-left: auto; color: var(--warning); font-weight: 800; }
.trial-hint { width: 100%; margin-bottom: 1.4rem; box-shadow: none; text-align: left; cursor: pointer; background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary), transparent 55%); }
.trial-hint .setup-hint-icon, .trial-hint .setup-hint-arrow { color: var(--primary); }
.icon-link-button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-muted); color: var(--ink-soft); box-shadow: none; padding: 0; font-size: 1.1rem; }
.icon-link-button:hover { background: var(--border-soft); }
.icon-link-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Higher specificity than the generic "button.danger" solid-fill rule on purpose: a delete/remove
   icon button stays in the same muted-square style as the app's other row-action icons (download,
   reorder, ...), just tinted red, rather than becoming a solid red block. */
.icon-link-button.danger { background: var(--surface-muted); color: var(--danger); }
.icon-link-button.danger:hover { background: var(--danger-soft); }
.link-more { display: inline-block; margin-top: 10px; color: var(--primary-strong); font-weight: 700; font-size: .85rem; }

.empty-row { padding: 18px 4px; color: var(--muted); font-size: .88rem; }

/* ---------------- Einstellungen ---------------- */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.settings-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.settings-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover, var(--shadow-card)); }
.settings-card-title { font-weight: 700; font-size: .98rem; line-height: 1.3; }
.settings-card .stat-icon { flex: 0 0 auto; }
.settings-card-desc { color: var(--muted); font-size: .82rem; margin-top: 2px; }

/* ---------------- Hilfe ---------------- */
.help-accordion-item { border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); overflow: hidden; }
.help-accordion-item > summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; }
.help-accordion-item > summary::-webkit-details-marker { display: none; }
.help-accordion-item > summary:hover { background: var(--surface-muted); }
.help-accordion-item > summary h2 { margin: 0; }
.help-accordion-caret { flex: 0 0 auto; margin-left: auto; color: var(--muted); transition: transform .15s ease; }
.help-accordion-caret svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.help-accordion-item[open] > summary .help-accordion-caret { transform: rotate(180deg); }
.help-accordion-body { padding: 0 20px 20px; border-top: 1px solid var(--border); padding-top: 18px; }

.help-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.help-steps { display: grid; gap: 18px; }
.help-step { display: flex; gap: 14px; align-items: flex-start; }
.help-step-figure { flex: 0 0 auto; margin: 0; }
.phone-frame { display: block; width: 128px; height: auto; border-radius: 20px; }
.help-step-body { padding-top: 6px; min-width: 0; }
.help-step-number {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong);
    font-weight: 700; font-size: .74rem; margin-right: 7px;
}
.help-step-title { display: flex; align-items: center; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.help-step-text { color: var(--ink-soft); font-size: .85rem; line-height: 1.45; margin: 0; }

@media (max-width: 520px) {
    .help-step { flex-direction: column; }
    .phone-frame { width: 150px; }
}

.appointment-list { display: grid; gap: 12px; }
.appointment-row { display: flex; align-items: center; gap: 10px; }
.appointment-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 8px; background: var(--primary-soft); color: var(--primary-strong); }
.appointment-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.appointment-text { min-width: 0; flex: 1; }
.appointment-title { font-weight: 700; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appointment-time { color: var(--muted); font-size: .76rem; }
button.appointment-row-button { width: 100%; padding: 4px; margin: -4px; text-align: left; color: inherit; background: transparent; border: 0; box-shadow: none; border-radius: var(--radius-sm); font-weight: inherit; font-size: inherit; }
button.appointment-row-button:hover { background: var(--primary-soft); filter: none; }
.appointment-detail h2 { display: flex; align-items: center; gap: .55rem; overflow-wrap: anywhere; }
.appointment-detail-dot { width: .8rem; height: .8rem; flex: 0 0 .8rem; border-radius: 50%; }
.appointment-detail-list { margin: 0; display: grid; gap: .25rem; }
.appointment-detail-list dt { color: var(--muted); font-size: .76rem; font-weight: 700; margin-top: .5rem; }
.appointment-detail-list dd { margin: 0; overflow-wrap: anywhere; }
.appointment-detail-description { white-space: pre-wrap; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill { display: inline-flex; align-items: center; padding: .38rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: color-mix(in srgb, var(--chip), white 85%); color: color-mix(in srgb, var(--chip), black 45%); }

.birthday-list { display: grid; gap: 12px; }
.birthday-row { display: flex; align-items: center; gap: 10px; }
.birthday-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 8px; background: var(--primary-soft); font-size: 1rem; }
.birthday-text { min-width: 0; flex: 1; }
.birthday-name { font-weight: 700; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.birthday-meta { color: var(--muted); font-size: .76rem; }

/* Class management */
.class-name-link {
    background: none; border: none; box-shadow: none; padding: 0; margin: 0;
    color: var(--ink); font-weight: 700; font-size: .95rem; text-align: left; cursor: pointer; flex: 1;
}
.class-name-link:hover { color: var(--primary-strong, var(--ink)); text-decoration: underline; }
/* Same look as .class-name-link but for a list row whose name is plain text, not a click target -
   editing there only happens via the row's pencil icon button. */
.row-title { color: var(--ink); font-weight: 700; font-size: .95rem; flex: 1; min-width: 0; }
.scan-upload-label { position: relative; overflow: hidden; display: inline-flex; align-items: center; cursor: pointer; }
.scan-upload-label input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.import-preview { margin: 1rem 0; }

.app-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 26px; color: var(--muted); font-size: .8rem; flex-wrap: wrap; }
.app-footer a { color: var(--ink-soft); font-weight: 600; }
.app-footer a:hover { color: var(--primary-strong); }
.app-footer-links { display: flex; gap: 18px; }

/* Sidebar collapse on desktop: shrinks to an icon-only rail instead of disappearing, so the
   toggle (and the nav icons) stay visible and clickable to expand it again. The checkbox's
   initial `checked` state is set from the saved profile preference (MainLayout.razor). */
@media (min-width: 901px) {
    /* The page itself scrolls (not <body>), so the grid stretches the sidebar to the full page height and
       sticky would have nothing to stick within: pin it to one viewport height instead. */
    .sidebar { align-self: start; height: 100vh; overflow-y: auto; }
    .app-shell { transition: grid-template-columns .2s ease; }
    .navigation-toggle:checked + .app-shell { grid-template-columns: 80px minmax(0, 1fr); }
    .navigation-toggle:checked + .app-shell .sidebar { width: 80px; }
    .navigation-toggle:checked + .app-shell .sidebar-brand { flex-direction: column; gap: 10px; padding: 16px 8px 12px; }
    .navigation-toggle:checked + .app-shell .brand-name,
    .navigation-toggle:checked + .app-shell .nav-label,
    .navigation-toggle:checked + .app-shell .sidebar-user-text,
    .navigation-toggle:checked + .app-shell .sidebar-user-caret,
    .navigation-toggle:checked + .app-shell .nav-menu { padding-left: 6px; padding-right: 6px; }
    .navigation-toggle:checked + .app-shell .nav-menu a { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
    .navigation-toggle:checked + .app-shell .sidebar-footer { padding-left: 8px; padding-right: 8px; }
    .navigation-toggle:checked + .app-shell .sidebar-user { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
}

/* Dark theme - applied to <html> (see teacherdeskTheme.apply in app.js), not a nested div, so that
   html/body themselves (and thus the OS status/nav bar area behind them once installed as a PWA -
   see the theme-color meta handling in app.js) follow the active theme too. */
:root.theme-dark {
    --bg: #0b1220;
    --surface: #121a2b;
    --surface-muted: #16203380;
    --surface-muted-opaque: #162033;
    --border: #223049;
    --border-soft: #1b2740;
    --ink: #e8edf7;
    --ink-soft: #b6c2d9;
    --muted: #7c8aa8;
    --primary-soft: #17264a;
    --primary-soft-2: #1d2f5c;
    --success-soft: #123322;
    --warning-soft: #3a2a0c;
    --danger-soft: #3a1620;
    --purple-soft: #241536;
    --pink-soft: #33132a;
    color-scheme: dark;
}
:root.theme-light { color-scheme: light; }

/* "System" (the default, no explicit override) follows the OS preference directly, both before
   the theme is known (first paint, no class on <html> yet) and once "theme-system" is applied -
   :not(.theme-light) and :not(.theme-warm) exclude those two explicit light-ish overrides from
   this (same specificity as .theme-warm below, so without the exclusion a dark OS preference would
   win the cascade by source order and silently override an explicitly chosen Warm theme). */
@media (prefers-color-scheme: dark) {
    :root:not(.theme-light):not(.theme-warm) {
        --bg: #0b1220;
        --surface: #121a2b;
        --surface-muted: #16203380;
        --surface-muted-opaque: #162033;
        --border: #223049;
        --border-soft: #1b2740;
        --ink: #e8edf7;
        --ink-soft: #b6c2d9;
        --muted: #7c8aa8;
        --primary-soft: #17264a;
        --primary-soft-2: #1d2f5c;
        --success-soft: #123322;
        --warning-soft: #3a2a0c;
        --danger-soft: #3a1620;
        --purple-soft: #241536;
        --pink-soft: #33132a;
        color-scheme: dark;
    }
}

/* Warm theme - palette taken from the cream/navy/terracotta app-icon concept. Only surfaces, ink
   and the primary accent shift; success/warning/danger/purple/pink keep their light-theme hue so
   alert states stay legible and consistent with the other two themes (same restraint as .theme-dark
   above, which likewise only re-tints surfaces and the "-soft" backgrounds, not the core semantic
   colors). --gold/--accent/--event/--event-2 need no override here - they're defined once in :root
   as var(--primary)/var(--primary-strong) and resolve against this block's --primary at compute
   time. */
:root.theme-warm {
    --bg: #f5ecdb;
    --surface: #fdf8ef;
    --surface-muted: #f1e5cd;
    --border: #e3d2ae;
    --border-soft: #ecdfc2;
    --ink: #1f3350;
    --ink-soft: #4d5f7a;
    --muted: #9c8a68;
    --primary: #3d5a80;
    --primary-strong: #1f3350;
    --primary-soft: #e6edf4;
    --primary-soft-2: #d2e0ec;
    --success-soft: #e6ecd9;
    --warning-soft: #f4e6c4;
    --danger-soft: #f3ded2;
    --purple-soft: #ebe3f0;
    --pink-soft: #f3e1e6;
    color-scheme: light;
}

/* Student management: grades, attendance, checks, observations, seating, checklists */
.filter-label { display: flex; align-items: center; gap: .5rem; color: var(--ink-soft); font-weight: 700; font-size: .84rem; }
.filter-label input, .filter-label select { width: auto; min-width: 150px; margin: 0; }
.date-nav { display: flex; align-items: center; gap: .4rem; flex: 1 1 240px; }
.date-nav .round-nav-button { flex: 0 0 auto; }

.grade-table, .check-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.grade-table th, .grade-table td, .check-table th, .check-table td { border-bottom: 1px solid var(--border-soft); padding: .5rem .6rem; text-align: left; }
.grade-table thead th, .check-table thead th { background: var(--surface-muted); color: var(--ink-soft); font-size: .78rem; white-space: nowrap; }
.grade-student-col { min-width: 170px; white-space: nowrap; }
.grade-average-col { text-align: right; white-space: nowrap; }
.grade-column-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: .25rem .35rem; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.grade-column-head:hover { background: var(--border-soft); }
.grade-column-head small { color: var(--muted); font-weight: 500; font-size: .7rem; }
.grade-input { width: 68px; margin: 0; padding: .35rem .45rem; text-align: center; }
.check-col { width: 110px; text-align: center; }
.check-col input[type="checkbox"] { width: auto; margin: 0; }
.check-table td input:not([type="checkbox"]) { margin: 0; padding: .35rem .5rem; }

.attendance-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.attendance-name { font-weight: 700; }
.attendance-options { display: flex; gap: .4rem; flex-wrap: wrap; }
.attendance-chip { padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-muted); color: var(--ink-soft); font-size: .78rem; font-weight: 700; box-shadow: none; }
.attendance-chip:hover { filter: brightness(0.97); }
.attendance-chip.active.attendance-present { background: var(--success-soft); border-color: var(--success); color: #15803d; }
.attendance-chip.active.attendance-absent { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.attendance-chip.active.attendance-late { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.attendance-chip.active.attendance-excused { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); }
.attendance-summary { margin-top: 1rem; }

.check-row .attendance-name { flex: 0 0 auto; }
.check-groups { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.check-group { display: flex; align-items: center; gap: .5rem; }
.check-group-label { color: var(--muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.check-note-input { width: 180px; margin: 0; }

.observation-card { display: flex; align-items: flex-start; gap: .8rem; width: 100%; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.observation-card:hover { background: var(--surface-muted); }
.observation-card.static { cursor: default; }
.observation-card.static:hover { background: var(--surface); }
.observation-emoji { font-size: 1.5rem; line-height: 1; }
.observation-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.observation-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.observation-head small { color: var(--muted); font-weight: 500; }
.observation-text { color: var(--ink-soft); font-size: .88rem; }
.rating-picker { display: flex; gap: .4rem; }
.rating-option { padding: .35rem .6rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-muted); box-shadow: none; font-size: 1.25rem; line-height: 1; }
.rating-option.active { border-color: var(--primary); background: var(--primary-soft); }

.seating-overview { margin-top: 1.4rem; }
.seating-overview .seating-seat.empty { cursor: default; }
.seating-surface { padding: 1.2rem; overflow-x: auto; }
.seating-board { min-width: 420px; display: grid; gap: 1rem; }
.seating-teacher { padding: .5rem; border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--muted); font-weight: 700; font-size: .78rem; text-align: center; letter-spacing: .08em; text-transform: uppercase; }
.seating-grid { display: grid; grid-template-columns: repeat(var(--seat-columns), minmax(72px, 1fr)); gap: .5rem; }
.seating-seat { min-height: 58px; padding: .35rem; border-radius: var(--radius-sm); border: 1px dashed var(--border); background: var(--surface-muted); color: var(--ink-soft); box-shadow: none; font-size: .74rem; font-weight: 700; overflow: hidden; }
.seating-seat.taken { border-style: solid; border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.seating-seat.pending { border-color: var(--warning); background: var(--warning-soft); }
.seating-seat:hover { filter: brightness(0.97); }
.seat-assign-card { margin-top: 1rem; }
.seat-candidate-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }

.student-tabs { margin-bottom: 1rem; width: fit-content; }
.profile-tabs { margin-bottom: 1.4rem; width: fit-content; }
.student-note-row { align-items: flex-start; }
.student-note-row.done .student-note-text { text-decoration: line-through; color: var(--muted); }
.student-note-body { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.student-note-text { font-weight: 600; }

.progress-curve { display: flex; align-items: flex-end; gap: .8rem; min-height: 170px; padding: .5rem 0; overflow-x: auto; }
.progress-point { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .3rem; min-width: 62px; height: 160px; }
.progress-bar { width: 26px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--primary), var(--primary-strong)); }
.progress-value { font-weight: 800; font-size: .82rem; }
.progress-label { color: var(--muted); font-size: .68rem; text-align: center; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Reusable side panel: dialog on mobile, right-anchored side panel on desktop.
   Used by the student detail panel and the calendar entry panel. */
.side-panel-overlay {
    position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .45); padding: 20px;
}
.side-panel-card {
    width: min(480px, 100%); max-height: 90vh; overflow-y: auto; overflow-x: hidden; padding: 1.5rem;
    border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop);
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start;
}
.side-panel-card label { display: grid; gap: .4rem; color: var(--ink-soft); font-weight: 700; font-size: .88rem; }
.side-panel-card textarea { min-height: 128px; }
.side-panel-card .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.side-panel-card .stat-card { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: .3rem; min-width: 0; padding: 14px 12px; }
.side-panel-card .stat-label { overflow-wrap: break-word; hyphens: auto; font-size: .74rem; }
.side-panel-card .student-tabs { width: 100%; flex-wrap: wrap; }
.side-panel-card .student-tabs button { flex: 1 1 calc(50% - 4px); min-width: 0; padding: .5rem .3rem; font-size: .78rem; }
.side-panel-card .list-row { flex-wrap: wrap; }
.side-panel-card .appointment-card-row {
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .8rem;
    border: 1px solid var(--border); border-left: 4px solid var(--chip); border-radius: var(--radius-sm);
    background: var(--surface); box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.side-panel-card .appointment-card-row:hover { background: var(--surface-muted); }
.side-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.side-panel-header > div { min-width: 0; }
.side-panel-header h2 { margin: 0 0 .4rem; overflow-wrap: break-word; }
.side-panel-close { width: 34px; height: 34px; padding: 0; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; font-size: 1rem; }
@media (min-width: 901px) {
    .side-panel-overlay { justify-content: flex-end; padding: 0; background: rgba(15, 23, 42, .25); }
    .side-panel-card { width: min(440px, 100%); height: 100vh; max-height: 100vh; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
}

@media (max-width: 1200px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .calendar-page-heading { align-items: flex-start; flex-direction: column; }
    .calendar-toolbar { justify-content: flex-start; }
    .header-actions > button.ghost { display: none; }
}

/* Mobile bottom nav (hidden on desktop) */
.mobile-bottom-nav { display: none; }

@media (max-width: 900px) {
    .app-shell {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 64px minmax(0, 1fr);
        padding-bottom: 67px;
    }
    .sidebar {
        position: fixed;
        grid-row: auto;
        top: 64px;
        bottom: 67px;
        left: 0;
        width: min(82vw, 300px);
        overflow-y: auto;
        /* Always off-canvas here, independent of the desktop collapse checkbox: that checkbox
           persists the desktop icon-rail preference (see the min-width:901px block above), and
           without this !important it would leak into a stray open drawer on narrower windows
           whenever that saved preference happened to be "collapsed" (checked). Full navigation on
           this breakpoint is handled by .mobile-bottom-nav instead. */
        transform: translateX(-102%) !important;
        box-shadow: 16px 0 35px rgba(15, 23, 42, .18);
    }
    .main-column { grid-column: 1; }
    .topbar { min-height: 64px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
    .brand-name { font-size: 1.05rem; }
    .profile-avatar { width: 36px; height: 36px; font-size: .78rem; }

    .nav-menu a { min-height: 50px; }
    .content { grid-column: 1; grid-row: 2; }
    .page { padding: 12px 12px 24px; }
    .mobile-bottom-nav {
        position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; height: 67px;
        display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom);
        color: var(--ink-soft); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -7px 22px rgba(15, 23, 42, .08);
    }
    .mobile-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .68rem; }
    .mobile-bottom-nav a.active { color: var(--primary-strong); background: var(--primary-soft); }
    .mobile-bottom-nav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

    .calendar-page-heading { gap: 10px; --heading-gap: 10px; }
    .calendar-title-group h1 { font-size: 1.5rem; }
    .calendar-toolbar { width: 100%; gap: 6px; }
    .segmented { flex: 1 1 auto; }
    .segmented button { flex: 1; min-width: 0; padding: .48rem .55rem; }
    .calendar-selector { min-width: 0; padding-inline: .75rem; }

    /* Week/day view: fit the viewport without horizontal scrolling. Weekday headers switch to
       their two-letter abbreviation (Mo/Di/Mi...) so the day columns can shrink far enough. */
    .day-name-full { display: none; }
    .day-name-short { display: inline; }
    .week-board.week-mode { min-width: 0; width: 100%; }
    .week-board.day-mode { min-width: 100%; }
    .week-board.day-mode .week-grid { grid-template-columns: 40px minmax(0, 1fr); }
    .week-grid { grid-template-columns: 40px repeat(var(--day-columns), minmax(0, 1fr)); }
    /* Klasse und Raum untereinander statt nebeneinander: in den schmalen Tagesspalten ist kein Platz für beides in einer Zeile. */
    .lesson-meta { flex-direction: column; align-items: flex-start; gap: 0; }
    .day-heading { padding: 6px 2px; gap: 2px; font-size: .8rem; }
    .day-heading .day-date { font-size: .66rem; }
    .period-heading { font-size: .6rem; }

    /* Holiday/attribute/appointment/birthday chips in the day summary row (e.g. "Herbstferien", a
       long attribute name) default to their unwrapped desktop width even in a narrow day column -
       without min-width: 0 (flex items don't shrink below their content's width by default) and
       word-break, that width forces the whole calendar, and the page, to scroll horizontally instead
       of the chip text just wrapping onto a second line. */
    .day-banners, .holiday-banner, .holiday, .attribute-chip, .month-attribute, .appointment-chip, .birthday-chip {
        min-width: 0;
    }
    .holiday-banner, .holiday, .attribute-chip, .month-attribute, .appointment-chip, .birthday-chip {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* The first column narrows to 40-56px here, too little for "Pause"/"Aufsicht" at their
       desktop size - shrink further so the text wraps within the column instead of being cut off. */
    .period-label strong { font-size: .78rem; }
    .period-label span { font-size: .6rem; }
    .period-label.break-period-label strong { font-size: .64rem; }
    .period-label.break-period-label span { font-size: .58rem; }

    /* Read-only Stundenplan (Schedule.razor): fit the week without horizontal scrolling, same idea
       as .week-grid above. The Basisstundenplan editor (Timetable.razor) uses its own <table> markup
       and none of these classes, so it stays unaffected. */
    .schedule-board { min-width: 0; width: 100%; }
    .schedule-grid { grid-template-columns: 34px repeat(5, minmax(0, 1fr)); }
    .schedule-header > div { padding: 6px 2px; font-size: .68rem; }
    .schedule-cell { gap: 1px; padding: 4px 3px; }
    .schedule-cell.supervision-cell { flex-direction: column; align-items: flex-start; }
    .schedule-cell strong { font-size: .72rem; }
    .schedule-cell-line { font-size: .6rem; }
    .schedule-free { font-size: .64rem; }

    /* Dashboard calendar tile: collapse the week grid down to just the "today" (or first visible) column. */
    .week-board.dashboard-calendar { min-width: 0; width: 100%; }
    .dashboard-calendar .week-grid { grid-template-columns: 56px minmax(0, 1fr); }
    .dashboard-calendar .week-grid > *:not(.period-heading):not(.summary-spacer):not(.period-label):not(.today-col) { display: none; }
    /* Home.razor only knows whether ANY day in the full week has banner data, since that's correct
       for the 5-day desktop grid - but collapsed down to a single visible column here, that can be
       the wrong day. Hide the row anyway if specifically the one visible (today/selected) column has
       nothing, even though some other, now-hidden day does. */
    .dashboard-calendar .week-grid-summary:not(:has(.day-summary.today-col .day-banners > *)) { display: none; }
    .dashboard-calendar-week-label { display: none; }
    .dashboard-calendar-day-label { display: inline; }
    .week-grid-row { min-height: 82px; }
    button.week-cell { min-height: 82px; }
    /* Month view: same "fit without horizontal scrolling" idea as the week/day grid above - drop
       the desktop-only forced min-width so the day columns can shrink to the viewport instead of
       triggering .month-surface's overflow-x scrollbar. */
    .month-weekdays, .month-grid { min-width: 0; }
    .month-day { min-height: 100px; padding: 6px; }
    .month-day > strong { font-size: .84rem; }

    .card-grid { grid-template-columns: 1fr; }
    .page-heading { flex-direction: column; }
    .form-card { max-width: none; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .dashboard-header { flex-direction: column; }

}

@media (max-width: 640px) {
    .stat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .page { padding-inline: 9px; }
    /* Always keep the "+ Termin" button visible/reachable - give it its own full-width row
       instead of squeezing it into the toolbar or hiding it. */
    .calendar-selector { width: 100%; min-width: 0; }
    .date-picker, button.print-button { width: 40px; height: 38px; }
    .calendar-title-nav { gap: 5px; }
    .round-nav-button { width: 30px; height: 30px; }
    .calendar-title-group h1 { font-size: 1.3rem; }
    .page-kicker { font-size: .63rem; }
    .planner-surface { border-radius: var(--radius-sm); }
    .hero { padding: 1.35rem; }
    .hero h1 { font-size: 1.9rem; }
    .month-weekdays, .month-grid { min-width: 0; }
    .month-day { min-height: 92px; padding: 5px; }
    .month-weekdays div { padding: 5px 2px; font-size: .74rem; }
    .note-preview { display: none; }
    .note-add { display: inline-flex; }
}

/* Setup wizard (Setup.razor) */
.setup-heading { align-items: center; }
.setup-steps { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0 0 1.2rem; overflow-x: auto; }
.setup-steps li { flex: 1 1 0; min-width: 0; }
.setup-step-button {
    width: 100%; display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem;
    background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); box-shadow: none; text-align: left;
}
.setup-step-button:disabled { opacity: .55; }
.setup-step-number {
    flex: 0 0 auto; width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface-muted); color: var(--ink-soft); font-size: .78rem;
}
.setup-step-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-step-optional { color: var(--muted); font-weight: 600; font-size: .68rem; margin-left: auto; }
.setup-steps li.active .setup-step-button { border-color: var(--primary); color: var(--ink); background: var(--primary-soft); }
.setup-steps li.active .setup-step-number { background: var(--primary); color: #fff; }
.setup-steps li.done .setup-step-number { background: var(--success-soft); color: var(--success); }

.setup-panel { display: grid; gap: .9rem; margin-bottom: 1rem; }
.setup-panel h2, .setup-panel h3, .setup-panel p { margin: 0; }
.setup-examples { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.setup-status { padding: .6rem .8rem; border-radius: var(--radius-sm); font-weight: 600; }
.setup-status.success { margin-left: 0; background: var(--success-soft); color: var(--success); }
.setup-status.warning { background: var(--warning-soft); color: var(--warning); }
.setup-nav { display: flex; align-items: center; gap: .6rem; padding-top: .9rem; border-top: 1px solid var(--border-soft); }
.setup-nav-spacer { flex: 1; }
.setup-blocked { margin: .6rem 0 0; text-align: right; font-size: .85rem; }

.theme-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: .9rem; }
.theme-card {
    display: grid; gap: .5rem; padding: .7rem; text-align: left; color: var(--ink);
    background: var(--surface); border: 2px solid var(--border); box-shadow: none; border-radius: var(--radius-lg);
}
.theme-card:hover { border-color: var(--primary); }
.theme-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft-2); }
.theme-card strong { font-size: .95rem; }
.theme-card small { font-weight: 500; }
.theme-preview { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16 / 10; }
.theme-preview .tp { position: absolute; inset: 0; }
.tp-split-dark { position: absolute; inset: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Miniature app mock-up; the colours are fixed per theme so it also shows Light/Dark/Warm while another theme is active. */
.tp { display: flex; background: var(--tp-bg); color: var(--tp-ink); }
.tp-light { --tp-bg: #f4f6fb; --tp-surface: #ffffff; --tp-border: #e6eaf2; --tp-ink: #0f172a; --tp-muted: #94a3b8; --tp-primary: #2563eb; }
.tp-dark  { --tp-bg: #0b1220; --tp-surface: #121a2b; --tp-border: #223049; --tp-ink: #e8edf7; --tp-muted: #7c8aa8; --tp-primary: #3b82f6; }
.tp-warm  { --tp-bg: #f5ecdb; --tp-surface: #fdf8ef; --tp-border: #e3d2ae; --tp-ink: #1f3350; --tp-muted: #9c8a68; --tp-primary: #3d5a80; }
.tp-side { flex: 0 0 22%; background: var(--tp-surface); border-right: 1px solid var(--tp-border); display: flex; flex-direction: column; gap: 7%; padding: 9% 8%; }
.tp-side i { display: block; height: 7%; min-height: 4px; border-radius: 3px; background: var(--tp-muted); opacity: .55; }
.tp-side i:first-child { background: var(--tp-primary); opacity: 1; }
.tp-main { flex: 1; display: flex; flex-direction: column; gap: 7%; padding: 5% 6%; min-width: 0; }
.tp-top { display: block; height: 14%; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 4px; position: relative; }
.tp-top b { position: absolute; right: 6%; top: 25%; width: 16%; height: 50%; border-radius: 3px; background: var(--tp-primary); }
.tp-card { display: flex; align-items: center; gap: 6%; flex: 1; padding: 0 6%; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 4px; }
.tp-card em { flex: 0 0 8px; height: 8px; border-radius: 50%; }
.tp-card u { flex: 1; height: 5px; border-radius: 3px; background: var(--tp-muted); opacity: .5; text-decoration: none; }

@media (max-width: 720px) {
    .setup-heading { align-items: stretch; }
    .setup-step-label, .setup-step-optional { display: none; }
    .setup-steps li.active .setup-step-label { display: inline; }
    .setup-steps li { flex: 0 0 auto; }
    .setup-steps li.active { flex: 1 1 auto; }
    .setup-step-button { padding: .5rem .5rem; gap: .4rem; }
    .setup-nav { flex-wrap: wrap; }
    .setup-nav button { flex: 1 1 auto; }
    .setup-nav-spacer { display: none; }
}

/* Topic rows in the setup wizard's sequence dialog */
.setup-topics { display: grid; gap: .5rem; }
.setup-topics-title { color: var(--ink-soft); font-weight: 700; font-size: .88rem; }
.setup-topic-row { display: flex; align-items: center; gap: .5rem; }
.setup-topic-row .setup-topic-name { flex: 1 1 auto; min-width: 0; margin: 0; }
.setup-topic-row .setup-topic-hours { flex: 0 0 76px; width: 76px; margin: 0; }
.setup-topics .chip-button { justify-self: start; }

/* PDF print preview dialog (PrintDialog.razor) */
.print-overlay { padding: 1rem; }
.print-dialog {
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1280px, 100%); height: min(920px, 100%);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden;
}
.print-dialog-header, .print-dialog-footer { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; }
.print-dialog-header { border-bottom: 1px solid var(--border-soft); justify-content: space-between; }
.print-dialog-header h2 { margin: 0; }
.print-dialog-footer { border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.print-footer-spacer { flex: 1; }
.print-dialog-body { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 0; }
.print-filters { padding: 1rem; border-right: 1px solid var(--border-soft); overflow-y: auto; display: grid; gap: .55rem; align-content: start; }
.print-filters h3 { margin: 0 0 .2rem; font-size: .95rem; }
.print-filters label { display: grid; gap: .3rem; color: var(--ink-soft); font-weight: 700; font-size: .84rem; }
.print-filters label.inline-toggle { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.print-filters label.inline-toggle input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin: 0; padding: 0; }
.print-filters hr { border: 0; border-top: 1px solid var(--border-soft); width: 100%; margin: .3rem 0; }
.print-format-note { margin: .4rem 0 0; font-size: .8rem; }
.print-preview { overflow: auto; background: var(--surface-muted-opaque); padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; min-height: 0; }
.print-page { display: block; width: 100%; max-width: 1100px; height: auto; flex: 0 0 auto; background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, .25); transition: opacity .15s; }
.print-page.is-refreshing { opacity: .45; }
.print-status { margin: auto; text-align: center; }

@media (max-width: 800px) {
    .print-overlay { padding: 0; }
    .print-dialog { height: 100%; border-radius: 0; border: 0; }
    .print-dialog-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .print-filters { border-right: 0; border-bottom: 1px solid var(--border-soft); max-height: 34vh; }
}

.page-heading-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Auswertungen (Evaluations.razor) */
.eval-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1rem; margin-bottom: 1rem; }
.eval-date { display: grid; gap: .25rem; color: var(--ink-soft); font-weight: 700; font-size: .8rem; }
.eval-date input { width: auto; margin: 0; }
.eval-period { margin: 0 0 1rem; }
.eval-big { font-size: 1.35rem; display: block; }
.eval-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; box-shadow: var(--shadow-card); display: grid; gap: .7rem; }
.eval-card h2, .eval-card h3, .eval-card p { margin: 0; }
.eval-card h3 { font-size: .98rem; margin-top: .4rem; }
.eval-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.eval-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.eval-table th, .eval-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: middle; }
.eval-table thead th { color: var(--ink-soft); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.eval-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eval-table .zero { color: var(--muted); }
.eval-table .eval-month { font-size: .8rem; }
.eval-total { position: relative; min-width: 110px; }
.eval-total .eval-bar { display: block; height: 4px; border-radius: 2px; margin-top: 3px; margin-left: auto; opacity: .85; }
.eval-progress-cell { min-width: 170px; }
.eval-progress { display: block; height: 7px; border-radius: 4px; background: var(--surface-muted-opaque); overflow: hidden; }
.eval-progress > span { display: block; height: 100%; border-radius: 4px; }
.eval-progress-cell small { color: var(--muted); }
.eval-details summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); padding: .3rem 0; }

@media (max-width: 900px) {
    .eval-two { grid-template-columns: 1fr; }
}

/* Checklist: per-student note column */
.check-note-col { min-width: 220px; }
.check-note-col input { width: 100%; margin: 0; padding: .4rem .55rem; font-size: .85rem; }

.print-page.is-portrait { max-width: 720px; }
.print-orientation { display: grid; gap: .35rem; margin-top: .5rem; }
.print-orientation-title { color: var(--ink-soft); font-weight: 700; font-size: .84rem; }
.print-orientation > div { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Default seating plan marker */
.default-badge { flex: 0 0 auto; padding: .12rem .5rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary-strong); font-size: .72rem; font-weight: 800; }
.icon-link-button.is-default { color: var(--warning); }

/* Student overview "Stand zum ...": label column and value column line up across rows */
.side-panel-card .list-row.status-row { display: grid; grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr); align-items: baseline; gap: .6rem; }
@media (max-width: 420px) {
    .side-panel-card .list-row.status-row { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}

/* Class timetable (ClassTimetable.razor) */
.class-timetable td, .class-timetable th { vertical-align: top; }
.class-timetable-cell { min-width: 130px; }
.class-timetable-cell select { width: 100%; margin: 0; padding: .4rem .5rem; font-size: .85rem; }
.class-timetable-cell .class-timetable-field { width: 100%; margin: .3rem 0 0; padding: .3rem .5rem; font-size: .8rem; }
.class-timetable-cell .class-timetable-room { width: 100%; margin: .3rem 0 0; padding: .3rem .5rem; font-size: .8rem; }
.class-timetable-cell.blocked { background: var(--surface-muted-opaque); }
.class-timetable th small { display: block; }

/* Class timetable: display mode and configure mode */
.class-lesson { display: grid; gap: .1rem; padding: .4rem .5rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--subject-color) 14%, var(--surface)); border-left: 3px solid var(--subject-color); }
.class-lesson .subject-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--subject-color); margin-right: .25rem; }
.class-lesson-teacher { color: var(--ink-soft); font-size: .84rem; }
.class-timetable-view .class-timetable-cell { min-width: 120px; }
.class-break-row td { background: var(--surface-muted-opaque); color: var(--muted); font-size: .8rem; font-weight: 700; text-align: center; padding: .35rem; }
.class-break-edit { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.class-break-edit input { width: 5rem; margin: 0; padding: .3rem .5rem; }
.class-timetable .timing-cell { min-width: 112px; }
.class-timetable .timing-cell input { width: 100%; margin: 0 0 .3rem; padding: .3rem .4rem; font-size: .82rem; }


/* School year selector in the top bar. */
.year-switcher { display: inline-flex; align-items: center; gap: .4rem; height: 40px; padding: 0 .35rem 0 .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-soft); }
.year-switcher svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.year-switcher select { width: auto; min-width: 0; margin: 0; padding: .3rem .5rem .3rem .1rem; border: 0; background-color: transparent; box-shadow: none; font-weight: 700; color: var(--ink); cursor: pointer; }

/* School years: notes, status chips and the school year wizard. */
.archive-note { margin: 0 0 1rem; padding: .6rem .85rem; border-radius: var(--radius-md); border: 1px solid var(--border); border-left: 3px solid var(--muted); background: var(--surface-muted); color: var(--ink-soft); font-size: .88rem; }
.archive-note.draft { border-left-color: var(--primary); }
.status-chip { display: inline-block; margin-left: .5rem; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--surface-muted); color: var(--ink-soft); border: 1px solid var(--border); }
.status-chip.status-active { background: var(--primary-soft); color: var(--primary-strong); border-color: transparent; }
.wizard-steps { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; padding: 0; list-style: none; counter-reset: wizard; }
.wizard-steps li { counter-increment: wizard; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .84rem; font-weight: 600; }
.wizard-steps li::before { content: counter(wizard) ". "; }
.wizard-steps li.current { background: var(--primary); border-color: var(--primary); color: #fff; }
.wizard-steps li.done { color: var(--ink-soft); }
.timetable.wizard-table { min-width: 0; width: 100%; }
.wizard-table td, .wizard-table th { vertical-align: middle; min-width: 0; padding: .4rem .45rem; }
.wizard-table td:nth-child(2) input[type="checkbox"] { display: block; margin: 0 auto; }
.wizard-table select, .wizard-table input:not([type="checkbox"]) { width: 100%; margin: 0; }
.wizard-table td:nth-child(4) { width: 5.6rem; }
.wizard-table td:nth-child(3) input { min-width: 0; }
.wizard-table td:nth-child(2) { width: 4.4rem; }
.wizard-class { margin-bottom: 1rem; }
.wizard-class-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .6rem; }
.wizard-class-head h3 { margin: 0; }
.wizard-class-actions { display: flex; gap: .4rem; margin-left: auto; }
.wizard-summary { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }

/* --- Basisstundenplan: read-only view with toolbar ------------------------------------------------------------ */
.timetable-view-bar { align-items: flex-end; margin-bottom: 14px; }
.plan-picker { display: grid; gap: 4px; min-width: 0; max-width: 100%; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.plan-picker select { min-width: 220px; max-width: 100%; }
.schedule-view-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: 12px; }
.schedule-view-info { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.schedule-view-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* --- Notizen --------------------------------------------------------------------------------------------------- */
.note-search { position: relative; max-width: 460px; margin-bottom: 16px; }
.note-search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.note-search input { width: 100%; padding-left: 38px; }

.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.note-card {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 150px; padding: 16px 18px; text-align: left;
    background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.note-card:hover { border-color: var(--primary); background: var(--surface); }
.note-card-title { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-card-preview { flex: 1; color: var(--ink-soft); font-size: .88rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.note-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .76rem; font-weight: 500; }
.note-card-progress { padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.note-card-progress.complete { background: var(--success-soft); color: var(--success); }
.note-empty { max-width: 520px; padding: 28px 24px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.note-empty p { margin: 0 0 .6rem; }

.note-sheet { max-width: 880px; padding: 22px 26px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.note-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.note-sheet-head > div:first-child { min-width: 0; }
.note-title { margin: 0 0 4px; overflow-wrap: anywhere; }
.note-sheet-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.note-title-input { width: 100%; margin-bottom: 12px; padding: .55rem .2rem; border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; background: transparent; box-shadow: none; font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.note-title-input:focus { outline: none; border-bottom-color: var(--primary); box-shadow: none; }

/* The editable area and the read-only view share one typography. */
.note-editor, .note-content { min-height: 120px; font-size: 1rem; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.note-editor { min-height: 46vh; outline: none; caret-color: var(--primary); }
.note-editor:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.note-editor h2, .note-content h2 { margin: 1.1em 0 .35em; font-size: 1.35rem; }
.note-editor h3, .note-content h3 { margin: 1em 0 .3em; font-size: 1.12rem; }
.note-editor h4, .note-content h4 { margin: 1em 0 .3em; font-size: 1rem; }
.note-editor p, .note-content p, .note-editor div, .note-content div { margin: 0; }
.note-editor ul, .note-content ul, .note-editor ol, .note-content ol { margin: .3em 0; padding-left: 1.5em; }
.note-editor a, .note-content a { color: var(--primary); text-decoration: underline; }
.note-editor hr, .note-content hr { margin: 1em 0; border: 0; border-top: 1px solid var(--border); }
.note-editor blockquote, .note-content blockquote { margin: .6em 0; padding-left: 1em; border-left: 3px solid var(--border); color: var(--ink-soft); }
.note-editor mark, .note-content mark { background: rgba(250, 204, 21, .45); color: inherit; padding: 0 .1em; border-radius: 3px; }
.note-editor ul.note-checklist, .note-content ul.note-checklist { list-style: none; padding-left: 0; }
.note-editor ul.note-checklist > li, .note-content ul.note-checklist > li { display: flex; align-items: flex-start; gap: .55em; margin: .15em 0; }
.note-editor ul.note-checklist > li > input[type="checkbox"], .note-content ul.note-checklist > li > input[type="checkbox"] {
    flex: 0 0 auto; width: 1.15em; height: 1.15em; margin: .28em 0 0; padding: 0; cursor: pointer; accent-color: var(--primary);
}
.note-editor ul.note-checklist > li:has(> input:checked), .note-content ul.note-checklist > li:has(> input:checked) { color: var(--muted); text-decoration: line-through; }

.note-editor-bar { position: sticky; top: 0; z-index: 20; max-width: 880px; margin: 0 0 12px; padding: 8px 0 10px; background: var(--bg); }
.note-sheet-footer { display: none; }
.note-editor-actions { display: flex; align-items: center; gap: .6rem; margin-bottom: 8px; }
.note-dirty { flex: 1; min-width: 0; color: var(--warning); font-size: .8rem; font-weight: 700; text-align: right; }
.note-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.note-tool {
    flex: 0 0 auto; width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0;
    background: transparent; color: var(--ink-soft); border: 0; border-radius: 8px; box-shadow: none; font-weight: 800; font-size: .82rem;
}
.note-tool svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.note-tool:hover { background: var(--surface-muted); color: var(--ink); }
.note-tool.is-active, .note-tool.is-open { background: var(--primary-soft-2); color: var(--primary); }
.note-tool-sep { flex: 0 0 1px; align-self: stretch; margin: 6px 4px; background: var(--border); }
.note-panel { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.note-swatch {
    width: 34px; height: 34px; padding: 0; display: grid; place-items: center; background: var(--surface-muted); color: var(--ink-soft);
    border: 2px solid var(--border); border-radius: 50%; box-shadow: none; font-size: 1.1rem; line-height: 1;
}
.note-swatch:hover { border-color: var(--primary); }
.note-link-bar input { flex: 1 1 220px; min-width: 0; }

@media (max-width: 900px) {
    .note-sheet { padding: 16px 14px 22px; }
    .note-sheet-head { flex-direction: column; }
    .note-title-input { font-size: 1.25rem; }
    .note-editor { min-height: 50vh; font-size: 1.02rem; }
    .note-grid { grid-template-columns: 1fr; }
    .note-tool-sep { display: none; }
    /* On phones only the formatting toolbar is pinned (the Zurück/Speichern row scrolls away; a second Speichern sits
       below the text): the whole bar was too tall for the space left above the on-screen keyboard and covered the caret. */
    .note-editor-bar { display: contents; }
    .note-toolbar-wrap { position: sticky; top: 0; z-index: 20; margin-bottom: 12px; padding: 6px 0 8px; background: var(--bg); }
    .note-editor-actions { margin-bottom: 8px; }
    .note-tool { width: 34px; height: 34px; }
    .note-tool svg { width: 18px; height: 18px; }
    .note-sheet-footer { display: flex; justify-content: flex-end; margin-top: 14px; }
    .plan-picker select { min-width: 0; width: 100%; }
    .plan-picker { flex: 1 1 100%; }
}

/* Basisstundenplan list: the plan that applies today */
.list-row-active { border-left: 4px solid var(--primary); background: var(--primary-soft); }
.list-row-active:hover { background: var(--primary-soft-2); }
.list-row-active .status-chip { margin-left: 0; }

/* Notizen: @-mention picker and links, editor hint */
.note-mention { padding: 0 .3em; border-radius: 6px; background: var(--primary-soft); color: var(--primary-strong); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.note-editor a.note-mention, .note-content a.note-mention { color: var(--primary-strong); text-decoration: none; }
.note-content a.note-mention:hover { background: var(--primary-soft-2); }
.note-mention-menu {
    position: fixed; z-index: 120; width: min(320px, calc(100vw - 16px)); max-height: 280px; overflow-y: auto; padding: 4px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
}
.note-mention-item { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); }
.note-mention-item.is-active, .note-mention-item:hover { background: var(--primary-soft); }
.note-mention-item strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.note-mention-sub { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.note-mention-kind { flex: 0 0 auto; min-width: 54px; padding: 1px 7px; border-radius: 999px; font-size: .68rem; font-weight: 700; text-align: center; background: var(--surface-muted); color: var(--ink-soft); }
.note-mention-kind.class { background: var(--primary-soft); color: var(--primary); }
.note-mention-kind.student { background: var(--purple-soft); color: var(--purple); }
.note-hint { display: flex; align-items: flex-start; gap: 8px; max-width: 880px; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--ink-soft); font-size: .82rem; line-height: 1.45; }
.note-hint svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; }
.note-hint strong { color: var(--ink); }
.note-hint kbd { padding: 0 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--ink); font: inherit; font-size: .78rem; font-weight: 600; }
@media (max-width: 900px) { .note-hint-keys { display: none; } }
.note-hint-text { flex: 1; min-width: 0; }
.note-hint-close { flex: 0 0 auto; width: 28px; height: 28px; margin: -4px -6px -4px 0; padding: 0; display: grid; place-items: center; background: transparent; color: var(--ink-soft); border: 0; border-radius: 8px; box-shadow: none; font-size: 1.3rem; line-height: 1; }
.note-hint-close:hover { background: var(--primary-soft-2); color: var(--ink); }

/* Notizen on phones with the on-screen keyboard open (class set by teacherdeskNotes._layout): the toolbar is docked
   right above the keyboard instead of being pinned to the top, so it never covers the text being written. */
.note-toolbar-spacer { display: none; }
html.note-kb .mobile-bottom-nav { display: none; }
html.note-kb .app-shell { padding-bottom: 0; }
html.note-kb .page { padding-bottom: calc(var(--note-bar-h, 0px) + 24px); }
html.note-kb .note-toolbar-wrap {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 60; margin: 0; padding: 6px 12px 8px;
    display: flex; flex-direction: column-reverse; border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(15, 23, 42, .12);
}
html.note-kb .note-toolbar-spacer { display: block; height: calc(var(--note-bar-h, 0px) + 12px); }
html.note-kb .note-toolbar-wrap .note-panel { margin: 0 0 8px; }
.note-content a.note-date { color: var(--primary-strong); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.note-content a.note-date:hover { background: var(--primary-soft); border-radius: 4px; }

/* Kalender "Liste": endless list of days with their appointments and lessons */
.cal-list { max-width: 900px; margin: 0 auto; padding-bottom: 24px; }
.cal-list-edge { min-height: 1px; padding: 14px 0; text-align: center; color: var(--muted); font-size: .8rem; font-weight: 600; }
.cal-list-month { margin: 22px 0 8px; font-size: 1.05rem; color: var(--primary); text-transform: capitalize; }
.cal-list-day { margin: 0 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; scroll-margin-top: 12px; }
.cal-list-day.today { border-color: var(--primary); }
.cal-list-day-head {
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: 10px 14px; text-align: left;
    background: var(--surface-muted); color: var(--ink); border: 0; border-radius: 0; box-shadow: none; font-weight: 500;
}
.cal-list-day-head strong { font-size: .98rem; text-transform: capitalize; }
.cal-list-day-head span { color: var(--ink-soft); font-size: .85rem; }
.cal-list-day-head .status-chip { margin-left: 0; }
.cal-list-day-head:hover { background: var(--primary-soft); }
.cal-list-day-head.editing, .cal-list-lesson.editing, .cal-list-appointment.editing { outline: 2px solid var(--primary); outline-offset: -2px; }
.cal-list-banners { padding: 8px 14px 0; }
.cal-list-note { margin: 8px 14px 0; }
.cal-list-lesson, .cal-list-appointment {
    display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; color: var(--ink);
    background: transparent; border: 0; border-top: 1px solid var(--border-soft); border-radius: 0; box-shadow: none; font-weight: 400;
}
.cal-list-day-head + .cal-list-lesson, .cal-list-day-head + .cal-list-appointment { border-top: 0; }
.cal-list-lesson { border-left: 4px solid var(--subject-color, var(--primary)); padding-left: 10px; }
.cal-list-appointment { border-left: 4px solid var(--chip, var(--primary)); padding-left: 10px; background: color-mix(in srgb, var(--chip, var(--primary)) 8%, transparent); }
.cal-list-lesson:hover, .cal-list-appointment:hover { background: var(--primary-soft); }
.cal-list-time { display: flex; flex-direction: column; flex: 0 0 56px; font-size: .78rem; color: var(--ink-soft); line-height: 1.3; }
.cal-list-time strong { color: var(--ink); font-size: .92rem; }
.cal-list-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.cal-list-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cal-list-title strong { overflow-wrap: anywhere; }
.cal-list-meta { padding: 1px 8px; border-radius: 999px; background: var(--surface-muted); color: var(--ink-soft); font-size: .75rem; font-weight: 600; }
.cal-list-topic { display: inline-flex; flex-direction: column; align-self: flex-start; }
.cal-list-text { color: var(--ink-soft); font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .cal-list-time { flex-basis: 48px; }
    .cal-list-lesson, .cal-list-appointment { padding: 10px 12px 10px 8px; gap: 10px; }
}

/* Kalender "Liste": the heading with the view selection and the buttons stays at the top while the list scrolls. */
.calendar-page-heading.sticky-list {
    /* Padding und negative Außenabstände heben sich auf: die Überschrift belegt exakt dieselbe Höhe wie in Tag/Woche/Monat (kein Springen beim Wechsel). */
    position: sticky; top: var(--cal-topbar-h, 0px); z-index: 20; margin: -8px 0 calc(var(--heading-gap) - 10px); padding: 8px 0 10px; background: var(--bg);
    box-shadow: 0 10px 12px -12px rgba(15, 23, 42, .35);
}
/* In the list view the app's top bar (school year, help, notifications, profile) stays at the top, the calendar heading below it. */
html.cal-list-mode .topbar { position: sticky; top: 0; z-index: 40; }
@media (max-width: 900px) {
    /* On phones the top bar sits in a 64px grid row, which sticky cannot leave: pin it with fixed instead (the row keeps its height). */
    html.cal-list-mode .topbar { position: fixed; top: 0; left: 0; right: 0; }
}

/* Hilfe: Übersicht mit Suche und die Artikel zu den Modulen */
.help-search { margin: 0 0 8px; }
.help-group-title { margin: 22px 0 10px; font-size: 1.05rem; }
.help-article { display: grid; gap: 16px; max-width: 880px; }
.help-article-section { margin: 0; }
.help-article-text { margin: 0 0 .7rem; color: var(--ink-soft); line-height: 1.6; }
.help-article-text:last-child { margin-bottom: 0; }
.help-article-text strong, .help-article-list strong { color: var(--ink); }
.help-article-list { margin: 0; padding-left: 1.25rem; color: var(--ink-soft); line-height: 1.6; }
.help-article-list li { margin: .35rem 0; }
.help-related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 880px; margin-top: 18px; }
.help-related .chip-button { text-decoration: none; }

/* Dashboard: hint to install the app (phone browser only) */
.pwa-hint { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1.2rem; padding: .9rem 1rem; border-radius: var(--radius-md); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary), transparent 70%); color: var(--ink); }
.pwa-hint-icon { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface); color: var(--primary); }
.pwa-hint-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pwa-hint-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; font-size: .88rem; line-height: 1.45; }
.pwa-hint-body span { color: var(--ink-soft); }
.pwa-hint-body a { color: var(--primary-strong); font-weight: 700; text-decoration: none; }
.pwa-hint-close { flex: 0 0 auto; width: 32px; height: 32px; margin: -4px -4px 0 0; padding: 0; display: grid; place-items: center; background: transparent; color: var(--ink-soft); border: 0; border-radius: 8px; box-shadow: none; font-size: 1.4rem; line-height: 1; }
.pwa-hint-close:hover { background: var(--primary-soft-2); color: var(--ink); }

/* Klassenübersicht: the tabs (or the title) on top, the plan selection resp. the period of the class timetable below them */
.seating-overview-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.seating-overview-head .filter-label { width: 100%; max-width: 360px; }
.seating-overview-head .filter-label select { width: 100%; }

@media (max-width: 900px) {
    /* The fixed bottom navigation (67px) covers the end of the page: keep the footer with Datenschutz and Impressum above it. */
    .app-footer { padding-bottom: calc(26px + 67px + env(safe-area-inset-bottom, 0px)); }
}

.side-panel-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.side-panel-master-link { width: 34px; height: 34px; border-radius: 50%; text-decoration: none; }
.side-panel-master-link svg { width: 18px; height: 18px; }

.federal-state-missing { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .35rem; }
.federal-state-missing select { width: auto; max-width: 100%; }
.stat-icon.stat-red { background: var(--danger-soft); color: var(--danger); }
.stat-grid.eval-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.eval-sick-summary { display: flex; flex-wrap: wrap; gap: 28px; margin: .4rem 0 .8rem; }

/* Error reporting (ErrorReportHost.razor): the notice after an error and the report dialog. */
.error-report-toast {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1900; width: min(420px, calc(100vw - 2rem));
    display: grid; gap: .75rem; padding: 1rem 1.1rem;
    border: 1px solid var(--danger); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-pop);
}
.error-report-toast-text { display: grid; gap: .2rem; }
.error-report-toast-text span { color: var(--ink-soft); font-size: .9rem; }
.error-report-toast-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 760px) { .error-report-toast { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); } }
.error-report-overlay { z-index: 2100; }
.error-report-card { width: min(560px, 100%); }
.error-report-card textarea { min-height: 7rem; }
.error-report-details summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); }
.error-report-details pre, .ticket-detail pre {
    margin: .5rem 0 0; padding: .75rem; max-height: 14rem; overflow: auto; white-space: pre-wrap; word-break: break-word;
    border-radius: var(--radius-md); background: var(--surface-muted); border: 1px solid var(--border); font-size: .78rem; line-height: 1.45;
}

/* Admin tickets (AdminErrorTickets.razor) */
.ticket-number { font-weight: 800; color: var(--ink-soft); min-width: 3.2rem; }
.ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.ticket-head h1 { margin: 0; word-break: break-word; }
.ticket-detail { display: grid; gap: 1rem; max-width: 960px; }
.ticket-detail .form-card h2 { margin-top: 0; }
.ticket-text { white-space: pre-wrap; word-break: break-word; margin: 0; }
.ticket-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.ticket-facts dt { font-weight: 700; color: var(--ink-soft); }
.ticket-facts dd { margin: 0; word-break: break-word; }
@media (max-width: 760px) { .ticket-facts { grid-template-columns: 1fr; } .ticket-facts dd { margin-bottom: .5rem; } }

/* Consent checkboxes of the license order dialog: a large box and a tappable row (touch), links inside only open when the link text itself is hit. */
.appointment-form-card label.consent-toggle {
    display: flex; flex-direction: row; align-items: flex-start; gap: .85rem; padding: .6rem .3rem; cursor: pointer;
    font-weight: 500; font-size: .92rem; line-height: 1.45; color: var(--ink-soft);
}
.appointment-form-card label.consent-toggle input[type="checkbox"] { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; margin: 0; padding: 0; cursor: pointer; }
.appointment-form-card label.consent-toggle a { font-weight: 700; text-decoration: underline; }

/* Breadcrumb trail at the top of the module (not in the top bar - too little room there on a phone): where the user is and the way there; links are steps back, the last item is the current page. */
.page-breadcrumbs { max-width: 1580px; margin: 0 auto; padding: 14px 24px 0; }
.breadcrumbs { min-width: 0; }
.breadcrumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.breadcrumbs li { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
.breadcrumbs li.current { flex-shrink: 0; max-width: 100%; }
.breadcrumbs a, .breadcrumbs li > span:not(.breadcrumb-sep) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .4rem .35rem; border-radius: 6px; }
.breadcrumbs a { color: var(--primary); font-weight: 600; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs li.current > span { color: var(--ink); font-weight: 800; }
.breadcrumb-sep { width: 16px; height: 16px; flex: none; margin: 0 1px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
    .page-breadcrumbs { padding: 10px 12px 0; }
    .breadcrumbs ol { font-size: .88rem; }
}
@media (max-width: 480px) { .page-breadcrumbs { padding-inline: 9px; } }

/* End-to-end encryption: the recovery key (E2eeRecoveryKeyDialog, Profile → Sicherheit) and the unlock screen. */
.recovery-key {
    padding: .85rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .06em; line-height: 1.6;
    word-break: break-word; user-select: all; text-align: center;
}
.e2ee-unlock h1 { margin-top: 0; }
.e2ee-unlock form { display: grid; gap: 1rem; }
.e2ee-unlock label { display: grid; gap: .4rem; color: var(--ink-soft); font-weight: 700; font-size: .88rem; }