/*
 * HLS-Archiv – ruhiges, sachliches Theme im CI der Volks- und Raiffeisenbanken.
 * VR-Blau nur für Aktionen und Auswahl, VR-Dunkelblau für Text, VR-Orange nur als feine Akzentlinie.
 * Ohne Tailwind-Build: überschreibt ausschließlich Filaments fi-*-Klassen. Nach Änderungen: php artisan filament:assets
 */
:root {
    --vr-blau: #0066b3;
    --vr-dunkelblau: #002d67;
    --vr-orange: #ff6200;

    --hls-hintergrund: #f6f8fb;
    --hls-flaeche: #ffffff;
    --hls-linie: #e4e9f0;
    --hls-linie-stark: #d5dde8;
    --hls-text: #13233f;
    --hls-text-leise: #5f6f86;
    --hls-auswahl: #eaf2fa;
    --hls-hover: #f3f7fc;
    --hls-radius: 10px;
}

/* Grundschrift: Hausschrift GenosGFG, sonst die Windows-Systemschrift der Bankarbeitsplätze */
body.fi-body {
    background-color: var(--hls-hintergrund);
    color: var(--hls-text);
    font-family: var(--font-family), "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Zahlen gleich breit: Beträge, Datumswerte und Kontonummern stehen sauber untereinander */
.fi-ta-cell, .fi-ta-summary-row, .fi-in-entry, .fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
}

/* Kopfleiste: hell und flach, Orange nur als 2-px-Linie oben */
.fi-topbar {
    background-color: var(--hls-flaeche);
    border-top: 2px solid var(--vr-orange);
    border-bottom: 1px solid var(--hls-linie);
    box-shadow: none;
}
.fi-topbar .fi-logo {
    color: var(--vr-dunkelblau);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Seitenleiste ohne eigene Fläche – Navigation tritt hinter den Inhalt zurück */
.fi-main-sidebar {
    background-color: var(--hls-flaeche);
    border-right: 1px solid var(--hls-linie);
}
@media (min-width: 64rem) { /* darunter klappt sie als Menü über den Inhalt und braucht eine Fläche */
    .fi-main-sidebar {
        background-color: transparent;
    }
}
.fi-sidebar-group-label {
    color: var(--hls-text-leise);
    font-size: 0.75rem;
    font-weight: 500;
}
.fi-sidebar-item-btn {
    border-radius: 8px;
}
.fi-sidebar-item-btn:hover {
    background-color: var(--hls-hover);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--hls-auswahl);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--vr-dunkelblau);
    font-weight: 600;
}
.fi-sidebar-item.fi-active .fi-icon {
    color: var(--vr-blau);
}

