@import '_content/bettERFramework.FiBu.UI/bettERFramework.FiBu.UI.bundle.scp.css';
@import '_content/bettERFramework.Shared.UI/bettERFramework.Shared.UI.bundle.scp.css';
@import '_content/bettERFramework.XRM.UI/bettERFramework.XRM.UI.bundle.scp.css';

/* /Components/Features/ManageFirm/ManageBankConnectionsFeature.razor.rz.scp.css */
/* Status-Kacheln über dem Bankverbindungs-Grid (Bug 316). Optik bewusst an die Reconciliation-Kacheln
   angelehnt, damit die Kontofunktionen eine einheitliche Sprache sprechen. */
.bank-status-tiles[b-3us02y2vc5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (max-width: 1200px) {
    .bank-status-tiles[b-3us02y2vc5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bank-status-tile[b-3us02y2vc5] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 96px;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--bp-yellow, #E6FF03);
    border-radius: 12px;
}

.bank-status-tile__label[b-3us02y2vc5] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.bank-status-tile__value[b-3us02y2vc5] {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.bank-status-tile__value.is-warning[b-3us02y2vc5] { color: #e0a200; }
.bank-status-tile__value.is-ok[b-3us02y2vc5] { color: #42c06b; }

.bank-status-tile__sub[b-3us02y2vc5] {
    font-size: 0.78rem;
    opacity: 0.6;
}
/* /Components/Features/ManageFirm/ProcessingConfigFeature.razor.rz.scp.css */
/* Layout über Bootstrap-Utilities (d-flex, gap-*, ps-4) gelöst — kein eigenes CSS mehr nötig. */
/* Dezenter Hinweis-/Erklärtext (Sekundärinfo unter Feldern oder Optionen). */
.bp-hint[b-mzbvnuh0ya] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(253, 252, 252, 0.6);
}
/* /Components/Features/ManageUsers/EditUserClaimFeature.razor.rz.scp.css */
/* Berechtigungs-Dialog: Modul-Karten im Raster statt flacher Grid-Liste. */
.perm-groups[b-84p08blooi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: var(--bp-space-3);
    align-items: start;
}

.perm-group[b-84p08blooi] {
    border: 1px solid var(--bp-panel-border);
    background: var(--bp-panel);
    padding: var(--bp-space-2) var(--bp-space-3) var(--bp-space-3);
}

.perm-group-header[b-84p08blooi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bp-panel-border);
    padding-bottom: var(--bp-space-2);
    margin-bottom: var(--bp-space-2);
}

/* Checkbox-Labels (Gruppentitel + Item-Namen) liegen im Syncfusion-Markup (::deep) und erben
   sonst eine helle Textfarbe → auf den weißen Karten unlesbar. Deshalb explizit dunkel setzen. */
.perm-group[b-84p08blooi]  .e-checkbox-wrapper .e-label,
.perm-group[b-84p08blooi]  .e-css.e-checkbox-wrapper .e-label {
    /* Karten sind seit dem Navy-Redesign dunkel (--bp-panel) → heller Text statt Schwarz. */
    color: var(--bp-text);
}

/* Gruppentitel = Label der Gruppen-Checkbox (liegt im Syncfusion-Markup, daher ::deep). */
.perm-group-header[b-84p08blooi]  .e-label {
    font-family: var(--bp-font-head);
    font-weight: 600;
}

.perm-group-count[b-84p08blooi] {
    font-size: 0.8rem;
    color: var(--bp-text-muted);
}

.perm-item[b-84p08blooi] {
    padding: var(--bp-space-1) 0;
}

/* Beschreibung unter dem Checkbox-Label einrücken (Checkbox-Breite + Lücke). */
.perm-item-description[b-84p08blooi] {
    margin-left: 28px;
    font-size: 0.8rem;
    color: var(--bp-text-muted);
    line-height: 1.3;
}

.perm-footer[b-84p08blooi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.perm-footer-count[b-84p08blooi] {
    font-size: 0.85rem;
    color: var(--bp-text-muted);
}
/* /Components/Pages/FirmSelection.razor.rz.scp.css */
.firm-selection-container[b-4fsvm243ih] {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    height: 100%;
}


.firm-selection-header[b-4fsvm243ih] {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Landing-Page: Modul-Einstieg. Visuelles Vokabular bewusst identisch zum Modul-Umschalter der
   Sidebar (Icon-Kachel in der Modul-Kennfarbe, Panel-Fläche, Kontur als Zustand) — nur größer. */

.home-landing[b-u4eeq1tx3d] {
    padding: var(--bp-space-5) var(--bp-space-4);
}

.home-head[b-u4eeq1tx3d] {
    max-width: 62ch;
    margin-bottom: var(--bp-space-5);
}

.home-title[b-u4eeq1tx3d] {
    margin: 0;
    font-family: var(--bp-font-head);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--bp-text);
}

.home-lead[b-u4eeq1tx3d] {
    margin: var(--bp-space-2) 0 0;
    color: var(--bp-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.home-empty[b-u4eeq1tx3d] {
    max-width: 62ch;
    margin: 0;
    padding: var(--bp-space-4);
    background: var(--bp-panel);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-lg);
    color: var(--bp-text-muted);
}

/* Handlungsangebot im Leerzustand: gleiche Sprache wie "Öffnen" auf der Kachel. */
.home-empty__action[b-u4eeq1tx3d] {
    display: inline-flex;
    align-items: center;
    gap: var(--bp-space-1);
    margin-left: var(--bp-space-2);
    color: var(--bp-yellow);
    font-family: var(--bp-font-head);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.home-empty__action:hover[b-u4eeq1tx3d] {
    text-decoration: underline;
}

.home-empty__action:focus-visible[b-u4eeq1tx3d] {
    outline: 2px solid var(--bp-yellow);
    outline-offset: 2px;
}

.home-empty__action .e-icons[b-u4eeq1tx3d] {
    font-size: 13px;
}

.home-modules[b-u4eeq1tx3d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    /* Kacheln einer Zeile sind gleich hoch (Default-stretch); "Öffnen" wird in der Kachel nach
       unten geschoben, damit die Aktionen zeilenweise auf einer Grundlinie liegen. */
    gap: var(--bp-space-3);
    /* Kacheln bleiben lesbar statt über die ganze Breite zu laufen. */
    max-width: 1120px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Das Grid-Item ist der <li>, nicht die Kachel. Ohne diese Regel wird nur der <li> auf die
   Zeilenhöhe gestreckt und die Kachel darin behält ihre Inhaltshöhe — die Kacheln stehen
   dann ungleich hoch. Das Grid gibt die Höhe an das <a> weiter. */
.home-modules > li[b-u4eeq1tx3d] {
    display: grid;
}

.home-module[b-u4eeq1tx3d] {
    display: grid;
    /* Icon-Spalte + Textspalte. Die Textspalte trägt eine eigene Zeile für "Öffnen", die den
       Restplatz aufnimmt (1fr) — so sitzt die Aktion in jeder Kachel unten, auch wenn die
       Beschreibung nur eine Zeile hat. */
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    gap: var(--bp-space-1) var(--bp-space-3);
    padding: var(--bp-space-4);
    background: var(--bp-panel);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-lg);
    color: var(--bp-text);
    text-decoration: none;
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.home-module:hover[b-u4eeq1tx3d] {
    background: var(--bp-panel-hover);
    border-color: rgba(255, 255, 255, 0.2);
}

.home-module:focus-visible[b-u4eeq1tx3d] {
    outline: 2px solid var(--bp-yellow);
    outline-offset: 2px;
}

.home-module__icon[b-u4eeq1tx3d] {
    grid-row: 1 / span 2;
    /* Oben verankert: die Zeilen darunter dürfen wachsen, die Icon-Kachel bleibt 40x40. */
    align-self: start;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Kennfarbe des Moduls kommt als --module-accent aus ModuleInfo — kein Modul-Wissen im CSS. */
    background: color-mix(in srgb, var(--module-accent, var(--bp-yellow)) 16%, transparent);
    color: var(--module-accent, var(--bp-yellow));
    border-radius: var(--bp-radius-ctl);
    font-size: 20px;
}

.home-module__name[b-u4eeq1tx3d] {
    /* Optisch auf die obere Hälfte der 40px-Icon-Kachel ausgerichtet. */
    align-self: start;
    padding-top: 2px;
    font-family: var(--bp-font-head);
    font-size: 1.0625rem;
    font-weight: 500;
}

.home-module__name b[b-u4eeq1tx3d] {
    font-weight: 700;
}

.home-module__desc[b-u4eeq1tx3d] {
    grid-column: 2;
    color: var(--bp-text-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.home-module__open[b-u4eeq1tx3d] {
    grid-column: 2;
    grid-row: 3;
    /* Unten in der 1fr-Zeile: gleiche Grundlinie über alle Kacheln der Zeile. */
    align-self: end;
    padding-top: var(--bp-space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--bp-space-1);
    color: var(--bp-yellow);
    font-family: var(--bp-font-head);
    font-size: 0.8125rem;
    font-weight: 500;
}

.home-module__open .e-icons[b-u4eeq1tx3d] {
    font-size: 13px;
    transition: transform 150ms ease-out;
}

.home-module:hover .home-module__open .e-icons[b-u4eeq1tx3d] {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .home-module[b-u4eeq1tx3d],
    .home-module__open .e-icons[b-u4eeq1tx3d] {
        transition: none;
    }

    .home-module:hover .home-module__open .e-icons[b-u4eeq1tx3d] {
        transform: none;
    }
}
/* /Components/Pages/ManageFirm.razor.rz.scp.css */
/* Layout sonst vollständig über Bootstrap-Utilities gelöst. Ausnahme: Der AuthorizationBlock rendert
   zwischen der Bootstrap-Spalte (.config-col) und dem Panel eine eigene, nicht klassifizierbare <div>.
   Damit das h-100 des Panels bis zur Spaltenhöhe durchgreift (gleiche Panel-Höhe für Verarbeitung/IMAP/SFTP),
   muss dieser Zwischen-Wrapper auf volle Höhe/Breite gezogen werden. */
.config-col[b-zm6c8ddqqj] {
    display: flex;
}

    .config-col > div[b-zm6c8ddqqj] {
        flex: 1 1 auto;
    }