/* ═══════════════════════════════════════════════════════════════════════════
   NeedADoc Theme – MudBlazor → MAUI Design System Override
   Versions: .NET 10 / MudBlazor 7.x
   Ziel: Exakte visuelle Übereinstimmung mit der MAUI-App
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties (MAUI Token-Mapping) ─── */
:root {
    /* Brand */
    --nad-brand:            #357C7B;
    --nad-brand-strong:     #2B6766;
    --nad-brand-soft:       #EAF4F2;
    --nad-brand-light:      #76B0AB;

    /* Backgrounds */
    --nad-page-bg:          #F6F8F7;
    --nad-surface:          #FFFFFF;
    --nad-sunken:           #F3F6F5;

    /* Text */
    --nad-text-primary:     #163433;
    --nad-text-secondary:   #4E5754;
    --nad-text-muted:       #6B7572;
    --nad-text-subtle:      #98A29F;

    /* Semantic */
    --nad-error:            #C25B52;
    --nad-error-surface:    #F7E9E7;
    --nad-warning:          #C18A3E;
    --nad-warning-surface:  #F7EEDC;
    --nad-warning-text:     #8F6320;
    --nad-success:          #4F9477;
    --nad-success-surface:  #E8F3EE;
    --nad-success-text:     #357A5E;
    --nad-info:             #5A82A6;
    --nad-info-surface:     #E6EFF7;
    --nad-info-text:        #2E5A82;

    /* Borders */
    --nad-border-default:   #DFE5E3;
    --nad-border-light:     #EDF1F0;

    /* Radii */
    --nad-radius-sm:        8px;
    --nad-radius-md:        8px;
    --nad-radius-lg:        11px;
    --nad-radius-xl:        16px;
    --nad-radius-full:      9999px;

    /* Shadows */
    --nad-shadow-sm:        0 1px 3px rgba(22, 52, 51, 0.08);
    --nad-shadow-md:        0 4px 12px rgba(22, 52, 51, 0.10);

    /* Typography */
    --nad-font-display:     'Poppins', sans-serif;
    --nad-font-text:        'Mulish', system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD BUTTON OVERRIDES → MAUI Button-Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Primary Filled → MAUI Primary Button */
.mud-button-filled.mud-button-filled-primary,
.mud-button-root.mud-button-filled:not(.mud-button-filled-error):not(.mud-button-filled-secondary):not(.mud-button-filled-tertiary):not(.mud-button-filled-success):not(.mud-button-filled-warning):not(.mud-button-filled-info) {
    border-radius: var(--nad-radius-lg) !important;
    font-family: var(--nad-font-display) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: 44px !important;       /* h-11 */
    padding: 0 22px !important;
    background: var(--nad-brand) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-root.mud-button-filled:not(.mud-button-filled-error):hover {
    background: var(--nad-brand-strong) !important;
    box-shadow: var(--nad-shadow-sm) !important;
}

/* Outlined → MAUI Soft Button */
.mud-button-outlined {
    border-radius: var(--nad-radius-lg) !important;
    font-family: var(--nad-font-display) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: 44px !important;
    padding: 0 22px !important;
    transition: background 0.15s ease;
}
.mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--nad-brand) !important;
    color: var(--nad-brand) !important;
}
.mud-button-outlined.mud-button-outlined-primary:hover {
    background: var(--nad-brand-soft) !important;
}

/* Text Button */
.mud-button-text {
    text-transform: none !important;
    font-family: var(--nad-font-display) !important;
    font-weight: 600 !important;
    border-radius: var(--nad-radius-sm) !important;
}

/* Error/Danger Button → MAUI Danger */
.mud-button-filled.mud-button-filled-error {
    border-radius: var(--nad-radius-lg) !important;
    font-family: var(--nad-font-display) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    height: 44px !important;
    padding: 0 22px !important;
    background: transparent !important;
    color: var(--nad-error) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}
.mud-button-filled.mud-button-filled-error:hover {
    background: rgba(194, 91, 82, 0.08) !important;
}

