/* ==========================================================================
   DLV.Versammlungen - Theme & Base Styles (Hausstandard _s3-ui-standards)
   DLV-Akzent nur über Primärfarbe (CI-Rot), Logo und Favicon. Layout, Sidebar,
   Radius, Typografie und Icons bleiben Hausstandard.
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */

:root {
    --font-size: 16px;
    --background: #fafafa;
    --foreground: #1f1f1f;
    --card: #ffffff;
    --card-foreground: #1f1f1f;
    --popover: #ffffff;
    --popover-foreground: #1f1f1f;
    --primary: #C72127;            /* CI-Rot */
    --primary-foreground: #ffffff;
    --secondary: #f5f5f5;
    --secondary-foreground: #1f1f1f;
    --muted: #f0f0f0;
    --muted-foreground: #6b6b6b;
    --accent: #fbeaea;
    --accent-foreground: #8E1419;
    --destructive: #ff4444;
    --destructive-foreground: #ffffff;
    --border: #e8e8e8;
    --input: transparent;
    --input-background: #ffffff;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --ring: #C72127;
    --radius: 0;
    --sidebar: #333333;
    --sidebar-foreground: #e8e8e8;
    --sidebar-primary: #C72127;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #3a3a3a;
    --sidebar-accent-foreground: #ffffff;
    --sidebar-border: #444444;
    --sidebar-ring: #C72127;
    --sidebar-submenu: #2b2b2b;

    /* DLV-CI (10_Logo/CI/CI_DerLetzteVersuch_v2.html), nur als Referenz für Marken-Elemente.
       Lorbeergrün lebt ausschließlich im Wappen und ist deshalb hier nicht definiert. */
    --dlv-rot: #C72127;
    --dlv-rot-dunkel: #8E1419;
    --dlv-schwarz: #231F20;
    --dlv-papier: #F1EAD6;
    --dlv-sand: #E5DAC0;
    --dlv-grau: #5C5754;
    --dlv-linie: #DDD6C4;
}

/* ---------- Base styles ---------- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100vh;
}

/* PDF.js erstellt versteckte Off-Screen-Canvases als Body-Children.
   Diese Canvases haben height:0 aber position im Dokument, was scrollHeight erhöht. */
body > canvas {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
}

html {
    font-size: var(--font-size);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--foreground);
    background-color: var(--background);
}

h1 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    border: none;
    outline: none;
}

h2 {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

h3 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

h4 {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

/* Feldbeschriftungen klein und grau wie .formular .form-label; die Eingabe darunter traegt die Information.
   Beschriftungen von Haekchen und Optionen sind selbst der Inhalt und bleiben in Textfarbe. */
label {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-normal);
    line-height: 1.4;
    color: var(--muted-foreground);
}

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    color: var(--foreground);
}

button {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    cursor: pointer;
}

input {
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Beleg-Seitenleiste (DokumentAnzeigeHost): ab 1600px Fensterbreite steht das PDF rechts neben dem Inhalt.
   Ein gleichzeitig offener Dialog rueckt in den verbleibenden Bereich, statt unter der Leiste zu liegen. */
:root {
    --dok-seite-breite: clamp(600px, 40vw, 1000px);
}

@media (min-width: 1600px) {
    body:has(.dok-seite) .modal-backdrop {
        right: var(--dok-seite-breite);
    }
}

/* Kopf einer Ansicht in der Actionbar: Titel, danach Kennzahlen und Befunde (Hausstandard Listen). */
.ab-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    min-width: 0;
    font-size: 0.875rem;
}

.ab-kopf .action-bar-title {
    margin-right: 0.5rem;
}

.ab-kopf a.badge {
    text-decoration: none;
}

/* Badge als Knopf (setzt einen Filter oder öffnet eine Korrektur): ohne Systemrahmen des Browsers. */
button.badge {
    gap: 0.25rem;
    border: 0;
    /* Nur die Schriftart erben (Knöpfe haben sonst die des Systems); Größe und Stärke wie jede .badge. */
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    line-height: inherit;
    cursor: pointer;
}

/* Klickbare Badges (Knopf oder Link) reagieren gleich auf Maus und Tastatur. */
button.badge,
a.badge {
    text-decoration: none;
    transition: filter 0.15s, box-shadow 0.15s;
}

a.badge:hover,
button.badge:hover:not(:disabled) {
    filter: brightness(0.95);
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
}

a.badge:focus-visible,
button.badge:focus-visible {
    outline: 2px solid var(--ring, var(--primary));
    outline-offset: 1px;
}

button.badge:disabled {
    cursor: default;
}

button.badge .icon-xs {
    width: 0.75rem;
    height: 0.75rem;
}

/* Knopf, der wie ein Link aussieht (Aktion in der Anwendung statt Navigation, z. B. PDF anzeigen). */
.link-btn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--primary);
    cursor: pointer;
}

.link-btn:hover {
    text-decoration: underline;
}

/* ---------- Shadow utilities ---------- */

.shadow-header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.shadow-sidebar {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
}

.shadow-actionbar {
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
}

.shadow-card {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
}

