/* LGV 5 – shell and building blocks (UI contract). DevExpress Fluent styles its own components;
   these tokens style the shell and LGV blocks to match. Colour = never the only carrier of meaning. */
:root {
  --lgv-bg: #f5f6f8; --lgv-surface: #ffffff; --lgv-surface-2: #f0f2f5; --lgv-line: #e3e6eb; --lgv-line-2: #d3d8df;
  --lgv-text: #1b1f24; --lgv-muted: #5c6570; --lgv-faint: #8a929c;
  --lgv-accent: #0f6cbd; --lgv-accent-weak: #e6f0fa; --lgv-accent-ink: #0b5394;
  --lgv-ok: #107c41; --lgv-ok-weak: #e3f3ea; --lgv-warn: #b86e00; --lgv-warn-weak: #fdf1dc; --lgv-bad: #c4314b; --lgv-bad-weak: #fbe7ea;
  --lgv-ulu: #f2c230; --lgv-ulu-weak: #fdf5d8; --lgv-wb: #2f80ed; --lgv-wb-weak: #e3eefc; --lgv-mei: #27a35a; --lgv-mei-weak: #e2f4e9;
  --lgv-fre: #ee8a2a; --lgv-fre-weak: #fdeedd; --lgv-pru: #8b5cf6; --lgv-pru-weak: #efe9fe; --lgv-int: #14a3b8; --lgv-int-weak: #dff4f7;
  --lgv-shadow: 0 1px 2px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.06);
  --lgv-radius: 4px; --lgv-nav: 236px;
}
/* Dark mode follows the DevExpress theme switch (data-theme set together with ThemeMode.Dark),
   not prefers-color-scheme alone - otherwise shell and DevExpress components would disagree. */
@media all {
  :root[data-theme="dark"] {
    --lgv-bg: #14171b; --lgv-surface: #1c2026; --lgv-surface-2: #232830; --lgv-line: #2c323b; --lgv-line-2: #39404a;
    --lgv-text: #e8ebef; --lgv-muted: #a3acb7; --lgv-faint: #7b8490;
    --lgv-accent: #4ba3f5; --lgv-accent-weak: #1b2d40; --lgv-accent-ink: #9fcbf8;
    --lgv-ok: #4cc38a; --lgv-ok-weak: #16302a; --lgv-warn: #f0a940; --lgv-warn-weak: #3a2c14; --lgv-bad: #f2768c; --lgv-bad-weak: #3a1d24;
    --lgv-shadow: 0 1px 2px rgba(0,0,0,.3);
  }
}

html, body { margin: 0; height: 100%; }
body { background: var(--lgv-bg); color: var(--lgv-text); -webkit-font-smoothing: antialiased; }

.lgv-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Shell ---------- */
.lgv-app { display: grid; grid-template-columns: var(--lgv-nav) minmax(0, 1fr); grid-template-rows: auto 56px minmax(0, 1fr) 30px; height: 100vh; height: 100dvh; }
/* first grid row: empty (height 0) or the „Ansicht als …“ band (ADR-018) */
.lgv-testband { grid-column: 1 / -1; min-height: 0; }
.lgv-foot.is-test { position: relative; }
.lgv-foot.is-test::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: repeating-linear-gradient(45deg, #f5c542, #f5c542 8px, #e0a800 8px, #e0a800 16px); }
.lgv-testchip { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--lgv-warn-weak); color: var(--lgv-warn); border: 1px solid var(--lgv-warn); cursor: help; }
.lgv-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--lgv-surface); border-bottom: 1px solid var(--lgv-line); z-index: 5; min-width: 0; }

.lgv-brand { display: flex; align-items: center; gap: 10px; width: calc(var(--lgv-nav) - 28px); min-width: 170px; font-weight: 600; color: var(--lgv-text); text-decoration: none; }
.lgv-logo { width: 30px; height: 30px; border-radius: var(--lgv-radius); background: linear-gradient(135deg, var(--lgv-accent), #6a4cf0); display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; }
.lgv-brand small { display: block; font-weight: 400; color: var(--lgv-muted); font-size: 11px; line-height: 1; }
.lgv-accent { color: var(--lgv-accent); }
.lgv-lens { display: inline-flex; border: 1px solid var(--lgv-line-2); border-radius: var(--lgv-radius); overflow: hidden; background: var(--lgv-surface-2); }
.lgv-lens button { border: 0; background: transparent; padding: 5px 12px; font: inherit; font-size: 13px; color: var(--lgv-muted); cursor: pointer; }
.lgv-lens button.on { background: var(--lgv-accent); color: #fff; font-weight: 600; }
.lgv-search { flex: 1; min-width: 0; max-width: 520px; display: flex; align-items: center; gap: 8px; background: var(--lgv-surface-2); border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius); padding: 6px 12px; color: var(--lgv-muted); cursor: text; font: inherit; text-align: left; white-space: nowrap; overflow: hidden; }
.lgv-search-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.lgv-search kbd { font: 11px ui-monospace, Consolas, monospace; background: var(--lgv-surface); border: 1px solid var(--lgv-line-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; }
.lgv-top-spacer { flex: 1; }
.lgv-tenant { display: flex; gap: 6px; padding: 4px 10px; border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius); color: var(--lgv-muted); font-size: 12px; white-space: nowrap; }
.lgv-tenant b { color: var(--lgv-text); }
.lgv-iconbtn { width: 34px; height: 34px; border-radius: var(--lgv-radius); border: 1px solid transparent; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--lgv-muted); }
.lgv-iconbtn:hover { background: var(--lgv-surface-2); color: var(--lgv-text); }
.lgv-iconbtn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.lgv-avatar { width: 32px; height: 32px; border-radius: 50%; background: #e8d9ff; color: #5b34c9; display: grid; place-items: center; font-weight: 600; font-size: 12px; }
/* avatar as button (user panel): hand cursor (D-05) */
.lgv-avatar-btn { border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.lgv-avatar-btn.is-on, .lgv-avatar-btn:hover { box-shadow: 0 0 0 2px var(--lgv-actas); }
/* „Ansicht als …“ band (ADR-018): violet, full width under the header – never confused with the orange test mode */
:root { --lgv-actas: #5b34c9; }
:root[data-theme="dark"] { --lgv-actas: #6a45d6; }
.lgv-actas { display: flex; align-items: center; gap: 10px; padding: 6px 16px; background: var(--lgv-actas); color: #fff; font-size: 13px; }
.lgv-actas-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgv-actas-until { opacity: .9; }
.lgv-actas-end { margin-left: auto; flex: none; font: inherit; font-weight: 600; color: #fff; background: transparent; border: 1px solid #fff;
  border-radius: var(--lgv-radius); padding: 2px 12px; cursor: pointer; }
.lgv-actas-end:hover { background: rgba(255,255,255,.16); }
.lgv-actas-end:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lgv-userpanel-active { margin: 12px 0; }
.lgv-userpanel-actions { display: flex; gap: 8px; margin-top: 16px; }

.lgv-nav { background: var(--lgv-surface); border-right: 1px solid var(--lgv-line); overflow: auto; padding: 10px 8px 20px; }
.lgv-nav h6 { margin: 14px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--lgv-faint); font-weight: 600; }
.lgv-navlink { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--lgv-radius); color: var(--lgv-text); text-decoration: none; }
.lgv-navlink:hover { background: var(--lgv-surface-2); }
.lgv-navlink.active { background: var(--lgv-accent-weak); color: var(--lgv-accent-ink); font-weight: 600; }
.lgv-navlink .lgv-icon { color: var(--lgv-muted); }
.lgv-navlink.active .lgv-icon { color: var(--lgv-accent); }
.lgv-count { margin-left: auto; font-size: 11px; background: var(--lgv-surface-2); border-radius: 999px; padding: 0 7px; color: var(--lgv-muted); }
.lgv-count.hot { background: var(--lgv-bad-weak); color: var(--lgv-bad); }
.lgv-navfoot { margin: 16px 10px 0; padding: 10px; border: 1px dashed var(--lgv-line-2); border-radius: var(--lgv-radius); font-size: 12px; color: var(--lgv-muted); }

/* Main area is a flex column so that lists can take the full remaining height (UI contract 1a) */
.lgv-main { overflow: auto; padding: 20px 24px 20px; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.lgv-main > * { flex-shrink: 0; }
.lgv-drawer { min-width: 0; min-height: 0; height: 100%; }
.lgv-drawer .lgv-main { height: 100%; box-sizing: border-box; }

.lgv-quick { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

/* ---------- Footer (status bar) ---------- */
.lgv-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--lgv-surface);
  border-top: 1px solid var(--lgv-line); font-size: 12px; color: var(--lgv-muted); white-space: nowrap; overflow: hidden; }
.lgv-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.lgv-foot-spacer { flex: 1; }
/* D-41: connection state; lgv-reconnect.js sets data-lgv-connection on <html> (also while the circuit is down) */
.lgv-conn > span { display: none; align-items: center; gap: 6px; }
.lgv-conn > span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.lgv-conn-ok::before { background: var(--lgv-ok); }
.lgv-conn-retry::before { background: var(--lgv-warn); }
.lgv-conn-lost::before { background: var(--lgv-bad); }
:root:not([data-lgv-connection]) .lgv-conn-ok, :root[data-lgv-connection="ok"] .lgv-conn-ok,
:root[data-lgv-connection="retrying"] .lgv-conn-retry, :root[data-lgv-connection="lost"] .lgv-conn-lost { display: inline-flex; }
:root[data-lgv-connection="lost"] .lgv-conn-lost { color: var(--lgv-bad); font-weight: 600; }

/* ---------- Side panel (docked dialog on the right) ---------- */
.lgv-drawer .dxbl-drawer-panel { box-shadow: -8px 0 24px rgba(0, 0, 0, .12); border-left: 1px solid var(--lgv-line); }
/* T-65: the DxDrawer body aligns its children flex-start, so without stretch the panel takes the width of its widest content (record tabs) */
.lgv-sp { display: flex; flex-direction: column; height: 100%; align-self: stretch; min-width: 0; }
.lgv-sp-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--lgv-line); }
.lgv-sp-icon { width: 36px; height: 36px; border-radius: var(--lgv-radius); display: grid; place-items: center; background: var(--lgv-accent-weak); color: var(--lgv-accent); flex: none; }
.lgv-sp-title { flex: 1; min-width: 0; }
.lgv-sp-title h2 { margin: 0; font-size: 18px; font-weight: 600; }
.lgv-sp-body { flex: 1; overflow: auto; padding: 16px 20px; }
.lgv-sp-foot { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--lgv-line); background: var(--lgv-surface-2); }
.lgv-alert { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--lgv-radius); margin-bottom: 12px;
  background: var(--lgv-bad-weak); color: var(--lgv-bad); }

