/* IMAGe-CI-Theme (Paket F) nach Brand-Manual „00_Brand guidelines.pdf".
   Der Berry-Klon-Look aus Stufe 1 ist abgelöst — Token-System: docs/UX-CI-REDESIGN.md.
   Navy #292F68 (Primär) · Green #4F9584 · Mint #3ECEA8 · Indigo #5B66A5. */

:root {
    --imag-navy: #292F68;
    --imag-green: #4F9584;
    --imag-mint: #3ECEA8;
    --imag-indigo: #5B66A5;
    --imag-navy-50: #EEEFF6;
    --imag-green-50: #EDF5F2;
    --imag-mint-50: #E7FAF4;
    --imag-indigo-50: #EFF0F8;
    --imag-warning: #E5A13C;
    --imag-warning-50: #FBF1E0;
    --imag-danger: #C0392B;
    --imag-danger-50: #F9E9E7;
    --imag-ink: #23253A;
    --imag-ink-soft: #5B627A;
    --imag-surface: #F6F7FA;
    --imag-gradient: linear-gradient(135deg, #4F9584 0%, #292F68 100%);
}

/* ---------- Typografie: Montserrat (Headlines) + Open Sans (Body), self-hosted ---------- */
.fi-body { font-family: 'Open Sans', ui-sans-serif, system-ui, sans-serif; color: var(--imag-ink); }
.fi-body h1, .fi-body h2, .fi-body h3, .fi-body h4,
.fi-header-heading, .fi-section-header-heading, .fi-modal-heading,
.fi-wi-stats-overview-stat-value, .imag-title, .imag-kpi-value {
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
}
.fi-header-heading { color: var(--imag-navy); }

/* ---------- Grundflächen ---------- */
.fi-body, .fi-main-ctn { background-color: var(--imag-surface) !important; }
.fi-main { max-width: 88rem; }

/* ---------- Karten (Widgets, Tabellen, Sections) ---------- */
.fi-section, .fi-ta-ctn, .fi-wi-chart, .fi-wi-widget .fi-section {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(41, 47, 104, .08) !important;
}

/* ---------- Buttons ---------- */
.fi-btn { border-radius: 10px !important; }
/* Filaments Shade-Ableitung hellt Navy zu stark auf — Volltonfarben erzwingen. */
.fi-btn.fi-color-primary:not(.fi-outlined) { background-color: var(--imag-navy) !important; }
.fi-btn.fi-color-primary:not(.fi-outlined):hover { background-color: var(--imag-indigo) !important; }
.fi-btn.fi-color-success:not(.fi-outlined) { background-color: var(--imag-green) !important; }
.fi-btn.fi-color-success:not(.fi-outlined):hover { background-color: #3F7A6C !important; }
/* Schrift + Icon auf gefüllten Buttons IMMER weiß — Filaments Text-Utilities würden
   sie sonst in der Primärfarbe (Navy/Lila) einfärben, unlesbar auf dunklem Grund. */
.fi-btn.fi-color-primary:not(.fi-outlined),
.fi-btn.fi-color-primary:not(.fi-outlined):hover,
.fi-btn.fi-color-primary:not(.fi-outlined) *,
.fi-btn.fi-color-success:not(.fi-outlined),
.fi-btn.fi-color-success:not(.fi-outlined):hover,
.fi-btn.fi-color-success:not(.fi-outlined) *,
.fi-btn.fi-color-danger:not(.fi-outlined),
.fi-btn.fi-color-danger:not(.fi-outlined) * { color: #ffffff !important; }

/* ---------- Badges ---------- */
.fi-badge {
    border-radius: 8px !important;
    font-size: 10.5px !important;
    box-shadow: none !important;
}

/* ---------- Tabellen: Kopfzeile Navy-getönt, klein, uppercase ---------- */
.fi-ta-header-cell {
    background-color: var(--imag-navy-50);
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: .02em;
    color: var(--imag-ink-soft) !important;
}
.fi-ta-header-cell .fi-ta-header-cell-label { font-size: 11px; color: var(--imag-ink-soft); }

/* ---------- Sidebar/Topbar: weiß, aktiver Punkt Navy ---------- */
.fi-sidebar { background-color: #ffffff !important; }
.fi-topbar > nav { background-color: #ffffff !important; }
.fi-sidebar-item.fi-active > a {
    background-color: var(--imag-navy) !important;
    border-radius: 10px;
}
.fi-sidebar-item.fi-active > a span,
.fi-sidebar-item.fi-active > a svg { color: #ffffff !important; }
/* Zähler im aktiven Menüpunkt: weiß auf Navy, sonst ist die Zahl auf dem hellen Abzeichen unlesbar
   (Florian, 04.09.: „Offene Maßnahmen" geöffnet → Zahl verschwunden). */
.fi-sidebar-item.fi-active > a .fi-badge,
.fi-sidebar-item.fi-active > a .fi-badge span { background-color: #ffffff !important; color: var(--imag-navy) !important; }
.fi-sidebar-item > a:hover { background-color: var(--imag-navy-50); border-radius: 10px; }
.fi-sidebar-group-label { font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; color: var(--imag-ink-soft); }

/* ---------- Login/Passwort-Reset: Gradient-Hero mit Bildmarken-Muster ---------- */
.fi-simple-layout {
    background: var(--imag-gradient);
    background-attachment: fixed;
}
.fi-simple-layout::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='5'%3E%3Ccircle cx='50' cy='21' r='9'/%3E%3Crect x='41' y='34' width='18' height='52' rx='9'/%3E%3Crect x='16' y='45' width='68' height='18' rx='9'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 120px;
}
.fi-simple-main {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    position: relative;
    z-index: 1;
}
.fi-simple-header-heading { font-family: 'Montserrat', sans-serif; color: var(--imag-navy); }

/* ---------- Kopf-Karte (Badge-Chip + Titel + Untertitel + Mini-KPIs) ---------- */
.imag-page-header {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(41, 47, 104, .08);
    padding: 1.75rem 2rem;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #4F9584, #292F68) 1;
}
.imag-page-header-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

/*
 * Kopfzeilen-Knöpfe: rechtsbündig und gleich breit. Ohne Mindestbreite
 * ergeben unterschiedlich lange Beschriftungen ein unruhiges Treppenmuster,
 * sobald mehr als zwei Knöpfe umbrechen.
 */
.imag-page-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.imag-page-header-actions .fi-btn { min-width: 13.5rem; justify-content: center; }
/* Das Filament-Abzeichen sitzt sonst frei über der Ecke des Knopfes. */
.imag-page-header-actions .fi-badge { display: none; }
.imag-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--imag-mint-50); color: var(--imag-green);
    border-radius: 999px; padding: .45rem 1rem;
    font-size: .8rem; font-weight: 600;
}
.imag-chip-icon { width: 1rem; height: 1rem; }
.imag-title { font-size: 1.6rem; font-weight: 700; color: var(--imag-navy); margin-top: .9rem; }
.imag-subtitle { color: var(--imag-ink-soft); font-size: .9rem; margin-top: .35rem; }
.imag-page-header-stats { display: flex; gap: 3rem; margin-top: 1.5rem; flex-wrap: wrap; }
.imag-ministat { display: flex; align-items: center; gap: .8rem; }
.imag-ministat-value { font-weight: 700; font-size: 1.05rem; color: var(--imag-ink); }
.imag-ministat-label { color: var(--imag-ink-soft); font-size: .78rem; }
.imag-ministat-detail { color: #8B90A8; font-size: .75rem; }

/* ---------- KPI-Karten ---------- */
/* Langer Kacheltitel (z. B. Gefährdungsbeurteilungen) darf umbrechen, sonst schiebt er das Symbol aus der Karte. */
.imag-kpi-card > div:first-child { min-width: 0; }
.imag-kpi-label { overflow-wrap: anywhere; hyphens: auto; }
.imag-kpi-row {
    display: grid; gap: 1.25rem;
    /* P-Q: so viele Kacheln je Zeile, wie hineinpassen (Verwaltung 6, Portal 4–5). */
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
}
@media (max-width: 1100px) { .imag-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.imag-kpi-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 2px 6px rgba(41, 47, 104, .08);
    padding: 1.4rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.imag-kpi-label { color: var(--imag-ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.imag-kpi-value { font-size: 1.7rem; font-weight: 700; color: var(--imag-navy); margin-top: .3rem; }

/* ---------- Farbige Icon-Kreise (IMAGe-Palette) ---------- */
.imag-circle {
    width: 44px; height: 44px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.imag-circle-icon { width: 1.25rem; height: 1.25rem; }
.imag-circle-primary { background: var(--imag-navy-50); color: var(--imag-navy); }
.imag-circle-info    { background: var(--imag-indigo-50); color: var(--imag-indigo); }
.imag-circle-success { background: var(--imag-green-50); color: var(--imag-green); }
.imag-circle-warning { background: var(--imag-warning-50); color: var(--imag-warning); }
.imag-circle-gray    { background: #EFF0F2; color: var(--imag-ink-soft); }
.imag-circle-mint    { background: var(--imag-mint-50); color: var(--imag-mint); }

/* Filament-Standard-Header (Titelzeile) ausblenden, wenn eigene Kopf-Karte genutzt wird */
.imag-page-header + * .fi-header, .fi-page:has(.imag-page-header) > .fi-page-header { display: none; }

/* ---------- Tabellen-Aktionen: farbige Soft-Buttons ---------- */
/* Nur Icon-only-Actions (kein Text-Label) als Soft-Quadrate stylen */
.fi-ta-cell .fi-ac-link-action:not(:has(span)), .fi-ta-cell .fi-icon-btn {
    border-radius: 8px;
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #EFF0F2; /* Standard: grau (Download/Excel) */
}
.fi-ta-cell .fi-ac-link-action:not(:has(span)).fi-color-success { background: var(--imag-green-50); }
.fi-ta-cell .fi-ac-link-action:not(:has(span)).fi-color-danger  { background: var(--imag-danger-50); }
.fi-ta-cell .fi-ac-link-action:not(:has(span)).fi-color-primary { background: var(--imag-navy-50); }
.fi-ta-cell .fi-ac-link-action:not(:has(span)) .fi-icon { width: 1rem; height: 1rem; }

/* ---------- Einstellungs-Zahnrad neben der Glocke (G2) ---------- */
.imag-zahnrad {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 999px;
    color: var(--imag-ink-soft);
}
.imag-zahnrad:hover { background: var(--imag-navy-50); color: var(--imag-navy); }
.imag-zahnrad-icon { width: 1.35rem; height: 1.35rem; }

/* ---------- Topbar-Schnellzugriff (G6): Eingabe-App + Kundenportal ---------- */
.imag-topbar-links { display: flex; align-items: center; gap: .5rem; margin-inline-end: .5rem; }
.imag-topbar-link {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .8rem; font-weight: 600; color: var(--imag-navy);
    background: var(--imag-navy-50); border-radius: 999px; padding: .4rem .85rem;
    white-space: nowrap;
}
.imag-topbar-link:hover { background: var(--imag-indigo); color: #fff; }
.imag-topbar-link-icon { width: 1rem; height: 1rem; }
@media (max-width: 900px) { .imag-topbar-links { display: none; } }

/* ---------- Suche links ---------- */
.fi-ta-header-toolbar { flex-direction: row-reverse; }

/* ---------- Datei-Upload-Bildvorschau hell statt FilePond-Standard #222 ----------
   Transparente PNGs mit dunkler Tinte waren auf dunklem Grund unsichtbar. */
.filepond--image-preview { background: #f8f7f4 !important; }
.filepond--image-preview-overlay { display: none !important; }
.filepond--file-info .filepond--file-info-main,
.filepond--file-info .filepond--file-info-sub { color: #2a2a2e !important; text-shadow: none !important; }
.filepond--file-info .filepond--file-info-sub { opacity: .7; }
/* Entfernen-Button (X) auf hellem Grund sichtbar */
.filepond--file-action-button { background-color: rgba(0, 0, 0, .55) !important; color: #fff !important; }

/* P-N: Glocke mit Zähler „3 Aufgaben · 2 Nachrichten"; X quittiert nur, wird ausgeblendet. */
.imag-glocke { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.imag-glocke-text { font-size: .78rem; font-weight: 600; color: var(--imag-ink-soft, #5B627A); white-space: nowrap; }
@media (max-width: 767px) { .imag-glocke-text { display: none; } }
/* Rote, gefüllte Glocke mit Zahl, sobald etwas Ungelesenes da ist. */
.imag-glocke.hat-neues .fi-topbar-database-notifications-btn { color: var(--imag-danger, #C0392B); }
.imag-glocke.hat-neues .fi-topbar-database-notifications-btn .fi-icon { color: var(--imag-danger, #C0392B); }
/* Das X erreicht die Komponente nicht zuverlässig — „Gelesen" an jeder Meldung übernimmt seine Aufgabe. */
.fi-no-database .fi-no-notification-close-btn { display: none; }
/* Meldungen mit Ziel sind als Ganzes anklickbar; die Überschrift ist zusätzlich ein Link. */
.fi-no-database .glocke-titel-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(41, 47, 104, .35); }
.fi-no-database .fi-no-notification:has(a[href*="/glocke/"]) { cursor: pointer; }
.fi-no-database .fi-no-notification:has(a[href*="/glocke/"]):hover { background-color: var(--imag-navy-50, #EEEFF6); }
.fi-no-database .fi-no-notification:has(a[href*="/glocke/"]) .fi-no-notification-title { color: var(--imag-navy, #292F68); text-decoration: underline; text-decoration-color: rgba(41, 47, 104, .35); }