.shadow-button {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.shadow-dropdown {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ---------- Layout ---------- */

.layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.sidebar {
    background-color: var(--sidebar);
    color: var(--sidebar-foreground);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-animating {
    transition: width 0.2s ease;
}

.sidebar-collapsed {
    width: 64px;
}

.header {
    height: 68px;
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
}

.action-bar {
    background-color: var(--card);
    padding: 0.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    min-height: 48px;
    margin-top: 1rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.10), 0 2px 10px rgba(0, 0, 0, 0.10);
    position: relative;
}

.action-bar-loader {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: color-mix(in srgb, var(--primary) 15%, transparent);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.action-bar-loader.active {
    opacity: 1;
}

.action-bar-loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background-color: var(--primary);
    animation: actionbar-loading 1.2s ease-in-out infinite;
}

@keyframes actionbar-loading {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* Geruest beim Erstaufbau: schimmernde Platzhalter statt Inhalt; der Inhalt blendet danach ein (.einblenden). */
.skel {
    display: block;
    width: 70%;
    height: 0.75rem;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--muted) 25%, color-mix(in srgb, var(--muted) 40%, #fff) 50%, var(--muted) 75%);
    background-size: 200% 100%;
    animation: skel-schimmer 1.4s ease-in-out infinite;
}

.skel-kurz { width: 35%; }
.skel-gross { width: 55%; height: 1.4rem; }
.skel-badge { width: 4.5rem; height: 1.1rem; border-radius: 999px; }

@keyframes skel-schimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.einblenden {
    animation: einblenden 0.3s ease-out;
}

@keyframes einblenden {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .skel, .einblenden { animation: none; }
}

.content-area {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    width: 100%;
}

/* ---------- Content-Container (max-width + zentriert) ---------- */

/* Container-Varianten - die jeweilige Page wraps ihren Top-Level-Inhalt
   mit einer dieser Klassen. Breite steht statisch im Markup, kein
   Runtime-State, kein Page-Wechsel-Flicker. */
.container-narrow,
.container-standard,
.container-wide,
.container-full {
    width: 100%;
    margin: 0 auto;
}

.container-narrow   { max-width: 720px;  }
.container-standard { max-width: 1040px; }
.container-wide     { max-width: 1584px; }
.container-full     { max-width: none;   }

/* ---------- Waagerecht rollende Tabellen: Verlauf am Rand (AP 7a) ---------- */

/* Geht die Tabelle seitlich weiter, blendet der Rand auf dieser Seite aus. Der Verlauf folgt der Rollposition über eine
   Scroll-Timeline; passt alles hinein, ist die Timeline inaktiv und es gibt keinen Verlauf. Browser ohne Scroll-Timeline
   rollen wie bisher, nur ohne Hinweis. */
@property --rand-links {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --rand-rechts {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@keyframes scroll-rand {
    0% { --rand-links: 0px; --rand-rechts: 2.5rem; }
    4% { --rand-links: 2.5rem; }
    96% { --rand-rechts: 2.5rem; }
    100% { --rand-links: 2.5rem; --rand-rechts: 0px; }
}

.scroll-rand {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.12), #000 var(--rand-links), #000 calc(100% - var(--rand-rechts)), rgba(0, 0, 0, 0.12));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.12), #000 var(--rand-links), #000 calc(100% - var(--rand-rechts)), rgba(0, 0, 0, 0.12));
    animation: scroll-rand linear both;
    animation-timeline: scroll(self inline);
}

/* ---------- Status badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    border-radius: 9999px;
    white-space: nowrap;
}

.badge-success {
    background-color: #dcfce7;
    color: #166534;
}

.badge-warning {
    background-color: #fef9c3;
    color: #854d0e;
}

.badge-error {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-primary {
    background-color: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.badge-muted {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

.badge-info {
    background-color: #dbeafe;
    color: #1e40af;
}

/* ---------- Input mit Einheit (Suffix) ---------- */

.input-unit {
    display: inline-flex;
    align-items: stretch;
    height: 37px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--input-background, var(--card));
    overflow: hidden;
}

.input-unit > .form-input {
    border: none;
    background: transparent;
    border-radius: 0;
    height: 100%;
    flex: 1;
    min-width: 0;
    text-align: right;
}

.input-unit > .form-input:focus {
    outline: none;
    box-shadow: none;
}

.input-unit > .unit {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    background: rgba(0, 0, 0, 0.04);
    border-left: 1px solid var(--border);
    white-space: nowrap;
}

.input-unit:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}


/* ---------- Dokumentliste (eine Zeile je Datei: Icon, Name mit Unterzeile, Datum rechts) ---------- */

.dok-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8125rem;
}

.dok-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.65rem;
}

.dok-zeile + .dok-zeile {
    border-top: 1px solid var(--border);
}

.dok-zeile:hover {
    background: var(--secondary);
}

.dok-haupt {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.65rem;
    border: none;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dok-haupt:hover .dok-name > span:first-child {
    color: var(--primary);
    text-decoration: underline;
}

.dok-icon {
    flex: none;
    color: var(--muted-foreground);
}

.dok-name {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.dok-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dok-zusatz {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.dok-datum {
    flex: none;
    min-width: 5.5rem;
    text-align: right;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

.dok-neben {
    flex: none;
    font-size: 0.75rem;
}


/* ---------- Tables ---------- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th {
    text-align: left;
    padding: 0.625rem 0.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    /* Label oben verankern, damit Spalten ohne Filter dasselbe Label-Y
       haben wie Spalten mit Filter (sonst zentriert die default
       vertical-align: middle das Label in der Zelle). */
    vertical-align: top;
}

.data-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tbody tr:nth-child(odd) {
    background-color: var(--background);
}

.data-table tbody tr:nth-child(even) {
    background-color: var(--card);
}

.data-table tbody tr:hover {
    background-color: var(--muted);
}

/* Klickbare Zeile - Cursor-Pointer als visuelle Affordance fuer
   Row-Click-Navigation. Action-Buttons in der Zelle haben
   `@onclick:stopPropagation`, damit sie nicht doppelt navigieren. */
.data-table tbody tr.clickable,
.fc-table tbody tr.clickable {
    cursor: pointer;
}

.fc-table tbody tr.clickable:hover > td {
    background-color: color-mix(in srgb, var(--muted) 60%, transparent);
}

/* Fixed Layout - Spaltenbreiten werden aus <col>-Elementen übernommen,
   erlaubt sticky Header ohne Spalten-Verschiebung, schneidet lange
   Inhalte per `text-overflow: ellipsis` in Zellen mit `overflow: hidden`. */
.data-table.data-table-fixed {
    table-layout: fixed;
}

/* Header-Zelle: 2-zeilig - oben Label+Sort, unten Filter-Input/Select */
.data-table .th-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0;
    user-select: none;
}

.data-table .th-label.sortable {
    cursor: pointer;
}

.data-table .th-label.sortable:hover {
    color: var(--foreground);
}

.data-table .sort-icon {
    opacity: 0.45;
    flex-shrink: 0;
}

.data-table .sort-icon.sort-active {
    opacity: 1;
    color: var(--primary);
}

/* Rang in einer Mehrfachsortierung (Umschalt-Klick, F-021) */
.data-table .sort-rang {
    margin-left: -0.125rem;
    font-size: 0.625rem;
    font-weight: var(--font-weight-medium);
    color: var(--primary);
    vertical-align: super;
}

/* Robustes Safety-Net: greift auch dann, wenn ein Projekt das Sort-Icon ohne
   `sort-icon`-Klasse rendert (nur `icon-sm`) - passierte unabhängig in VDZ +
   HYTORC. Stylt direkt das svg im sortierbaren Header: inaktiv dezenter Grauton,
   aktiv hervorgehoben (egal ob `sort-active` am DIV oder am Icon hängt). */
.data-table .th-label.sortable svg {
    color: var(--muted-foreground);
    opacity: 0.4;
}

.data-table .th-label.sortable.sort-active svg,
.data-table .th-label.sortable svg.sort-active {
    color: var(--primary);
    opacity: 1;
}

.data-table .th-filter-input,
.data-table .th-filter-select {
    width: 100%;
    margin-top: 0.375rem;
    padding: 0.375rem 0.5rem;
    height: 34px;
    box-sizing: border-box;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-normal);
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--foreground);
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.data-table .th-filter-input:focus,
.data-table .th-filter-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}

