/* =============================================
   AZ-3 Portal - Design System & Responsive Layer
   ---------------------------------------------
   Breakpoints (aligned with MudBlazor):
     xs   0     -  599.98px   mobile
     sm   600   -  959.98px   small tablet
     md   960   - 1279.98px   large tablet / small desktop
     lg  1280   - 1919.98px   desktop
     xl  1920+                large desktop
   ============================================= */

:root {
    /* --- Palette --- */
    --color-primary:            #0f766e;
    --color-primary-dark:       #0d5c56;
    --color-primary-light:      #14b8a6;
    --color-primary-gradient:   linear-gradient(135deg, #0f766e, #14b8a6);
    --color-primary-tint:       rgba(15, 118, 110, 0.08);
    --color-primary-tint-hover: rgba(15, 118, 110, 0.12);
    --color-primary-shadow:     rgba(15, 118, 110, 0.18);

    --color-text:          #0f172a;
    --color-text-body:     #334155;
    --color-text-secondary:#64748b;
    --color-text-muted:    #94a3b8;

    --color-surface:       #ffffff;
    --color-bg:            #f1f5f9;
    --color-bg-subtle:     #f8fafc;
    --color-bg-soft:       #f1f5f9;

    --color-border:        #e2e8f0;
    --color-border-strong: #cbd5e1;

    --color-success:      #16a34a;
    --color-success-bg:   #ecfdf5;
    --color-success-text: #047857;
    --color-warning-bg:   #fef3c7;
    --color-warning-text: #92400e;
    --color-danger:       #dc2626;
    --color-danger-bg:    #fef2f2;
    --color-danger-text:  #991b1b;

    --color-chip-bg:      #f1f5f9;
    --color-chip-text:    #475569;

    /* --- Radii --- */
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 4px 20px rgba(15, 23, 42, 0.08);
    --shadow-primary: 0 2px 8px rgba(15, 118, 110, 0.18);
    --shadow-primary-hover: 0 4px 16px rgba(15, 118, 110, 0.28);

    /* --- Typography ---
       System-Font-Stack statt Google-Fonts-CDN (DSGVO: keine IP-Leakage an Google).
       Reihenfolge: macOS/iOS (-apple-system, BlinkMacSystemFont), Windows (Segoe UI),
       Android (Roboto), Fallback Arial/sans. Inter wäre schöner, aber das Self-Hosting
       wäre +400 KB woff2 für minimalen Gewinn auf einer reinen Admin-UI. */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* --- Motion --- */
    --duration-fast: 0.15s;
    --duration-base: 0.2s;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =============================================
   Base
   ============================================= */
html, body {
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); }
.invalid { outline: 1px solid var(--color-danger); }
.validation-message { color: var(--color-danger); }

.blazor-error-boundary {
    background: #b32121;
    color: #fff;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
}
.blazor-error-boundary::after { content: "Ein Fehler ist aufgetreten." }

/* =============================================
   Sidebar / Drawer
   ============================================= */
.mud-drawer {
    border-right: 1px solid var(--color-border) !important;
    overflow-x: hidden !important;
}
.mud-drawer--closed .mud-nav-link-text {
    display: none !important;
}
.mud-drawer--closed .mud-navmenu .mud-divider {
    margin-left: 12px !important;
    margin-right: 12px !important;
}
/* Zugeklappt (schmale Leiste, 68 px): nur die Symbole der drei Einträge. Die
   Untereinträge der Gruppen (mit 44 px Einzug und Strich) und die Aufklapp-Pfeile
   standen sonst abgeschnitten in der Leiste. Der Gruppenkopf gibt den Klick an den
   Rahmen weiter (NavMenu, GruppeGeklickt), der die Schublade öffnet. Sein Befund
   vom 16.09.2026. */
.mud-drawer-mini.mud-drawer--closed .mud-navgroup-collapse {
    display: none !important;
}
.mud-drawer-mini.mud-drawer--closed .mud-nav-group > .mud-nav-link > svg:last-of-type {
    display: none !important;
}
.mud-drawer-mini.mud-drawer--closed .nav-gruppe {
    cursor: pointer;
}
.mud-drawer-mini.mud-drawer--closed .nav-gruppe .mud-nav-group > .mud-nav-link {
    pointer-events: none;
}
.mud-nav-link {
    border-radius: var(--radius-md) !important;
    margin: 2px 8px !important;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
.mud-nav-link:hover {
    background: var(--color-primary-tint) !important;
}
/* Indent child nav-links inside a nav-group (NOT the group header itself).
   The group header is a direct child button of .mud-nav-group; children live
   inside .mud-navgroup-collapse. Target those via the collapse wrapper. */
.mud-nav-group .mud-navgroup-collapse .mud-nav-link {
    padding-left: 44px !important;
    font-size: 0.875rem !important;
    position: relative;
}
.mud-nav-group .mud-navgroup-collapse .mud-nav-link::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 50%;
    width: 10px;
    height: 1px;
    background: var(--color-border-strong);
}
.mud-nav-link.active {
    background: var(--color-primary-tint-hover) !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
}

/* =============================================
   AppBar
   ============================================= */
.mud-appbar {
    backdrop-filter: blur(10px) !important;
}
.appbar-border { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.appbar-brand {
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
}
.appbar-subtitle {
    opacity: 0.8;
    margin-left: 4px;
}
.appbar-logout-btn {
    text-transform: none !important;
    font-weight: 500 !important;
}
.appbar-login-btn {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    text-transform: none !important;
}
.appbar-logout-form { margin: 0; }

/* Drawer surface (MudDrawer Style= in MainLayout). */
.app-drawer {
    background: #ffffff !important;
    border-right: 1px solid var(--color-border) !important;
    overflow-x: hidden !important;
}

/* Main content background + viewport-sized min-height. */
.app-main {
    min-height: 100vh;
    background: var(--color-bg);
}

/* =============================================
   Cards & Papers
   ============================================= */
.mud-paper {
    border-radius: var(--radius-lg) !important;
    transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.card-surface {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* Listing-page wrapper: card-surface that clips an inner MudTable so the table corners
   stay rounded inside the paper, and forces the table background to the surface token
   (MudBlazor defaults to transparent which leaks the page background through the header). */
.card-list {
    overflow: hidden;
}
.card-list > .mud-table {
    background: var(--color-surface) !important;
}

.stat-card {
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}
.stat-card:hover {
    border-color: var(--color-primary-tint-hover);
    box-shadow: var(--shadow-primary) !important;
    transform: translateY(-2px);
}
.stat-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.stat-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--radius-lg) !important;
}
.stat-avatar--firmen      { background: var(--color-primary-gradient) !important; }
.stat-avatar--mitarbeiter { background: linear-gradient(135deg, #d97706, #fbbf24) !important; }
.stat-avatar--protokolle  { background: linear-gradient(135deg, #7c3aed, #a78bfa) !important; }
.stat-avatar--briefe      { background: linear-gradient(135deg, #0284c7, #38bdf8) !important; }
.icon-on-gradient { color: #fff !important; }

/* Centered status page (Error, NotFound) - avatar + title + body + action. */
.status-page {
    text-align: center;
    max-width: 540px;
    margin: auto;
    padding: 64px 16px;
}
.status-avatar {
    width: 72px !important;
    height: 72px !important;
}
.status-avatar--danger  { background: var(--color-danger-bg) !important; }
.status-avatar--neutral { background: var(--color-bg-subtle) !important; }
.status-icon--danger  { color: var(--color-danger) !important; font-size: 2.5rem !important; }
.status-icon--neutral { color: var(--color-text-muted) !important; font-size: 2.5rem !important; }
.status-title--danger { color: var(--color-danger); }

/* =============================================
   Page Header (title + actions)
   ============================================= */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.page-header__title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 240px;
}
.page-header__title h4,
.page-header__title .mud-typography-h4 {
    font-weight: 700 !important;
    letter-spacing: -0.3px;
    /* Mindestens 1.3: die Inhaltsbox der Schriften dieses Stapels ist groesser als eine
       Zeile - DejaVu 1.164 em, Lato 1.200 em, Segoe UI (Windows) 1.330 em. Bei 1.15
       ragte die Unterlaenge aus der Zeilenbox heraus und wurde vom overflow abgeschnitten:
       bei "Firmenverwaltung" fehlte der Bogen des g.
       Kein overflow/text-overflow mehr. Beides stand hier ohne white-space: nowrap, und
       ohne das greift die Ellipse gar nicht - die Zeile bricht ohnehin um. Die Paarung
       hatte damit keine Wirkung ausser dem Beschnitt. */
    line-height: 1.3;
}
.page-header__subtitle {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin-top: 2px;
}
.page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.page-header__actions .mud-input-control {
    min-width: 200px;
}

/* Detail header variant (avatar + title + action) */
.detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.detail-header__info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 260px;
}
.detail-header__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.detail-header__text h4,
.detail-header__text .mud-typography-h4 {
    /* Gleiche Begruendung wie beim Seitenkopf. Hier wurde nichts abgeschnitten - es fehlt
       das overflow - aber die Unterlaenge ragte in den 2px-Abstand zur Unterzeile darunter,
       und in dieser Kopfzeile stehen Namen: "Zugenmaier", "Ziegler". */
    line-height: 1.3;
    word-break: break-word;
}
.detail-header__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Secondary toolbar inside tab panels */
.section-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.section-toolbar__info {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    flex: 1 1 auto;
}
/* Inline-Variante mit mehreren Kindern (z. B. Counter + Filter/Suche). Standard
   .section-toolbar__info ist nur für reinen Text gedacht. */
.section-toolbar__info--row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.section-toolbar__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Filter-/Such-Felder in Toolbars: dürfen schrumpfen, aber nicht unter 180px,
   sonst werden Adornment + Placeholder unleserlich auf schmalen Tablets. */
.toolbar-search {
    flex: 1 1 220px;
    min-width: 180px;
    max-width: 320px;
}
@media (max-width: 599.98px) {
    .toolbar-search {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* MudTabs content padding (PanelClass isn't reliably applied in MudBlazor 9,
   so we force it here so tab-panel content aligns with outer card insets). */
.mud-tabs.card-surface > .mud-tabs-panels > .mud-tab-panel {
    padding: 20px !important;
}
@media (max-width: 599.98px) {
    .mud-tabs.card-surface > .mud-tabs-panels > .mud-tab-panel {
        padding: 12px !important;
    }
}

/* =============================================
   Tables (MudTable)
   ============================================= */
.mud-table-container {
    border-radius: var(--radius-lg) !important;
}
.mud-table .mud-table-head .mud-table-cell {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: var(--color-text-secondary) !important;
    background: var(--color-bg-subtle) !important;
    border-bottom: 2px solid var(--color-border) !important;
    padding: 10px 16px !important;
    white-space: nowrap !important;
}
.mud-table .mud-table-body .mud-table-row {
    transition: background var(--duration-fast) var(--ease-out);
}
.mud-table .mud-table-body .mud-table-row:hover {
    background: var(--color-primary-tint) !important;
}
.mud-table .mud-table-body .mud-table-row.mud-selected-item,
.mud-table .mud-table-body .mud-table-row.mud-selected {
    background: var(--color-primary-tint-hover) !important;
}
.mud-table .mud-table-body .mud-table-cell {
    padding: 8px 16px !important;
    vertical-align: middle;
}
/* Pager footer alignment */
.mud-table-pagination-actions { gap: 4px; }

/* Simple tables (Ansprechpartner etc.) */
.mud-simple-table th {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: var(--color-text-secondary) !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
}
.mud-simple-table td {
    padding: 8px 12px !important;
    vertical-align: middle;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =============================================
   Tabs
   ============================================= */
.mud-tabs-header {
    border-bottom: 2px solid var(--color-border) !important;
}
.mud-tab.mud-tab-active {
    font-weight: 600 !important;
}

/* =============================================
   Buttons
   ============================================= */
.mud-button-filled {
    border-radius: var(--radius-md) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    box-shadow: var(--shadow-primary) !important;
}
.mud-button-filled:hover {
    box-shadow: var(--shadow-primary-hover) !important;
}
.mud-button-outlined {
    border-radius: var(--radius-md) !important;
    text-transform: none !important;
    font-weight: 500 !important;
}
.mud-button-text {
    text-transform: none !important;
}

/* Delete icon buttons */
.delete-btn {
    color: var(--color-text-muted) !important;
}
.delete-btn:hover {
    color: var(--color-danger) !important;
    background: rgba(239, 68, 68, 0.08) !important;
}

/* =============================================
   Chips
   ============================================= */
.mud-chip {
    border-radius: var(--radius-sm) !important;
    font-weight: 500 !important;
}
.chip-neutral {
    background: var(--color-chip-bg) !important;
    color: var(--color-chip-text) !important;
}
.chip-primary {
    background: #e0f2f1 !important;
    color: var(--color-primary) !important;
}
.chip-success {
    background: var(--color-success-bg) !important;
    color: var(--color-success-text) !important;
}
.chip-warning {
    background: var(--color-warning-bg) !important;
    color: var(--color-warning-text) !important;
}
.chip-tiny { font-size: 0.7rem !important; }

/* =============================================
   Dialogs
   ============================================= */
.mud-dialog {
    border-radius: var(--radius-xl) !important;
}
.mud-dialog .mud-dialog-title {
    padding: 20px 24px 12px !important;
}
.mud-dialog .mud-dialog-content {
    padding: 0 24px 16px !important;
}
.mud-dialog .mud-dialog-actions {
    padding: 12px 24px 20px !important;
    gap: 8px;
}

/* =============================================
   Forms / Inputs
   ============================================= */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--radius-md) !important;
}
.mud-input-helper-text {
    margin-top: 4px !important;
}
/* MudBlazor-Default-Line-Height schneidet Unterlängen von g/p/q/y/j am unteren
   Rand ab. 1.4 lässt genug Platz für Descender ohne die Field-Höhe sichtbar
   zu vergrößern. Gilt für Label (oben rein-fließend), Input-Slot und Placeholder. */
.mud-input-label,
.mud-input-slot input,
.mud-input-slot textarea,
.mud-input-slot .mud-input-root {
    line-height: 1.4 !important;
}

/* =============================================
   Empty State
   ============================================= */
.empty-state {
    text-align: center;
    padding: 32px 20px;
    background: var(--color-bg-subtle);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
}
.empty-state .mud-icon-root {
    font-size: 3rem !important;
    margin-bottom: 8px;
    color: var(--color-text-muted) !important;
}
.empty-state__text {
    color: var(--color-text-secondary);
    margin-top: 4px;
}
.empty-state__hint {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    margin-top: 2px;
}

/* =============================================
   Snackbar
   ============================================= */
.mud-snackbar {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* =============================================
   Scrollbars
   ============================================= */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* =============================================
   Auth Layout (Login / AccessDenied)
   ============================================= */
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--color-bg);
    padding: 16px;
    font-family: var(--font-family);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-lg);
}
.auth-card--center {
    text-align: center;
}
.auth-header {
    text-align: center;
    margin-bottom: 32px;
}
.auth-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary-gradient);
    margin-bottom: 12px;
}
.auth-avatar--danger {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}
.auth-title {
    font-family: var(--font-family);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 4px;
}
.auth-title--neutral {
    color: var(--color-text);
}
.auth-subtitle {
    font-family: var(--font-family);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 28px;
}
.auth-error {
    background: var(--color-danger-bg);
    border: 1px solid #fecaca;
    color: var(--color-danger);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    margin-bottom: 20px;
}
.auth-form-group { margin-bottom: 20px; }
.auth-form-group label {
    display: block;
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-body);
    margin-bottom: 6px;
}
.auth-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-family: var(--font-family);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
    box-sizing: border-box;
    background: var(--color-surface);
    color: var(--color-text);
}
.auth-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.auth-input::placeholder { color: var(--color-text-muted); }
.auth-field-error {
    color: var(--color-danger);
    font-size: 0.8rem;
    margin-top: 4px;
    display: block;
}
.auth-check-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}
.auth-check {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.auth-check-label {
    font-family: var(--font-family);
    font-size: 0.875rem;
    color: var(--color-text-body);
    cursor: pointer;
    margin: 0;
}
.auth-button {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-family);
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #0d9488);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    box-sizing: border-box;
}
.auth-button:hover {
    opacity: 0.92;
    color: #fff;
}
.auth-button:active { transform: scale(0.99); }

/* =============================================
   Utility
   ============================================= */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 40px;
    overflow: hidden;
}

