/**
 * Filament Admin Custom Styles
 * Warm-Office Theme (synchron mit Flutter DesignTokens)
 *
 * Farben gelten NUR im hellen Modus (html:not(.dark)): Filament schaltet
 * dunkel ueber die Klasse «dark» am html-Element. Eine erzwungene Farbe ohne
 * diese Bedingung nagelte die Seitenleiste auch im Dunkelmodus hell fest
 * (grau auf weiss). Im Dunkelmodus bekommt die Seitenleiste ein warmes
 * Dunkel, der Rest bleibt Filament ueberlassen.
 */

/* ── Layout: Inhalt nutzt die ganze Breite ──
   Filament begrenzt die Breite und rückt mehrfach ein. Hier: keine Breitengrenze,
   nur der Hauptbereich hat einen Rand (Handy 16px, ab Laptop 24px) — früher lag
   der Rand an fünf verschachtelten Ebenen und addierte sich auf dem Handy. */
.fi-main-ctn,
.fi-page-content,
.fi-body,
.fi-page {
    padding-inline: 0;
    margin-inline: 0;
    max-width: 100%;
}
.fi-main {
    padding-inline: 1rem;
    margin-inline: 0;
    max-width: 100%;
}
@media (min-width: 64rem) {
    .fi-main { padding-inline: 1.5rem; }
}

/* ── Kompakt: weniger Luft oben, mehr Platz fürs Papier (Michael 27.09.2026) ──
   Filament setzt über dem Titel und zwischen den Blöcken je 2rem und einen
   3xl-Titel. Auf den Prüfseiten frass das eine Handbreit, die der Seitenreihe
   fehlte. Halbiert, Titel eine Stufe kleiner. Gilt für alle Seiten des Panels.
   Ohne Vorrang-Markierung: Filaments Regeln liegen in @layer components, diese Datei
   liegt in keiner Ebene und gewinnt deshalb von selbst. */
.fi-page-header-main-ctn {
    padding-block: 1rem;
    row-gap: 1rem;
}
.fi-page .fi-header-heading {
    font-size: 1.5rem;
    line-height: 2rem;
}
.fi-page-content {
    row-gap: 1rem;
}
.fi-sidebar-nav {
    padding-block: 1rem;
    row-gap: 1rem;
}

/* ── Warm-Office Feinschliff, heller Modus ── */

