/* ==========================================================================
   S3.DocCenter - Theme & Base Styles
   Based on S3.NorthDataAutoExporter design system
   ========================================================================== */

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

:root {
    --font-size: 16px;
    --background: #fafafa;
    --foreground: #1f1f1f;
    --card: #ffffff;
    --card-foreground: #1f1f1f;
    --popover: #ffffff;
    --popover-foreground: #1f1f1f;
    --primary: #0C5DA6;
    --primary-foreground: #ffffff;
    --secondary: #f5f5f5;
    --secondary-foreground: #1f1f1f;
    --muted: #f0f0f0;
    --muted-foreground: #6b6b6b;
    --accent: #e6f7ff;
    --accent-foreground: #0C5DA6;
    /* #c62828 statt des frueheren #ff4444: Weiss auf #ff4444 ergibt 3,41:1 und
       verfehlt WCAG AA (4,5:1). Das Icon in .action-btn-danger:hover lag mit
       2,79:1 sogar unter der 3:1-Grenze für Bedienelemente. #c62828 erreicht
       5,62:1 bzw. 4,60:1. Siehe STANDARDS.md, Abschnitt Farben. */
    --destructive: #c62828;
    --destructive-foreground: #ffffff;
    --border: #e8e8e8;
    --input: transparent;
    --input-background: #ffffff;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --ring: #0C5DA6;
    --radius: 0;
    --sidebar: #333333;
    --sidebar-foreground: #e8e8e8;
    --sidebar-primary: #0C5DA6;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #3a3a3a;
    --sidebar-accent-foreground: #ffffff;
    --sidebar-border: #444444;
    --sidebar-ring: #0C5DA6;
    --sidebar-submenu: #2b2b2b;
}

/* ---------- 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;
}

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

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;
}

/* ---------- 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%; }
}

.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;   }

/* ---------- 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);
}

/* ---------- 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 für
   Row-Click-Navigation. Action-Buttons in der Zelle haben
   `@onclick:stopPropagation`, damit sie nicht doppelt navigieren. */
.data-table tbody tr.clickable {
    cursor: pointer;
}

/* 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);
}

/* 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;
}

/* ===== 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;
}

.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;
}

/* 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;
    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);
}

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

.btn-danger:hover {
    background-color: #a52121;
    border-color: #a52121;
}

.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;
}

/* ---------- 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.375rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--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;
}

/* ---------- 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 (STANDARDS.md § Icons). Erbt die Farbe via currentColor. */
.spinner {
    display: inline-block;
    flex: none;
    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); }
}

/* Rotation des Kreispfeil-Symbols im Ladezustand (STANDARDS.md §1 Icons,
   §3.15). Die Klasse wurde in der Showcase an sechs Stellen verwendet, war
   aber nirgends definiert - es drehte sich also nichts, obwohl der Standard
   es vorschreibt. DEVEX.CRM hatte die Regel deshalb selbst nachgebaut.

   Sie gilt ausschliesslich für neutrale Ladesymbole. Ein bedeutungstragendes
   Icon wird im Ladezustand ersetzt, nicht gedreht - dafuer gibt es
   Spinner.razor. */
.spin {
    animation: spin 0.8s linear infinite;
}

/* ---------- 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);
}

/* ---------- Save-Button-Feedback (STANDARDS.md 3.19) ---------- */

.btn--saved,
.btn-primary.btn--saved,
.btn-primary.btn--saved:hover {
    background-color: #0a7d2c;
    border-color: #0a7d2c;
    color: #fff;
}

.btn--saved:disabled,
.btn--saved[disabled] {
    opacity: 1;
    cursor: default;
}

