/* ============================================================================
   Komparking24 Themes - override layer.
   Loaded AFTER Bootstrap 5.1.3 + AdminKit (app.min.css). NEVER edit the vendor
   CSS; all theming lives here.

   Bootstrap 5.1.3 compiles component colours as fixed hex (not CSS variables),
   so components are re-coloured explicitly below via a token layer.

   Two themes, selected by a body class (rendered from the user's "theme" setting
   and toggled live in the right-sidebar Appearance panel):
       body.km-light  - light content area
       body.km-dark   - dark content area
   The brand sidebar/topbar stay navy in both (AdminKit .dark-sidebar + .topbar).

   Brand palette (from komparking24.de):
       navy #173557   yellow #f9da00   white #ffffff
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Inter - self-hosted variable font (latin, incl. aeoeuess). One file, 100-900.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-variable-latin.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------
   Design tokens per theme
   --------------------------------------------------------------------------- */
body.km-light {
    --km-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --km-bg: #f4f6f9;
    --km-surface: #ffffff;
    --km-surface-2: #eef2f7;
    --km-border: #e2e8f0;
    --km-text: #173557;
    --km-text-muted: #5b6b7f;
    --km-heading: #173557;
    --km-accent: #f9da00;           /* brand yellow - primary CTA */
    --km-accent-contrast: #173557;  /* navy text on yellow */
    --km-accent-hover: #eccf00;
    --km-link: #173557;
    --km-link-hover: #0d2137;
    --km-input-bg: #ffffff;
    --km-input-border: #ced4da;
    /* Native controls (date-picker popups, selects, scrollbars) follow the theme. */
    color-scheme: light;
}
body.km-dark {
    --km-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --km-bg: #0f2033;
    --km-surface: #173557;
    --km-surface-2: #1d4067;
    --km-border: #274a70;
    --km-text: #e7edf4;
    --km-text-muted: #9fb4cb;
    --km-heading: #ffffff;
    --km-accent: #f9da00;
    --km-accent-contrast: #173557;
    --km-accent-hover: #ffe63a;
    --km-link: #ffd21a;
    --km-link-hover: #ffe066;
    --km-input-bg: #12304d;
    --km-input-border: #2b527a;
    /* Native controls (date-picker popups, selects, scrollbars) render dark. */
    color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   Global: font + base colours (both themes)
   --------------------------------------------------------------------------- */
body.km-light,
body.km-dark {
    font-family: var(--km-font);
    background-color: var(--km-bg);
    color: var(--km-text);
    /* Inter tabular figures keep numbers/IDs/dates aligned in the many tables. */
    font-feature-settings: "tnum" 1, "cv05" 1;
}
body.km-light .page-wrapper,
body.km-dark .page-wrapper,
body.km-light .page-content-tab,
body.km-dark .page-content-tab {
    background-color: var(--km-bg);
}

/* Headings + page titles */
body.km-light h1, body.km-light h2, body.km-light h3, body.km-light h4, body.km-light h5, body.km-light h6,
body.km-dark  h1, body.km-dark  h2, body.km-dark  h3, body.km-dark  h4, body.km-dark  h5, body.km-dark  h6,
body.km-light .page-title, body.km-dark .page-title {
    color: var(--km-heading);
}

/* Muted text */
body.km-dark .text-muted,
body.km-dark .text-secondary { color: var(--km-text-muted) !important; }

/* Content links (leave buttons / nav-links / dropdown-items alone) */
body.km-light a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
body.km-dark  a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) { color: var(--km-link); }
body.km-light a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover,
body.km-dark  a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover { color: var(--km-link-hover); }

/* ---------------------------------------------------------------------------
   Cards / panels
   --------------------------------------------------------------------------- */
body.km-dark .card {
    background-color: var(--km-surface);
    border-color: var(--km-border);
    color: var(--km-text);
}
body.km-dark .card-header,
body.km-dark .card-footer {
    background-color: var(--km-surface);
    border-color: var(--km-border);
    color: var(--km-heading);
}
/* .card-header.bg-light forces a light fill via a Bootstrap !important utility -
   keep such headers dark in the dark theme. */
body.km-dark .card-header.bg-light { background-color: var(--km-surface) !important; }
body.km-light .card {
    background-color: var(--km-surface);
    border-color: var(--km-border);
}

/* ---------------------------------------------------------------------------
   Buttons - primary = brand yellow (CTA), in both themes
   (.btn-de-primary is the app's own primary-button class)
   --------------------------------------------------------------------------- */
