/* ===== App Utility-Klassen (Story 02 + Story 03 / Feature css-hygiene) =====
 *
 * Globale Klassen mit Praefix `app-*` fuer wiederkehrende Style-Patterns.
 * Ersetzen Inline-`Style="..."` in Razor-Komponenten.
 *
 * Klassen-Auswahl basiert auf docs/features/css-hygiene/audit.md
 * (Top-Frequenz-Patterns; Frequenz-Hinweise siehe dort).
 *
 * Konvention:
 *   - Praefix `app-` (Konflikt mit MudBlazor-internen `mud-*` Klassen vermeiden)
 *   - Nur `--app-*`-Tokens, niemals MudBlazor-Variablen direkt
 *   - Keine MudBlazor-Override-Selektoren hier (gehoeren in app.css)
 */

/* ---- Text ---- */

.app-text-muted {
    /* color: <text-secondary> (>=6 Treffer) */
    color: var(--app-text-muted);
}

.app-text-semibold {
    /* font-weight: 600; (>=5 Treffer) */
    font-weight: 600;
}

.app-text-strong-sm {
    /* font-weight: 700; font-size: 13px; (2 Treffer) */
    font-weight: 700;
    font-size: 13px;
}

.app-text-xs {
    /* font-size: 11px; (>=5 Treffer) */
    font-size: 11px;
}

.app-text-center {
    /* text-align: center; (>=7 Treffer) */
    text-align: center;
}

/* ---- Surface ---- */

.app-surface-elevated {
    /* background: <background-grey> (>=4 Treffer) */
    background: var(--app-surface-elevated);
}

/* ---- Chips / kompakte Buttons (MudButton, MudChip) ---- */

.app-chip-compact {
    /* min-height: 24px; font-size: 11px; (16 Treffer — haeufigstes Pattern) */
    min-height: 24px;
    font-size: 11px;
}

.app-chip-medium {
    /* min-height: 26px; font-size: 12px; (4 Treffer) */
    min-height: 26px;
    font-size: 12px;
}

.app-chip-action {
    /* min-height: 28px; font-size: 12px; (2 Treffer — Save/Add-Button) */
    min-height: 28px;
    font-size: 12px;
}

.app-chip-tiny {
    /* font-size: 10px; height: 20px; (1+ Treffer — Mini-Chip) */
    font-size: 10px;
    height: 20px;
}

/* ---- Layout ---- */