.data-table .th-filter-input.is-active,
.data-table .th-filter-select.is-active {
    border-color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.data-table .th-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    background-size: 14px;
    padding-right: 1.5rem;
}

/* Select wirkt wie Placeholder solange "Alle" gewählt ist (kein .is-active).
   Optionen im Dropdown bleiben in der normalen Schriftfarbe. */
.data-table .th-filter-select:not(.is-active) {
    color: var(--muted-foreground);
}

.data-table .th-filter-select option {
    color: var(--foreground);
}

/* ----- Filter-Input mit ×-Clear-Button -----
   Wrap übernimmt margin-top vom Input, damit der absolut positionierte
   Clear-Button vertikal mittig im Input sitzt (sonst rutscht er um halben
   Margin nach unten). */
.th-filter-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 0.375rem;
}

.th-filter-wrap .th-filter-input {
    flex: 1;
    margin-top: 0;
    padding-right: 1.75rem;
}

.th-filter-clear {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--muted);
    border: none;
    border-radius: 50%;
    color: var(--muted-foreground);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    transition: background-color 0.15s, color 0.15s;
}

.th-filter-clear:hover {
    background: var(--destructive);
    color: #fff;
}

/* ----- Betragsfilter: Knopf fuer den Vergleichsoperator links am Eingabefeld ----- */
.th-filter-betrag .th-filter-op {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--muted);
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    cursor: pointer;
}

.th-filter-betrag .th-filter-op:hover {
    background: var(--secondary);
}

.th-filter-betrag .th-filter-op.is-active {
    border-color: var(--primary);
    color: var(--primary);
}

.th-filter-betrag .th-filter-input {
    min-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    text-align: right;
}

/* ===== Datum-Filter (Popover am Spalten-Header) =====
   Trigger ist ein <div> in der th-Zelle, Popover öffnet via JS-Interop
   (popover-position.js) als position:fixed. Pflicht: font-weight: 400 am
   Trigger, sonst erbt er die 500 von ".data-table th" und der "Zeitraum …"-
   Placeholder wirkt fetter als die Text-Filter-Placeholder daneben. */
.th-date-col {
    position: relative;
    overflow: visible;
}

.th-date-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    width: 100%;
    margin-top: 0.375rem;
    padding: 0.375rem 0.5rem;
    height: 34px;
    box-sizing: border-box;
    font-size: 0.8125rem;
    font-weight: 400;
    border: 1px solid var(--border);
    background-color: var(--card);
    border-radius: var(--radius);
    color: var(--muted-foreground);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.th-date-trigger:hover {
    border-color: var(--primary);
}

.th-date-trigger.has-value {
    color: var(--foreground);
}

.th-date-trigger.is-active {
    border-color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.th-date-display {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.date-chevron {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: #999;
}

.date-popover-overlay {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.date-popover-container {
    display: grid;
    grid-template-columns: auto auto;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.date-popover-presets {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 170px;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}

.date-presets-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.5rem 0.375rem;
}

.date-preset-btn {
    font-size: 0.8125rem;
    padding: 0.4rem 0.625rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--foreground);
    white-space: nowrap;
}

.date-preset-btn:hover {
    background: var(--muted);
}

.date-preset-btn.active {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    font-weight: 500;
}

.date-popover {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 220px;
}

.date-popover-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Uhrzeit neben dem Datum (DatumFilter MitUhrzeit, Erfassungszeitpunkt) */
.date-popover-row .date-zeit {
    width: 6.25rem;
    flex: none;
}

.date-popover-row label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    width: 28px;
    flex-shrink: 0;
}

.date-popover-row .date-input {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

.date-popover-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
}

.date-popover-apply {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: var(--primary);
    color: var(--primary-foreground);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
}

.date-popover-apply:hover {
    opacity: 0.9;
}

.date-popover-clear {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0.4rem 0.75rem;
}

.date-popover-clear:hover {
    color: var(--foreground);
    border-color: var(--foreground);
}

/* Optionale Selected-Row-Markierung - 3px Primary-Border links + leichter
   Primary-Tint. Wird auf `<tr class="selected">` angewendet. */
.data-table tbody tr.selected {
    background-color: color-mix(in srgb, var(--primary) 8%, var(--card)) !important;
    box-shadow: inset 3px 0 0 var(--primary);
}

/* Empty-State-Zeile innerhalb der Tabelle */
.data-table .empty-state-row td {
    padding: 2.5rem 0.75rem;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--muted-foreground);
    text-align: center;
}