.btn--saved .icon-sm {
    animation: btn-saved-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-saved-pop {
    0%   { transform: scale(0.4) rotate(-20deg); opacity: 0; }
    60%  { transform: scale(1.2) rotate(5deg);   opacity: 1; }
    100% { transform: scale(1) rotate(0);        opacity: 1; }
}

/* Bewusst dunkler als --destructive: sonst sieht der Button aus wie ein
   Loeschen-Button und weisse Schrift wird schlecht lesbar. */
.btn--failed,
.btn-primary.btn--failed,
.btn-primary.btn--failed:hover,
.btn-primary.btn--failed:disabled {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
    opacity: 1;
}

/* ---------- Inline-Rueckmeldung unter Listen und Karten ---------- */

.hinweis-erfolg,
.hinweis-warnung,
.hinweis-fehler {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.hinweis-erfolg {
    background-color: #dcfce7;
    color: #166534;
}

.hinweis-warnung {
    background-color: #fef9c3;
    color: #854d0e;
}

.hinweis-fehler {
    background-color: #fee2e2;
    color: #991b1b;
}

/* ---------- Info-Karte: Erklärtext unter dem eigentlichen Inhalt ---------- */

.hinweis-karte {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 1.5rem;
    padding: 0.875rem 1.25rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.hinweis-karte svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.hinweis-karte p {
    margin: 0;
    max-width: 95ch;
}

/* ---------- Ergänzungen DS.Familienküche ---------- */

/* Seiten-Zwischenüberschrift zwischen Karten (in STANDARDS.md 1 genannt, in der Showcase nicht definiert) */
.fc-section-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    margin: 0 0 0.75rem;
}

/* iOS Safari zoomt beim Fokus in Felder unter 16px Schriftgröße - auf dem Handy daher 16px */
@media (max-width: 768px) {
    .form-input,
    .form-select {
        font-size: 16px;
    }
}

/* ===== Familienküche: Familiendaten (Favorit, Sterne) ===== */
:root {
    --fk-favorit: #c62828;
    --fk-stern: #a15c00; /* Bernstein, 4,9:1 auf Weiß */
}

/* Lucide-Icons sind Umrisse; .gefuellt füllt sie (Herz, Stern im aktiven Zustand) */
.gefuellt {
    fill: currentColor;
}

.favorit-farbe {
    color: var(--fk-favorit);
}

.stern-farbe {
    color: var(--fk-stern);
}

/* ===== Bild-Zoom der Rezeptansicht (karussell.js hängt die Ebene direkt an body) ===== */
.karussell-folie img {
    cursor: zoom-in;
}

.bild-zoom {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.92);
}

.bild-zoom-spur {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.bild-zoom-folie {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.bild-zoom-folie img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bild-zoom-schliessen,
.bild-zoom-pfeil {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.bild-zoom-schliessen {
    top: 0.5rem;
    right: 0.5rem;
}

.bild-zoom-pfeil {
    top: 50%;
    transform: translateY(-50%);
}

.bild-zoom-pfeil.links {
    left: 0.5rem;
}

.bild-zoom-pfeil.rechts {
    right: 0.5rem;
}

.bild-zoom-zaehler {
    position: absolute;
    top: 1.25rem;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    pointer-events: none;
}

@media (hover: none) {
    .bild-zoom-pfeil {
        display: none;
    }
}

/* ===== Filter-Bar nach STANDARDS.md 3.8 (global, weil Rezeptliste und Dialoge sie nutzen) ===== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-family: inherit;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
    cursor: pointer;
}

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

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

/* ===== Mahlzeit-Etikett (Frühstück / Mittag / Abend) im Wochen- und Monatsplan ===== */
.mahlzeit-etikett {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary);
    margin-right: 0.375rem;
}

/* ===== Küchentimer im Kochmodus (koch.js hängt die Leiste direkt an body) ===== */
.koch-timer {
    position: fixed;
    right: 0.75rem;
    top: 4.25rem; /* unter der Kopfzeile des Kochmodus, verdeckt nicht die Blätter-Knöpfe */
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-width: calc(100vw - 1.5rem);
}

.koch-timer-zeile {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.5rem 0.5rem 0.875rem;
    background: var(--sidebar);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.koch-timer-text {
    font-size: 0.8125rem;
    opacity: 0.85;
}

.koch-timer-zeit {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    min-width: 3.5rem;
    text-align: right;
}

.koch-timer-aus {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}

.koch-timer-zeile.fertig {
    background: #c62828;
    animation: koch-timer-blinken 1s ease-in-out infinite;
}

@keyframes koch-timer-blinken {
    50% { opacity: 0.6; }
}

/* ===== Drucken (A4): nur Inhalt, keine Bedienelemente ===== */
.nur-druck {
    display: none;
}

@page {
    size: A4 portrait;
    margin: 15mm;
}

/* Monatsplan passt nur quer aufs Blatt - benannte Seite, damit andere Seiten hochkant bleiben */
@page monat {
    size: A4 landscape;
    margin: 10mm;
}

@media print {
    html,
    body {
        height: auto !important;
        background: #fff !important;
        font-size: 10.5pt;
    }

    .nur-druck {
        display: block !important;
    }

    .nur-bildschirm,
    .main-header,
    .sidebar,
    .sidebar-backdrop,
    .action-bar,
    .koch-timer,
    .bild-zoom,
    #blazor-error-ui,
    #components-reconnect-modal,
    button,
    .btn,
    .action-btn,
    select,
    input,
    textarea {
        display: none !important;
    }

    /* Layout-Container scrollen am Bildschirm selbst - im Druck muss alles in den Dokumentfluss */
    .app-root,
    .layout,
    .main-content,
    .content-area,
    .container-wide,
    .container-standard {
        display: block !important;
        height: auto !important;
        max-width: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    a {
        color: inherit !important;
        text-decoration: none !important;
    }

    h1,
    h2,
    h3 {
        break-after: avoid;
    }

    .druck-fuss {
        margin-top: 6mm;
        font-size: 8pt;
        color: #666;
    }
}