/**
 * Material-Design-2-Theme (zweite Frontend-Design-Option).
 *
 * Wird im Frontend-Layout nur geladen, wenn die Instanz-Einstellung
 * design_style = material aktiv ist; alle Regeln sind auf
 * body.design-material gescoped. Das Theme arbeitet zweistufig:
 *   1. Token-Overrides (Farben, Radien, Schatten, Schrift) – wirken
 *      automatisch auf alle Komponenten aus app.css und Modul-CSS,
 *      da diese ausschließlich var(--…)-Tokens referenzieren.
 *   2. Gezielte Komponenten-Overrides für die Material-Signaturen:
 *      farbige App-Bar, heller Navigations-Drawer, flache Karten mit
 *      Elevation, Material-Buttons, -Tabs, -Dialoge und -Tabellen.
 * Kein Markup-Umbau nötig – Standard-Design bleibt unangetastet.
 */

/* ============================================================
   1. Token-Overrides
============================================================ */
body.design-material {
    /* Material Blue als Primärton */
    --color-primary: #1976d2;
    --color-primary-rgb: 25, 118, 210;
    --color-primary-dark: #1565c0;
    --color-primary-light: #42a5f5;
    --color-primary-pale: #e3f2fd;
    --color-primary-soft: #bbdefb;
    --color-primary-muted: #90caf9;
    --color-primary-strong: #1565c0;
    --color-primary-deep: #0d47a1;

    /* Material Grey als neutrale Skala (beide Grau-Familien) */
    --gray-50: #fafafa; --gray-100: #f5f5f5; --gray-200: #eeeeee;
    --gray-300: #e0e0e0; --gray-400: #9e9e9e; --gray-500: #757575;
    --gray-600: #616161; --gray-700: #424242; --gray-800: #303030;
    --gray-900: #212121; --gray-950: #121212;
    --color-gray-50: #fafafa; --color-gray-100: #f5f5f5; --color-gray-200: #eeeeee;
    --color-gray-300: #e0e0e0; --color-gray-400: #bdbdbd; --color-gray-500: #9e9e9e;
    --color-gray-700: #616161; --color-gray-800: #424242; --color-gray-900: #212121;
    --color-secondary: #757575;
    --color-secondary-dark: #616161;
    --color-bg-alt: #fafafa;

    /* Blaue Tönungen folgen dem Material-Primärton */
    --tint-blue-text: #1565c0;
    --tint-blue-strong: #1565c0;

    /* Statusfarben auf Material-Palette (600er-Stufen) */
    --color-success: #43a047; --color-success-dark: #388e3c;
    --color-danger: #e53935; --color-danger-dark: #d32f2f;
    --color-warning: #fb8c00; --color-warning-dark: #f57c00;
    --color-info: #00acc1; --color-info-dark: #0097a7;

    /* KPI-/Bootstrap-Kompat-Töne ebenfalls materialisieren */
    --bs-primary: #1976d2; --bs-primary-light: #64b5f6;
    --bs-success: #43a047; --bs-success-dark: #388e3c;
    --bs-danger: #e53935; --bs-warning: #ffb300;
    --bs-info: #00acc1; --bs-teal: #00897b; --bs-orange: #fb8c00;
    --bs-indigo: #3949ab; --bs-purple: #8e24aa;

    /* App-Bar in Primärfarbe, Drawer hell */
    --navbar-bg: var(--color-primary);
    --sidebar-bg: #ffffff;
    --sidebar-text: #5f6368;
    --sidebar-hover-bg: rgba(0, 0, 0, 0.04);
    --sidebar-active-bg: var(--color-primary-pale);
    --sidebar-border: #e0e0e0;
    --sidebar-header-bg: #ffffff;

    /* Material-Formen: 4dp-Radius als Grundform */
    --radius-sm: 4px;
    --radius: 4px;
    --radius-md: 4px;
    --radius-lg: 8px;

    /* MD2-Elevationsstufen (dp1/dp2/dp4/dp8) */
    --shadow-sm: 0 2px 1px -1px rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.10), 0 1px 3px 0 rgba(0,0,0,.14);
    --shadow: 0 3px 1px -2px rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.10), 0 1px 5px 0 rgba(0,0,0,.14);
    --shadow-md: 0 2px 4px -1px rgba(0,0,0,.12), 0 4px 5px 0 rgba(0,0,0,.10), 0 1px 10px 0 rgba(0,0,0,.14);
    --shadow-lg: 0 5px 5px -3px rgba(0,0,0,.12), 0 8px 10px 1px rgba(0,0,0,.10), 0 3px 14px 2px rgba(0,0,0,.12);

    /* Roboto, sofern lokal vorhanden – sonst nahtloser System-Fallback */
    --font-family: Roboto, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================
   2. App-Bar (Navbar): Primärfarbe + Elevation dp4, kein Rahmen