/* ---------- Page header ---------- */
.lgv-ph { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.lgv-ph h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.2px; }
.lgv-sub { color: var(--lgv-muted); margin-top: 2px; }
.lgv-crumb { color: var(--lgv-muted); font-size: 12px; margin-bottom: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
/* D-74 "Zurück" of a detail page: in front of the breadcrumb, one size smaller than the page actions */
.lgv-crumb .lgv-ph-back { font-size: 13px; }
.lgv-crumb a { color: var(--lgv-muted); text-decoration: none; }
.lgv-ph-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.lgv-ph-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Cards, KPIs, chips ---------- */
.lgv-grid-4 { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.lgv-grid-2 { display: grid; gap: 16px; grid-template-columns: 1.6fr 1fr; }
.lgv-card { background: var(--lgv-surface); border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius); box-shadow: var(--lgv-shadow); }
.lgv-card > header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--lgv-line); }
.lgv-card > header h3 { margin: 0; font-size: 14px; font-weight: 600; }
.lgv-card-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.lgv-card-body { padding: 12px 16px; }
.lgv-kpi { padding: 14px 16px; }
.lgv-kpi-label { color: var(--lgv-muted); font-size: 12px; }
.lgv-kpi-value { font-size: 26px; font-weight: 600; letter-spacing: -.5px; margin-top: 2px; }
.lgv-kpi-hint { font-size: 12px; color: var(--lgv-muted); margin-top: 4px; }
.lgv-progress { height: 6px; border-radius: 999px; background: var(--lgv-surface-2); overflow: hidden; margin-top: 8px; }
.lgv-progress > i { display: block; height: 100%; background: var(--lgv-accent); border-radius: inherit; }
.lgv-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 1px 8px; border-radius: var(--lgv-radius); background: var(--lgv-surface-2); color: var(--lgv-muted); white-space: nowrap; }
.lgv-chip.ok { background: var(--lgv-ok-weak); color: var(--lgv-ok); }
.lgv-chip.warn { background: var(--lgv-warn-weak); color: var(--lgv-warn); }
.lgv-chip.bad { background: var(--lgv-bad-weak); color: var(--lgv-bad); }
.lgv-chip.acc { background: var(--lgv-accent-weak); color: var(--lgv-accent-ink); }

/* Area colours */
.lgv-area-ulu { --c: var(--lgv-ulu); --cw: var(--lgv-ulu-weak); } .lgv-area-wb { --c: var(--lgv-wb); --cw: var(--lgv-wb-weak); }
.lgv-area-mei { --c: var(--lgv-mei); --cw: var(--lgv-mei-weak); } .lgv-area-fre { --c: var(--lgv-fre); --cw: var(--lgv-fre-weak); }
.lgv-area-pru { --c: var(--lgv-pru); --cw: var(--lgv-pru-weak); } .lgv-area-int { --c: var(--lgv-int); --cw: var(--lgv-int-weak); }
.lgv-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--cw); border-left: 3px solid var(--c); }

/* Task rows */
.lgv-task { display: flex; gap: 12px; align-items: flex-start; padding: 10px 16px; border-bottom: 1px solid var(--lgv-line); }
.lgv-task:last-child { border-bottom: 0; }
.lgv-task:hover { background: var(--lgv-surface-2); }
.lgv-task-icon { width: 30px; height: 30px; border-radius: var(--lgv-radius); display: grid; place-items: center; flex: none; }
.lgv-task-title { font-weight: 600; }
.lgv-task-text { font-size: 12px; color: var(--lgv-muted); }
.lgv-task .lgv-chip { margin-left: auto; align-self: center; }

/* Empty state */
.lgv-empty { padding: 28px; text-align: center; color: var(--lgv-muted); display: grid; justify-items: center; gap: 6px; }
.lgv-empty-title { font-weight: 600; color: var(--lgv-text); }