body.km-light .btn-primary, body.km-dark .btn-primary,
body.km-light .btn-de-primary, body.km-dark .btn-de-primary {
    background-color: var(--km-accent);
    border-color: var(--km-accent);
    color: var(--km-accent-contrast);
}
body.km-light .btn-primary:hover, body.km-dark .btn-primary:hover,
body.km-light .btn-primary:focus, body.km-dark .btn-primary:focus,
body.km-light .btn-primary:active, body.km-dark .btn-primary:active,
body.km-light .btn-de-primary:hover, body.km-dark .btn-de-primary:hover,
body.km-light .btn-de-primary:focus, body.km-dark .btn-de-primary:focus {
    background-color: var(--km-accent-hover);
    border-color: var(--km-accent-hover);
    color: var(--km-accent-contrast);
    box-shadow: 0 0 0 0.15rem rgba(249, 218, 0, 0.35);
}

/* Secondary / outline buttons legible on a dark surface. The default border
   (--km-border) was too faint against the dark background, so use a clearer tone. */
body.km-dark .btn-outline-secondary {
    color: var(--km-text);
    border-color: #5f80aa;
}
body.km-dark .btn-outline-secondary:hover {
    background-color: var(--km-surface-2);
    color: #fff;
    border-color: #7093bd;
}

/* ---------------------------------------------------------------------------
   Tables (dark theme needs bg/text/border/stripe re-mapping)
   --------------------------------------------------------------------------- */