============================================================ */
body.design-material .main-header.navbar {
    background: var(--color-primary);
    border-bottom: none;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}
body.design-material .navbar-brand-text { color: var(--color-on-accent); font-weight: 500; letter-spacing: .01em; }
body.design-material .navbar-nav .nav-link { color: rgba(255,255,255,0.9); }
body.design-material .navbar-search-input,
body.design-material .navbar-phonebook-input {
    background: rgba(255,255,255,0.16);
    border-color: transparent;
    border-radius: 4px;
}
body.design-material .navbar-search-input:focus,
body.design-material .navbar-phonebook-input:focus {
    background: rgba(255,255,255,0.24);
    border-color: transparent;
}

/* ============================================================
   3. Navigations-Drawer (Sidebar): helle Fläche, Pill-Highlight
============================================================ */
body.design-material .main-sidebar {
    background: #ffffff;
    border-right: 1px solid var(--sidebar-border);
    box-shadow: none;
}
body.design-material .main-sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
body.design-material .brand-link { color: var(--gray-900); border-bottom-color: var(--sidebar-border); }
body.design-material .brand-link:hover { background: rgba(0,0,0,0.04); color: var(--gray-900); }
body.design-material .nav-sidebar .nav-header { color: var(--color-gray-700); }
/* Drawer-Eintrag nach MD2: 48dp Zeilenhöhe, 14sp Medium, 16dp Einzug,
   rechts abgerundete Pille (8dp Abstand zur Drawer-Kante). */
body.design-material .nav-sidebar .nav-link {
    color: var(--sidebar-text);
    border-left: none;
    margin: 1px 8px 1px 0;
    border-radius: 0 24px 24px 0;
    font-weight: 500;
    font-size: 0.875rem;
    min-height: 48px;
}
body.design-material .nav-sidebar .nav-link:hover { background: rgba(0,0,0,0.04); color: var(--gray-900); }
/* Aktiver Eintrag: Primärfarbe für Text und Symbol, Fläche als 12-%-Auflage
   derselben Farbe – folgt damit jeder Primärfarben-Änderung. */
body.design-material .nav-sidebar .nav-link.active {
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
}
body.design-material .nav-sidebar .nav-link.active:hover {
    background: rgba(var(--color-primary-rgb), 0.16);
    color: var(--color-primary);
}
body.design-material .nav-sidebar .nav-icon { color: var(--color-gray-700); }
body.design-material .nav-sidebar .nav-link:hover .nav-icon { color: var(--gray-900); }
body.design-material .nav-sidebar .nav-link.active .nav-icon,
body.design-material .nav-sidebar .nav-link.active:hover .nav-icon { color: var(--color-primary); }
body.design-material .sidebar-collapse-btn { color: rgba(0,0,0,0.45); border-top-color: var(--sidebar-border); }
body.design-material .sidebar-collapse-btn:hover { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.75); }
/* Eingeklappte Schmal-Sidebar: Pill-Form ohne Rechtsabstand, bis sie
   per Hover wieder aufklappt */
body.design-material.sidebar-mini .nav-sidebar .nav-link,
body.design-material.sidebar-collapsed .nav-sidebar .nav-link { margin-right: 0; }
body.design-material.sidebar-mini .main-sidebar:hover .nav-sidebar .nav-link,
body.design-material.sidebar-collapsed .main-sidebar:hover .nav-sidebar .nav-link { margin-right: 8px; }

/* ============================================================
   4. Buttons: Material-Typografie, Contained/Outlined/Text
============================================================ */
body.design-material .btn {
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .045em;
    font-size: 0.8125rem;
    border-radius: 4px;
}
body.design-material .btn-primary,
body.design-material .btn-success,
body.design-material .btn-danger,
body.design-material .btn-warning,
body.design-material .btn-info,
body.design-material .btn-secondary {
    border-color: transparent;
    box-shadow: var(--shadow);
}
body.design-material .btn-primary:hover,
body.design-material .btn-success:hover,
body.design-material .btn-danger:hover,
body.design-material .btn-warning:hover,
body.design-material .btn-info:hover,
body.design-material .btn-secondary:hover {
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
body.design-material .btn-default,
body.design-material .btn-outline-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-gray-300);
    box-shadow: none;
}
body.design-material .btn-default:hover,
body.design-material .btn-outline-secondary:hover {
    background: rgba(25, 118, 210, 0.06);
    color: var(--color-primary-dark);
    border-color: var(--color-gray-400);
}
body.design-material .btn-sm { font-size: 0.75rem; }
body.design-material .btn-link { text-transform: uppercase; letter-spacing: .045em; }

/* ============================================================
   5. Karten & Flächen: randlos mit Elevation dp1
============================================================ */
body.design-material .card,
body.design-material .detail-card,
body.design-material .table-wrapper {
    border: none;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}
body.design-material .card-outline { box-shadow: var(--shadow-sm); }
body.design-material .card-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-gray-200);
}
body.design-material .detail-card-header { border-bottom-color: var(--color-gray-200); }
body.design-material .detail-card-title { color: var(--color-gray-500); }
body.design-material .small-box {
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}
body.design-material .empty-state { border: none; box-shadow: var(--shadow-sm); background: var(--color-bg); }
body.design-material .table-wrapper .empty-state { box-shadow: none; background: transparent; }

/* ============================================================
   6. Content-Header: flach, Titel in Material-Gewicht
============================================================ */
body.design-material .content-header { border-bottom-color: var(--color-gray-300); }
body.design-material .content-header h1 { font-weight: 500; letter-spacing: 0; }

/* ============================================================
   7. Datentabellen: Material-Spaltenköpfe (kein Uppercase)
============================================================ */
body.design-material .data-table th {
    background: var(--color-bg);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-500);
    border-bottom: 1px solid var(--color-gray-300);
}
body.design-material .data-table td { border-bottom-color: var(--color-gray-200); }
body.design-material .data-table tbody tr:hover { background: var(--color-gray-100); }

/* ============================================================
   8. Formulare: Outlined-Feld mit 2px-Fokusrahmen
============================================================ */
body.design-material .form-control { border-radius: 4px; }
body.design-material .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}
body.design-material .form-group label { font-weight: 500; font-size: 0.8125rem; color: var(--color-gray-700); }

/* ============================================================
   9. Tabs: Subnav als Material-Tab-Leiste mit Indikator
============================================================ */
body.design-material .subnav {
    gap: 0;
    /* Trennlinie als Inset-Schatten statt Rahmen: erzeugt keinen vertikalen
       Überstand, sodass die scrollbare Tab-Leiste keinen Scrollbalken zeigt */
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--color-gray-300);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
body.design-material .subnav-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 0.8125rem;
    padding: 0.65rem 1.1rem;
    color: var(--color-gray-600);
    margin-bottom: 0;
}
body.design-material .subnav-tab:hover {
    background: rgba(25, 118, 210, 0.05);
    color: var(--color-primary);
}
body.design-material .subnav-tab.active {
    background: transparent;
    color: var(--color-primary);
    border-color: transparent;
    border-bottom-color: var(--color-primary);
}

/* ============================================================
   10. Dialoge & Dropdowns: MD2-Dialog-Outfit (dp24) bzw. dp8
   Dialoge nach Material-Muster: Titel in Headline-Typografie,
   keine Trennlinien zwischen Kopf, Inhalt und Aktionen.
============================================================ */
body.design-material .modal-card,
body.design-material .modal,
body.design-material .tkm-dialog,
body.design-material .ts-modal,
body.design-material .ssl-modal,
body.design-material .cb-modal,
body.design-material .uvw-modal,
body.design-material .ssp-modal {
    border-radius: 4px;
    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
}
body.design-material .modal-header {
    border-bottom: none;
    padding-bottom: 0.5rem;
}
body.design-material .modal-header h2,
body.design-material .modal-header h3 {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--gray-900);
}
body.design-material .modal-footer {
    border-top: none;
    padding-top: 0.5rem;
}
body.design-material .modal-close {
    border-radius: 50%;
    font-size: 1.25rem;
}
body.design-material .tkm-header,
body.design-material .ts-modal-header { border-bottom: none; padding-bottom: 0.4rem; }
body.design-material .tkm-title { font-weight: 500; font-size: 1.25rem; color: var(--gray-900); }
body.design-material .ts-modal-title { font-weight: 500; font-size: 1.1rem; color: var(--gray-900); }
body.design-material .user-menu-dropdown,
body.design-material .notif-dropdown,
body.design-material .dropdown-menu {
    border: none;
    border-radius: 4px;
    box-shadow: var(--shadow-lg);
}