/* Keep chip labels from blowing out narrow table columns (e.g. "Betriebsspezifisch"
   in the 160px Typ column of the Verträge-Tab). Ellipsis at the chip's max width
   instead of forcing the cell to expand. */
.mud-chip-content {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Typography tokens - used in place of ad-hoc inline color styles. */
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted-italic {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Trailing action column in MudTable rows (edit / delete icons). */
.table-actions {
    text-align: right;
    white-space: nowrap;
}
/* Knoepfe in der Aktionsspalte auf eine Linie zwingen.
   MudBlazor gibt einem MudIconButton "display:inline-flex; vertical-align:middle", der
   Huelle eines MudTooltip dagegen nur "display:inline-block" - also die Vorgabe baseline.
   Stehen in derselben Zelle Knoepfe mit und ohne Tooltip nebeneinander, sitzen sie
   deshalb auf zwei verschiedenen Hoehen: die mit Tooltip auf der Grundlinie, die ohne
   in der Mitte. Sichtbar war das in vier Listen, wo Bearbeiten und Loeschen ohne
   Tooltip hinter Ansehen/Drucken/Senden stehen.
   Die Regel gilt fuer die Huelle, nicht fuer den Knopf - damit ist es auch fuer jede
   kuenftige Zelle erledigt, egal ob dort ein Tooltip haengt oder nicht. */
.table-actions .mud-tooltip-root {
    vertical-align: middle;
}

/* Row min-width reset so flex/grid children can truncate instead of expanding. */
.min-w-0 { min-width: 0; }

/* Stat card number + label pair (Home dashboard). */
.stat-number {
    line-height: 1;
    font-weight: 700;
}
.stat-label {
    color: var(--color-text-secondary);
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Table date column: non-wrapping bold date stamp (Brief/Protokoll listings). */
.date-cell {
    font-weight: 600;
    white-space: nowrap;
}
.nowrap { white-space: nowrap; }

/* Detail-page title avatar (FirmaDetail header). */
.avatar-primary {
    background: var(--color-primary-gradient) !important;
    color: #fff !important;
    flex-shrink: 0;
}

/* Primary-coloured icon that should not shrink inside a flex row. */
.icon-primary-flex {
    color: var(--color-primary) !important;
    flex-shrink: 0;
}

/* Niederlassung sub-card inside FirmaDetail (bordered inner paper). */
.niederlassung-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* MudSimpleTable rendered without its default paper background (used when the table is
   embedded inside another card - the outer card provides the surface already). The
   min-width keeps columns readable on desktop/tablet; at <=600px we relax it so the
   surrounding .table-scroll wrapper can provide horizontal scrolling only when actually
   needed instead of forcing it unconditionally. */
.simple-table-bare {
    min-width: 640px;
    background: transparent !important;
    box-shadow: none !important;
}
@media (max-width: 599.98px) {
    .simple-table-bare { min-width: 520px; }
}

/* Success / muted status labels for table rows. */
.text-success-strong { color: var(--color-success-text); }
.icon-success-sm {
    color: var(--color-success-text);
    font-size: 1rem;
}
.icon-success-md {
    color: var(--color-success-text);
    font-size: 2rem;
}
.empty-inline {
    color: var(--color-text-muted);
    font-style: italic;
    padding: 8px 4px;
}

/* Section toolbar variant with inline icon + strong title + muted count. */
.ansprechpartner-label {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ansprechpartner-label strong {
    color: var(--color-text-body);
    font-weight: 600;
}

/* Ansprechpartner name column cell. */
.ap-name {
    font-weight: 500;
    white-space: nowrap;
}

/* Firma listing: avatar initial + niederlassung one-liner. */
.firma-avatar {
    background: #e0f2f1 !important;
    color: var(--color-primary) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
}
.niederlassung-line {
    color: var(--color-text-body);
    line-height: 1.4;
}

/* Gestapelte Tabellen (MudTable ab Breakpoint Sm, also unter 960px): Beschriftung links,
   Wert rechts, eine Zeile je Spalte. Gemessen am 15.09.2026 auf 390 und 768 px Breite: die
   Tabelle wurde breiter als ihr Rahmen (389 zu 340 px), weil die Chips nicht umbrechen und
   eine Zelle ihr max-width aus der Spaltenansicht behielt - Datum, Termin und Vitalwerte waren
   rechts abgeschnitten. Deshalb: Tabelle auf Rahmenbreite festnageln, Zellen dürfen schmal
   werden, Chips bekommen den Platz rechts und kürzen mit Auslassungspunkten. */
@media (max-width: 959.98px) {
    .mud-table.mud-sm-table .mud-table-root {
        width: 100% !important;
        table-layout: fixed !important;
    }
    .mud-table.mud-sm-table .mud-table-body .mud-table-cell {
        min-width: 0 !important;
        max-width: none !important;
    }
    .mud-table.mud-sm-table .mud-table-body .mud-table-cell > * {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        text-align: right;
    }
    .mud-table.mud-sm-table .mud-table-body .mud-table-cell .chip-row {
        display: flex;
        justify-content: flex-end;
        max-height: none;
    }
    .mud-table.mud-sm-table .mud-chip { max-width: 100%; }
    .mud-table.mud-sm-table .mud-chip .mud-chip-content { min-width: 0; }
}

/* Aktionsspalte bleibt sichtbar, wenn die Tabelle seitlich scrollt (12 Spalten der
   Protokolle auf 1366 px Breite): rechts angeheftet, mit eigenem Hintergrund, damit sie
   die darunter durchlaufenden Zellen abdeckt. Nur in der Spaltenansicht - gestapelt gibt es
   nichts zu scrollen. */
@media (min-width: 960px) {
    .mud-table .mud-table-body .table-actions {
        position: sticky;
        right: 0;
        background: var(--mud-palette-surface, #fff);
        z-index: 1;
    }
    .mud-table .mud-table-body .mud-table-row:hover .table-actions {
        background: var(--color-primary-tint) !important;
    }
    .mud-table .mud-table-body .mud-table-row.mud-selected-item .table-actions,
    .mud-table .mud-table-body .mud-table-row.mud-selected .table-actions {
        background: var(--color-primary-tint-hover) !important;
    }
}

/* Reiterleiste: sieben Reiter (Firma) und sechs (Akte) passen auf 1366 px nur ohne die
   Mindestbreite von 160 px je Reiter und mit weniger Innenabstand; unter 1400 px fallen die
   Symbole weg. Sonst liegt der letzte Reiter hinter einem Pfeil, auf dem verbreitetsten
   Laptopmass. Gemessen am 15.09.2026. */
.mud-tabs .mud-tab { min-width: 0 !important; }
@media (max-width: 1599.98px) {
    .mud-tabs .mud-tab { padding: 0 14px !important; }
}
@media (max-width: 1399.98px) {
    .mud-tabs .mud-tab .mud-icon-root { display: none !important; }
}
/* Tablet quer (1024 px): die sieben Reiter der Firma sind 942 px breit, die Leiste 974 -
   das reicht nur ohne die Pfeile, die MudBlazor sonst dazustellt. 10 px Abstand je Seite
   spart 56 px. Gemessen am 15.09.2026. */
@media (max-width: 1099.98px) {
    .mud-tabs .mud-tab { padding: 0 10px !important; }
}

/* =============================================
   Responsive - Tablet (<= 1200px)
   ============================================= */
@media (max-width: 1199.98px) {
    .page-header__actions .mud-input-control {
        min-width: 180px;
    }
    .mud-table .mud-table-cell { padding: 8px 12px !important; }
    .mud-table .mud-table-head .mud-table-cell { padding: 10px 12px !important; }
}

/* =============================================
   Responsive - Small Tablet (<= 960px)
   ============================================= */
@media (max-width: 959.98px) {
    .page-header h4,
    .page-header__title h4,
    .page-header__title .mud-typography-h4 {
        font-size: 1.5rem !important;
    }
    .detail-header__text h4,
    .detail-header__text .mud-typography-h4 {
        font-size: 1.4rem !important;
    }
    .mud-appbar { padding: 0 12px !important; }
    .mud-table { font-size: 0.85rem !important; }
    /* Die kleinen Symbolknöpfe (Bearbeiten, Löschen, Ansehen in Tabellen, Impfbuch,
       Niederlassungen, Karteikarte) sind mit 26 x 38 px zu klein für den Finger; 10 px
       Polster machen 40 x 42 daraus. Gemessen am 15.09.2026 auf 390 px. */
    .mud-icon-button.mud-icon-button-size-small { padding: 10px !important; }
}

/* Dieselben Klickziele auf jedem Geraet mit Finger statt Maus, unabhaengig von der
   Breite: ein Tablet quer (1024 px) liegt ueber der 960-px-Grenze und hatte die Knoepfe
   weiter mit 26 x 26 px. Gemessen am 16.09.2026. */
@media (pointer: coarse) {
    .mud-icon-button.mud-icon-button-size-small { padding: 10px !important; }
}

/* =============================================
   Responsive - Mobile (<= 600px)
   ============================================= */
@media (max-width: 599.98px) {
    /* Layout + AppBar */
    /* Kein eigener Abstand nach oben: den Platz für die feste Kopfleiste gibt
       MudMainContent selbst. 72 px hier waren ein leerer Streifen unter der Leiste. */
    .mud-main-content > .mud-container {
        padding: 12px !important;
    }
    .mud-appbar { padding: 0 8px !important; }
    .mud-appbar .mud-button-root { padding: 4px 8px !important; }

    /* Page headers stack */
    .page-header { gap: 10px; margin-bottom: 16px; }
    .page-header__title { flex: 1 1 100%; }
    .page-header__title h4,
    .page-header__title .mud-typography-h4 { font-size: 1.3rem !important; }
    .page-header__actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }
    .page-header__actions > * { flex: 1 1 auto; }
    .page-header__actions .mud-input-control {
        min-width: 0;
        width: 100%;
        max-width: none !important;
    }
    .page-header__actions .mud-button-root {
        flex: 0 0 auto;
    }

    /* Detail header stacks */
    .detail-header { gap: 10px; }
    .detail-header__info { flex: 1 1 100%; }
    .detail-header__actions {
        margin-left: 0;
        flex: 1 1 100%;
    }
    .detail-header__actions .mud-button-root { flex: 1 1 auto; }

    /* Section toolbar stacks gracefully */
    .section-toolbar { gap: 10px; }
    .section-toolbar__info { flex: 1 1 100%; }
    .section-toolbar__actions { flex: 1 1 100%; }
    .section-toolbar__actions .mud-button-root { flex: 1 1 auto; }

    /* Stat cards */
    .stat-card { padding: 16px !important; }
    .stat-avatar { width: 40px !important; height: 40px !important; }

    /* Tables */
    .mud-table { font-size: 0.8rem !important; }
    .mud-table .mud-table-head .mud-table-cell {
        font-size: 0.68rem !important;
        padding: 8px 10px !important;
    }
    .mud-table .mud-table-cell { padding: 8px 10px !important; }
    .mud-table-pagination {
        flex-wrap: wrap !important;
    }
    .mud-table-pagination-caption-container {
        flex-wrap: wrap;
    }

    /* Buttons shrink-to-fit */
    .mud-button-filled,
    .mud-button-outlined,
    .mud-button-text {
        font-size: 0.85rem !important;
    }
    .mud-button-root { min-height: 38px; }

    /* Dialogs go edge-to-edge */
    .mud-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        border-radius: var(--radius-lg) !important;
    }
    .mud-dialog .mud-dialog-title { padding: 16px 16px 8px !important; }
    .mud-dialog .mud-dialog-content {
        padding: 0 16px 12px !important;
        max-height: calc(100vh - 170px) !important;
        overflow-y: auto !important;
    }
    .mud-dialog .mud-dialog-actions {
        padding: 10px 16px 14px !important;
        flex-wrap: wrap;
    }
    .mud-dialog .mud-dialog-actions .mud-button-root {
        flex: 1 1 auto;
    }

    /* Tabs scroll horizontally */
    .mud-tabs-header {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
    }
    .mud-tab {
        white-space: nowrap !important;
        min-width: unset !important;
        padding: 8px 14px !important;
        font-size: 0.85rem !important;
    }

    /* Auth cards */
    .auth-card { padding: 24px; }
}

/* =============================================
   Responsive - Very Narrow Mobile (<= 380px)
   ============================================= */
@media (max-width: 380px) {
    .page-header__title h4,
    .page-header__title .mud-typography-h4 { font-size: 1.15rem !important; }
    .detail-header__text h4,
    .detail-header__text .mud-typography-h4 { font-size: 1.15rem !important; }
    .stat-avatar { width: 36px !important; height: 36px !important; }
    .mud-table .mud-table-head .mud-table-cell,
    .mud-table .mud-table-cell { padding: 6px 8px !important; }
}

/* =============================================
   Mitarbeiter-Detail: Stammdaten + Besonderes + Impfbuch
   ============================================= */

/* Tabellenzeilen, die per Click navigieren - dezenter Hover und Cursor */
.cursor-pointer { cursor: pointer; }

/* Zwei-Zeilen-Truncation für Befund/Bemerkungs-Auszüge in Tabellen */
.cell-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-body);
}

/* Card-Section-Titel über Stammdaten-Block */
.card-section-title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.7rem;
}