body.km-dark .table {
    --bs-table-color: var(--km-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--km-border);
    --bs-table-striped-color: var(--km-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: #ffffff;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.07);
    --bs-table-accent-bg: transparent;
    color: var(--km-text);
    border-color: var(--km-border);
}
body.km-dark .table > :not(caption) > * > * { border-color: var(--km-border); }
body.km-dark .table thead th { color: var(--km-heading); border-color: var(--km-border); }
body.km-light .table { color: var(--km-text); }

/* ---------------------------------------------------------------------------
   Form controls
   --------------------------------------------------------------------------- */
body.km-dark .form-control,
body.km-dark .form-select {
    background-color: var(--km-input-bg);
    border-color: var(--km-input-border);
    color: var(--km-text);
}
body.km-dark .form-control::placeholder { color: var(--km-text-muted); }
body.km-dark .form-control:focus,
body.km-dark .form-select:focus {
    background-color: var(--km-input-bg);
    border-color: var(--km-accent);
    color: var(--km-text);
    box-shadow: 0 0 0 0.15rem rgba(249, 218, 0, 0.25);
}
body.km-dark .input-group-text {
    background-color: var(--km-surface-2);
    border-color: var(--km-input-border);
    color: var(--km-text);
}

/* ---------------------------------------------------------------------------
   Dropdowns + right-sidebar (Appearance offcanvas) in dark theme
   --------------------------------------------------------------------------- */
body.km-dark .dropdown-menu {
    background-color: var(--km-surface);
    border-color: var(--km-border);
    color: var(--km-text);
}
body.km-dark .dropdown-item { color: var(--km-text); }
body.km-dark .dropdown-item:hover,
body.km-dark .dropdown-item:focus { background-color: var(--km-surface-2); color: #fff; }
body.km-dark .dropdown-divider { border-color: var(--km-border); }

body.km-dark .offcanvas {
    background-color: var(--km-surface);
    color: var(--km-text);
}
body.km-dark .offcanvas .border-bottom { border-color: var(--km-border) !important; }

/* Modals (Bootstrap): default white content with a flush, contrast-less header on
   the dark theme. Dark surface + a distinct (lighter) header bar + light title/close. */
body.km-dark .modal-content {
    background-color: var(--km-surface);
    border-color: var(--km-border);
    color: var(--km-text);
}
body.km-dark .modal-header {
    background-color: var(--km-surface-2);
    border-bottom-color: var(--km-border);
}
body.km-dark .modal-footer { border-top-color: var(--km-border); }
body.km-dark .modal-title { color: var(--km-heading); }
/* The .btn-close glyph is a dark SVG - flip it to white for the dark header. */
body.km-dark .modal .btn-close { filter: brightness(0) invert(1); }

/* ---------------------------------------------------------------------------
   Accent helpers (active nav highlight, focus ring, brand text)
   --------------------------------------------------------------------------- */
body.km-light .text-de-accent, body.km-dark .text-de-accent { color: var(--km-accent) !important; }
body.km-light .bg-de-accent, body.km-dark .bg-de-accent {
    background-color: var(--km-accent) !important;
    color: var(--km-accent-contrast) !important;
}

/* ---------------------------------------------------------------------------
   Theme switcher (right-sidebar) - segmented control
   --------------------------------------------------------------------------- */
.km-theme-switch { display: flex; gap: .5rem; }
.km-theme-switch .btn { flex: 1 1 0; }

/* ---------------------------------------------------------------------------
   Dark theme chrome: sidebar + topbar as ONE cohesive navy (replacing AdminKit's
   near-black .dark-sidebar #0f172a and the white .navbar-custom). Readable light
   text on top. Light theme keeps its navy sidebar + light topbar untouched.
   --------------------------------------------------------------------------- */
body.km-dark {
    --km-chrome-bg: #122844;
    --km-chrome-text: #c7d4e3;
    --km-chrome-border: #20406a;
}
/* Sidebar (extra .dark-sidebar in the selector out-specifies AdminKit's rule) */
body.km-dark.dark-sidebar .left-sidebar { background-color: var(--km-chrome-bg); }
body.km-dark.dark-sidebar .left-sidebar .brand {
    background-color: var(--km-chrome-bg);
    border-bottom-color: var(--km-chrome-border);
}
/* Topbar: .topbar is the strip behind the logo, .navbar-custom is the (white) rest */
body.km-dark .topbar { background-color: var(--km-chrome-bg); }
body.km-dark .navbar-custom {
    background: var(--km-chrome-bg);
    border-bottom-color: var(--km-chrome-border);
    color: var(--km-chrome-text);
}
body.km-dark .navbar-custom .nav-link,
body.km-dark .navbar-custom .col-form-label,
body.km-dark .navbar-custom label { color: var(--km-chrome-text); }
body.km-dark .navbar-custom .nav-link:hover { color: #ffffff; }
/* Search + tenant/project switch inputs (override the topbar's inline light bg) */
body.km-dark .navbar-custom .form-control,
body.km-dark .app-tenants-switch form .form-control,
body.km-dark .app-projects-switch form .form-control {
    background-color: var(--km-input-bg) !important;
    border-color: var(--km-input-border);
    color: var(--km-text);
}
body.km-dark .navbar-custom .form-control::placeholder { color: var(--km-text-muted); }
/* Dropdown items that hardcode dark text stay readable on the now-dark menus */
body.km-dark .navbar-custom .dropdown-menu .text-dark { color: var(--km-text) !important; }

/* Sidebar Main/Cloud-Admin tab switch: AdminKit pins the active tab to #0f172a
   (the old near-black), which no longer matches the new navy sidebar. Re-style as
   a subtle lighter-navy pill with white text; inactive tabs muted. */
/* Tab-switch track: the darker content background (not the sidebar navy), so the
   segmented control reads as a distinct inset with the lighter active pill on top. */
body.km-dark.dark-sidebar .left-sidebar .nav.nav-tabs { background-color: var(--km-bg); }
body.km-dark.dark-sidebar .left-sidebar .nav.nav-tabs.menu-tab { border-bottom-color: transparent; }
body.km-dark.dark-sidebar .left-sidebar .nav.nav-tabs.menu-tab .nav-link {
    color: var(--km-chrome-text);
    background-color: transparent;
    border-color: transparent;
}
body.km-dark.dark-sidebar .left-sidebar .nav.nav-tabs.menu-tab .nav-link.active,
body.km-dark.dark-sidebar .left-sidebar .nav.nav-tabs.menu-tab .nav-link:hover,
body.km-dark.dark-sidebar .left-sidebar .nav.nav-tabs.menu-tab .nav-link:focus {
    color: #ffffff;
    background-color: var(--km-surface-2);
    border-color: transparent;
}

/* ---------------------------------------------------------------------------
   Dark theme: icons
   --------------------------------------------------------------------------- */
/* Topbar icon buttons (flag / bell / gear / hamburger): AdminKit gives them a
   light #f5f5f9 box + dark #384a65 glyph. Drop the light box, use light glyphs. */
body.km-dark .navbar-custom .nav-link.nav-icon {
    background-color: transparent;
    box-shadow: none;
}
body.km-dark .navbar-custom .nav-link.nav-icon:hover { background-color: var(--km-surface-2); }
body.km-dark .navbar-custom .nav-link.nav-icon i { color: var(--km-chrome-text); }
body.km-dark .navbar-custom .nav-link.nav-icon:hover i { color: #ffffff; }
body.km-dark .navbar-custom .button-menu-mobile { color: var(--km-chrome-text) !important; }
/* Open dropdown toggle must not flash a white background on the dark topbar */
body.km-dark .topbar-nav li.show .nav-link { background-color: var(--km-surface-2); color: #ffffff; }
/* Search magnifier */
body.km-dark .app-search button i { color: var(--km-text-muted); }

/* Sidebar nav icons: brighter than AdminKit's dim #545d7b; brand-yellow when active. */
body.km-dark.dark-sidebar .left-sidebar .menu-body .nav-item .nav-link .menu-icon {
    color: var(--km-chrome-text);
}
body.km-dark.dark-sidebar .left-sidebar .menu-body .nav-item .nav-link.active .menu-icon,
body.km-dark.dark-sidebar .left-sidebar .menu-body .nav-item.menuitem-active .nav-link.active .menu-icon {
    color: var(--km-accent);
}

/* ---------------------------------------------------------------------------
   Dark theme: dashboard widgets
   --------------------------------------------------------------------------- */
/* "Live / Paused / History" indicators are Bootstrap .bg-light .text-dark pills -
   too bright on the dark cards. Darken the pill (the coloured status dot stays). */
body.km-dark .live-indicator.badge.bg-light {
    background-color: var(--km-surface-2) !important;
    color: var(--km-text) !important;
    border-color: var(--km-border) !important;
}

/* ApexCharts hover tooltips (Overview chart + all sparklines) default to a light
   theme. Re-skin dark AND darker than the surface cards so the popup clearly floats
   above the chart. Both tooltips are kept consistent: no lighter title bar (the
   Overview uses a custom-HTML tooltip that never had one) - just a subtle divider.
   Tooltip surface #0c1c30 (darker than card #173557), border #2c5075. */
body.km-dark .apexcharts-tooltip.apexcharts-theme-light {
    background: #0c1c30 !important;
    color: var(--km-text) !important;
    border-color: #2c5075 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}
body.km-dark .apexcharts-tooltip-title {
    background: transparent !important;
    border-bottom-color: #2c5075 !important;
    color: var(--km-heading);
}
body.km-dark .apexcharts-tooltip-series-group,
body.km-dark .apexcharts-tooltip-text-y-label,
body.km-dark .apexcharts-tooltip-text-y-value,
body.km-dark .apexcharts-tooltip-text-x-value { color: var(--km-text); }
body.km-dark .apexcharts-xaxistooltip,
body.km-dark .apexcharts-yaxistooltip {
    background: #0c1c30 !important;
    color: var(--km-text) !important;
    border-color: #2c5075 !important;
}
body.km-dark .apexcharts-xaxistooltip-bottom:before { border-bottom-color: #2c5075 !important; }
body.km-dark .apexcharts-xaxistooltip-bottom:after  { border-bottom-color: #0c1c30 !important; }
body.km-dark .apexcharts-xaxistooltip-top:before    { border-top-color: #2c5075 !important; }
body.km-dark .apexcharts-xaxistooltip-top:after     { border-top-color: #0c1c30 !important; }

/* Overview revenue line: base colour is a very dark green (#006400) that vanishes on
   the dark card. Brighten it in dark mode. Scoped to #overview-chart so the green
   occupancy sparklines are untouched. (path.apexcharts-line = the only line series.) */
body.km-dark #overview-chart path.apexcharts-line { stroke: #22e08a !important; }

/* KPI "report-card" icon circle: AdminKit uses a near-white .bg-light-alt disc with a
   muted icon - on the dark card that's a glaring white disc with a washed-out icon.
   Subtle brand tint + a clear accent-yellow icon instead. */
body.km-dark .report-card .bg-light-alt {
    background-color: rgba(249, 218, 0, 0.12) !important;
}
body.km-dark .report-card .bg-light-alt svg,
body.km-dark .report-card .bg-light-alt [data-feather] {
    color: var(--km-accent) !important;
    stroke: var(--km-accent) !important;
}

/* ---------------------------------------------------------------------------
   Dark theme: DataTables pagination (Bootstrap .pagination > .page-item >
   .page-link) - the default white boxes are glaring on the dark background.
   Active page uses the brand yellow instead of Bootstrap blue.
   --------------------------------------------------------------------------- */
body.km-dark .page-link {
    background-color: var(--km-surface);
    border-color: var(--km-border);
    color: var(--km-text);
}
body.km-dark .page-link:hover {
    background-color: var(--km-surface-2);
    border-color: var(--km-border);
    color: #ffffff;
}
body.km-dark .page-item.active .page-link,
body.km-dark .page-link.active {
    background-color: var(--km-accent);
    border-color: var(--km-accent);
    color: var(--km-accent-contrast);
}
body.km-dark .page-item.disabled .page-link {
    background-color: var(--km-surface);
    border-color: var(--km-border);
    color: var(--km-text-muted);
}

/* Footer separator line (AdminKit uses a light #eceff5 border-top). */
body.km-dark .footer { border-top-color: var(--km-border); }

/* ---------------------------------------------------------------------------
   Dark theme: alerts (Bootstrap light pastel fills) + wizard step indicator
   --------------------------------------------------------------------------- */
body.km-dark .alert-info    { background-color: rgba(59, 201, 219, .12);  border-color: rgba(59, 201, 219, .30);  color: #8fe0ec; }
body.km-dark .alert-success { background-color: rgba(52, 195, 143, .14);  border-color: rgba(52, 195, 143, .32);  color: #7fe0bd; }
body.km-dark .alert-warning { background-color: rgba(249, 218, 0, .12);   border-color: rgba(249, 218, 0, .32);   color: #f4d97a; }
body.km-dark .alert-danger  { background-color: rgba(244, 106, 106, .14); border-color: rgba(244, 106, 106, .34); color: #f4a3a3; }

/* Wizard step indicator (.nav.nav-pills): AdminKit gives the bar a near-white bg. */
body.km-dark .nav.nav-pills { background-color: var(--km-surface); }
body.km-dark .nav-pills .nav-link:not(.active) { color: var(--km-text-muted); }

/* Contextual table row/cell highlights (Bootstrap light pastel fills) - used e.g.
   for changed cells in the merge dry-run. Dark tint + light text so they stay readable. */
body.km-dark .table-warning { --bs-table-bg: rgba(249, 218, 0, .14);   --bs-table-color: var(--km-text); color: var(--km-text); }
body.km-dark .table-success { --bs-table-bg: rgba(52, 195, 143, .16);  --bs-table-color: var(--km-text); color: var(--km-text); }
body.km-dark .table-danger  { --bs-table-bg: rgba(244, 106, 106, .16); --bs-table-color: var(--km-text); color: var(--km-text); }
body.km-dark .table-info    { --bs-table-bg: rgba(59, 201, 219, .14);  --bs-table-color: var(--km-text); color: var(--km-text); }

/* .btn-light (near-white) - e.g. the day back/forward buttons in the validation
   card-header - would glare on the dark theme. */
body.km-dark .btn-light {
    background-color: var(--km-surface-2);
    border-color: var(--km-border);
    color: var(--km-text);
}
body.km-dark .btn-light:hover,
body.km-dark .btn-light:focus {
    background-color: var(--km-border);
    border-color: var(--km-border);
    color: #ffffff;
}
/* Bare <input type="date"> (no .form-control class) renders browser-white; theme it.
   (.form-control date inputs are already handled by the form-control rules.) */
body.km-dark input[type="date"]:not(.form-control),
body.km-dark input[type="datetime-local"]:not(.form-control),
body.km-dark input[type="time"]:not(.form-control) {
    background-color: var(--km-input-bg);
    border: 1px solid var(--km-input-border);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--km-text);
    color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   DataTables 2 (table-sm): Sort-Pfeil GLOBAL konsistent rechts.
   table-sm erkennt numeric/date-Spalten, rechtsbündigt deren Header UND schiebt
   den Sort-Pfeil nach links (left:.25rem) -> wirkt "mal links, mal rechts".
   Früher nur per ID (#employees-datatable) gefixt; hier global für alle DataTables.
   Pfeil-Position braucht !important, weil datatables.css per Seite NACH diesem
   Theme geladen wird und die table-sm-Regel höhere Spezifität hat.
   --------------------------------------------------------------------------- */
table.dataTable thead > tr > th.dt-type-numeric,
table.dataTable thead > tr > th.dt-type-date { text-align: left; }
table.dataTable thead > tr > th.dt-type-numeric .dt-column-order,
table.dataTable thead > tr > th.dt-type-date .dt-column-order { left: auto !important; right: 12px !important; }
table.dataTable thead > tr > th span.dt-column-order { top: 12px; }

/* Gleich breite Badges als Checkbox-Labels in den Multiselect-Filtern (element/multiselect_filter). */
.ms-badge { min-width: 130px; text-align: center; }