/* Leerzustand als eigene Karte (nicht in einer Tabellenzeile): Innenabstand wie die Leerzeile einer Liste (03.11.2026). */
.card.empty-state {
    padding: 2.5rem 1.5rem;
}

/* Zelle mit Ellipsis - funktioniert nur in data-table-fixed (table-layout: fixed). */
.data-table .cell-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Action-Spalte (icon-only Buttons rechts in der Zeile). Header-Label und
   Body-Buttons rechtsbündig. Gap entsteht durch margin-left an Buttons,
   damit der `<td>` als table-cell-Layout intakt bleibt. */
.data-table .cell-actions {
    text-align: right;
    white-space: nowrap;
}

.data-table td.cell-actions .action-btn + .action-btn {
    margin-left: 0.25rem;
}

/* ---------- Cards ---------- */

.card {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
    width: 100%;
}

.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    font-weight: var(--font-weight-medium);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    /* Mittig statt an der Grundlinie: ein Spinner (ohne Text) im Button verschiebt ihn sonst neben anderen Buttons. */
    vertical-align: middle;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}

.btn:hover {
    background-color: var(--muted);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--primary) 85%, #000);
    border-color: color-mix(in srgb, var(--primary) 85%, #000);
}

.btn-secondary {
    background-color: var(--card);
    color: var(--foreground);
    border-color: var(--border);
}

.btn-secondary:hover {
    background-color: var(--muted);
}

/* Warme Markenfarbe (CI-Rot): Löschen als Kontur statt Fläche, sonst sind Löschen und
   Primäraktion zwei gleich helle rote Flächen (STANDARDS.md 3.3). */
.btn-danger {
    background-color: var(--card);
    color: #991b1b;
    border-color: var(--destructive);
}

.btn-danger:hover {
    background-color: #fee2e2;
    border-color: var(--destructive);
    color: #991b1b;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.action-btn:hover {
    background-color: var(--muted);
}

.action-btn-danger:hover {
    background-color: #fee2e2;
    color: var(--destructive);
}

.action-bar-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    white-space: nowrap;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
}

.action-bar-title-with-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* Dezente Datensatznavigation: "12 von 554" mit kleinen Pfeilen fuer vorherigen/naechsten Datensatz */
.datensatz-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Pfeile in der Standardgroesse der Aktionsknoepfe (28px), wie in der Vorgangsansicht. */
.datensatz-nav .action-btn {
    display: inline-flex;
}

/* In der Aktionsleiste: etwas Luft zu den Knoepfen daneben. */
.action-bar > .datensatz-nav {
    margin-right: 0.5rem;
}

.datensatz-nav .action-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ---------- Forms ---------- */

.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--input-background);
    color: var(--foreground);
    outline: none;
    transition: border-color 0.15s ease;
}

.form-input:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 15%, transparent);
}

.form-input[readonly],
.form-input:read-only {
    background-color: var(--background);
    color: var(--muted-foreground);
    cursor: default;
    border-color: var(--border);
}

.form-input[readonly]:focus,
.form-input:read-only:focus {
    border-color: var(--border);
    box-shadow: none;
}

.form-select {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--input-background);
    color: var(--foreground);
    outline: none;
    cursor: pointer;
}

.form-select:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 15%, transparent);
}

.form-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-normal);
    color: var(--muted-foreground);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--foreground);
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.alert-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background-color: #dcfce7;
    color: #166534;
    font-size: 0.875rem;
    border-radius: var(--radius);
}

.filter-label {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
    white-space: nowrap;
}

/* ---------- Pagination ---------- */

.pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pagination-btn:hover {
    background-color: var(--muted);
}