/* Grid wrapper: fills the remaining page height; toolbar (search + buttons) inside the grid frame; paging */
.lgv-main > .lgv-grid, .lgv-settings-page > .lgv-grid { flex: 1 1 auto; min-height: 360px; }
.lgv-main > .lgv-grid ~ *, .lgv-settings-page > .lgv-grid ~ * { margin-top: 16px; }
/* column "Internat" of the participant list: bed, stay and action in one line of the cell */
.lgv-dorm-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
/* tabs of a page (DxTabs .lgv-tabs) fill the rest of the page like a list; the active tab scrolls inside, a list in it fills it */
.lgv-main > .lgv-tabs, .lgv-settings-page > .lgv-tabs { flex: 1 1 auto; min-height: 360px; }
:is(.lgv-main, .lgv-settings-page) > .lgv-tabs > .dxbl-tabs-content-panel { flex: 1 1 auto; min-height: 0; }
:is(.lgv-main, .lgv-settings-page) > .lgv-tabs > .dxbl-tabs-content-panel > .dxbl-tabs-content.dxbl-active { flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; overflow-y: auto; }
:is(.lgv-main, .lgv-settings-page) > .lgv-tabs > .dxbl-tabs-content-panel > .dxbl-tabs-content > .lgv-grid { flex: 1 1 auto; min-height: 320px; }
:is(.lgv-main, .lgv-settings-page) > .lgv-tabs > .dxbl-tabs-content-panel > .dxbl-tabs-content > .lgv-grid ~ * { margin-top: 16px; }
.lgv-grid { display: flex; flex-direction: column; }
.lgv-grid-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; padding: 4px 0; }
.lgv-grid-toolbar-spacer { flex: 1; }
.lgv-grid-search { width: 320px; max-width: 100%; }
.lgv-grid .lgv-dxgrid { flex: 1 1 auto; min-height: 0; height: 100%; border-radius: var(--lgv-radius); box-shadow: var(--lgv-shadow); }
.lgv-grid .lgv-th { background: var(--lgv-surface-2); color: var(--lgv-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.lgv-grid .lgv-row-alt > td { background: color-mix(in srgb, var(--lgv-surface-2) 55%, transparent); }
.lgv-colchooser { display: flex; flex-direction: column; gap: 10px; }
.lgv-cell-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lgv-cell-person > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.lgv-filterchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: var(--lgv-radius);
  background: var(--lgv-bad-weak); color: var(--lgv-bad); font-weight: 600; font-size: 13px; }
.lgv-btn-icon { width: 16px; height: 16px; display: inline-block; background-color: currentColor;
  -webkit-mask: var(--lgv-mask) center / contain no-repeat; mask: var(--lgv-mask) center / contain no-repeat; }
/* Action symbols with meaning colors (UI contract 1a): create = accent, export = Excel green, neutral = ink */
.lgv-btn-icon-add { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.lgv-btn-icon-save { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.lgv-btn-icon-search { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.lgv-btn-icon-columns { color: var(--lgv-accent); }
.lgv-btn-icon-excel { color: var(--lgv-ok); }
.lgv-btn-icon-search { color: var(--lgv-accent); }
.lgv-btn-icon-columns { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M9 4v16M15 4v16'/%3E%3C/svg%3E"); }
.lgv-btn-icon-excel { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
.lgv-strong { font-weight: 600; }
.lgv-muted { color: var(--lgv-muted); }

@media (max-width: 1100px) {
  .lgv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lgv-grid-2 { grid-template-columns: 1fr; }
  .lgv-tenant { display: none; }
  .lgv-lens { display: none; }
}
/* Menu by width (D-13; UX findings U-01, U-10). >= 1280 px: full menu, the burger folds it to the symbol bar.
   761-1279 px (tablet, split screen): symbol bar; <= 760 px (phone): no menu column. Below 1280 px the burger opens
   the full menu OVER the content; a click outside or choosing an entry closes it (LgvShell). Rules for the symbol bar
   only inside these media queries - without them the bar became a full-width grid item and hid the content. */
.lgv-nav-backdrop { display: none; }
@media (min-width: 1280px) {
  .lgv-app.is-menu-toggled { --lgv-nav: 60px; }
  .lgv-app.is-menu-toggled .lgv-nav { padding: 10px 6px; }
  .lgv-app.is-menu-toggled .lgv-nav .lgv-navlink { justify-content: center; padding: 9px 0; position: relative; }
  .lgv-app.is-menu-toggled .lgv-nav .lgv-navtext, .lgv-app.is-menu-toggled .lgv-nav h6 { display: none; }
  .lgv-app.is-menu-toggled .lgv-nav .lgv-count { position: absolute; top: 2px; right: 4px; margin: 0; font-size: 10px; padding: 0 5px; }
  .lgv-app.is-menu-toggled .lgv-nav .lgv-navgroup + .lgv-navgroup { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lgv-line); }
  .lgv-app.is-menu-toggled .lgv-brand { width: auto; min-width: 0; }
}
@media (max-width: 1279.98px) {
  .lgv-app { --lgv-nav: 60px; }
  .lgv-app:not(.is-menu-toggled) .lgv-nav { padding: 10px 6px; }
  .lgv-app:not(.is-menu-toggled) .lgv-nav .lgv-navlink { justify-content: center; padding: 9px 0; position: relative; }
  .lgv-app:not(.is-menu-toggled) .lgv-nav .lgv-navtext, .lgv-app:not(.is-menu-toggled) .lgv-nav h6 { display: none; }
  .lgv-app:not(.is-menu-toggled) .lgv-nav .lgv-count { position: absolute; top: 2px; right: 4px; margin: 0; font-size: 10px; padding: 0 5px; }
  .lgv-app:not(.is-menu-toggled) .lgv-nav .lgv-navgroup + .lgv-navgroup { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lgv-line); }
  .lgv-app.is-menu-toggled .lgv-nav { position: fixed; top: 56px; bottom: 30px; left: 0; width: 260px; max-width: calc(100vw - 48px);
    z-index: 30; box-shadow: 8px 0 24px rgba(16, 24, 40, .18); box-sizing: border-box; }
  .lgv-app.is-menu-toggled .lgv-nav-backdrop { display: block; position: fixed; top: 56px; bottom: 30px; left: 0; right: 0; z-index: 29;
    background: rgba(16, 24, 40, .25); }
  .lgv-brand { width: auto; min-width: 0; }
  .lgv-top { gap: 8px; }
  .lgv-search kbd { display: none; }
}
@media (max-width: 760px) {
  .lgv-app { grid-template-columns: minmax(0, 1fr); }
  .lgv-app:not(.is-menu-toggled) .lgv-nav { display: none; }
  .lgv-top { gap: 4px; padding: 0 8px; }
  .lgv-brand-text, .lgv-search-text { display: none; }
  .lgv-main { padding: 16px; }
}

/* ---------- Forms: required mark and field messages (UI contract 6) ---------- */
.lgv-required::after { content: " *"; color: var(--lgv-bad); font-weight: 700; }
.lgv-field-error { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; color: var(--lgv-bad); }
.lgv-invalid .dxbl-text-edit { border-color: var(--lgv-bad) !important; box-shadow: 0 0 0 1px var(--lgv-bad); }
.lgv-form-legend { font-size: 12px; color: var(--lgv-muted); margin-bottom: 12px; }
.lgv-form-legend b { color: var(--lgv-bad); }

/* ---------- Avatar, section title, maintenance tiles ---------- */
.lgv-avatar-s { position: relative; overflow: hidden; width: 26px; height: 26px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
  background: hsl(var(--h) 70% 92%); color: hsl(var(--h) 55% 32%); }
:root[data-theme="dark"] .lgv-avatar-s { background: hsl(var(--h) 35% 24%); color: hsl(var(--h) 70% 82%); }
/* Picture over the initials (D-14/D-15); round is the avatar exception to D-04. Logos (favicons) whole on white. */
.lgv-avatar-s > img { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; object-fit: cover; background: #fff; }
.lgv-avatar-logo > img { object-fit: contain; padding: 15%; box-shadow: inset 0 0 0 1px var(--lgv-line); }
.lgv-avatar-l { width: 40px; height: 40px; font-size: 15px; }
.lgv-section-title { margin: 8px 0 12px; font-size: 15px; font-weight: 600; }
.lgv-check-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lgv-check { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--lgv-line-2); }
.lgv-check.is-open { border-left-color: var(--lgv-bad); }
.lgv-check.is-ok { border-left-color: var(--lgv-ok); }
.lgv-check-head { display: flex; align-items: center; gap: 10px; }
.lgv-check-icon { width: 32px; height: 32px; border-radius: var(--lgv-radius); display: grid; place-items: center; flex: none; background: var(--lgv-surface-2); color: var(--lgv-muted); }
.lgv-check.is-open .lgv-check-icon { background: var(--lgv-bad-weak); color: var(--lgv-bad); }
.lgv-check.is-ok .lgv-check-icon { background: var(--lgv-ok-weak); color: var(--lgv-ok); }
.lgv-check-title { flex: 1; font-weight: 600; }
.lgv-check-count { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-grid; place-items: center;
  background: var(--lgv-bad); color: #fff; font-size: 12px; font-weight: 700; }
.lgv-check-text { color: var(--lgv-muted); font-size: 13px; flex: 1; }
.lgv-check-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--lgv-ok); font-weight: 600; }
/* ---------- Start pages (W3-7): sections, agenda, key figures ---------- */
.lgv-start { display: flex; flex-direction: column; gap: 24px; }
.lgv-start-section > .lgv-section-title { margin-top: 0; }
.lgv-start-cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); align-items: start; }
.lgv-kpi-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.lgv-agenda { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; gap: 0 12px; }
.lgv-agenda-day { grid-column: 1 / -1; padding: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--lgv-muted); text-transform: uppercase; letter-spacing: .3px; }
.lgv-agenda-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lgv-line); }
.lgv-agenda-row:last-child { border-bottom: 0; }
.lgv-agenda-when { font-variant-numeric: tabular-nums; color: var(--lgv-muted); white-space: nowrap; }
.lgv-agenda-main { display: flex; flex-direction: column; min-width: 0; }
.lgv-agenda-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgv-agenda-detail { font-size: 12px; color: var(--lgv-muted); }
.lgv-agenda-empty { margin: 0; color: var(--lgv-muted); }
@media (max-width: 760px) {
  .lgv-start-cols { grid-template-columns: minmax(0, 1fr); }
  .lgv-agenda { grid-template-columns: minmax(0, 1fr) auto; }
  .lgv-agenda-when { grid-column: 1 / -1; }
  .lgv-agenda-action { grid-column: 1 / -1; padding-top: 6px; }
}
/* Red counter in the navigation (legacy LGV: red menu counters) */
.lgv-count.hot { background: var(--lgv-bad); color: #fff; font-weight: 700; }

/* ---------- Tags (Merkmale) ---------- */
.lgv-btn-icon-tag { color: var(--lgv-accent); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.3'/%3E%3C/svg%3E"); }
.lgv-tagchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--lgv-radius); font: inherit; font-size: 12px;
  border: 1px solid var(--lgv-line-2); background: var(--lgv-surface); color: var(--lgv-text); cursor: pointer; white-space: nowrap; }
.lgv-tagchip:hover { border-color: var(--lgv-accent); }
.lgv-tagchip.is-on { background: var(--lgv-accent-weak); border-color: var(--lgv-accent); color: var(--lgv-accent-ink); font-weight: 600; }
.lgv-tagchip-n { color: var(--lgv-muted); font-weight: 400; font-size: 11px; }
.lgv-tagchip-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 2px; }
.lgv-tag-group { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--lgv-muted); font-weight: 600; }
.lgv-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.lgv-segmented { display: inline-flex; gap: 0; }
.lgv-segmented .dxbl-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lgv-segmented .dxbl-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.lgv-tags-cell { display: flex; gap: 4px; overflow: hidden; }
.lgv-tags-cell .lgv-tagchip { cursor: default; padding: 0 6px; }