/* Seitentitel */
.fi-header-heading {
    color: var(--hls-text);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.fi-section-header-heading, .fi-modal-heading {
    color: var(--hls-text);
    font-weight: 600;
}

/* Flächen: Linie statt Schatten, einheitlicher Radius */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-modal-window {
    box-shadow: none;
    border-radius: var(--hls-radius);
}
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat {
    border: 1px solid var(--hls-linie);
    --tw-ring-shadow: 0 0 #0000;
}

/* Filterbereich: ruhige Fläche über der Tabelle, „Weitere Filter“ ohne eigenen Kasten */
.fi-ta-filters-above-content-ctn {
    background-color: #fbfcfe;
    border-bottom: 1px solid var(--hls-linie);
}
.fi-ta-filters-above-content-ctn .fi-section {
    border: 0;
    background: transparent;
}
.fi-ta-filters-above-content-ctn .fi-section-header {
    padding-inline: 0;
}
.fi-ta-filters-above-content-ctn .fi-section-header-heading {
    color: var(--vr-blau);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Tabellen: dezenter Kopf, Zeilen-Hover statt Streifen, klickbare Zeilen */
.fi-ta-header-cell {
    background-color: transparent;
    border-bottom: 1px solid var(--hls-linie-stark);
}
.fi-ta-header-cell, .fi-ta-header-cell button {
    color: var(--hls-text-leise);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.fi-ta-header-cell {
    padding-block: 0.625rem;
    white-space: normal; /* lange Köpfe („Auftraggeber / Empfänger“) umbrechen statt die Tabelle zu verbreitern */
}
.fi-ta-row {
    transition: background-color 120ms ease;
}
.fi-ta-row:hover {
    background-color: var(--hls-hover);
}
.fi-ta-row.fi-clickable {
    cursor: pointer;
}
.fi-ta-summary-row, .fi-ta-summary-header-row {
    background-color: #fbfcfe;
}

/* Eingabefelder: klare Linie, Fokus in VR-Blau */
.fi-input-wrp {
    border-radius: 8px;
}
.fi-input-wrp:focus-within {
    --tw-ring-color: var(--vr-blau);
}

/* Buttons: kurze Rückmeldung beim Klicken */
.fi-btn, .fi-icon-btn {
    transition: background-color 120ms ease, transform 80ms ease;
}
.fi-btn:active, .fi-icon-btn:active {
    transform: translateY(1px);
}

/* Anmeldeseite: helle Fläche mit schmaler Markenlinie statt Verlauf */
.fi-simple-layout {
    background: var(--hls-hintergrund);
    border-top: 3px solid var(--vr-orange);
}
.fi-simple-main {
    border: 1px solid var(--hls-linie);
    box-shadow: none;
}

/* Suche zuerst: Suchzeile über die Filter holen, Suchfeld links und breit */
.fi-ta-header-ctn {
    display: flex;
    flex-direction: column;
}
.fi-ta-header-toolbar {
    order: -1;
    border-bottom: 1px solid var(--hls-linie);
}
.fi-ta-header-toolbar > div:last-child {
    flex: 1;
    justify-content: space-between;
}
.fi-ta-search-field {
    flex: 0 1 28rem;
}
.fi-ta-search-field {
    flex-basis: 40rem;
}

/* „Weitere Filter“ als deutlich erkennbare, aufklappbare Leiste */
.fi-ta-filters-above-content-ctn .hls-weitere-filter {
    border: 1px solid var(--hls-linie-stark);
    border-radius: var(--hls-radius);
    background: var(--hls-flaeche);
}
.fi-ta-filters-above-content-ctn .hls-weitere-filter .fi-section-header {
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    border-radius: var(--hls-radius);
    transition: background-color 120ms ease;
}
.fi-ta-filters-above-content-ctn .hls-weitere-filter .fi-section-header:hover {
    background-color: var(--hls-auswahl);
}
.fi-ta-filters-above-content-ctn .hls-weitere-filter .fi-section-header-heading {
    font-weight: 600;
}
.fi-ta-filters-above-content-ctn .hls-weitere-filter .fi-section-header-description {
    font-size: 0.75rem;
}
.fi-ta-filters-above-content-ctn .hls-weitere-filter .fi-section-header > .fi-icon,
.fi-ta-filters-above-content-ctn .hls-weitere-filter .fi-section-collapse-btn {
    color: var(--vr-blau);
}
.fi-ta-filters-above-content-ctn .hls-weitere-filter .fi-section-content-ctn {
    padding-inline: 0.875rem;
}

/* Spaltenauswahl rechts in der Kopfzeile der Tabelle – auch bei leerer Tabelle (Kopf ist da, nur ohne Aktionsspalte).
   Browser ohne CSS-Anchor-Positioning und das Handy (Zeilen als Karten, ohne Kopfzeile) behalten sie in der Suchzeile. */
@supports (anchor-name: --a) {
@media (min-width: 40rem) {
    .fi-ta-ctn {
        position: relative;
        anchor-scope: --hls-spalten;
    }
    .fi-ta-table > thead {
        anchor-name: --hls-spalten;
    }
    .fi-ta-ctn:has(.fi-ta-table > thead) .fi-ta-col-manager-dropdown {
        position: absolute;
        position-anchor: --hls-spalten;
        top: anchor(center);
        right: 1rem;
        translate: 0 -50%;
        z-index: 10;
    }
    /* ohne Aktionsspalte: Platz für das Symbol neben der letzten Überschrift */
    .fi-ta-table:not(:has(.fi-ta-actions-header-cell)) > thead th:last-child {
        padding-inline-end: 3rem;
    }
}
}
}

/* Versionsnummer unten in der Seitenleiste */
.hls-version {
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    color: var(--hls-text-leise);
}
.fi-sidebar:not(.fi-sidebar-open) .hls-version {
    display: none;
}

/* Suchzeile bündig mit den Filtern: leeren Aktionsbereich links nicht als Lücke mitzählen */
.fi-ta-header-toolbar > .fi-ta-actions:not(:has(*)) {
    display: none;
}

/* Umbrechende Spalten: überlange Wörter (Sachkontobezeichnungen, Verwendungszwecke) notfalls trennen,
   statt die Tabelle über den Bildschirm hinaus zu verbreitern */
.fi-ta-text.fi-wrapped, .fi-ta-text.fi-wrapped .fi-ta-text-description {
    overflow-wrap: anywhere;
}

/* Dichtere Zeilen – Umsatzlisten werden überflogen, nicht gelesen */
.fi-ta-text {
    padding-block: 0.625rem;
}
.fi-ta-cell:has(> .fi-ta-actions) {
    padding-block: 0.5rem;
}
.fi-ta-text-description {
    font-size: 0.8125rem;
}

/* Zeilenaktionen leise, beim Überfahren in VR-Blau */
.fi-ta-row .fi-ta-actions .fi-icon-btn {
    color: #94a3b8;
}
.fi-ta-row .fi-ta-actions .fi-icon-btn:hover {
    color: var(--vr-blau);
    background-color: var(--hls-auswahl);
}

/* Summenzeile: Wert gut lesbar */
.fi-ta-text-summary > span:last-child {
    color: var(--hls-text);
    font-weight: 600;
}

/* Dashboard: Schnellsuche */
.hls-schnellsuche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}
.hls-schnellsuche label > span {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
}
@media (max-width: 64rem) {
    .hls-schnellsuche {
        grid-template-columns: minmax(0, 1fr);
    }
}
.hls-fehler {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #dc2626;
}

/* Dashboard: gespeicherte Filter als Linkliste */
.hls-leer {
    font-size: 0.875rem;
    color: var(--hls-text-leise);
}
.hls-filterliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.25rem 1rem;
    margin: -0.5rem -0.75rem;
}
.hls-filterliste a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: background-color 120ms ease;
}
.hls-filterliste a:hover {
    background-color: var(--hls-auswahl);
}
.hls-filterliste-name {
    font-weight: 500;
    color: var(--vr-blau);
}
.hls-filterliste-info {
    grid-column: 1;
    font-size: 0.75rem;
    color: var(--hls-text-leise);
}
.hls-filterliste-pfeil {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 1.25rem;
    height: 1.25rem;
    color: #94a3b8;
}

