/* =============================================
   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;
}
.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;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
}
.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 {
    line-height: 1.15;
    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;
}

/* 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;
}

/* =============================================
   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; }
}

/* =============================================
   Responsive — Mobile (≤ 600px)
   ============================================= */
@media (max-width: 599.98px) {
    /* Layout + AppBar */
    .mud-main-content > .mud-container {
        padding: 12px !important;
        padding-top: 72px !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;
    }
}