.pagination-btn-active {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.pagination-btn-active:hover {
    background-color: color-mix(in srgb, var(--primary) 85%, #000);
}

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.pagination-left,
.pagination-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.pagination-range {
    font-variant-numeric: tabular-nums;
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    color: var(--muted-foreground);
    user-select: none;
}

/* Page-Size-Select in der Pagination-Card - eigenständig (nicht von
   .th-filter-select abgeleitet, sonst sind Höhe/Padding/Width vermischt). */
.page-size-select {
    height: 34px;
    box-sizing: border-box;
    padding: 0 1.75rem 0 0.625rem;
    font-size: 0.875rem;
    line-height: 1;
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--foreground);
    border-radius: var(--radius);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 14px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-size-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* Vertikaler Abstand zwischen Tabellen-Card und Pagination-Card. */
.list-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---------- Detail-Page ---------- */

.detail-card {
    padding: 1.5rem 2rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 2rem;
    row-gap: 0.625rem;
    margin: 0;
    font-size: 0.875rem;
}

.detail-grid dt {
    color: var(--muted-foreground);
    font-weight: var(--font-weight-medium);
    margin: 0;
}

.detail-grid dd {
    margin: 0;
    color: var(--foreground);
}

/* ---------- Navigation ---------- */

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    height: 40px;
    font-size: 0.875rem;
    color: var(--sidebar-foreground);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background-color 0.15s ease;
}

.nav-link:hover {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
    text-decoration: none;
}

.nav-link-active,
.nav-link.active {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
    box-shadow: inset 4px 0 0 var(--sidebar-primary);
}

.nav-link-active:hover,
.nav-link.active:hover {
    background-color: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

/* ---------- Tree / Nav-Row ---------- */
/* Flat + Tree-Items teilen sich die gleiche nav-link-Struktur.
   Active-Indicator (4px box-shadow) sitzt am Sidebar-Rand.
   Folder-Expand-Chevron ist rechts, damit das Icon direkt
   neben dem Indicator steht. */

.tree-link-folder {
    cursor: pointer;
}

.tree-chevron-right {
    margin-left: auto;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

.tree-chevron-open {
    transform: rotate(90deg);
}

.tree-children {
    position: relative;
    margin-left: 16px;
}

.tree-children::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background-color: var(--sidebar-border);
}

/* Collapsed Sidebar: Baumkinder werden komplett ausgeblendet - nur
   Level-0-Folder bleiben als Icons sichtbar. Dadurch fluchtet jedes
   sichtbare Icon mit den flachen NavLinks. */
.tree-children.sidebar-collapsed {
    display: none;
}

/* Collapsed Sidebar: Chevron am Folder-Header raus, sonst wuerde
   `margin-left: auto` das Folder-Icon aus der zentrierten Spur druecken. */
.nav-collapsed .tree-chevron-right {
    display: none;
}

/* ---------- Icon sizes ---------- */

.icon-sm {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.icon-md {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.icon-lg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* ---------- Blazor ReconnectModal ---------- */

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal:not([open]) {
    display: none;
}

#components-reconnect-modal {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    color: var(--foreground);
    font-size: 0.875rem;
}

#components-reconnect-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button {
    border: 0;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

#components-reconnect-modal button:hover {
    background-color: color-mix(in srgb, var(--primary) 85%, #000);
}

.components-rejoining-animation {
    position: relative;
    width: 60px;
    height: 60px;
}

.components-rejoining-animation div {
    position: absolute;
    border: 3px solid var(--primary);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation {
    0%, 4.9% {
        top: 30px; left: 30px; width: 0; height: 0; opacity: 0;
    }
    5% {
        top: 30px; left: 30px; width: 0; height: 0; opacity: 1;
    }
    100% {
        top: 0; left: 0; width: 60px; height: 60px; opacity: 0;
    }
}

/* ---------- Formular-spezifisch (kompakte Inputs/Labels) ---------- */

.formular .form-input {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    height: 1.75rem;
    min-height: 1.75rem;
    max-height: 1.75rem;
    box-sizing: border-box;
    line-height: 1.2;
}

.formular .form-label {
    font-size: 0.6875rem;
    margin-bottom: 0.125rem;
    padding: 0 2px;
    color: var(--muted-foreground);
    font-weight: var(--font-weight-normal);
    display: block;
}

.formular input[type="date"].form-input {
    padding: 0 0.5rem;
    line-height: 1.75rem;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.formular input[type="date"].form-input::-webkit-datetime-edit {
    padding: 0;
    line-height: 1.75rem;
}

.formular input[type="date"].form-input::-webkit-calendar-picker-indicator {
    padding: 0;
    margin: 0;
}

/* ---------- Text Picker (PDF → Input) ---------- */
/* Cursor im PDF bleibt unverändert (Text-Selektion bleibt natürlich) */

/* ---------- Animations ---------- */

/* Lade-Spinner: neutraler rotierender Ring. Ersetzt im Ladezustand ein Icon -
   Icons selbst drehen NIE (UI-Standard). Erbt die Farbe via currentColor. */
.spinner {
    display: inline-block;
    flex: none;
    /* Rand innerhalb der 16/20 px: sonst wird ein Button mit Spinner höher als ohne. */
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}

.spinner-sm { width: 16px; height: 16px; }
.spinner-md { width: 20px; height: 20px; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- Login page ---------- */

.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--sidebar);
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}

.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.login-logo-img {
    height: 88px;
    width: auto;
}

.login-title {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--foreground);
}

.login-field {
    margin-bottom: 1rem;
}

.login-btn {
    width: 100%;
    margin-top: 0.5rem;
}

.login-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    margin-bottom: 1rem;
    background-color: #fee2e2;
    color: #991b1b;
    font-size: 0.875rem;
    border-radius: var(--radius);
}

.login-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.6875rem;
    color: var(--sidebar-foreground);
    opacity: 0.5;
    line-height: 1.6;
}

.login-version {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.login-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* ---------- Blazor-specific ---------- */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuOTI5IDUxLjMwNCAyNjYuOTQgNTEuOTE0TDI4OS45MDcgNjUuNzA0QzI5MS4xMTkgNjYuMzE0IDI5Mi4xMjkgNjcuMjI4IDI5Mi43MzcgNjguMzY5TDMwNC4yMDIgODcuNjE0QzMwNS4wMzQgODkuNDMxIDMwNS4wMzQgOTEuNTUxIDMwNC4yMDIgOTMuMzY5TDI4OS4yNDYgOTMuMzY5QzI5MC4wNzggOTEuNTUxIDI5MC4wNzggODkuNDMxIDI4OS4yNDYgODcuNjE0TDI3Ny43ODEgNjguMzY5QzI3Ny4xNzMgNjcuMjI4IDI3Ni4xNjMgNjYuMzE0IDI3NC45NTEgNjUuNzA0TDI1MS45ODQgNTEuOTE0QzI1Mi45OTUgNTEuMzA0IDI1NC4yMDYgNTEgMjU1LjQxOCA1MUwyNjMuNTA2IDUxWiIgZmlsbD0iI0ZGNDQzMyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--destructive);
}

/* FinCenter - Utility: gedaempfter Beschreibungstext */
.muted {
    color: var(--muted-foreground);
}

/* FinCenter - Kachel-/KPI-Grid */
.fc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}
.fc-section-title {
    margin: 1.5rem 0 0.75rem;
}
.fc-section-title:first-child {
    margin-top: 0;
}