/* Small buttons */
.mud-button-size-small.mud-button-filled {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD CHIP → NadBadge-Stil (MAUI Badge)
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-chip {
    border-radius: var(--nad-radius-full) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    height: auto !important;
    padding: 4px 11px !important;
    line-height: 1.4 !important;
}

/* Chip semantic colors */
.mud-chip.mud-chip-color-primary {
    background: var(--nad-brand-soft) !important;
    color: var(--nad-brand) !important;
    border: 1px solid var(--nad-brand) !important;
}
.mud-chip.mud-chip-color-success {
    background: var(--nad-success-surface) !important;
    color: var(--nad-success-text) !important;
    border: 1px solid var(--nad-success) !important;
}
.mud-chip.mud-chip-color-warning {
    background: var(--nad-warning-surface) !important;
    color: var(--nad-warning-text) !important;
    border: 1px solid var(--nad-warning) !important;
}
.mud-chip.mud-chip-color-error {
    background: var(--nad-error-surface) !important;
    color: var(--nad-error) !important;
    border: 1px solid var(--nad-error) !important;
}
.mud-chip.mud-chip-color-info {
    background: var(--nad-info-surface) !important;
    color: var(--nad-info-text) !important;
    border: 1px solid var(--nad-info) !important;
}
.mud-chip.mud-chip-color-default {
    background: var(--nad-sunken) !important;
    color: var(--nad-text-muted) !important;
    border: 1px solid var(--nad-border-default) !important;
}

/* Chip outlined variant → tighter border */
.mud-chip.mud-chip-outlined {
    border-width: 1px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD CARD / MUD PAPER → MAUI Card
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-card {
    border-radius: var(--nad-radius-sm) !important;
    box-shadow: var(--nad-shadow-sm) !important;
    border: 1px solid var(--nad-border-default) !important;
}

.mud-paper {
    border-radius: var(--nad-radius-sm) !important;
    box-shadow: var(--nad-shadow-sm) !important;
}

/* Elevation overrides – MAUI prefers subtle shadows */
.mud-elevation-0 { box-shadow: none !important; }
.mud-elevation-1 { box-shadow: var(--nad-shadow-sm) !important; }
.mud-elevation-2 { box-shadow: var(--nad-shadow-sm) !important; }
.mud-elevation-3 { box-shadow: var(--nad-shadow-md) !important; }
.mud-elevation-4 { box-shadow: var(--nad-shadow-md) !important; }
.mud-elevation-5 { box-shadow: var(--nad-shadow-md) !important; }

/* MudPaper with Outlined */
.mud-paper-outlined {
    border: 1px solid var(--nad-border-default) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD TEXTFIELD / MUD SELECT → MAUI Input
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-input-control .mud-input-slot {
    border-radius: var(--nad-radius-sm) !important;
    border-color: var(--nad-border-default) !important;
    font-family: var(--nad-font-text) !important;
}

.mud-input-control .mud-input-slot .mud-input {
    font-family: var(--nad-font-text) !important;
    font-size: 15px !important;
    padding: 10px 12px !important;
}

/* Focus state */
.mud-input-control.mud-input-control-focused .mud-input-slot {
    border-color: var(--nad-brand) !important;
    box-shadow: 0 0 0 1px var(--nad-brand) !important;
}

/* Label → MAUI Micro/Caption Stil */
.mud-input-label {
    font-family: var(--nad-font-text) !important;
}
.mud-input-label.mud-input-label-shrink {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--nad-text-subtle) !important;
}

/* Outlined variant */
.mud-input-outlined .mud-input-slot {
    border-radius: var(--nad-radius-sm) !important;
}
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--nad-radius-sm) !important;
    border-color: var(--nad-border-default) !important;
}