/* ---------- Record forms: sections, hints, tag picker (D-16) ---------- */
.lgv-section { margin-top: 6px; }
/* the whole header bar toggles the section (lgv-shell.js) */
.lgv-section .dxbl-group-header { cursor: pointer; user-select: none; }
.lgv-section .dxbl-fl-gd { padding-top: 6px; }
.lgv-sec-icon { color: var(--lgv-accent); margin-right: 6px; }
.lgv-sec-person { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.lgv-sec-building { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 21V8l6-4v17M9 21V10l12 3v8M3 21h18'/%3E%3C/svg%3E"); }
.lgv-sec-home { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21H3z'/%3E%3C/svg%3E"); }
.lgv-sec-phone { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.lgv-sec-school { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 9l10-5 10 5-10 5zM6 11v5c3 2 9 2 12 0v-5'/%3E%3C/svg%3E"); }
.lgv-sec-shield { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E"); }
.lgv-sec-tag { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3C/svg%3E"); }
.lgv-sec-euro { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 6.5A6.5 6.5 0 1 0 17 17.5M4 10.5h9M4 13.5h9'/%3E%3C/svg%3E"); }
.lgv-sec-note { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 3h10l4 4v14H5zM8 11h8M8 15h6'/%3E%3C/svg%3E"); }
.lgv-sec-archive { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 4h18v4H3zM5 8v12h14V8M10 12h4'/%3E%3C/svg%3E"); }
.lgv-btn-icon-archive { color: var(--lgv-bad); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 4h18v4H3zM5 8v12h14V8M10 12h4'/%3E%3C/svg%3E"); }
.lgv-btn-icon-restore { color: var(--lgv-ok); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 12a8 8 0 1 0 3-6.2M4 4v5h5'/%3E%3C/svg%3E"); }
.lgv-btn-icon-number { color: var(--lgv-accent); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 4 7 20M17 4l-2 16M4 9h16M3 15h16'/%3E%3C/svg%3E"); }
.lgv-field-hint { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; color: var(--lgv-warn); }
.lgv-field-row { display: flex; gap: 8px; align-items: center; }
.lgv-field-row > :first-child { flex: 1; min-width: 0; }
.lgv-suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.lgv-tagpick-group { margin-bottom: 10px; }
.lgv-tagpick-caption { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--lgv-muted); font-weight: 600; margin-bottom: 4px; }
.lgv-record-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lgv-archived-band { padding: 8px 12px; margin-bottom: 12px; border-radius: var(--lgv-radius); background: var(--lgv-warn-weak); color: var(--lgv-warn); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.lgv-notes { display: flex; flex-direction: column; gap: 10px; }
.lgv-note { border-left: 3px solid var(--lgv-accent); padding: 4px 10px; background: var(--lgv-surface-2); border-radius: var(--lgv-radius); }
.lgv-note-meta { font-size: 11px; color: var(--lgv-muted); margin-bottom: 2px; }
.lgv-note-text { white-space: pre-wrap; }
/* W3-7 Wiedervorlage of a note: state chip and buttons, or date + "für" while editing */
.lgv-note-followup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.lgv-note-followup-label { font-size: 12px; color: var(--lgv-muted); white-space: nowrap; }
.lgv-note-followup-date { width: 150px; }
.lgv-note-followup-for { width: 260px; }
.lgv-legacy { font-size: 12px; }
.lgv-legacy table { width: 100%; border-collapse: collapse; }
.lgv-legacy td { padding: 3px 6px; border-bottom: 1px solid var(--lgv-line); vertical-align: top; }
.lgv-legacy td:first-child { color: var(--lgv-muted); width: 40%; }

.lgv-history { display: flex; flex-direction: column; gap: 8px; }
.lgv-change { font-size: 13px; }
.lgv-change-old { color: var(--lgv-muted); text-decoration: line-through; }

.lgv-row-gap { margin-bottom: 6px; }

.lgv-toolbar-combo { width: 220px; }
.lgv-toolbar-range { width: 240px; }
.lgv-course-today { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lgv-link { color: var(--lgv-accent-ink); text-decoration: underline; cursor: pointer; }
.lgv-link-button { background: none; border: 0; padding: 0; font: inherit; text-align: left; }

/* ---------- Datenschutz: deletion runs ---------- */
.lgv-okband { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--lgv-radius); margin-bottom: 12px;
  background: var(--lgv-ok-weak); color: var(--lgv-ok); font-weight: 600; }
.lgv-tabs { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.lgv-tabs .dxbl-tabs-content-panel { padding-top: 12px; display: flex; flex-direction: column; min-height: 0; }
.lgv-run { padding: 14px 16px; margin-bottom: 12px; }
.lgv-run-head { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lgv-run-head h2 { margin: 0; font-size: 16px; }
.lgv-run-spacer { flex: 1; }
.lgv-counts { width: 100%; border-collapse: collapse; font-size: 13px; }
.lgv-counts th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--lgv-muted); padding: 4px 8px; border-bottom: 1px solid var(--lgv-line); }
.lgv-counts td { padding: 5px 8px; border-bottom: 1px solid var(--lgv-line); }
.lgv-facts { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; margin: 0 0 14px; font-size: 13px; }
.lgv-facts dt { color: var(--lgv-muted); }
.lgv-facts dd { margin: 0; }

/* ---------- Hand cursor on everything that triggers an action (UI contract D-05) ---------- */
.lgv-row-click, .lgv-row-click > td { cursor: pointer; }
.dxbl-btn:not(:disabled), button:not(:disabled), a[href], [role="button"], .lgv-navlink, .lgv-brand,
.dxbl-checkbox:not(.dxbl-disabled), .dxbl-checkbox label, .dxbl-tabs-item, .dxbl-fl-group-header,
.dxbl-dropdown-item, .dxbl-list-box-item, .dxbl-grid-header-content[role="columnheader"] { cursor: pointer; }
.dxbl-btn:disabled, button:disabled { cursor: not-allowed; }

/* ---------- Menu structure D-18: flat main menu, mini rail, lens select ---------- */
.lgv-burger { display: grid; flex: none; }
.lgv-navgroup h6 { margin: 14px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--lgv-faint); font-weight: 600; }
.lgv-navgroup:first-child h6 { margin-top: 4px; }
.lgv-navtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lgv-navlock { margin-left: auto; color: var(--lgv-faint); display: inline-flex; }

/* ---------- Settings area D-48: grouped navigation left (same block as the main menu), page right ---------- */
/* the area fills the content area (100dvh shell); the navigation and the page scroll each on their own, a list on a page fills the
   rest of the page and scrolls inside like on the main pages (1080p check 27.10.2026: lists ran up to 1,400 px past the screen) */
.lgv-main > .lgv-settings-area { flex: 1 1 auto; min-height: 0; }
.lgv-settings-area { display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 24px; min-height: 0;
  align-items: stretch; }
.lgv-settings-nav { min-height: 0; overflow: auto; background: var(--lgv-surface);
  border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius); padding: 6px 8px 12px; }
.lgv-settings-picker { display: none; }
.lgv-settings-page { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; }
.lgv-settings-page > * { flex-shrink: 0; }
.lgv-settings-content { min-width: 0; }
@media (max-width: 900px) {
  .lgv-settings-area { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 12px; }
  .lgv-settings-nav { padding: 0; }
  .lgv-settings-page { overflow: visible; }
  .lgv-settings-picker { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: transparent; font: inherit;
    font-weight: 600; color: var(--lgv-text); text-align: left; }
  .lgv-settings-picker span { flex: 1; }
  .lgv-settings-navlist { display: none; padding: 0 8px 12px; }
  .lgv-settings-navlist.is-open { display: block; }
}
.lgv-lens-select { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lgv-muted); }
.lgv-lens-select select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--lgv-line-2); border-radius: var(--lgv-radius);
  background: var(--lgv-surface-2); color: var(--lgv-text); cursor: pointer; }
a.lgv-iconbtn { text-decoration: none; }

/* Area tabs below the page header (second level, D-18) */
.lgv-area-tabs { margin: -6px 0 14px; }
.lgv-area-tabs .dxbl-tabs-tablist { border-bottom: 1px solid var(--lgv-line); }

/* Zu klären: check list left, list right */
.lgv-inbox { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-width: 0; gap: 16px; flex: 1 1 auto; min-height: 0; }
.lgv-inbox > .lgv-grid { min-height: 360px; }
.lgv-checklist { min-height: 0; }
.lgv-checklist .dxbl-list-box { height: 100%; }
.lgv-checkitem { display: flex; align-items: center; gap: 8px; width: 100%; padding: 2px 0; }
.lgv-checkitem-text { flex: 1; min-width: 0; }
.lgv-checkitem-text small { display: block; color: var(--lgv-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.lgv-dot { min-width: 24px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; }
.lgv-dot.is-open { background: var(--lgv-bad); color: #fff; }
.lgv-dot.is-ok { background: var(--lgv-ok-weak); color: var(--lgv-ok); }
/* U-10: minmax(0, 1fr) - a plain 1fr column grows to the widest list item (no-wrap texts) and scrolled the page sideways */
@media (max-width: 1100px) { .lgv-inbox { grid-template-columns: minmax(0, 1fr); } .lgv-checklist { min-width: 0; } .lgv-checklist .dxbl-list-box { max-height: 220px; } }

/* Settings overview */
.lgv-tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lgv-tile { padding: 16px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--lgv-text); cursor: pointer; }
.lgv-tile:hover { border-color: var(--lgv-accent); }
.lgv-tile h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }

/* D-20: short option lists (check boxes, radio buttons) side by side, wrapping – never one per line */
/* D-20/T-42: options in columns of equal width – aligned, calm; never ragged flow-wrapping */
.lgv-checkrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 20px; }
/* weekdays (Zeitfenster, T-32): seven short options in seven equal columns */
.lgv-checkrow.is-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 8px; }
.lgv-btn-icon-company { color: var(--lgv-accent); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 21V8l6-4v17M9 21V10l12 3v8M3 21h18'/%3E%3C/svg%3E"); }

/* Small read-only table inside a record section (e.g. Ansprechpartner of a company) */
.lgv-mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* IRIS-Import: proposed occupations above the rows (D-69) */
.lgv-import-occupations { padding: 12px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.lgv-mini-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--lgv-line); vertical-align: middle; }
.lgv-mini-table tr:last-child td { border-bottom: 0; }
.lgv-tagchip.is-static { cursor: default; margin-right: 4px; }

/* D-25: global loading bar below the header (fed by the Mediator pipeline); appears after 200 ms so quick requests do not flicker */
.lgv-app { position: relative; }
.lgv-busy { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1000; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .15s; }
.lgv-busy.is-on { opacity: 1; transition-delay: .2s; }
.lgv-busy::before { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--lgv-accent); animation: lgv-busy 1.1s ease-in-out infinite; }
@keyframes lgv-busy { from { left: -35%; } to { left: 100%; } }
.lgv-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; color: var(--lgv-muted); }
.lgv-spinner { width: 18px; height: 18px; border: 2px solid var(--lgv-line-2); border-top-color: var(--lgv-accent); border-radius: 50%; animation: lgv-spin .8s linear infinite; }
@keyframes lgv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lgv-busy::before, .lgv-spinner { animation-duration: 3s; } }

/* D-26: toggles and sort reset */
.lgv-btn-icon-wand { color: var(--lgv-accent); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 15 9M14 4v3M18.5 5.5l-2 2M20 10h-3M12.5 5.5l2 2'/%3E%3C/svg%3E"); }
/* M3 Verpflegung: Essen (Besteck) und Mittagszeit (Uhr), Symbole wie LgvIcon "food"/"clock" */
.lgv-btn-icon-food { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v7a2 2 0 0 0 4 0V3M8 10v11M17 21V3c-2 1-3 3-3 6v4h3'/%3E%3C/svg%3E"); }
.lgv-btn-icon-clock { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.lgv-meal-band { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.lgv-meal-pick li + li { margin-top: 6px; }
.lgv-meal-pick .dxbl-btn { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; }
.lgv-meal-row.dxbl-btn { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgv-slot-list li { display: flex; flex-direction: column; gap: 2px; }
.lgv-slot-list li + li { margin-top: 8px; }
.lgv-slot-list .is-suggested .dxbl-btn { outline: 2px solid var(--lgv-accent); outline-offset: 1px; }
.lgv-order-rules { border-collapse: collapse; margin: 8px 0; }
.lgv-order-rules th { text-align: left; font-weight: 600; padding: 4px 12px 4px 0; }
.lgv-order-rules td { padding: 4px 12px 4px 0; vertical-align: middle; }
.lgv-btn-icon-check { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.lgv-btn-icon-unsort { color: var(--lgv-accent); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 4v14M4 15l3 3 3-3M14 6h7M14 12h5M14 18h3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
.lgv-toggle.is-on { font-weight: 600; }

/* D-27: global search (command palette below the search box, Strg+K) */
.lgv-search-wrap { position: relative; flex: 1; min-width: 0; max-width: 520px; display: flex; }
.lgv-search-wrap > .lgv-search { max-width: none; width: 100%; cursor: pointer; }
.lgv-search-wrap > .lgv-search:hover { border-color: var(--lgv-line-2); }
.lgv-palette-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }
.lgv-palette { position: absolute; top: 0; left: 0; z-index: 41; width: min(640px, calc(100vw - 32px)); display: flex; flex-direction: column;
  max-height: min(560px, calc(100vh - 80px)); background: var(--lgv-surface); border: 1px solid var(--lgv-line-2); border-radius: var(--lgv-radius);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .18); overflow: hidden; }
.lgv-palette-input { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--lgv-line); color: var(--lgv-muted); }
.lgv-palette-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--lgv-text); padding: 2px 0; }
.lgv-palette-input kbd { font: 11px ui-monospace, Consolas, monospace; background: var(--lgv-surface-2); border: 1px solid var(--lgv-line-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; }
.lgv-palette-list { overflow: auto; padding: 4px 0 6px; }
.lgv-palette-group { padding: 8px 14px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--lgv-faint); }
.lgv-palette-item { display: flex; align-items: center; gap: 10px; padding: 6px 14px; color: var(--lgv-text); text-decoration: none; cursor: pointer; }
.lgv-palette-item.is-active { background: var(--lgv-accent-weak); }
.lgv-palette-item.is-active .lgv-palette-icon { color: var(--lgv-accent); }
.lgv-palette-icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--lgv-radius); background: var(--lgv-surface-2); color: var(--lgv-muted); }
.lgv-palette-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lgv-palette-title, .lgv-palette-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgv-palette-sub { font-size: 12px; color: var(--lgv-muted); }
.lgv-palette-item mark { background: var(--lgv-warn-weak); color: inherit; border-radius: 2px; padding: 0 1px; font-weight: 600; }
.lgv-palette-note { padding: 14px; color: var(--lgv-muted); }
@media (max-width: 760px) {
  .lgv-search-wrap { flex: 0 0 auto; }
  .lgv-palette { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; }
}

/* D-28: field a record opens on (coming from a maintenance check) */
.lgv-focus { background: var(--lgv-warn-weak); outline: 2px solid var(--lgv-warn); outline-offset: 4px; border-radius: var(--lgv-radius); }
.lgv-field-hint.is-focus { color: var(--lgv-warn); font-weight: 600; }

/* Duplicate panel (Fachregelwerk 11b) */
.lgv-dupes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lgv-dupe { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.lgv-dupe.is-keep { outline: 2px solid var(--lgv-accent); }
.lgv-dupe dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 13px; }
.lgv-dupe dt { color: var(--lgv-muted); }
.lgv-dupe dd { margin: 0; overflow-wrap: anywhere; }
.lgv-dupe-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.lgv-btn-icon-merge { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 3v6a6 6 0 0 0 6 6h0a6 6 0 0 1 6 6M18 3v6a6 6 0 0 1-6 6'/%3E%3C/svg%3E"); }
.lgv-btn-icon-distinct { color: var(--lgv-accent); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='12' r='4'/%3E%3Ccircle cx='17' cy='12' r='4'/%3E%3C/svg%3E"); }

/* D-23/T-08: section opened by an action in the header – at the top, accent border */
.lgv-section.is-action { border: 2px solid var(--lgv-accent); }

/* D-30: lookup fields look like a search (magnifier left, not clickable) */
.lgv-lookup-icon { pointer-events: none; color: var(--lgv-muted); }

/* ---------- Header: bell, light/dark, help ---------- */
.lgv-iconbtn.is-on { background: var(--lgv-accent-weak); color: var(--lgv-accent); }
.lgv-iconbtn.is-pending .lgv-icon { visibility: hidden; }
.lgv-bell { position: relative; }
/* D-07: red number only when there is something to do */
.lgv-bell-count { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px;
  display: grid; place-items: center; background: var(--lgv-bad); color: var(--lgv-on-strong); font-size: 10px; font-weight: 700; line-height: 1; pointer-events: none; }
.lgv-notes { display: flex; flex-direction: column; gap: 12px; }
.lgv-notes .lgv-check-foot { display: flex; }

/* Context help (UI contract 7): rendered Markdown from docs/hilfe */
.lgv-help { line-height: 1.5; }
.lgv-help h3 { margin: 20px 0 6px; font-size: 15px; font-weight: 600; }
.lgv-help h3:first-child { margin-top: 0; }
.lgv-help h4 { margin: 14px 0 4px; font-size: 14px; font-weight: 600; }
.lgv-help p { margin: 0 0 10px; }
.lgv-help ul, .lgv-help ol { margin: 0 0 10px; padding-left: 20px; }
.lgv-help li { margin: 2px 0; }
.lgv-help a { color: var(--lgv-accent); }
.lgv-help kbd { font: 12px ui-monospace, Consolas, monospace; background: var(--lgv-surface-2); border: 1px solid var(--lgv-line-2); border-bottom-width: 2px;
  border-radius: var(--lgv-radius); padding: 0 5px; white-space: nowrap; }

/* ---------- Dark mode completions (data-theme set by lgv-theme.js) ---------- */
/* text on strongly coloured backgrounds (red counters, accent): white in light mode, dark in dark mode for contrast */
:root { --lgv-on-strong: #ffffff; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --lgv-on-strong: #14171b;
  --lgv-ulu-weak: #3a3112; --lgv-wb-weak: #172a45; --lgv-mei-weak: #15301f; --lgv-fre-weak: #3a2614; --lgv-pru-weak: #2a2045; --lgv-int-weak: #11313a;
  --lgv-shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
}
:root[data-theme="dark"] .lgv-count.hot,
:root[data-theme="dark"] .lgv-check-count,
:root[data-theme="dark"] .lgv-dot.is-open,
:root[data-theme="dark"] .lgv-lens button.on { color: var(--lgv-on-strong); }
:root[data-theme="dark"] .lgv-avatar { background: #3b2f5c; color: #d9c8ff; }
:root[data-theme="dark"] .lgv-drawer .dxbl-drawer-panel { box-shadow: -8px 0 24px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .lgv-palette { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }

/* ---------- D-31 multi-selection, D-32 Etiketten / Serienbrief ---------- */
.lgv-selchip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--lgv-radius);
  background: var(--lgv-accent-weak); color: var(--lgv-accent-ink); font-size: 13px; white-space: nowrap; }
.lgv-grid .dxbl-grid-selection-cell, .lgv-grid .dxbl-grid-selection-cell .dxbl-checkbox { cursor: pointer; }
.lgv-btn-icon-selectall { color: var(--lgv-accent); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='m7.5 12 3 3 6-6'/%3E%3C/svg%3E"); }
.lgv-btn-icon-deselect { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E"); }
.lgv-btn-icon-label { color: var(--lgv-accent); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 10h7M7 14h10'/%3E%3C/svg%3E"); }
.lgv-btn-icon-letter { color: var(--lgv-accent); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.lgv-btn-icon-download { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
.lgv-btn-icon-word { color: #185abd; --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13l1.5 5 2.5-4 2.5 4 1.5-5'/%3E%3C/svg%3E"); }
.lgv-btn-icon-edit { color: var(--lgv-accent); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E"); }
.lgv-btn-icon-eye { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.lgv-btn-icon-delete { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3C/svg%3E"); }
.lgv-choices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.lgv-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; text-align: left; font: inherit;
  color: inherit; background: var(--lgv-surface); border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius); cursor: pointer; }
.lgv-choice:hover { border-color: var(--lgv-accent); }
.lgv-choice.is-on { border-color: var(--lgv-accent); box-shadow: inset 3px 0 0 var(--lgv-accent); background: var(--lgv-accent-weak); }
.lgv-choice .lgv-muted { font-size: 12px; }
.lgv-sheet { display: grid; grid-template-columns: repeat(var(--lgv-sheet-cols), minmax(0, 1fr)); gap: 3px; max-width: 260px; padding: 6px;
  border: 1px solid var(--lgv-line-2); border-radius: var(--lgv-radius); background: var(--lgv-surface); }
.lgv-sheet-cell { height: 26px; font: inherit; font-size: 11px; color: var(--lgv-muted); background: var(--lgv-surface); cursor: pointer;
  border: 1px dashed var(--lgv-line-2); border-radius: 2px; }
.lgv-sheet-cell.is-used { background: var(--lgv-surface-2); color: var(--lgv-faint); border-style: solid; }
.lgv-sheet-cell.is-label { background: var(--lgv-accent-weak); color: var(--lgv-accent-ink); border-style: solid; border-color: var(--lgv-accent); }
.lgv-sheet-cell.is-start { outline: 2px solid var(--lgv-accent); outline-offset: 1px; font-weight: 600; }
.lgv-sheet-legend { font-size: 12px; margin: 6px 0 16px; }
.lgv-corr-summary { display: flex; flex-direction: column; gap: 4px; }
.lgv-corr-summary-main { font-size: 15px; }
.lgv-corr-missing { display: flex; gap: 6px; align-items: flex-start; color: var(--lgv-warn); font-size: 13px; }
.lgv-corr-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lgv-corr-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.lgv-corr-inline .dxbl-textbox { flex: 1 1 200px; }
.lgv-corr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 16px; }
.lgv-letter-editor { display: flex; gap: 12px; height: calc(100vh - 230px); min-height: 420px; }
.lgv-letter-fields { flex: 0 0 210px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.lgv-letter-fields-head { font-weight: 600; margin-bottom: 4px; }
.lgv-letter-fields-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lgv-line); }
.lgv-letter-field { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 8px; font: inherit; font-size: 13px; text-align: left;
  color: inherit; background: var(--lgv-surface); border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius); cursor: pointer; }
.lgv-letter-field:hover:not(:disabled) { border-color: var(--lgv-accent); }
.lgv-letter-field:disabled { opacity: .55; cursor: not-allowed; }
.lgv-letter-field .lgv-muted { font-size: 11px; }
.lgv-letter-doc { flex: 1; min-width: 0; }
.lgv-richedit { height: 100%; }
@media (max-width: 760px) { .lgv-letter-editor { flex-direction: column; height: auto; } .lgv-letter-fields { flex: none; } .lgv-richedit { height: 70vh; } }

/* Printing (Formulare, UI contract D-34): print action in record headers, preview page fills the content area */
.lgv-btn-icon-print { color: var(--lgv-accent); --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4V9h16v9h-2M6 14h12v7H6z'/%3E%3C/svg%3E"); }
/* D-76: "Drucken" as primary action of the print dialog – same printer, in the text color of the filled button */
.lgv-btn-icon-print-on { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4V9h16v9h-2M6 14h12v7H6z'/%3E%3C/svg%3E"); }
.lgv-btn-icon-pdf { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
.lgv-btn-icon-back { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.lgv-main > .lgv-report, .lgv-settings-page > .lgv-report { flex: 1 1 auto; min-height: 520px; display: flex; flex-direction: column; }
.lgv-report > * { flex: 1 1 auto; min-height: 0; }

/* T-17/D-31: fixed selection row below the list toolbar */
.lgv-grid-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0 2px; margin-top: 8px; border-top: 1px solid var(--lgv-line); }
.lgv-grid-actions-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--lgv-muted); margin-right: 4px; }
.lgv-grid-actions-sep { width: 1px; align-self: stretch; background: var(--lgv-line); margin: 0 4px; }
.lgv-selchip.is-empty { background: transparent; color: var(--lgv-muted); }
.lgv-grid-toolbar-wrap { display: flex; flex-direction: column; width: 100%; min-width: 0; }

/* ---------- UX round 1 (U-01 ... U-10, T-22) ---------- */
.lgv-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* D-35: the panel title receives the focus programmatically; no outline box around a heading, but visible for keyboard users */
.lgv-sp-title h2:focus { outline: none; }
.lgv-sp-title h2:focus-visible { outline: 2px solid var(--lgv-accent); outline-offset: 2px; border-radius: 2px; }

/* D-36: "Änderungen verwerfen?" inside the panel, right above the buttons */
/* T-25: the question takes the place of the footer buttons */
.lgv-sp-foot.lgv-sp-confirm { align-items: center; flex-wrap: wrap; border-top: 2px solid var(--lgv-warn); background: var(--lgv-warn-weak); }
.lgv-sp-confirm-text { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 600; }
.lgv-sp-confirm-text .lgv-icon { color: var(--lgv-warn); }

/* D-52 (T-43): records in tabs (Azure portal): command bar under the head, functions with state as button + chip,
   tab strip stays on top while the tab content scrolls in the panel body */
.lgv-sp-commands { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 20px; border-bottom: 1px solid var(--lgv-line); }
.lgv-cmd { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--lgv-line-2); border-radius: var(--lgv-radius);
  background: var(--lgv-surface); color: var(--lgv-text); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.lgv-cmd:hover { background: var(--lgv-surface-2); }
.lgv-cmd:focus-visible { outline: 2px solid var(--lgv-accent); outline-offset: 2px; }
.lgv-cmd > .lgv-icon { color: var(--lgv-accent); }
/* D-86: not possible right now, the reason is the tooltip */
.lgv-cmd[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.lgv-cmd[aria-disabled="true"]:hover { background: transparent; }
/* D-86 for page buttons too: a DxButton with aria-disabled stays focusable with its tooltip, but looks and acts disabled */
.dxbl-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.lgv-record-tabs > .dxbl-tabs-content-panel { padding-top: 12px; }
/* T-69: in the side panel the tab strip stays put and only the tab's content scrolls (a sticky strip let the form show through) */
.lgv-sp-body:has(> .lgv-record-tabs) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.lgv-sp-body > .lgv-record-tabs { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lgv-sp-body > .lgv-record-tabs > .dxbl-tabs-tablist { flex: none; }
.lgv-sp-body > .lgv-record-tabs > .dxbl-tabs-content-panel { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding-bottom: 16px; }

/* D-42: confirmations in a page section */
.lgv-confirm { color: var(--lgv-text); border-left: 3px solid var(--lgv-bad); }
.lgv-confirm b { color: var(--lgv-bad); }
/* D-23/D-51: a question directly under the record head (e.g. "Kurs absagen?") and its row of buttons */
.lgv-inline-dialog { margin-bottom: 12px; }
.lgv-inline-dialog > h3 { margin-top: 0; }
.lgv-button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* D-51: selection fields above a page's cards (e.g. class and year on "Berufsschule") */
.lgv-page-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
/* first explaining line of a card body, flush with the header */
.lgv-card-lead { margin-top: 0; }
/* read-only list inside a card (modules of a plan) */
.lgv-plain-list { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* W2-8 LgvTaskList: checklist rows – state column of equal width, text, actions on the right (wrap below on narrow screens) */
.lgv-tasks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(22rem, auto); gap: 8px 0; }
/* rows share the columns of the list (subgrid), so texts and buttons of all rows line up (D-51) */
.lgv-task { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 12px; align-items: start; padding: 10px 12px;
  border: 1px solid var(--lgv-line); border-left-width: 4px; border-radius: var(--lgv-radius); background: var(--lgv-surface); }
.lgv-task.is-done { border-left-color: var(--lgv-ok); }
.lgv-task.is-open { border-left-color: var(--lgv-warn); }
.lgv-task.is-later { border-left-color: var(--lgv-line-2); }
.lgv-task-state { display: flex; align-items: center; gap: 6px; }
.lgv-task.is-done .lgv-task-state > .lgv-icon { color: var(--lgv-ok); }
.lgv-task.is-open .lgv-task-state > .lgv-icon { color: var(--lgv-warn); }
.lgv-task.is-later .lgv-task-state > .lgv-icon { color: var(--lgv-muted); }
.lgv-task-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lgv-task-title { font-weight: 600; }
.lgv-task-text { color: var(--lgv-text); }
.lgv-task-detail { color: var(--lgv-muted); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.lgv-task-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 760px) {
  .lgv-tasks { grid-template-columns: minmax(0, 1fr); }
  .lgv-task { grid-template-columns: minmax(0, 1fr); }
  .lgv-task-actions { justify-content: flex-start; }
}

/* D-34/T-22: full-screen dialog (print preview) over header, menu and content */
/* D-89: below the DevExpress pop-ups (message box, drop-downs and dialogs of the editors start at z-index 1050 in dxbl-popup-root in the body:
   https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPopupBase.ZIndex, v26.1), above the drawers (100) and the busy bar (1000) */
.lgv-fsd { position: fixed; inset: 0; z-index: 1040; display: flex; flex-direction: column; background: var(--lgv-bg); }
.lgv-fsd-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px 12px 20px; background: var(--lgv-surface);
  border-bottom: 1px solid var(--lgv-line); box-shadow: var(--lgv-shadow); }
.lgv-fsd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.lgv-fsd-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 12px 16px; overflow: auto; }
.lgv-fsd-body > .lgv-report { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lgv-fsd-body > .lgv-report > * { flex: 1 1 auto; min-height: 0; }

/* D-41: reconnect display (shown by Blazor as <dialog>), unexpected errors */
.lgv-reconnect { border: 0; padding: 0; background: transparent; max-width: min(520px, calc(100vw - 32px)); }
.lgv-reconnect::backdrop { background: rgba(16, 24, 40, .35); }
.lgv-reconnect-box { display: flex; gap: 14px; padding: 20px; border-radius: var(--lgv-radius); background: var(--lgv-surface); color: var(--lgv-text);
  border: 1px solid var(--lgv-line-2); box-shadow: 0 12px 32px rgba(16, 24, 40, .25); font-family: inherit; }
.lgv-reconnect-box h2 { margin: 0 0 6px; font-size: 17px; }
.lgv-reconnect-box p { margin: 0 0 12px; color: var(--lgv-muted); }
.lgv-reconnect-icon { flex: none; padding-top: 2px; }
.lgv-reconnect-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lgv-reconnect-btn { font: inherit; padding: 6px 14px; border-radius: var(--lgv-radius); border: 1px solid var(--lgv-line-2); background: var(--lgv-surface);
  color: var(--lgv-text); cursor: pointer; text-decoration: none; display: inline-block; }
.lgv-reconnect-btn.is-primary { background: var(--lgv-accent); border-color: var(--lgv-accent); color: #fff; }
.lgv-reconnect [class*="lgv-reconnect-retrying"], .lgv-reconnect [class*="lgv-reconnect-failed"], .lgv-reconnect [class*="lgv-reconnect-rejected"] { display: none; }
.lgv-reconnect[data-view="retrying"] .lgv-reconnect-retrying,
.lgv-reconnect[data-view="failed"] .lgv-reconnect-failed,
.lgv-reconnect[data-view="rejected"] .lgv-reconnect-rejected { display: revert; }
.lgv-reconnect:not([data-view="retrying"]) .lgv-reconnect-icon { display: none; }
#blazor-error-ui { display: none; }
#blazor-error-ui.lgv-error-ui { position: fixed; left: 16px; right: 16px; bottom: 40px; z-index: 1300; padding: 12px 16px; border-radius: var(--lgv-radius);
  background: var(--lgv-bad-weak); color: var(--lgv-text); border: 1px solid var(--lgv-bad); box-shadow: var(--lgv-shadow); }
#blazor-error-ui.lgv-error-ui b { color: var(--lgv-bad); }
#blazor-error-ui.lgv-error-ui .reload { margin-left: 8px; color: var(--lgv-accent-ink); font-weight: 600; }
.lgv-errorstate { display: flex; gap: 14px; max-width: 720px; padding: 20px; margin: 8px 0; background: var(--lgv-surface); border: 1px solid var(--lgv-line);
  border-left: 4px solid var(--lgv-bad); border-radius: var(--lgv-radius); box-shadow: var(--lgv-shadow); }
.lgv-errorstate h1 { margin: 0 0 8px; font-size: 20px; }
.lgv-errorstate h1:focus { outline: none; }
.lgv-errorstate p { margin: 0 0 10px; }
.lgv-errorstate-icon { color: var(--lgv-bad); flex: none; padding-top: 2px; }
.lgv-errorstate-details { margin-top: 12px; color: var(--lgv-muted); font-size: 12px; }
.lgv-errorstate-details summary { cursor: pointer; }
.lgv-errorpage { min-height: 100vh; padding: 16px 24px; box-sizing: border-box; }
.lgv-errorpage-main { margin-top: 24px; }

/* U-10: tablet and phone widths – toolbars and the "Zu klären" check list wrap instead of forcing a horizontal scroll */
@media (max-width: 1279.98px) {
  .lgv-grid-search { width: 240px; }
  .lgv-toolbar-combo { width: 180px; }
  .lgv-checkitem-text { overflow-wrap: anywhere; }
}
@media (max-width: 760px) {
  .lgv-grid-search, .lgv-toolbar-combo { width: 100%; }
  .lgv-ph-actions { margin-left: 0; }
  .lgv-fsd-head { padding: 10px 12px; }
  .lgv-fsd-body { padding: 8px; }
  /* U-01: pager, page tabs and wide tables scroll or wrap inside their box, never the page */
  .lgv-grid .dxbl-grid-pager-and-pager-summary-container, .lgv-grid .dxbl-grid-bottom-panel { flex-wrap: wrap; min-width: 0; }
  .lgv-tabs .dxbl-tabs-tablist, .lgv-area-tabs .dxbl-tabs-tablist { overflow-x: auto; }
}
.lgv-run { overflow-x: auto; }.lgv-field-hint.is-info { color: var(--lgv-muted); }

/* ---- Meine Zeiten / Zeitverwaltung (T-40, K2–K5): building blocks LgvTimeBlocks, LgvContextBand, LgvReasonField, LgvDayStrip ---- */
.lgv-stack { display: grid; gap: 12px; }
.lgv-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lgv-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lgv-num.is-pos { color: var(--lgv-ok); }
.lgv-num.is-neg { color: var(--lgv-bad); }
.lgv-timeblocks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.lgv-timechip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border: 1px solid var(--lgv-line-2); border-radius: var(--lgv-radius);
  background: var(--lgv-surface); font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.lgv-timechip.is-paid { border-color: var(--lgv-warn); background: var(--lgv-warn-weak); }
.lgv-timechip-maz { font-size: 11px; font-weight: 600; color: var(--lgv-warn); }
.lgv-timechip-btn { border: 0; background: transparent; color: var(--lgv-muted); cursor: pointer; font: inherit; line-height: 1; padding: 2px 4px; border-radius: var(--lgv-radius); }
.lgv-timechip-btn:hover { background: var(--lgv-surface-2); color: var(--lgv-text); }
.lgv-timechip-btn[aria-pressed="true"] { color: var(--lgv-warn); font-weight: 700; }
.lgv-timeblocks-input { flex: none; }
.lgv-timeblocks-edit { display: inline-flex; align-items: center; gap: 4px; }
.lgv-timechip-text { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.lgv-timechip-text:hover span { text-decoration: underline; }
.lgv-timeblocks-add { border: 1px dashed var(--lgv-line-2); background: transparent; color: var(--lgv-accent-ink); font: inherit; border-radius: var(--lgv-radius); padding: 3px 10px; cursor: pointer; }
.lgv-timeblocks-add:hover { background: var(--lgv-surface-2); }
.lgv-timechip-btn.is-ok { color: var(--lgv-accent-ink); font-weight: 700; }
.lgv-ctxband { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 12px; border-radius: var(--lgv-radius);
  background: var(--lgv-accent-weak); color: var(--lgv-accent-ink); border-left: 4px solid var(--lgv-accent); }
.lgv-ctxband-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgv-ctxband-action { margin-left: auto; flex: none; font: inherit; font-weight: 600; color: var(--lgv-accent-ink); background: transparent;
  border: 1px solid var(--lgv-accent); border-radius: var(--lgv-radius); padding: 2px 10px; cursor: pointer; }
.lgv-reason { display: grid; gap: 6px; }
.lgv-reason-label { font-weight: 600; }
.lgv-daystrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 3px; }
.lgv-daystrip-day { display: grid; justify-items: center; gap: 1px; padding: 3px 0; border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius);
  background: var(--lgv-surface); color: var(--lgv-text); font: inherit; font-size: 11px; cursor: pointer; }
.lgv-daystrip-day.is-ok { background: var(--lgv-ok-weak); }
.lgv-daystrip-day.is-missing { background: var(--lgv-bad-weak); border-color: var(--lgv-bad); }
.lgv-daystrip-day.is-warn { background: var(--lgv-warn-weak); border-color: var(--lgv-warn); }
.lgv-daystrip-day.is-free { background: var(--lgv-surface-2); color: var(--lgv-faint); }
.lgv-daystrip-day.is-selected { outline: 2px solid var(--lgv-accent); outline-offset: 1px; }
.lgv-daystrip-mark { font-weight: 700; min-height: 1em; }
.lgv-timehead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 10px 12px; margin-bottom: 12px; background: var(--lgv-surface);
  border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius); }
.lgv-timehead-label { color: var(--lgv-muted); margin-right: 4px; }
.lgv-week { width: 100%; border-collapse: collapse; font-size: 13px; }
.lgv-week th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--lgv-muted); background: var(--lgv-surface-2); padding: 6px 8px; white-space: nowrap; }
.lgv-week td { padding: 6px 8px; border-bottom: 1px solid var(--lgv-line); vertical-align: middle; }
.lgv-week tr.is-free td { background: var(--lgv-surface-2); color: var(--lgv-muted); }
.lgv-week tr.is-today td:first-child { box-shadow: inset 3px 0 0 var(--lgv-accent); }
.lgv-week tr.is-selected td { background: var(--lgv-accent-weak); }
.lgv-week-day { width: 130px; min-width: 110px; white-space: nowrap; }
.lgv-week-kind { width: 160px; min-width: 150px; }
.lgv-week-kind .dxbl-text-edit { width: 100%; }
.lgv-week-sum { width: 76px; text-align: right; }
.lgv-week-hints { width: 26%; min-width: 220px; }
.lgv-week-hints .lgv-chip { white-space: normal; }
.lgv-absence { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--lgv-radius); border-left: 4px solid var(--lgv-int);
  background: var(--lgv-int-weak); font-weight: 600; }
.lgv-absence.is-vacation { border-color: var(--lgv-mei); background: var(--lgv-mei-weak); }
.lgv-absence.is-sick { border-color: var(--lgv-bad); background: var(--lgv-bad-weak); }
.lgv-absence.is-training { border-color: var(--lgv-wb); background: var(--lgv-wb-weak); }
.lgv-absence.is-external { border-color: var(--lgv-fre); background: var(--lgv-fre-weak); }
.lgv-absence.is-half { width: 50%; }
.lgv-absence.is-pending { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(127,127,127,.18) 6px 12px); font-weight: 400; }
.lgv-notice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--lgv-line); border-left: 4px solid var(--lgv-accent);
  border-radius: var(--lgv-radius); background: var(--lgv-surface); }
.lgv-notice.is-warn { border-left-color: var(--lgv-warn); }
.lgv-notice-body { flex: 1; min-width: 0; }
.lgv-calc { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.lgv-calc-label { color: var(--lgv-muted); }
.lgv-history { display: grid; gap: 4px; font-size: 13px; }

/* ---------- Unternehmen: bank accounts as rows (D-49) ---------- */
.lgv-accounts { display: grid; gap: 6px; margin-bottom: 8px; }
.lgv-accounts-head, .lgv-accounts-row { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(110px, 1fr) minmax(120px, 1.2fr) 70px 150px; gap: 8px; align-items: center; }
.lgv-accounts-head { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--lgv-muted); }
@media (max-width: 900px) {
  .lgv-accounts-head { display: none; }
  .lgv-accounts-row { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; border-bottom: 1px solid var(--lgv-line); }
}

/* Hint with a jump to the one place where a value is kept (D-49) */
.lgv-hintband { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--lgv-radius); margin: 8px 0 12px;
  background: var(--lgv-accent-weak); color: var(--lgv-text); border: 1px solid var(--lgv-line); }
.lgv-hintband > .lgv-icon { color: var(--lgv-accent); }
.lgv-hintband > span { flex: 1 1 240px; }

/* ---------- Belegdesign (T-30): settings left, live preview right ---------- */
.lgv-btn-icon-up { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); }
.lgv-btn-icon-down { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
.lgv-btn-icon-cert { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v11H4z'/%3E%3Ccircle cx='12' cy='17' r='3'/%3E%3Cpath d='M8 8h8M8 11h5'/%3E%3C/svg%3E"); }
.lgv-btn-icon-euro { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 6.5A6.5 6.5 0 1 0 17 17.5M4 10.5h9M4 13.5h9'/%3E%3C/svg%3E"); }
.lgv-design-variants { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.lgv-design-label { font-weight: 600; }
.lgv-design-combo { min-width: 260px; }
.lgv-design-confirm { color: var(--lgv-bad); font-weight: 600; }
.lgv-design { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.1fr); gap: 24px; align-items: start; }
.lgv-design-edit { min-width: 0; }
.lgv-design-preview { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lgv-design-kinds, .lgv-design-pages { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lgv-design-paper { background: var(--lgv-surface-2); border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius); padding: 16px; display: grid; place-items: center; min-height: 480px; }
.lgv-design-paper img { width: 100%; max-width: 640px; height: auto; background: #fff; box-shadow: var(--lgv-shadow); }
.lgv-blocks { display: grid; gap: 4px; margin: 12px 0; }
.lgv-block { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; align-items: center; padding: 6px 8px; border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius); background: var(--lgv-surface); }
.lgv-block-main { display: grid; gap: 2px; min-width: 0; }
.lgv-block-text { padding-left: 28px; }
.lgv-btn-icon-pages { --lgv-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h9l3 3v13H8z'/%3E%3Cpath d='M4 7v14h11'/%3E%3C/svg%3E"); }
.lgv-block.is-off .lgv-block-text { color: var(--lgv-faint); }
.lgv-block-text { font-size: 12px; color: var(--lgv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgv-file-input { display: grid; gap: 8px; }
.lgv-file-state { display: flex; gap: 6px; align-items: center; color: var(--lgv-muted); }
@media (max-width: 1279.98px) {
  .lgv-design { grid-template-columns: minmax(0, 1fr); }
  .lgv-design-preview { position: static; }
}

/* W3-2 follow-up: public download page of a handover to the accounting (D-59) */
.lgv-handover { max-width: 560px; padding: 20px; margin: 8px 0; background: var(--lgv-surface); border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius); }
.lgv-handover h1 { margin: 0 0 8px; font-size: 20px; }
.lgv-handover p { margin: 0 0 12px; }
.lgv-handover form { display: grid; gap: 8px; max-width: 320px; }
.lgv-handover input { font: inherit; padding: 6px 8px; border: 1px solid var(--lgv-line-2); border-radius: var(--lgv-radius); background: var(--lgv-surface); color: inherit; }
.lgv-handover-hint { color: var(--lgv-bad); }

/* D-67: a record tab with several contributions shows them one below the other */
.lgv-tabgroup { display: flex; flex-direction: column; gap: 24px; }
.lgv-tabgroup-section + .lgv-tabgroup-section { border-top: 1px solid var(--lgv-line); padding-top: 16px; }
.lgv-tabgroup-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; }

/* D-89 mail window (MailComposer in LgvFullscreenDialog): left the mail like a mail program (An, Betreff, Anhänge, text), right a bar with
   kind of mail, saved texts, placeholders and attachments; the text fills the remaining height (D-70: only the content scrolls) */
.lgv-mail { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.lgv-mail-main { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.lgv-mail-side { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: auto; padding-left: 16px; border-left: 1px solid var(--lgv-line); }
.lgv-mail-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; align-items: center; }
.lgv-mail-row > label, .lgv-mail-row > .lgv-mail-label { font-weight: 600; color: var(--lgv-muted); }
.lgv-mail-to { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.lgv-mail-to .dxbl-combobox { flex: 1 1 280px; min-width: 0; }
.lgv-mail-recipients { max-height: 220px; overflow: auto; border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius); }
.lgv-mail-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.lgv-mail-attachment { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--lgv-line);
  border-radius: var(--lgv-radius); background: var(--lgv-surface); font-size: 13px; }
.lgv-mail-editor { flex: 1 1 auto; min-height: 320px; display: flex; flex-direction: column; }
.lgv-mail-editor > .lgv-mail-html { flex: 1 1 auto; min-height: 0; }
.lgv-mail-preview { flex: 1 1 auto; min-height: 320px; overflow: auto; padding: 12px 16px; border: 1px solid var(--lgv-line); border-radius: var(--lgv-radius);
  background: var(--lgv-surface); }
.lgv-mail-preview-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lgv-mail-preview-nav > .lgv-strong { margin-right: auto; }
.lgv-mail-fields { display: flex; flex-direction: column; gap: 2px; }
.lgv-mail-field { display: flex; justify-content: space-between; gap: 8px; padding: 3px 8px; font: inherit; font-size: 13px; text-align: left; color: inherit;
  background: transparent; border: 1px solid transparent; border-radius: var(--lgv-radius); cursor: pointer; }
.lgv-mail-field:hover { border-color: var(--lgv-accent); background: var(--lgv-surface); }
.lgv-mail-field .lgv-muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgv-mail-templates { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.lgv-mail-save { display: flex; flex-direction: column; gap: 6px; }
.lgv-mailhtml { overflow-wrap: anywhere; }
.lgv-mailhtml p { margin: 0 0 .75em; }
@media (max-width: 1100px) {
  .lgv-mail { grid-template-columns: minmax(0, 1fr); }
  .lgv-mail-side { padding-left: 0; border-left: none; border-top: 1px solid var(--lgv-line); padding-top: 8px; overflow: visible; }
}
@media (max-width: 760px) { .lgv-mail-row { grid-template-columns: minmax(0, 1fr); } }
/* D-86 for buttons of a dialog: there, but not possible right now – greyed out, the reason as tooltip (aria-disabled keeps tooltip and focus) */
.dxbl-btn.lgv-blocked, .dxbl-btn.lgv-blocked:hover { opacity: .5; cursor: not-allowed; }