/* =============================================
   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 --- */
    --font-family: 'Inter', 'Roboto', Helvetica, 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--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); }

/* Welcome card on the dashboard (below the stat tiles). */
.welcome-card { text-align: center; }
.welcome-icon {
    color: var(--color-primary) !important;
    font-size: 3rem !important;
}
.welcome-title { font-weight: 600 !important; }
.welcome-subtitle {
    color: var(--color-text-secondary);
    max-width: 520px;
    margin: 4px auto 0;
}

/* =============================================
   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;
}
.section-toolbar__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

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

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

/* 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). */
.simple-table-bare {
    min-width: 640px;
    background: transparent !important;
    box-shadow: none !important;
}

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