/* Stammdaten-Card: Label + Value vertikal gestapelt */
.stammdaten-card {
    height: 100%;
}
.meta-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-bottom: 2px;
}
.meta-value {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: 500;
    word-break: break-word;
}
.meta-value--multiline {
    white-space: pre-wrap;
}

/* "Besonderes"-Card: prominent gelb hinterlegt, deutliches Signal an die Ärztin */
.besonderes-card {
    height: 100%;
    background: var(--color-warning-bg);
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    border-radius: var(--radius-lg);
}
.besonderes-card__text {
    color: var(--color-warning-text);
    white-space: pre-wrap;
    font-weight: 500;
    line-height: 1.5;
}

/* Impfbuch: großzügige Cards in responsiver Grid-Reihung */
.impfbuch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.impfbuch-card {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    background: var(--color-surface);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}
.impfbuch-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.impfbuch-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}
.impfbuch-card__title-block {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.impfbuch-card__icon {
    color: var(--color-primary);
    margin-top: 2px;
    flex-shrink: 0;
}
.impfbuch-card__title {
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}
.impfbuch-card__date {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.impfbuch-card__actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.impfbuch-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}
.impfbuch-card__row {
    display: flex;
    gap: 8px;
    font-size: 0.875rem;
    flex-wrap: wrap;
}
.impfbuch-card__label {
    color: var(--color-text-secondary);
    font-weight: 500;
    min-width: 70px;
}
.impfbuch-card__value {
    color: var(--color-text);
    word-break: break-word;
    flex: 1;
}
.impfbuch-card__value--mono {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}
.impfbuch-card__note {
    margin-top: 4px;
    padding: 8px 10px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    color: var(--color-text-body);
    font-size: 0.875rem;
    white-space: pre-wrap;
}

/* Mobile-Optimierung: Cards laufen voller, weniger Innenabstand */
@media (max-width: 599.98px) {
    .impfbuch-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .impfbuch-card {
        padding: 14px 14px;
    }
    .impfbuch-card__label {
        min-width: 60px;
    }
    .besonderes-card {
        border-left-width: 4px;
    }
}

/* Tagestrennung in den Protokolllisten: jeder Tag bekommt eine eigene Zeile mit dem
   ausgeschriebenen Datum. Bewusst kraeftig - sie soll beim Ueberfliegen sofort sehen,
   wo ein Tag aufhoert und der naechste beginnt. */
/* Gruppenkopf in den Stammdaten-Listen (Kategorie der Aufgabenfelder). Bewusst leiser als
   die Tagestrennung der Protokolle: der Kopf gliedert eine ruhige Verwaltungsliste, er
   soll nicht um Aufmerksamkeit konkurrieren. Vorher stand hier eine Klasse, die es in
   keinem Stylesheet gab - die Zeile war damit von den Datenzeilen nicht zu unterscheiden. */
.gruppenkopf {
    background: var(--color-bg-subtle) !important;
    border-top: 1px solid var(--color-border) !important;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.78rem;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.tagestrenner {
    background: var(--color-primary-tint);
}
.tagestrenner__zelle {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-primary-dark);
    letter-spacing: 0.01em;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-top: 2px solid var(--color-primary) !important;
}
.tagestrenner__inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ---- Karteikarte -------------------------------------------------------------------
   Ihr Wortlaut vom 25.08.2026: "Wie so eine Rolle oeffnen." Deshalb eine Spalte
   untereinander und keine Tabelle: der geschriebene Text soll lesbar sein, nicht in eine
   Zelle passen. */
.karteikarte {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.karteikarte__eintrag {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    background: var(--color-surface);
}
.karteikarte__kopf {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.karteikarte__datum {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 104px;
}
.karteikarte__titel {
    flex: 1 1 auto;
    min-width: 0;
}
.karteikarte__angaben {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 10px;
    padding-left: 118px;
}
.karteikarte__angabe {
    display: block;
}
.karteikarte__textkopf {
    display: block;
    margin-top: 10px;
    padding-left: 118px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--color-text-secondary);
}
/* pre-wrap haelt die Absaetze, die sie getippt hat - "im Fliesstext zu lesen ... was der
   Reihe nach geschrieben wurde". */
.karteikarte__text {
    white-space: pre-wrap;
    margin-top: 4px;
    padding-left: 118px;
    color: var(--color-text);
    line-height: 1.55;
}
.karteikarte__doks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-left: 118px;
}
/* Traeger fuer Knopf und Vorschaufenster - der Popover haengt am Knopf, nicht an der Zeile. */
.karteikarte__dok {
    position: relative;
}
/* Ihr Wortlaut vom 25.08.2026: "auch bei den PDFs in klein zb sie geht mit der maus
   drueber und sieht eine vorschau". 260 x 340 Punkt: schmaler wird eine A4-Seite
   unleserlich, breiter deckt das Fenster den Eintrag darunter zu. */
.karteikarte__vorschau {
    width: 260px;
}
.karteikarte__vorschau-kopf {
    padding: 6px 10px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.karteikarte__vorschau-rahmen {
    display: block;
    width: 260px;
    height: 340px;
    border: 0;
    background: var(--mud-palette-background-grey);
}
.karteikarte__vorschau-laedt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 340px;
}

/* Auf schmalen Schirmen faellt die Datumsspalte nach oben, der Einzug entfaellt. */
@media (max-width: 600px) {
    .karteikarte__kopf { flex-wrap: wrap; }
    .karteikarte__datum { flex-direction: row; align-items: center; min-width: 0; }
    .karteikarte__angaben,
    .karteikarte__textkopf,
    .karteikarte__text,
    .karteikarte__doks { padding-left: 0; }
}