/* Importprotokoll: Verzeichnis als kompakte Zeile unter dem Titel */
.fi-header-subheading:has(.hls-importpfad) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--hls-text-leise);
}
.hls-importpfad {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    max-width: min(36rem, 100%);
}
.hls-importpfad-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}
.hls-importpfad-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl; /* bei Platzmangel den Anfang kürzen, das Ende des Pfads bleibt sichtbar */
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
}
.hls-importpfad-status::before {
    content: "·";
    margin-right: 0.75rem;
}

/* Importprotokoll und System: Filter als Auswahlboxen rechts neben der Suche */
.fi-resource-importprotokoll .fi-ta-header-ctn,
.fi-resource-system .fi-ta-header-ctn {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--hls-linie);
}
.fi-resource-importprotokoll .fi-ta-header-toolbar,
.fi-resource-system .fi-ta-header-toolbar {
    flex: 1 1 20rem;
    border-bottom: 0;
}
.fi-resource-importprotokoll .fi-ta-filters-above-content-ctn,
.fi-resource-system .fi-ta-filters-above-content-ctn {
    flex: 0 1 40rem;
    padding: 0.75rem 1.5rem 0.75rem 0;
    background: transparent;
    border-bottom: 0;
}
@media (max-width: 39.999rem) {
    .fi-resource-importprotokoll .fi-ta-filters-above-content-ctn,
    .fi-resource-system .fi-ta-filters-above-content-ctn {
        padding: 0 1rem 0.75rem;
    }
}
.fi-resource-importprotokoll .fi-ta-filters-above-content-ctn .fi-ta-filters-header,
.fi-resource-system .fi-ta-filters-above-content-ctn .fi-ta-filters-header {
    display: none;
}