/* FinCenter - Standardtabelle */
.fc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.fc-table th { text-align: left; font-weight: var(--font-weight-medium); color: var(--muted-foreground); padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
.fc-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); }
.fc-table tr:last-child td { border-bottom: none; }
.fc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table th.fc-num { text-align: right; }
/* Datum: Ziffern gleicher Breite, linksbündig unter der Überschrift. */
.fc-tab { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Ablageziele fuer Drag & Drop von Dateien (wwwroot/js/dateiablage.js setzt body.fc-drag) ---- */
.drop-ziel {
    position: relative;
}

.drop-ziel input[type=file].drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

body.fc-drag .drop-ziel input[type=file].drop-input {
    pointer-events: auto;
    z-index: 5;
    cursor: copy;
}

body.fc-drag .drop-ziel {
    outline: 2px dashed var(--primary);
    outline-offset: -3px;
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* ---- Verzeichnispfad kopieren (Components/Shared/PfadKopieren) ---- */
.action-btn.pfad-kopieren {
    display: inline-flex;
    flex: none;
    position: relative;
    z-index: 1;
    opacity: 0.6;
}

.action-btn.pfad-kopieren:hover {
    opacity: 1;
}

.action-btn.pfad-kopiert {
    opacity: 1;
    color: #15803d;
}

.pfad-kopiert-text {
    margin-left: 0.2rem;
    font-size: 0.72rem;
}

.action-btn.pfad-kopiert {
    width: auto;
    padding: 0 0.3rem;
}

/* Hinweis, wenn eine Datei lokal nicht geoeffnet werden kann (js/lokal-oeffnen.js). */
.lokal-hinweis {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1100;
    max-width: min(32rem, calc(100vw - 2rem));
    padding: 0.85rem 1rem;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-left: 4px solid #d97706;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    font-size: 0.875rem;
}

.lokal-hinweis-text {
    font-weight: 600;
}

.lokal-hinweis-pfad {
    margin-top: 0.35rem;
    color: var(--muted-foreground, #6b7280);
    font-size: 0.8125rem;
    word-break: break-all;
}

.lokal-hinweis-knoepfe {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* Reiter über einer Seite (Shared/Reiter.razor) */
.reiter {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
}

.reiter-link {
    padding: 0.45rem 0.9rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.reiter-link:hover {
    color: var(--foreground);
}

.reiter-link.active {
    color: var(--foreground);
    border-bottom-color: var(--primary);
}

/* Schiebeschalter fuer Ja/Nein-Angaben: <label class="schalter"><input type="checkbox" role="switch" /><span class="schalter-bahn"></span><span>Text</span></label> */
.schalter {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--foreground);
    user-select: none;
}

.schalter input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.schalter-bahn {
    position: relative;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--border);
    transition: background-color 0.15s ease;
}

.schalter-bahn::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.schalter input:checked + .schalter-bahn {
    background: var(--primary);
}

.schalter input:checked + .schalter-bahn::after {
    transform: translateX(1rem);
}

.schalter input:focus-visible + .schalter-bahn {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* ---------- Einstellungen: schmale Stammdaten-Formulare im Modal ---------- */

.st-hinweis {
    margin: 0 0 1rem;
    max-width: 60rem;
    font-size: 0.9rem;
}

.st-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

.st-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--muted-foreground);
}

.st-form label.st-schalter {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--foreground);
}

.st-form label.st-check {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    align-self: end;
    padding-bottom: 0.55rem;
    font-size: 0.875rem;
    color: var(--foreground);
}

.st-fehler {
    margin: 0.5rem 0 0;
    color: var(--destructive);
}

/* ---------- Dokumente ---------- */

.ds-suche {
    max-width: 40rem;
    margin-bottom: 1rem;
}

.pk-frage {
    white-space: nowrap;
    font-size: 0.875rem;
}

/* Kennzeichen (z. B. "Pflicht", "von Hand abhaken"): global, damit Anlagen und Cockpit dasselbe Aussehen haben. */
.tag {
    font-size: 0.7rem;
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    color: var(--muted-foreground);
}

.text-right {
    text-align: right;
}

/* ---------- Kennzahlen oben auf einer Seite (StatCard) ---------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi-vier {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Vier Kacheln (AP 7a): unter 1100 px 2×2, auf dem Handy untereinander. Zahlen brechen nie um (StatCard). */
@media (max-width: 1100px) {
    .kpi-vier {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .kpi-vier {
        grid-template-columns: minmax(0, 1fr);
    }
}

.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Große Ablagefläche für Dateien (ZIP, JSON, PDF): das Eingabefeld liegt unsichtbar darüber. */
.drop-flaeche {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 9rem;
    border: 2px dashed var(--border);
    background: var(--card);
    color: var(--muted-foreground);
    transition: border-color 0.15s, color 0.15s;
}

.drop-flaeche:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.drop-flaeche input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.drop-flaeche-titel {
    font-size: 1.05rem;
    color: var(--foreground);
}

/* Segment-Umschalter (z. B. ESt | USt in der Action-Bar) */
.segment {
    display: inline-flex;
    border: 1px solid var(--border);
    background: var(--card);
}

.segment-knopf {
    padding: 0.45rem 0.9rem;
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 0.875rem;
}

.segment-knopf + .segment-knopf {
    border-left: 1px solid var(--border);
}

.segment-knopf.aktiv {
    background: var(--primary);
    color: var(--primary-foreground);
}

/* ===== Einstellungen (Stammdaten, Ämter): gemeinsame Bausteine ===== */
.st-kopf { display: flex; align-items: center; gap: 1rem; min-width: 0; font-size: 0.875rem; color: var(--muted-foreground); }
.st-kopf strong { color: var(--foreground); font-variant-numeric: tabular-nums; }
.st-kopf .badge { align-self: center; }
.st-kopf .st-hinweis { margin: 0; }
.st-hinweis { padding: 0.0625rem 0.375rem; font-size: 0.75rem; background: var(--dlv-papier); color: var(--dlv-grau); }
.st-nr { color: var(--foreground); font-variant-numeric: tabular-nums; }
.st-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1.25rem; }
.st-form label { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.st-breit { grid-column: 1 / -1; }
.st-fehler { margin-top: 1rem; padding: 0.625rem 0.875rem; background: #fee2e2; color: #991b1b; font-size: 0.875rem; }
.st-luecke { flex: 1; }
.st-schalter { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
.st-wahl { display: flex; gap: 1.25rem; }
@media (max-width: 1100px) { .st-hinweis { display: none; } }

/* Ganze Tabellenzeile als echter Link (mittlere Maustaste, neuer Tab; Daniel 03.11.2026): der Link steht in einer Zelle und
   wird mit ::after über die Zeile gespannt. */
tr.zeile-link {
    position: relative;
    cursor: pointer;
}

a.zeile-link-ziel {
    color: inherit;
    text-decoration: none;
}

a.zeile-link-ziel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.data-table tbody tr.zeile-link:hover > td {
    background-color: color-mix(in srgb, var(--muted) 60%, transparent);
}

/* Rückfragen vor dem Löschen (Daniel 07.11.2026): Am Desktop fragt der Dialog bzw. der Knopf selbst („Wirklich
   löschen?“), die Zelle mit der Handy-Leiste fehlt dort; am Handy umgekehrt (Regeln im Handy-Block unten). */
td.lb-zelle,
.nur-schmal {
    display: none;
}

/* ===== Handy (unter 700 px, Shell mobil 06.11.2026): gemeinsame Regeln für alle Seiten =====
   Nur per Breakpoint, am Desktop ändert sich nichts. Seitenleiste und Reiter ersetzt das Menü in MainLayout.razor.css. */
@media (max-width: 700px) {
    /* Eingaben mit 16 px: iOS vergrößert die Seite beim Antippen kleinerer Felder. Gilt für jedes Textfeld, auch wo eine
       Seite oder ein kompaktes Formular kleiner schreibt, darum mit !important. Tippflächen mindestens 44 px. */
    input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
    select,
    textarea {
        font-size: 16px !important;
    }

    input.form-input:not([type=checkbox]):not([type=radio]):not([type=file]),
    select.form-input,
    select.form-select,
    input.th-filter-input,
    select.th-filter-select,
    select.page-size-select,
    .btn,
    .btn.btn-sm {
        min-height: 44px;
    }

    .action-btn {
        width: 44px;
        height: 44px;
    }

    /* Datumsfelder: das native iOS-Feld hat keine eigene Breite und keine Mindesthöhe. */
    input[type=date].form-input {
        -webkit-appearance: none;
        appearance: none;
        min-width: 0;
    }

    /* Aktionsleiste: Titel oben, Schaltflächen umbrechend darunter; Suche über die volle Breite. */
    .action-bar {
        padding: 0.5rem 1rem;
        row-gap: 0.5rem;
    }

    .action-bar .action-bar-title {
        white-space: normal;
    }

    .action-bar input[type=search].form-input,
    .action-bar input.form-input.voll-mobil {
        flex: 1 1 100%;
        width: auto;
        order: 1;
    }

    .action-bar > .btn,
    .action-bar label.btn {
        order: 2;
    }

    /* Formulare der Einstellungen einspaltig. */
    .st-form {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Dialog-Fuß: Schaltflächen umbrechen statt hinauszuragen. */
    .form-actions {
        flex-wrap: wrap;
    }

    /* ----- Listen als Karten -----
       Jede .data-table wird zur Kartenliste: die erste Zelle (oder td.karte-titel) ist der Titel, die Zelle mit
       Aktionsknöpfen steht rechts daneben, alle übrigen Zellen fließen gedämpft darunter. Zellen mit data-label zeigen
       ihre Bezeichnung davor, td/th.karte-aus fehlen am Handy. Der Tabellenkopf entfällt; hat er Filter, wird er zur
       Filterleiste (nur die Spalten mit Filter). */
    .card:has(> .data-table),
    .scroll-rand:has(> .data-table) {
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: visible;
    }

    table.data-table,
    table.data-table > tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    table.data-table > colgroup,
    table.data-table > thead {
        display: none;
    }

    table.data-table > thead:has(input, select) {
        display: block;
    }

    table.data-table > thead:has(input, select) > tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        background: var(--card);
        border: 1px solid var(--border);
    }

    table.data-table > thead:has(input, select) > tr > th {
        display: block;
        flex: 1 1 6rem;
        width: auto;
        min-width: 0;
        padding: 0;
        border: none;
        background: transparent;
        position: static;
        text-align: left;
    }

    table.data-table > thead > tr > th:not(:has(input, select)),
    table.data-table .karte-aus {
        display: none;
    }

    table.data-table > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.75rem;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        background: var(--card);
        border: 1px solid var(--border);
    }

    /* Zeilenumbruch nach Titel und Aktionen; alles Weitere folgt darunter. */
    table.data-table > tbody > tr::before {
        content: "";
        flex-basis: 100%;
        height: 0;
    }

    table.data-table > tbody > tr:hover {
        background: var(--card);
    }

    table.data-table > tbody > tr > td {
        display: block;
        width: auto;
        min-width: 0;
        max-width: 100%;
        padding: 0;
        border: none;
        background: transparent;
        text-align: left;
        font-size: 0.8125rem;
        color: var(--muted-foreground);
    }

    table.data-table > tbody > tr > td:empty {
        display: none;
    }

    table.data-table > tbody > tr:not(:has(> td.karte-titel)) > td:first-child,
    table.data-table > tbody > tr > td.karte-titel {
        order: -2;
        flex: 1 1 0;
        font-size: 0.9375rem;
        font-weight: var(--font-weight-medium);
        color: var(--foreground);
    }

    table.data-table > tbody > tr > td:last-child:has(.action-btn) {
        order: -1;
        flex: none;
        margin: -0.5rem -0.5rem -0.5rem 0;
        white-space: nowrap;
    }

    table.data-table > tbody > tr > td[data-label]::before {
        content: attr(data-label) " ";
        color: var(--muted-foreground);
    }

    table.data-table > tbody > tr.empty-state-row {
        display: block;
    }

    table.data-table > tbody > tr.empty-state-row::before {
        content: none;
    }

    table.data-table > tbody > tr.empty-state-row > td {
        display: block;
        font-size: 0.875rem;
    }

    /* Rückfrage vor dem Löschen in einer Tabellenzeile: eigene Zelle unten in der Karte (Rueckfrage). */
    table.data-table > tbody > tr > td.lb-zelle {
        display: block;
        flex: 1 1 100%;
        order: 5;
        font-size: inherit;
        color: var(--foreground);
        white-space: normal;
    }

    /* In der Aktionsleiste (Mitglied) steht die Leiste unter den Knöpfen, die dort order: 2 haben. */
    .action-bar .lb-leiste {
        order: 3;
    }

    .nur-breit {
        display: none;
    }

    .nur-schmal {
        display: inline;
    }
}

/* ----- Lesefassung eines Protokolls (Markdown, Services/Lesefassung.cs) -----
   Gilt in der Anzeige und in der Vorschau beim Bearbeiten. Beschlüsse (Zitatblock „Beschluss“) als Kasten in CI-Rot,
   Tabellen in einem Rahmen, der seitlich rollt, damit die Seite am Handy nicht breiter wird. */
.lesefassung {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--foreground);
    overflow-wrap: anywhere;
}

.lesefassung > :first-child {
    margin-top: 0;
}

.lesefassung h1,
.lesefassung h2,
.lesefassung h3,
.lesefassung h4 {
    margin: 1.5rem 0 0.5rem;
    line-height: 1.3;
}

.lesefassung h1 { font-size: 1.25rem; }
.lesefassung h2 {
    font-size: 1.0625rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}
.lesefassung h3 { font-size: 1rem; }
.lesefassung h4 { font-size: 0.9375rem; }

.lesefassung p,
.lesefassung ul,
.lesefassung ol {
    margin: 0 0 0.75rem;
}

.lesefassung ul,
.lesefassung ol {
    padding-left: 1.25rem;
}

.lesefassung li + li {
    margin-top: 0.2rem;
}

.lesefassung blockquote {
    margin: 0.75rem 0;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--border);
    background: var(--muted);
}

.lesefassung blockquote > :last-child {
    margin-bottom: 0;
}

.lesefassung blockquote.beschluss {
    border-left: 4px solid var(--primary);
    background: var(--accent);
}

.lesefassung blockquote.beschluss strong:first-child {
    color: var(--dlv-rot-dunkel);
}

.lesefassung .lf-tabelle {
    max-width: 100%;
    margin: 0 0 0.75rem;
    overflow-x: auto;
    border: 1px solid var(--border);
}

.lesefassung table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.lesefassung th,
.lesefassung td {
    overflow-wrap: normal;
    min-width: 6rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.lesefassung th {
    background: var(--muted);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.lesefassung tr:last-child td {
    border-bottom: none;
}

.lesefassung td:first-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lesefassung a {
    color: var(--primary);
}

.lesefassung hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.25rem 0;
}

/* Fundstellen der Suche (Liste und Lesefassung). */
mark.treffer {
    padding: 0 0.1em;
    background: #fde68a;
    color: inherit;
}

/* „Neu“-Knopf einer Liste: am Desktop in der Aktionsleiste rechts, am Handy rechts in der Titelzeile (Daniel 07.11.2026).
   Die Seite rendert ihn zweimal: .kopf-neu-desktop rechts, .kopf-neu-handy im Titel (.st-kopf). */
.kopf-neu-handy { display: none; }

@media (max-width: 700px) {
    .kopf-neu-desktop { display: none !important; }
    .st-kopf:has(.kopf-neu-handy) { width: 100%; }
    .kopf-neu-handy { display: inline-flex; margin-left: auto; flex: none; min-height: 44px; }
}

/* Handy: Hat die Aktionsleiste zwei oder mehr Knöpfe (z. B. Abbrechen und Speichern), steht der Titel allein in der
   ersten Zeile und die Knöpfe gemeinsam in der zweiten, gleich breit (Daniel 07.11.2026: „Abbrechen und Speichern in
   einer Zeile“). Ein einzelner Knopf bleibt neben dem Titel. */
@media (max-width: 700px) {
    .action-bar:has(> .btn:not(.kopf-neu-desktop) ~ .btn:not(.kopf-neu-desktop)) > :first-child {
        flex: 1 1 100%;
        min-width: 0;
    }

    .action-bar:has(> .btn:not(.kopf-neu-desktop) ~ .btn:not(.kopf-neu-desktop)) > .btn:not(.kopf-neu-desktop) {
        flex: 1 1 0;
        justify-content: center;
        min-height: 44px;
    }
}

/* Handy: Steht der Titel allein in der ersten Zeile, darf der Platzhalter der Aktionsleiste die zweite Zeile nicht
   verkürzen (Filter und Knöpfe sonst nicht voll breit). */
@media (max-width: 700px) {
    .action-bar:has(.kopf-neu-handy) > .action-bar-spacer,
    .action-bar:has(> .btn:not(.kopf-neu-desktop) ~ .btn:not(.kopf-neu-desktop)) > .action-bar-spacer {
        display: none;
    }
}

/* Schreibtool: Hinweis „Noch nicht alles gespeichert …“ (.pt-offline, sonst ausgeblendet in ProtokollSchreiben.razor.css)
   nur bei ungesendeten Eingaben; die Klasse am body setzt js/protokoll.js. Global, weil body außerhalb der Komponente liegt
   (:global gibt es in Blazor-Scoped-CSS nicht, die Regel fiel dort still weg). */
body.pt-ungesendet .pt-offline {
    display: flex;
}