/* MudSelect */
.mud-select .mud-input-slot {
    border-radius: var(--nad-radius-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD TABS → MAUI Segment Control
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-tabs .mud-tabs-toolbar {
    background: var(--nad-sunken) !important;
    border-radius: var(--nad-radius-sm) !important;
    padding: 2px !important;
    gap: 0 !important;
}

.mud-tabs .mud-tab {
    font-family: var(--nad-font-display) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    border-radius: 6px !important;
    padding: 8px 18px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.mud-tabs .mud-tab.mud-tab-active {
    background: var(--nad-surface) !important;
    color: var(--nad-text-primary) !important;
    box-shadow: var(--nad-shadow-sm) !important;
    font-weight: 600 !important;
}

.mud-tabs .mud-tab:hover:not(.mud-tab-active) {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Tab indicator – hide default, we use pill-style */
.mud-tabs .mud-tab-slider {
    display: none !important;
}

/* Tab panels content padding */
.mud-tab-panel {
    padding: 18px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD SWITCH → MAUI Switch
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-switch .mud-switch-track {
    background: var(--nad-border-default) !important;
}
.mud-switch.mud-switch-checked .mud-switch-track {
    background: var(--nad-brand) !important;
}
.mud-switch .mud-switch-thumb {
    background: #FFFFFF !important;
    box-shadow: var(--nad-shadow-sm) !important;
}

/* Switch label */
.mud-switch .mud-switch-label {
    font-family: var(--nad-font-text) !important;
    font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD ALERT → MAUI Alert
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-alert {
    border-radius: var(--nad-radius-sm) !important;
    border: 1px solid !important;
    font-family: var(--nad-font-text) !important;
}
.mud-alert.mud-alert-filled-success {
    background: var(--nad-success-surface) !important;
    color: var(--nad-success-text) !important;
    border-color: var(--nad-success) !important;
}
.mud-alert.mud-alert-filled-warning {
    background: var(--nad-warning-surface) !important;
    color: var(--nad-warning-text) !important;
    border-color: var(--nad-warning) !important;
}
.mud-alert.mud-alert-filled-error {
    background: var(--nad-error-surface) !important;
    color: var(--nad-error) !important;
    border-color: var(--nad-error) !important;
}
.mud-alert.mud-alert-filled-info {
    background: var(--nad-info-surface) !important;
    color: var(--nad-info-text) !important;
    border-color: var(--nad-info) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD TABLE → MAUI Table
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-table-root {
    border-radius: var(--nad-radius-sm) !important;
    border: 1px solid var(--nad-border-default) !important;
    overflow: hidden !important;
}

.mud-table-root .mud-table-head th {
    font-family: var(--nad-font-text) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--nad-text-secondary) !important;
    border-bottom: 2px solid var(--nad-border-default) !important;
    background: var(--nad-sunken) !important;
    padding: 12px 16px !important;
}

.mud-table-root .mud-table-body td {
    font-size: 14px !important;
    color: var(--nad-text-primary) !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--nad-border-light) !important;
}

.mud-table-root .mud-table-body tr:last-child td {
    border-bottom: none !important;
}

.mud-table-root .mud-table-body tr:hover {
    background: rgba(53, 124, 123, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD APPBAR → Glassmorphism
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-appbar {
    backdrop-filter: saturate(1.1) blur(10px) !important;
    -webkit-backdrop-filter: saturate(1.1) blur(10px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD DIALOG → MAUI Modal
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-dialog {
    border-radius: var(--nad-radius-xl) !important;
    box-shadow: var(--nad-shadow-md) !important;
    border: 1px solid var(--nad-border-default) !important;
}

.mud-dialog .mud-dialog-title {
    font-family: var(--nad-font-display) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    color: var(--nad-text-primary) !important;
    padding: 18px 24px 8px !important;
}

.mud-dialog .mud-dialog-content {
    padding: 12px 24px !important;
    font-family: var(--nad-font-text) !important;
    color: var(--nad-text-secondary) !important;
}

.mud-dialog .mud-dialog-actions {
    padding: 12px 24px 18px !important;
    gap: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD NAVMENU → MAUI Navigation
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-drawer .mud-navmenu .mud-nav-link {
    font-family: var(--nad-font-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 10px 14px !important;
    letter-spacing: 0.01em !important;
    transition: background 0.12s ease, color 0.12s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD TOOLTIP
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-tooltip {
    border-radius: var(--nad-radius-sm) !important;
    font-family: var(--nad-font-text) !important;
    font-size: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD MENU / DROPDOWN
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-menu .mud-list {
    border-radius: var(--nad-radius-sm) !important;
    border: 1px solid var(--nad-border-default) !important;
    box-shadow: var(--nad-shadow-md) !important;
    padding: 4px !important;
}

.mud-menu .mud-list .mud-menu-item {
    border-radius: 6px !important;
    font-family: var(--nad-font-text) !important;
    font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD SNACKBAR / TOAST
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-snackbar {
    border-radius: var(--nad-radius-sm) !important;
    font-family: var(--nad-font-text) !important;
    box-shadow: var(--nad-shadow-md) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION HEADER (Micro/Caption)
   ═══════════════════════════════════════════════════════════════════════════ */

.nad-section-header {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--nad-text-subtle) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KPI / STAT CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.nad-kpi-card {
    flex: 1;
    background: var(--nad-surface);
    border: 1px solid var(--nad-border-default);
    border-radius: var(--nad-radius-xl);
    padding: 16px;
    text-align: center;
    min-width: 140px;
}

.nad-kpi-value {
    font-family: var(--nad-font-display);
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    color: var(--nad-text-primary);
}

.nad-kpi-label {
    font-family: var(--nad-font-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nad-text-secondary);
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAUI Card Utility Class
   ═══════════════════════════════════════════════════════════════════════════ */

.nad-card {
    background: var(--nad-surface);
    border: 1px solid var(--nad-border-default);
    border-radius: var(--nad-radius-sm);
    box-shadow: var(--nad-shadow-sm);
    padding: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-dark-theme,
[data-theme="dark"] {
    --nad-brand:            #76B0AB;
    --nad-brand-strong:     #A6CDC8;
    --nad-brand-soft:       #235353;
    --nad-brand-light:      #4E938F;

    --nad-page-bg:          #161B1A;
    --nad-surface:          #262D2B;
    --nad-sunken:           #1E2422;

    --nad-text-primary:     #DDE8E6;
    --nad-text-secondary:   #A7BBB7;
    --nad-text-muted:       #7A8E89;
    --nad-text-subtle:      #5A6E69;

    --nad-error:            #E59A92;
    --nad-error-surface:    #3A2020;
    --nad-warning:          #E3C07A;
    --nad-warning-surface:  #3A3020;
    --nad-warning-text:     #C18A3E;
    --nad-success:          #76B0AB;
    --nad-success-surface:  #1E3A2A;
    --nad-success-text:     #4F9477;
    --nad-info:             #9DB9D6;
    --nad-info-surface:     #1E3A3A;
    --nad-info-text:        #5A82A6;

    --nad-border-default:   #39413F;
    --nad-border-light:     #2D3532;

    --nad-shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.20);
    --nad-shadow-md:        0 4px 12px rgba(0, 0, 0, 0.30);
}

/* Dark mode – Chip adjustments */
.mud-dark-theme .mud-chip.mud-chip-color-default {
    background: var(--nad-sunken) !important;
    color: var(--nad-text-muted) !important;
    border-color: var(--nad-border-default) !important;
}

/* Dark mode – Tab adjustments */
.mud-dark-theme .mud-tabs .mud-tabs-toolbar {
    background: var(--nad-sunken) !important;
}
.mud-dark-theme .mud-tabs .mud-tab.mud-tab-active {
    background: var(--nad-surface) !important;
    color: var(--nad-text-primary) !important;
}

/* Dark mode – Table adjustments */
.mud-dark-theme .mud-table-root .mud-table-head th {
    background: var(--nad-sunken) !important;
    color: var(--nad-text-secondary) !important;
    border-bottom-color: var(--nad-border-default) !important;
}
.mud-dark-theme .mud-table-root .mud-table-body td {
    color: var(--nad-text-primary) !important;
    border-bottom-color: var(--nad-border-light) !important;
}
.mud-dark-theme .mud-table-root .mud-table-body tr:hover {
    background: rgba(118, 176, 171, 0.06) !important;
}