/* Typ- und Status-Badges über dem Namen (Importprotokoll, System) */
.hls-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}

/* System & Updates */
.fi-header-subheading:has(.hls-systeminfo) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--hls-text-leise);
}
.hls-systeminfo strong {
    color: var(--hls-text);
    font-weight: 600;
}
.hls-protokoll {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--hls-hintergrund);
    border: 1px solid var(--hls-linie);
}

/* Logo der Bank mit Titel daneben */
.hls-marke {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
}
.hls-marke img {
    height: 100%;
    width: auto;
}
.hls-marke span {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--vr-dunkelblau);
    white-space: nowrap;
}

/* Logo in den Einstellungen: nur das Bild selbst, links, mit dem X zum Entfernen darauf – ohne Fläche dahinter */
.hls-logo-upload {
    max-width: 24rem;
}

.hls-logo-upload .filepond--root:has(.filepond--item),
.hls-logo-upload .filepond--root:has(.filepond--item) .filepond--drip,
.hls-logo-upload:has(.filepond--item) .filepond--panel-root,
.hls-logo-upload .filepond--item-panel,
.hls-logo-upload .filepond--image-preview-wrapper,
.hls-logo-upload .filepond--image-preview {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.hls-logo-upload .filepond--image-preview-overlay {
    display: none;
}

.hls-logo-upload .filepond--image-clip {
    margin-left: 0 !important;
}

/* gespeicherter Dateiname ist zufällig und verdeckt das Logo */
.hls-logo-upload .filepond--file-info,
.hls-logo-upload .filepond--file-status {
    display: none;
}

.hls-logo-upload .filepond--file-action-button.filepond--action-remove-item {
    background: rgb(0 0 0 / 0.55);
}

/* Handy: Tabellenzeilen als Karten (stackedOnMobile) – Bezeichnung links, Wert rechts daneben statt darüber */
@media (max-width: 39.999rem) {
    .fi-ta-table-stacked-on-mobile .fi-ta-cell:has(> .fi-ta-cell-label) {
        display: grid;
        grid-template-columns: 8rem minmax(0, 1fr);
        column-gap: 0.75rem;
        align-items: baseline;
        padding-block: 0;
    }
    .fi-ta-table-stacked-on-mobile .fi-ta-cell-label {
        margin: 0;
        text-align: start;
        font-size: 0.75rem;
        color: var(--hls-text-leise);
    }
    .fi-ta-table-stacked-on-mobile .fi-ta-text {
        padding-block: 0.375rem;
    }
}

/* Gespeicherte Filter: Auswahlbox direkt rechts neben der Suche */
.hls-gespeicherte-filter {
    flex: 0 1 20rem;
    min-width: 15rem;
    margin-inline-end: auto; /* Spaltenauswahl bleibt rechts außen */
}

/* Dashboard: klickbare Kacheln führen in die jeweilige Rubrik */
a.fi-wi-stats-overview-stat {
    transition: border-color 120ms ease, background-color 120ms ease;
}
a.fi-wi-stats-overview-stat:hover {
    border-color: var(--vr-blau);
    background-color: var(--hls-hover);
}

/* Summe „Alle Umsätze“ wird nachgeladen */
.hls-summe-laedt {
    color: var(--hls-text-leise);
    font-weight: 400;
    font-style: italic;
}