/* Hintergrund warm wie die App */
html:not(.dark) .fi-body { background-color: #FAF8F5; }

/* Seitenleiste dunkles Taupe wie die App (Cockpit-Entwurf).
   Filaments Regeln liegen in @layer components — diese gewinnen ohne Vorrang-Markierung. */
html:not(.dark) .fi-sidebar,
html:not(.dark) .fi-body-has-topbar .fi-sidebar-header { background-color: #3D3630; }
html:not(.dark) .fi-sidebar-item-label { color: #EDE8E3; }
html:not(.dark) .fi-sidebar-group-label { color: #D4CCC5; }
html:not(.dark) .fi-sidebar-item-btn > .fi-icon,
html:not(.dark) .fi-sidebar-group-btn .fi-icon,
html:not(.dark) .fi-sidebar-group-collapse-btn .fi-icon { color: #B5A99E; }
html:not(.dark) .fi-sidebar-item-grouped-border-part,
html:not(.dark) .fi-sidebar-item-grouped-border-part-not-first,
html:not(.dark) .fi-sidebar-item-grouped-border-part-not-last { background-color: #6E645A; }
html:not(.dark) .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
html:not(.dark) .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible,
html:not(.dark) .fi-sidebar-group-collapse-btn:hover { background-color: rgba(255, 255, 255, 0.07); }
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: rgba(255, 255, 255, 0.12); }
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: #FFFFFF; }
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part { background-color: #E0B872; }
/* Eingeklappte Leiste: jede Gruppe ist nur ein Symbol-Knopf */
html:not(.dark) .fi-sidebar-group-dropdown-trigger-btn .fi-icon { color: #B5A99E; }
html:not(.dark) .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn .fi-icon { color: #FFFFFF; }
html:not(.dark) .fi-sidebar-group-dropdown-trigger-btn:hover,
html:not(.dark) .fi-sidebar-group-dropdown-trigger-btn:focus-visible { background-color: rgba(255, 255, 255, 0.07); }

/* Cards: warmWeiss statt kalt-weiss */
html:not(.dark) .fi-section,
html:not(.dark) .fi-wi-stats-overview-stat {
    border-color: #E7E5E4 !important;
}

/* Status-Badges: konsistente Warm-Farben */
html:not(.dark) .fi-badge-success { --c-50: 240 253 244; --c-400: 22 163 74; }
html:not(.dark) .fi-badge-danger { --c-50: 254 242 242; --c-400: 220 38 38; }
html:not(.dark) .fi-badge-warning { --c-50: 255 251 235; --c-400: 217 119 6; }

/* Topbar: dezentere Schatten */
html:not(.dark) .fi-topbar {
    box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06) !important;
}

/* Tables: warmBorder */
html:not(.dark) .fi-ta-row {
    border-color: #E7E5E4 !important;
}

/* ── Warm-Office, dunkler Modus: nur die Seitenleiste, warm statt kalt ── */
html.dark .fi-sidebar {
    background-color: #1C1917;
    border-right: 1px solid #292524;
}

html.dark .fi-sidebar-item.fi-active {
    background-color: rgba(214, 200, 180, 0.10);
}

/* Material Symbols */
.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* ── Login Page: Warm-Office Background, heller Modus ── */
html:not(.dark) .fi-simple-layout {
    background-color: #FAF8F5 !important;
}

.fi-simple-main-ctn {
    background: transparent !important;
}

/* Login-Card: warmWeiss mit Schatten */
html:not(.dark) .fi-simple-page {
    background: #FFFFFF !important;
    border: 1px solid #EDE8E3 !important;
    box-shadow: 0 4px 16px rgba(28, 25, 23, 0.06) !important;
}

/* ── Arbeitsplatz: eigene ap-Klassen in den Farben der App ──
   Eigene Klassen statt Filament-Klassen: nichts wird überschrieben, darum
   ohne Vorrang-Markierung. Hell zuerst, Dunkel unter html.dark. */
.ap-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ap-pille { border-radius: 999px; padding: 6px 14px; font-size: 14px; border: 1px solid #D4CCC5; background: #FFFFFF; color: #4A3F35; }
.ap-pille-an { background: #6B5D4A; border-color: #6B5D4A; color: #FFFFFF; font-weight: 600; }
.ap-verlauf { margin-left: auto; font-size: 13px; color: #57534E; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ap-link { color: #527596; text-decoration: underline; font-size: 13px; background: none; border: 0; padding: 0; cursor: pointer; }
.ap-karte { background: #FFFFFF; border: 1px solid #EDE8E3; border-radius: 14px; }
.ap-leise { font-size: 13px; color: #57534E; }
.ap-hinweis { background: #E5EAEF; color: #3E5C78; border-radius: 10px; padding: 8px 14px; font-size: 14px; margin-bottom: 10px; }
.ap-fragen { display: flex; gap: 12px; margin-bottom: 12px; align-items: stretch; }
.ap-frage { flex: 1 1 0; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ap-frage-rand { flex: 0 0 auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: flex-start; }
.ap-frage-text { font-size: 17px; font-weight: 600; color: #1C1917; }
.ap-etikett { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; margin-right: 4px; background: #EEE9E0; color: #6E5220; }
.ap-etikett-kategorie { align-self: flex-start; background: #E5EAEF; color: #3E5C78; }
.ap-quellen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ap-quelle { font-size: 12px; border-radius: 8px; padding: 3px 8px; border: 1px solid #EDE8E3; background: #FAF8F5; color: #44403C; cursor: pointer; }
.ap-quelle-einig { border-color: #597A5D; color: #3F5A43; background: #E6EBE7; }
.ap-quelle-dagegen { border-color: #BC4F4F; color: #8E3B3B; background: #F5E5E5; }
.ap-quelle-keine { cursor: default; color: #57534E; }
.ap-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-knopf { border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 600; border: 1px solid #D4CCC5; background: #FFFFFF; color: #4A3F35; min-height: 40px; }
.ap-knopf:hover { background: #F5F0EB; }
.ap-knopf-haupt { background: #6B5D4A; border-color: #6B5D4A; color: #FFFFFF; }
.ap-knopf-haupt:hover { background: #4A3F35; }
.ap-knopf-leise { font-weight: 500; color: #57534E; }
.ap-taste { font-size: 11px; font-weight: 500; opacity: 0.7; margin-left: 4px; }
.ap-auswahl { border-top: 1px solid #EDE8E3; padding-top: 8px; }
.ap-suche { width: 100%; border: 1px solid #D4CCC5; border-radius: 10px; padding: 8px 12px; font-size: 14px; background: #FFFFFF; color: #1C1917; }
.ap-auswahl-liste { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; align-items: flex-start; }
.ap-fach { font-size: 14px; padding: 3px 8px; border-radius: 6px; background: none; border: 0; color: #1C1917; text-align: left; cursor: pointer; }
.ap-fach:hover { background: #F5F0EB; }
.ap-unten { display: flex; gap: 12px; height: calc(100vh - 330px); min-height: 460px; }
.ap-liste { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; }
.ap-liste-kopf { padding: 10px 14px; border-bottom: 1px solid #EDE8E3; font-size: 13px; color: #57534E; }
.ap-liste-inhalt { overflow-y: auto; flex-grow: 1; }
.ap-zeile { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid #F0EEEC; background: #FFFFFF; cursor: pointer; }
.ap-zeile:hover { background: #FAF8F5; }
.ap-zeile-an { background: #F5F0EB; box-shadow: inset 3px 0 0 #6B5D4A; }
.ap-zeile-titel { font-size: 14px; font-weight: 600; color: #1C1917; }
.ap-papier { flex-grow: 1; min-width: 0; background: #F2F1EF; overflow: hidden; }
.ap-text { height: 100%; overflow: auto; padding: 24px 32px; background: #FFFFFF; box-sizing: border-box; }
.ap-text pre { white-space: pre-wrap; font-family: inherit; font-size: 14px; color: #1C1917; max-width: 48rem; margin: 0 auto; }
.ap-text mark { background: #FDE68A; color: inherit; }
.ap-text-kopf { text-align: right; margin-bottom: 8px; }
.ap-html { width: 100%; height: calc(100% - 32px); border: 0; background: #FFFFFF; }
.ap-html-kopf { padding: 8px 12px 0 12px; margin-bottom: 0; }

html.dark .ap-pille, html.dark .ap-knopf, html.dark .ap-suche { background: #292524; border-color: #44403C; color: #E7E5E4; }
html.dark .ap-pille-an, html.dark .ap-knopf-haupt { background: #C4B5A5; border-color: #C4B5A5; color: #1C1917; }
html.dark .ap-knopf:hover, html.dark .ap-fach:hover, html.dark .ap-zeile:hover { background: #333130; }
html.dark .ap-karte, html.dark .ap-zeile { background: #1C1917; border-color: #3B3835; }
html.dark .ap-zeile-an { background: #292524; box-shadow: inset 3px 0 0 #C4B5A5; }
html.dark .ap-frage-text, html.dark .ap-zeile-titel, html.dark .ap-fach { color: #E7E5E4; }
html.dark .ap-leise, html.dark .ap-liste-kopf, html.dark .ap-verlauf, html.dark .ap-knopf-leise { color: #A8A29E; }
html.dark .ap-quelle { background: #292524; border-color: #44403C; color: #E7E5E4; }
html.dark .ap-papier { background: #121212; }
html.dark .ap-text { background: #1C1917; }
html.dark .ap-text pre { color: #E7E5E4; }
html.dark .ap-text mark { background: #854D0E; }
html.dark .ap-link { color: #60A5FA; }
html.dark .ap-quelle-einig { background: #1F2E22; border-color: #4ADE80; color: #BBF7D0; }
html.dark .ap-quelle-dagegen { background: #3A1F1F; border-color: #F87171; color: #FECACA; }
html.dark .ap-knopf-haupt:hover { background: #D4CCC5; color: #1C1917; }
.ap-knopf:disabled, .ap-quelle:disabled, .ap-fach:disabled { opacity: 0.55; cursor: wait; }
.ap-etikett-kontakt { align-self: flex-start; background: #EEE9E0; color: #6E5220; }
.ap-knoepfe a.ap-knopf { display: inline-flex; align-items: center; text-decoration: none; }

/* ── «Heute»: grosse Karte + Serien je Frage-Art (ht-Klassen, baut auf ap- auf) ── */
.ht-start { display: flex; flex-direction: column; gap: 12px; }
.ht-gross { padding: 22px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ht-zahl { font-size: 44px; font-weight: 700; line-height: 1; color: #916C2D; min-width: 56px; }
.ht-gross-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.ht-titel { font-size: 17px; font-weight: 600; color: #1C1917; }
.ht-satz { font-size: 14px; }
.ht-knopf { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 44px; padding: 10px 22px; font-size: 15px; }
.ht-zwischen { font-size: 14px; font-weight: 600; color: #57534E; margin-top: 4px; }
.ht-serien { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ht-serie { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.ht-serie-titel { font-size: 14px; font-weight: 500; color: #57534E; }
.ht-serie-zahl { font-size: 32px; font-weight: 700; line-height: 1; color: #1C1917; }
.ht-serie-zahl.ht-null { color: #A8A29E; }
.ht-serie-satz { font-size: 14px; flex-grow: 1; }
.ht-serie .ht-knopf { align-self: flex-start; font-size: 14px; padding: 10px 18px; }

.ht-dossier { padding: 14px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-left: 4px solid #D97706; }
.ht-dossier-text { flex: 1 1 260px; min-width: 0; font-size: 15px; color: #1C1917; }
.ht-dossier .ht-knopf { font-size: 14px; padding: 10px 18px; }

html.dark .ht-zahl { color: #E0B872; }
html.dark .ht-dossier { border-left-color: #F59E0B; }
html.dark .ht-dossier-text { color: #E7E5E4; }
html.dark .ht-titel, html.dark .ht-serie-zahl { color: #E7E5E4; }
html.dark .ht-zwischen, html.dark .ht-serie-titel { color: #A8A29E; }
html.dark .ht-serie-zahl.ht-null { color: #57534E; }

/* Schwebender Knopf «Original in neuem Tab» über dem Papier. Eigene Klasse, weil
   bg-white/90 und dark:bg-gray-800/90 im vorkompilierten Panel-CSS fehlen —
   im Dunkelmodus stand helle Schrift auf hellem Grund. */
.ah-schwebeknopf { background-color: rgba(255, 255, 255, 0.92); color: #44403C; border: 1px solid #D4CCC5; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
html.dark .ah-schwebeknopf { background-color: rgba(41, 37, 36, 0.94); color: #E7E5E4; border-color: #57534E; }
/* «Öffnen in» unter dem Beleg-Titel: als Knöpfe statt blasser Mini-Links (Michael 28.09.: nicht gefunden). */
.ah-oeffnen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: #78716C; }
.ah-oeffnen-knopf { display: inline-block; padding: 2px 10px; border: 1px solid #D4CCC5; border-radius: 9999px; background-color: #FFFFFF; color: #6B5D4A; font-weight: 500; line-height: 1.5; text-decoration: none; }
.ah-oeffnen-knopf:hover { background-color: #F5F0EB; border-color: #B5A99E; }
html.dark .ah-oeffnen { color: #A8A29E; }
html.dark .ah-oeffnen-knopf { background-color: #292524; color: #E7E5E4; border-color: #57534E; }
html.dark .ah-oeffnen-knopf:hover { background-color: #3D3630; }

/* Unsichtbares Vorladen der nächsten Dokumente (filament/partials/vorladen). */
.ah-vorladen { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }