/* ============================================================================
   BAROCK ACADEMY ERP — ENTERPRISE UI LAYER
   ----------------------------------------------------------------------------
   Globale Design-System-Ebene. Wird NACH adminlte.min.css und barock-theme.css
   geladen und hebt das gesamte ERP auf ein einheitliches Enterprise-Niveau –
   Typografie, Abstände (8px-Raster), Karten, Buttons, Formulare, Tabellen,
   Badges, Modals, Navigation. Konservativ: verändert Look, nicht Struktur/JS.
   Alle Werte als Design-Tokens (CSS-Variablen) → an einer Stelle steuerbar.
   ============================================================================ */

:root {
    /* ---- Neutralpalette (kühles Slate, bewusst gewählt statt reinem Grau) ---- */
    --e-bg:            #f5f7fa;   /* App-Hintergrund */
    --e-surface:       #ffffff;   /* Karten / Panels */
    --e-surface-2:     #f8fafc;   /* eingelassene Flächen, Table-Head */
    --e-border:        #e7eaef;   /* Standard-Rahmen */
    --e-border-strong: #d7dce3;   /* Inputs, kräftiger */
    --e-ink:           #1b2536;   /* Überschriften */
    --e-ink-2:         #3b4658;   /* Fließtext */
    --e-muted:         #6a7383;   /* sekundär */
    --e-muted-2:       #98a1b0;   /* Captions / Icons */

    /* ---- Marken-/Aktionsfarbe (aus barock-theme übernommen) ---- */
    --e-primary:       var(--barock-primary, #0f5a8a);
    --e-primary-rgb:   var(--barock-primary-rgb, 15,90,138);

    /* ---- Semantik (aus barock-theme) ---- */
    --e-ok:    var(--status-genehmigt, #059669);
    --e-warn:  var(--status-offen, #d97706);
    --e-danger:var(--status-abgelehnt, #dc2626);
    --e-info:  var(--status-gestartet, #2563eb);

    /* ---- 8px-Spacing-Raster ---- */
    --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
    --e-5: 24px; --e-6: 32px; --e-7: 40px; --e-8: 48px; --e-9: 64px;

    /* ---- Radius ---- */
    --e-r-sm: 8px; --e-r: 12px; --e-r-lg: 16px; --e-r-pill: 999px;

    /* ---- Schatten (sehr dezent, modern) ---- */
    --e-shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 2px rgba(16,24,40,.05);
    --e-shadow:    0 1px 3px rgba(16,24,40,.05), 0 6px 16px -6px rgba(16,24,40,.10);
    --e-shadow-lg: 0 12px 32px -8px rgba(16,24,40,.16);

    /* ---- Typografie ---- */
    --e-font: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ============================ BASE / TYPOGRAFIE ============================ */
body {
    font-family: var(--e-font);
    color: var(--e-ink-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .002em;
}
.content-wrapper { background: var(--e-bg); }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    color: var(--e-ink);
    font-weight: 700;
    letter-spacing: -.011em;
}
h1,.h1{ font-size: 1.6rem; line-height: 1.25; }
h2,.h2{ font-size: 1.35rem; line-height: 1.3; }
h3,.h3{ font-size: 1.15rem; line-height: 1.35; }
h4,.h4{ font-size: 1.02rem; }
h5,.h5{ font-size: .95rem; }
h6,.h6{ font-size: .85rem; }
.text-muted { color: var(--e-muted) !important; }
small,.small{ font-size: .82rem; }
a { color: var(--e-primary); }
a:hover { color: var(--e-primary); }

/* Einheitliche kleine Label-/Caption-Optik */
.e-label,
.filter-bar label,
.form-group > label,
.form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--e-muted);
    letter-spacing: .01em;
    margin-bottom: var(--e-1);
}

/* ============================ CONTENT / KOPF ============================ */
.content-header { padding: var(--e-5) .5rem var(--e-2); }
.content-header h1 { font-size: 1.5rem; font-weight: 700; }
.content { padding-bottom: var(--e-8); }

/* Wiederverwendbarer Seitenkopf (opt-in): Titel + Aktionen, Trennlinie */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-4); flex-wrap: wrap;
    padding: var(--e-4) 0 var(--e-5);
    margin-bottom: var(--e-5);
    border-bottom: 1px solid var(--e-border);
}
.page-header__title { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--e-ink); }
.page-header__subtitle { margin: 2px 0 0; color: var(--e-muted); font-size: .9rem; }
.page-header__actions { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.page-header .breadcrumb { margin: 0 0 var(--e-1); padding: 0; background: transparent; font-size: .8rem; }

/* ============================ CARDS ============================ */
.card {
    background: var(--e-surface);
    border: 1px solid var(--e-border);
    border-radius: var(--e-r);
    box-shadow: var(--e-shadow-sm);
    margin-bottom: var(--e-5);
}
.card.shadow-sm, .card.shadow, .card.shadow-lg { box-shadow: var(--e-shadow-sm) !important; }
.card:hover.shadow-lg { box-shadow: var(--e-shadow) !important; }
.card-header {
    background: var(--e-surface);
    border-bottom: 1px solid var(--e-border);
    padding: var(--e-4) var(--e-5);
    font-weight: 600;
    min-height: 0;
}
.card-header .card-title { font-size: 1.02rem; font-weight: 700; color: var(--e-ink); margin: 0; letter-spacing: -.01em; }
.card-body { padding: var(--e-5); }
.card-footer { background: var(--e-surface-2); border-top: 1px solid var(--e-border); padding: var(--e-3) var(--e-5); }
/* AdminLTE bunte card-Header dämpfen -> ruhiger Enterprise-Look */
.card.card-primary:not(.card-outline) > .card-header,
.card.card-info:not(.card-outline) > .card-header,
.card.card-success:not(.card-outline) > .card-header,
.card.card-warning:not(.card-outline) > .card-header,
.card.card-danger:not(.card-outline) > .card-header {
    background: var(--e-surface); color: var(--e-ink);
}
.card.card-outline { border-top: 3px solid var(--e-primary); }

/* ============================ BUTTONS ============================ */
.btn {
    border-radius: var(--e-r-sm);
    font-weight: 600;
    font-size: .875rem;
    padding: .5rem .95rem;
    line-height: 1.4;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(var(--e-primary-rgb), .20); }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; border-radius: var(--e-r-sm); }
.btn-lg { padding: .7rem 1.3rem; font-size: .95rem; }
.btn i { font-size: .9em; }

.btn-primary { background: var(--e-primary); border-color: var(--e-primary); color: #fff; }
.btn-primary:hover { filter: brightness(.94); color: #fff; }
.btn-secondary { background: #fff; border-color: var(--e-border-strong); color: var(--e-ink-2); }
.btn-secondary:hover { background: var(--e-surface-2); border-color: var(--e-muted-2); color: var(--e-ink); }
.btn-outline-secondary { border-color: var(--e-border-strong); color: var(--e-ink-2); }
.btn-outline-secondary:hover { background: var(--e-surface-2); color: var(--e-ink); border-color: var(--e-muted-2); }
.btn-light { background: var(--e-surface-2); border-color: var(--e-border); color: var(--e-ink-2); }
.btn-light:hover { background: #eef1f5; color: var(--e-ink); }
/* „Ghost"-Button-Optik über .btn-link */
.btn-link { color: var(--e-muted); font-weight: 600; text-decoration: none; }
.btn-link:hover { color: var(--e-primary); text-decoration: none; }
/* Icon-Only-Buttons (Tabellen-Aktionen) einheitlich quadratisch */
.btn-icon, .btn-sm.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ============================ FORMULARE ============================ */
.form-control, .custom-select {
    border: 1px solid var(--e-border-strong);
    border-radius: var(--e-r-sm);
    color: var(--e-ink-2);
    min-height: calc(2.5rem + 2px);
    padding: .45rem .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control-sm, .custom-select-sm { min-height: calc(2rem + 2px); padding: .3rem .6rem; font-size: .82rem; }
.form-control:focus, .custom-select:focus {
    border-color: var(--e-primary);
    box-shadow: 0 0 0 3px rgba(var(--e-primary-rgb), .14);
}
.form-control::placeholder { color: var(--e-muted-2); }
textarea.form-control { min-height: 90px; }
.input-group-text { background: var(--e-surface-2); border-color: var(--e-border-strong); color: var(--e-muted); border-radius: var(--e-r-sm); }

/* select2 an die Input-Höhe angleichen (global) */
.select2-container--default .select2-selection--single {
    height: calc(2.5rem + 2px) !important;
    border: 1px solid var(--e-border-strong) !important;
    border-radius: var(--e-r-sm) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(2.5rem) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(2.5rem) !important; }

/* ============================ TABELLEN ============================ */
.table { color: var(--e-ink-2); margin-bottom: 0; }
.table thead th {
    background: var(--e-surface-2);
    color: var(--e-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-top: 0;
    border-bottom: 1px solid var(--e-border);
    padding: .6rem .75rem;
    vertical-align: middle;
    white-space: nowrap;
}
.table td, .table th { padding: .6rem .75rem; border-top: 1px solid var(--e-border); vertical-align: middle; }
.table > tbody > tr:first-child > td { border-top: 0; }
.table-hover tbody tr { transition: background-color .12s ease; }
.table-hover tbody tr:hover { background: var(--e-surface-2); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--e-border); }
/* Karte, die eine Tabelle umschließt: Ecken sauber runden */
.card > .table-responsive:last-child .table tr:last-child td { border-bottom: 0; }

/* Datatables-Steuerelemente etwas ruhiger */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border: 1px solid var(--e-border-strong); border-radius: var(--e-r-sm); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--e-primary) !important; border-color: var(--e-primary) !important; color: #fff !important; border-radius: var(--e-r-sm);
}

/* ============================ BADGES / PILLS ============================ */
.badge {
    font-weight: 600;
    font-size: .72rem;
    padding: .32em .65em;
    border-radius: var(--e-r-pill);
    letter-spacing: .01em;
}
/* Dezente „Soft"-Badge-Variante (heller Grund, farbige Schrift) */
.badge-soft { border-radius: var(--e-r-pill); font-weight: 600; padding: .34em .7em; }
.badge-soft-success { background: #e7f6ee; color: #067a4b; }
.badge-soft-danger  { background: #fdecec; color: #c0322b; }
.badge-soft-warning { background: #fef3e2; color: #b26a05; }
.badge-soft-info    { background: #e8f0fe; color: #1a56c4; }
.badge-soft-muted   { background: #eef1f5; color: #5a6472; }

/* ============================ ALERTS ============================ */
.alert { border: 1px solid transparent; border-radius: var(--e-r); padding: var(--e-3) var(--e-4); }
.alert-success { background: #e9f7ef; border-color: #b9e6cc; color: #0b6b43; }
.alert-danger  { background: #fdecec; border-color: #f5c2c0; color: #a32620; }
.alert-warning { background: #fef5e7; border-color: #fadfb0; color: #98620a; }
.alert-info    { background: #eaf1fe; border-color: #c3d6f8; color: #1a4fb0; }

/* ============================ MODALS / DROPDOWNS ============================ */
.modal-content { border: 0; border-radius: var(--e-r); box-shadow: var(--e-shadow-lg); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--e-border); padding: var(--e-4) var(--e-5); }
.modal-title { font-weight: 700; color: var(--e-ink); font-size: 1.1rem; }
.modal-body { padding: var(--e-5); }
.modal-footer { border-top: 1px solid var(--e-border); padding: var(--e-3) var(--e-5); }
.dropdown-menu { border: 1px solid var(--e-border); border-radius: var(--e-r); box-shadow: var(--e-shadow); padding: var(--e-1); }
.dropdown-item { border-radius: var(--e-r-sm); padding: .5rem .75rem; font-size: .875rem; color: var(--e-ink-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--e-surface-2); color: var(--e-ink); }
.dropdown-divider { border-color: var(--e-border); }

/* ============================ TABS / PAGINATION / BREADCRUMB ============================ */
.nav-tabs { border-bottom: 1px solid var(--e-border); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--e-muted); font-weight: 600; padding: .6rem 1rem; }
.nav-tabs .nav-link:hover { border-color: transparent; color: var(--e-ink); }
.nav-tabs .nav-link.active { color: var(--e-primary); background: transparent; border-bottom-color: var(--e-primary); }
.page-link { color: var(--e-ink-2); border-color: var(--e-border); }
.page-item.active .page-link { background: var(--e-primary); border-color: var(--e-primary); }
.breadcrumb { background: transparent; padding: 0; font-size: .82rem; }
.breadcrumb-item.active { color: var(--e-muted); }

/* ============================ WIEDERVERWENDBARE KOMPONENTEN ============================ */
/* Statistik-/KPI-Karte */
.stat-card {
    background: var(--e-surface); border: 1px solid var(--e-border);
    border-radius: var(--e-r); padding: var(--e-5);
    box-shadow: var(--e-shadow-sm); display: flex; flex-direction: column; gap: var(--e-2);
}
.stat-card__label { font-size: .78rem; font-weight: 600; color: var(--e-muted); text-transform: uppercase; letter-spacing: .03em; }
.stat-card__value { font-size: 1.9rem; font-weight: 700; color: var(--e-ink); line-height: 1.1; letter-spacing: -.02em; }
.stat-card__meta { font-size: .82rem; color: var(--e-muted); }

/* Section-Titel (kleine Überschrift über Gruppen) */
.section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--e-muted-2); margin: 0 0 var(--e-3); }

/* Empty-State */
.empty-state { text-align: center; padding: var(--e-8) var(--e-5); color: var(--e-muted); }
.empty-state i { font-size: 2rem; color: var(--e-muted-2); margin-bottom: var(--e-3); }
.empty-state h4 { color: var(--e-ink-2); font-size: 1rem; }

/* Definition-List (Stammdaten) sauber */
dl.row dt { font-weight: 600; color: var(--e-muted); font-size: .82rem; padding-top: .35rem; }
dl.row dd { color: var(--e-ink-2); padding-top: .35rem; }

/* Skeleton-Loader */
.skeleton { background: linear-gradient(90deg,#eef1f5 25%,#e2e6ec 37%,#eef1f5 63%); background-size: 400% 100%; border-radius: var(--e-r-sm); animation: e-skel 1.3s ease infinite; }
@keyframes e-skel { 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* ============================ NAVBAR (Topbar) ============================ */
.main-header.navbar {
    border-bottom: 1px solid var(--e-border);
    box-shadow: var(--e-shadow-sm);
    min-height: 58px;
}
.main-header .nav-link { color: var(--e-ink-2); font-weight: 500; }
.navbar-nav .nav-item .nav-link { border-radius: var(--e-r-sm); }

/* Content-Bereich zentriert mit Enterprise-Maximalbreite auf sehr großen Screens */
@media (min-width: 1800px) {
    .content > .container-fluid { max-width: 1680px; margin-left: auto; margin-right: auto; }
}

/* ============================ DARK MODE (Tokens umdefinieren) ============================ */
body.dark-mode {
    --e-bg:            #171a1f;
    --e-surface:       #22272e;
    --e-surface-2:     #2a2f37;
    --e-border:        #363c45;
    --e-border-strong: #3f4650;
    --e-ink:           #eaecef;
    --e-ink-2:         #c7ccd4;
    --e-muted:         #949cab;
    --e-muted-2:       #7a828f;
}
body.dark-mode .content-wrapper { background: var(--e-bg); }
body.dark-mode .card { background: var(--e-surface); border-color: var(--e-border); }
body.dark-mode .card-header { background: var(--e-surface); border-color: var(--e-border); }
body.dark-mode .table thead th { background: var(--e-surface-2); color: var(--e-muted); border-color: var(--e-border); }
body.dark-mode .table td, body.dark-mode .table th { border-color: var(--e-border); }
body.dark-mode .table-hover tbody tr:hover { background: var(--e-surface-2); }
body.dark-mode .form-control, body.dark-mode .custom-select { background: #1c2127; border-color: var(--e-border-strong); color: var(--e-ink-2); }
body.dark-mode .btn-secondary, body.dark-mode .btn-outline-secondary { background: var(--e-surface); color: var(--e-ink-2); border-color: var(--e-border-strong); }
body.dark-mode .btn-light { background: var(--e-surface-2); border-color: var(--e-border); color: var(--e-ink-2); }
body.dark-mode .modal-content, body.dark-mode .dropdown-menu { background: var(--e-surface); border-color: var(--e-border); }
body.dark-mode .dropdown-item { color: var(--e-ink-2); }
body.dark-mode .dropdown-item:hover { background: var(--e-surface-2); color: var(--e-ink); }
body.dark-mode .stat-card { background: var(--e-surface); border-color: var(--e-border); }
body.dark-mode .badge-soft-success { background: rgba(6,122,75,.16); color: #4ecb8f; }
body.dark-mode .badge-soft-danger  { background: rgba(192,50,43,.16); color: #f08a84; }
body.dark-mode .badge-soft-warning { background: rgba(178,106,5,.16); color: #e2a94e; }
body.dark-mode .badge-soft-info    { background: rgba(26,86,196,.16); color: #7ea6f2; }
body.dark-mode .badge-soft-muted   { background: rgba(255,255,255,.06); color: #aeb6c1; }