/* ============================================================
   11. Meldungen: flache Banner mit Farbkante
============================================================ */
body.design-material .alert {
    border: none;
    border-left: 4px solid currentColor;
    border-radius: 4px;
}

/* ============================================================
   12. Pills/Badges: Chip-Optik mit Medium-Gewicht
============================================================ */
body.design-material .status-pill { font-weight: 500; }
body.design-material .badge { font-weight: 500; }

/* ============================================================
   13. Modul-Feinschliff
   Haupt-Karten der Module mit eigenem CSS von Rahmen- auf
   Elevation-Optik umgestellt; kleinere umrandete Boxen bleiben
   bewusst als "outlined"-Variante (in MD2 gleichwertig).
   Die Selektoren greifen nur, wenn das jeweilige Modul-CSS
   geladen ist – sonst matchen sie schlicht nichts.
============================================================ */
/* Dashboard */
body.design-material .dashboard-card {
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

/* Tickets */
body.design-material .tk-table-wrap,
body.design-material .ts-card {
    border: none;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}
body.design-material .tk-table th {
    background: var(--color-bg);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--color-gray-500);
    border-bottom-color: var(--color-gray-300);
}
body.design-material .ts-card-header { background: var(--color-bg); }
body.design-material .tk-tabs { background: transparent; }
body.design-material .tk-tab {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 0.78rem;
    border-radius: 0;
}
body.design-material .tk-tab.active { color: var(--color-primary); }
body.design-material .tk-tab:hover { color: var(--color-primary); }

/* Bestellungen */
body.design-material .orders-table { border: none; border-radius: 4px; box-shadow: var(--shadow-sm); }
body.design-material .orders-thead {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-gray-300);
}
body.design-material .orders-thead > div {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-500);
}
body.design-material .order-card { border-bottom-color: var(--color-gray-200); }

/* Kontakte */
body.design-material .cb-card,
body.design-material .cb-person-card,
body.design-material .cb-table,
body.design-material .cb-import-card {
    border: none;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

/* SSL */
body.design-material .ssl-card { border: none; border-radius: 4px; box-shadow: var(--shadow-sm); }

/* Infrastruktur */
body.design-material .inf-site-card,
body.design-material .inf-rack-card,
body.design-material .inf-subloc-card {
    border: none;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

/* Workflows */
body.design-material .wf-card,
body.design-material .wf-public-card { border: none; border-radius: 4px; box-shadow: var(--shadow-sm); }

/* Self-Service-Druck (SSD) */
body.design-material .ssd__panel { border: none; border-radius: 4px; box-shadow: var(--shadow-sm); }

/* Personensuche-Dropdown */
body.design-material .psx-dropdown { border: none; border-radius: 4px; box-shadow: var(--shadow-lg); }

/* Anmeldeseite */
body.design-material .auth-box { border-radius: 4px; box-shadow: var(--shadow-md); }

/* Self-Service-Portal: aktiver Menüpunkt im gleichen Primärton-Highlight
   wie der Navigations-Drawer des Frontends */
body.design-material .ssp-nav a { border-radius: 4px; font-weight: 500; }
body.design-material .ssp-nav a.active {
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
}

/* Self-Service-Portal */
body.design-material .ssp-card,
body.design-material .ssp-ticket,
body.design-material .ssp-statuscard,
body.design-material .ssp-profile-tile {
    border: none;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

/* Öffentliche Statusseite */
body.design-material .sp-card { border: none; border-radius: 4px; box-shadow: var(--shadow-sm); }