/* ===== Global Reset ===== */
h1, h2, h3, h4, h5, h6 {
    outline: none;
}

/* ===== Font: Plus Jakarta Sans (self-hosted) ===== */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/PlusJakartaSans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/PlusJakartaSans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Compact Filter Bar =====
   MudBlazor Dense="true" + Margin="Margin.Dense" ist auf allen Komponenten gesetzt.
   Diese Overrides gehen DARUEBER HINAUS fuer ein extra-kompaktes Layout (12px Font, 6px Padding).
   MudBlazor bietet keine Props fuer diese Granularitaet — daher CSS-Overrides noetig.
*/
.filter-bar {
    position: relative;
    z-index: 1000;
}

/* MudBlazor Margin.Dense setzt margin-top: 8px — wir brauchen 0 fuer die kompakte Filter-Leiste */
.filter-bar .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* MudSelect hat eine Default min-width die das Layout sprengt; flex:none verhindert ungewolltes Wachsen */
.filter-bar .mud-select {
    min-width: 0 !important;
    flex: none !important;
}

/* Einzelne Select-Filter (Gelesen, Zeitraum) brauchen eine feste Mindestbreite */
.filter-bar .filter-select-read {
    min-width: 110px !important;
}
.filter-bar .filter-select-period {
    min-width: 148px !important;
}

/* Kompaktere Eingabefelder: 6px statt MudBlazor-Dense ~10px, 12px Font statt 14px */
.filter-bar .mud-select .mud-input-slot,
.filter-bar .mud-input .mud-input-slot {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 12px !important;
}

/* Kleinere Labels passend zum 12px Font */
.filter-bar .mud-input-label {
    font-size: 11px !important;
}

/* Kleinere Adornment-Icons passend zum kompakten Layout */
.filter-bar .mud-select .mud-input-adornment svg,
.filter-bar .mud-input .mud-input-adornment svg {
    font-size: 18px !important;
}

/* Checkbox-Text im Filter an 12px Font anpassen */
.filter-bar .mud-checkbox .mud-typography {
    font-size: 12px !important;
}

/* ===== Compact Select Dropdowns (via PopoverClass="compact-popover") =====
   Popover rendert ausserhalb des Komponenten-DOM, daher CSS noetig.
   Vorher global auf .mud-popover — jetzt gescopet via .compact-popover Klasse.
*/
.compact-popover .mud-list-item {
    padding: 2px 8px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.compact-popover .mud-list-item-gutters {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.compact-popover .mud-list-item .mud-list-item-icon {
    min-width: 0 !important;
    margin-right: 8px !important;
    width: auto !important;
    margin-left: -4px !important;
}

.compact-popover .mud-list-item .mud-checkbox {
    margin: 0 !important;
    padding: 0 !important;
}

.compact-popover .mud-list-item .mud-checkbox .mud-button-root {
    padding: 2px !important;
    width: 28px !important;
    height: 28px !important;
}

.compact-popover .mud-list-item .mud-checkbox .mud-icon-root {
    font-size: 16px !important;
}

.compact-popover .mud-list-item .mud-list-item-text {
    font-size: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}

/* ===== Login Layout ===== */
.login-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* ===== Archive / Search Table Helpers ===== */
.archive-empty {
    text-align: center;
    color: var(--mud-palette-text-secondary);
    padding: 32px 16px !important;
}

.search-summary-cell {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-context-cell {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-highlight {
    background: rgba(255, 200, 0, 0.3);
    font-weight: 600;
    border-radius: 2px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    /* Kompaktere Filter-Bar auf Mobile: volle Breite pro Zeile */
    .filter-bar {
        gap: 4px;
    }

    /* AppBar-Titel kuerzen */
    .mud-appbar .mud-typography-h6 {
        font-size: 14px;
    }

    /* Kompaktere Chips in der AppBar */
    .mud-appbar .mud-chip {
        font-size: 10px;
    }

    /* Tabellen: kein nowrap auf Mobile */
    .archive-table {
        white-space: normal;
    }
}

/* ===== DatePicker Popover Fix =====
   MudDatePicker-Popover braucht freie Breite und hohen z-index,
   weil der Kalender sonst abgeschnitten wird.
*/
.mud-popover.mud-picker-popover {
    max-width: none !important;
    min-width: 320px !important;
    z-index: 999999 !important;
}