.app-kanban-column {
    /* kompletter Kanban-Spalten-Block (2 Treffer) */
    background: var(--app-surface-elevated);
    min-width: 220px;
    flex: 1;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-flex-1 {
    /* flex: 1; (>=6 Treffer) */
    flex: 1;
}

.app-flex-shrink-0 {
    /* flex-shrink: 0; (2 Treffer) */
    flex-shrink: 0;
}

.app-w-full {
    /* width: 100%; (>=3 Treffer) */
    width: 100%;
}

.app-h-full {
    /* height: 100%; (2 Treffer) */
    height: 100%;
}

.app-nowrap {
    /* white-space: nowrap; (>=2 Treffer) */
    white-space: nowrap;
}

.app-pre-wrap {
    /* white-space: pre-wrap; word-break: break-word; (Notiz-Text) */
    white-space: pre-wrap;
    word-break: break-word;
}

.app-padded-sm {
    /* padding: 4px; (2 Treffer — IconButton padding) */
    padding: 4px;
}

.app-opacity-muted {
    /* opacity: 0.7; (2 Treffer) */
    opacity: 0.7;
}

.app-mt-1px {
    /* margin-top: 2px; (Spezial-Spacing fuer ueberlappende Checkboxen) */
    margin-top: 2px;
}

.app-min-w-0 {
    /* min-width: 0; (Reset fuer Flex-Items, damit Text-Ellipsis greift) */
    min-width: 0;
}

.app-min-h-action {
    /* min-height: 40px; (2 Treffer — Stack mit grossen Action-Buttons) */
    min-height: 40px;
}

/* ---- Spalten-Breiten (DataGrid / Tabellen) ---- */

.app-col-w-40 {
    /* width: 40px; (6 Treffer — Icon-/Status-Spalte) */
    width: 40px;
}

.app-col-w-90 {
    /* width: 90px; */
    width: 90px;
}

.app-col-w-100 {
    /* width: 100px; (3 Treffer) */
    width: 100px;
}

.app-col-w-130 {
    /* width: 130px; (8 Treffer — haeufigste Tabellen-Spaltenbreite) */
    width: 130px;
}

/* ---- Filter-Bar (DashboardFilters etc.) ---- */

.app-filter-col {
    /* min-width: 130px; flex: 1 1 180px; max-width: 220px; (2 Treffer) */
    min-width: 130px;
    flex: 1 1 180px;
    max-width: 220px;
}

.app-filter-col-narrow {
    /* min-width: 120px; flex: 1 1 150px; max-width: 180px; (2 Treffer) */
    min-width: 120px;
    flex: 1 1 150px;
    max-width: 180px;
}

.app-min-w-130 {
    /* min-width: 130px; */
    min-width: 130px;
}

.app-min-w-140 {
    /* min-width: 140px; (2 Treffer) */
    min-width: 140px;
}

.app-min-w-150 {
    /* min-width: 150px; (2 Treffer) */
    min-width: 150px;
}

.app-min-w-160 {
    /* min-width: 160px; (2 Treffer) */
    min-width: 160px;
}

.app-min-w-180 {
    /* min-width: 180px; (3 Treffer) */
    min-width: 180px;
}

.app-min-w-200 {
    /* min-width: 200px; (2 Treffer) */
    min-width: 200px;
}

/* ---- Filter-Bar Varianten (Story 03) ---- */

.app-filter-col-sm {
    /* min-width: 100px; flex: 1 1 110px; max-width: 150px; (DashboardFilters) */
    min-width: 100px;
    flex: 1 1 110px;
    max-width: 150px;
}

.app-filter-col-md {
    /* min-width: 110px; flex: 1 1 140px; max-width: 180px; (DashboardFilters) */
    min-width: 110px;
    flex: 1 1 140px;
    max-width: 180px;
}

/* ---- Sonstiges (Story 03) ---- */

.app-bg-transparent {
    /* background: transparent; (Tabellen-Hintergrund auf Paper) */
    background: transparent;
}

.app-opacity-half {
    /* opacity: 0.5; (deaktivierte/sekundaere Icons) */
    opacity: 0.5;
}

.app-clickable {
    /* cursor: pointer; (Chip/Element interaktiv markieren) */
    cursor: pointer;
}

.app-overflow-x-auto {
    /* overflow-x: auto; */
    overflow-x: auto;
}

.app-min-w-max-content {
    /* min-width: max-content; (Inhalt erzwingt eigene Breite) */
    min-width: max-content;
}

.app-dialog-wide {
    /* max-width: 1200px; (RuleDryRunDialog) */
    max-width: 1200px;
}

.app-truncate-280 {
    /* max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; */
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.app-page-header-text {
    /* padding: 12px 16px 8px 16px; margin: 0; (PageHeader) */
    padding: 12px 16px 8px 16px;
    margin: 0;
}

.app-panel-surface {
    /* background: <surface-elevated>; border-radius: 6px; (RuleWizardPanel u.a.) */
    background: var(--app-surface-elevated);
    border-radius: 6px;
}

/* ---- MessageCard semantische Klassen (Story 03) ---- */

.app-card-subject {
    /* font-weight: 500; font-size: 13px; line-height: 1.3; */
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
}

.app-card-summary {
    /* font-size: 11px; line-height: 1.3; */
    font-size: 11px;
    line-height: 1.3;
}

/* ---- Layout-Container (Story 03) ---- */

.app-th-w-80 {
    /* width: 80px; (Tabellen-Header-Spalte) */
    width: 80px;
}

.app-kanban-stack {
    /* Innerer Stack-Container fuer Kanban-Spalten (Items + Empty-State) */
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
    padding: 0 2px;
}

.app-truncate-300 {
    /* max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; */
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-pa-0 {
    /* padding: 0; (Tabellen-Cell ohne Padding fuer eingebettete Panels) */
    padding: 0;
}

.app-flex-fixed-130 {
    /* flex: 0 0 130px; (feste Breite ohne Wachstum/Schrumpfung) */
    flex: 0 0 130px;
}

.app-scroll-60vh {
    /* overflow-y: auto; max-height: 60vh; (Suche-Ergebnisse, lange Listen) */
    overflow-y: auto;
    max-height: 60vh;
}

.app-scroll-300 {
    /* overflow-y: auto; max-height: 300px; (Preview-Listen) */
    overflow-y: auto;
    max-height: 300px;
}

/* ---- Story 04: Pages-Migration ---- */

/* Text-Groessen-Hilfen fuer Layout/AppBar/Cards */
.app-text-10 {
    /* font-size: 10px; (Mini-Chips, Mini-Labels) */
    font-size: 10px;
}

.app-text-14 {
    /* font-size: 14px; (kompakte AppBar-Brand) */
    font-size: 14px;
}

.app-text-085 {
    /* font-size: 0.85rem; (Card-Preview-Text) */
    font-size: 0.85rem;
}

/* Login-Layout (Verlauf-Hintergrund) */
.app-login-page {
    /* min-height: 100vh; align-items: center; background: linear-gradient(...); */
    min-height: 100vh;
    align-items: center;
    background: linear-gradient(135deg, var(--app-surface-elevated) 0%, var(--app-surface-base) 100%);
}

/* Profile: 2FA QR-Code + Mono-Anzeigen */
.app-qr-code {
    /* width: 200px; height: 200px; (QR-Code <img>) */
    width: 200px;
    height: 200px;
}

.app-mono-secret {
    /* background: var(--app-surface-card); font-family: monospace;
       font-size: 1.1rem; letter-spacing: 2px; (TOTP-Secret-Anzeige) */
    background: var(--app-surface-card);
    font-family: monospace;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.app-mono-codes {
    /* background: var(--app-surface-card); font-family: monospace;
       display: flex; flex-wrap: wrap; gap: 8px; (Recovery-Codes-Liste) */
    background: var(--app-surface-card);
    font-family: monospace;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Archive-Filter-Spalten (eigene Breite-Mappings) */
.app-filter-col-md-100 {
    /* min-width: 100px; flex: 1 1 140px; max-width: 180px; (Archive-Kategorie/Status) */
    min-width: 100px;
    flex: 1 1 140px;
    max-width: 180px;
}

.app-filter-col-md-120 {
    /* min-width: 120px; flex: 1 1 160px; max-width: 200px; (Archive-Status) */
    min-width: 120px;
    flex: 1 1 160px;
    max-width: 200px;
}

.app-search-box {
    /* min-width: 180px; width: 300px; (Archive-Volltextsuche) */
    min-width: 180px;
    width: 300px;
}

/* Statistics: Stat-Cards mit Akzent-Border */
.app-stat-card {
    /* text-align: center; border-top: 3px solid var(--app-accent); */
    text-align: center;
    border-top: 3px solid var(--app-accent);
}

/* Dashboard-Layout (Outer-Container + Mobile-Tab-Content + Desktop-Kanban-Row) */
.app-dashboard-page {
    /* display: flex; flex-direction: column; height: calc(100vh - 112px); overflow: hidden; */
    display: flex;
    flex-direction: column;
    height: calc(100vh - 112px);
    overflow: hidden;
}

.app-dashboard-tab-content {
    /* flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 8px 16px; */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 8px 16px;
}

.app-dashboard-tab-content-narrow {
    /* flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px 8px; */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 8px 8px;
}

.app-dashboard-kanban-row {
    /* overflow-x: auto; flex: 1; min-height: 0; padding: 0 16px 8px 16px; */
    overflow-x: auto;
    flex: 1;
    min-height: 0;
    padding: 0 16px 8px 16px;
}

/* MessageCard: Border-Color-Toggle ueber State-Klasse statt Inline-Style */
.app-msg-card {
    /* font-size: 13px; border-left: 3px solid transparent; (Default) */
    font-size: 13px;
    border-left: 3px solid transparent;
}
.app-msg-card.is-unread {
    /* dynamisch aktiv wenn Message ungelesen — ersetzt Inline-Style-Binding */
    border-left-color: var(--app-accent);
}

/* RuleList: Zeile fuer inaktive Regel — abgeblendet via State-Klasse */
.app-row-disabled {
    /* opacity: 0.6; (RuleList inaktiv-Marker) */
    opacity: 0.6;
}

/* Users: Zeile fuer gesperrten Benutzer */
.app-row-locked {
    /* opacity: 0.6; (Users.razor IsLocked) */
    opacity: 0.6;
}

/* MessageComposer: unsichtbarer Hoehen-Platzhalter bei Status=Done ohne Sent/Draft —
   haelt die Bauhoehe stabil, damit der Klick auf "Zurueck zur Uebersicht" pixelgenau
   die Position des vorherigen "Erledigt"-Buttons trifft. */
.app-composer-placeholder {
    visibility: hidden;
    pointer-events: none;
}

/* MessageComposer Forward-Modus: scrollbare Quote-Vorschau */
.app-quote-preview {
    max-height: 240px;
    overflow-y: auto;
}