/* ==========================================================================
   Design-Tokens und Bootstrap-Anpassung (Redesign 2026-09-26)
   Wird NACH Bootstrap und vor app.css/topbar.css/sidebar.css geladen (layout/app/default.php).

   Prinzip: ein neutrales Grundgeruest fuer alle Apps, die Identitaet einer App kommt ausschliesslich
   aus ihrer Modulfarbe (Definitions/Apps.php -> moduleIconColor). layout/app/topbar.php setzt daraus
   --module-color und --module-color-rgb; alles Weitere (Topbar-Strich, Sidebar-Auswahl, Hauptbutton,
   Fokusring, App-Wechsler) leitet sich hier davon ab.
   ========================================================================== */

:root {
    --shell-btn: 36px;
}

:root {
    /* Modulfarbe: layout/app/topbar.php setzt --module-rgb-light (Hellmodus) und --module-rgb-dark (aufgehellt fuer
       den Dunkelmodus, sonst zu kontrastarm). Standard = Schiefergrau (keine App gewaehlt). */
    --module-color-rgb: var(--module-rgb-light, 71, 85, 105);
    --module-color: rgb(var(--module-color-rgb));
    --module-on-color: var(--module-on-light, #ffffff);
    /* Modulfarbe ALS Schrift (Links, Sidebar-Auswahl, Outline-Buttons): im Hellmodus bei Bedarf abgedunkelt (topbar.php) */
    --module-text-rgb: var(--module-text-rgb-light, var(--module-rgb-light, 71, 85, 105));
    --module-color-text: rgb(var(--module-text-rgb));
    --module-text-hover-rgb: var(--module-text-hover-rgb-light, var(--module-text-rgb));
    --module-color-text-hover: var(--module-color-text);
    --module-color-subtle: rgba(var(--module-color-rgb), .10);
    --module-color-subtle-strong: rgba(var(--module-color-rgb), .16);
    --module-color-hover: var(--module-color);

    /* Flaechen: getoenter Seitenhintergrund, weisse Panels, Haarlinien statt Schatten */
    --app-bg: #ffffff;
    --app-surface: #ffffff;
    --app-shell-bg: #fafbfc;
    --app-topbar-bg: var(--app-shell-bg);
    --app-sidebar-bg: var(--app-shell-bg);
    --app-border: #e8ebef;
    --app-border-strong: #d5dbe3; /* Karten, Tabellen: gut sichtbar, damit auch die Ecken geschlossen wirken */
    --app-hover: rgba(15, 23, 42, .06);
    --app-text: #1f2937;
    --app-text-muted: #64748b;
    --app-radius: 4px;
    --app-radius-lg: 4px;
    --app-focus-ring: 0 0 0 .2rem rgba(var(--module-color-rgb), .22);

    /* Massen der Shell */
    --sidebar-width: 240px;
    --header-height: 52px;
    --mobile-header-height: 52px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Bootstrap-Variablen auf das Design abbilden */
    --bs-body-font-size: .9375rem;
    --bs-body-bg: var(--app-surface);
    --bs-body-color: var(--app-text);
    --bs-secondary-color: var(--app-text-muted);
    --bs-border-color: var(--app-border);
    --bs-border-radius: var(--app-radius);
    --bs-border-radius-lg: var(--app-radius-lg);
    --bs-primary: var(--module-color);
    --bs-primary-rgb: var(--module-color-rgb);
    --bs-link-color: var(--module-color-text);
    --bs-link-color-rgb: var(--module-text-rgb);
    --bs-link-hover-color: var(--module-color-text-hover);
    --bs-link-hover-color-rgb: var(--module-text-hover-rgb);
    /* Bootstrap-"primary"-Familie komplett aus der Modulfarbe (sonst bleiben Reste im Bootstrap-Blau: Link-Hover, Hinweisboxen, Listen) */
    --bs-primary-text-emphasis: var(--module-color-text);
    --bs-primary-bg-subtle: var(--module-color-subtle-strong);
    --bs-primary-border-subtle: rgba(var(--module-color-rgb), .35);
    --bs-focus-ring-color: rgba(var(--module-color-rgb), .25);
}

/* Hover-/Aktiv-Ton der Modulfarbe: nur wo der Browser color-mix() kennt, sonst bleibt die Grundfarbe */
@supports (color: color-mix(in srgb, red 50%, black)) {
    :root {
        /* Topbar und Sidebar: helles Grau mit einem Hauch der Modulfarbe (1,5 %) - Inhalt bleibt weiss */
        --app-shell-bg: color-mix(in srgb, var(--module-color) 1.5%, #fafbfc);
        --module-color-hover: color-mix(in srgb, var(--module-color) 86%, black);
        --module-color-text-hover: color-mix(in srgb, var(--module-color-text) 86%, black);
    }

    [data-bs-theme="dark"] {
        --module-color-hover: color-mix(in srgb, var(--module-color) 86%, white);
        --module-color-text-hover: color-mix(in srgb, var(--module-color-text) 86%, white);
    }
}

/* ---------- Dunkelmodus (assets/js/theme-init.js setzt data-bs-theme/data-theme auf <html>) ---------- */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --app-border-strong: #364050;
    --app-shell-bg: #171b22;
    --module-color-rgb: var(--module-rgb-dark, 148, 163, 184);
    --module-text-rgb: var(--module-rgb-dark, 148, 163, 184);
    --module-text-hover-rgb: var(--module-text-hover-rgb-dark, var(--module-text-rgb));
    --module-on-color: #0b0f14;
    --app-bg: #0e1116;
    --app-surface: #171b22;
    --app-topbar-bg: #171b22;
    --app-sidebar-bg: #171b22;
    --app-border: #2a303b;
    --app-hover: rgba(255, 255, 255, .07);
    --app-text: #e6e9ef;
    --app-text-muted: #9aa4b2;
    --bs-secondary-bg: #1f242d;
    --bs-tertiary-bg: #1b2028;
    --bs-emphasis-color: #ffffff;
}

html,
body {
    background: var(--app-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -.01em;
}

/* ---------- Buttons: Hauptbutton in Modulfarbe, alles andere ruhig ---------- */
.btn {
    --bs-btn-border-radius: var(--app-radius);
    --bs-btn-font-weight: 500;
}

.btn-primary {
    --bs-btn-color: var(--module-on-color);
    --bs-btn-hover-color: var(--module-on-color);
    --bs-btn-active-color: var(--module-on-color);
    --bs-btn-disabled-color: var(--module-on-color);
    --bs-btn-bg: var(--module-color);
    --bs-btn-border-color: var(--module-color);
    --bs-btn-hover-bg: var(--module-color-hover);
    --bs-btn-hover-border-color: var(--module-color-hover);
    --bs-btn-active-bg: var(--module-color-hover);
    --bs-btn-active-border-color: var(--module-color-hover);
    --bs-btn-disabled-bg: var(--module-color);
    --bs-btn-disabled-border-color: var(--module-color);
    --bs-btn-focus-shadow-rgb: var(--module-color-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--module-color-text);
    --bs-btn-hover-color: var(--module-on-color);
    --bs-btn-active-color: var(--module-on-color);
    --bs-btn-border-color: var(--module-color);
    --bs-btn-hover-bg: var(--module-color);
    --bs-btn-hover-border-color: var(--module-color);
    --bs-btn-active-bg: var(--module-color);
    --bs-btn-active-border-color: var(--module-color);
    --bs-btn-disabled-color: var(--module-color-text);
    --bs-btn-disabled-border-color: var(--module-color);
    --bs-btn-focus-shadow-rgb: var(--module-color-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--app-text);
    --bs-btn-border-color: var(--app-border);
    --bs-btn-bg: var(--app-surface);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--app-hover);
    --bs-btn-hover-border-color: var(--app-border);
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: var(--app-hover);
    --bs-btn-active-border-color: var(--app-border);
    --bs-btn-focus-shadow-rgb: var(--module-color-rgb);
}

/* Eingeschalteter Umschalter (btn-primary innerhalb einer Gruppe) bleibt in Modulfarbe - siehe oben */

/* ---------- Links: Modulfarbe, nie unterstrichen (auch nicht beim Ueberfahren) - Hover = etwas dunklerer Ton ---------- */
a,
a:hover,
a:focus-visible {
    text-decoration: none;
}

/* Bedienelemente, die als Link geschrieben sind, nie unterstreichen */
a.btn,
a.nav-link,
a.dropdown-item,
a.list-group-item,
a.page-link,
a.navbar-brand,
a.shell-icon-btn,
a.app-link,
.app-switcher-item,
.user-dropdown-item {
    text-decoration: none;
}

/* "Zurueck"-Link (statt "· zurueck zur Uebersicht" im Fliesstext): <a class="back-link"><i class="bi bi-arrow-left"></i> Uebersicht</a> */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--app-text-muted);
    font-weight: 500;
}

.back-link:hover {
    color: var(--module-color-text);
    text-decoration: none;
}

/* ---------- Reiter: Unterstrich-Stil statt Kasten ---------- */
.nav-tabs {
    border-bottom: 1px solid var(--app-border);
    gap: .25rem;
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--app-text-muted);
    background: transparent;
    padding: .55rem .9rem;
    margin-bottom: -1px;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    color: var(--app-text);
    border-bottom-color: var(--app-border);
    background: transparent;
    text-decoration: none;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--module-color-text);
    border-bottom-color: var(--module-color);
    background: transparent;
    font-weight: 600;
}

/* ---------- Tabellen: ruhiger Kopf, dezenter Hover ---------- */
.table {
    --bs-table-hover-bg: var(--app-hover);
    --bs-table-border-color: var(--app-border);
}

.table > thead > tr > th {
    font-weight: 600;
    color: var(--app-text-muted);
}

/* ---------- Formulare, Reiter, Karten ---------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--module-color);
    box-shadow: var(--app-focus-ring);
}

.form-check-input:checked {
    background-color: var(--module-color);
    border-color: var(--module-color);
}

.form-check-input:focus {
    border-color: var(--module-color);
    box-shadow: var(--app-focus-ring);
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--module-color-text);
    --bs-nav-tabs-border-color: var(--app-border);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--module-color);
    --bs-nav-pills-link-active-color: var(--module-on-color);
}

.card {
    --bs-card-border-color: var(--app-border-strong);
    --bs-card-border-radius: var(--app-radius-lg);
    --bs-card-inner-border-radius: calc(var(--app-radius-lg) - 1px);
    --bs-card-cap-bg: var(--app-shell-bg);
    --bs-card-cap-padding-y: .65rem;
    box-shadow: none;
}

.card > .card-header {
    font-weight: 600;
    border-bottom: 1px solid var(--app-border-strong);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--app-border);
    --bs-dropdown-border-radius: var(--app-radius-lg);
    --bs-dropdown-link-active-bg: var(--module-color);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

.page-link {
    --bs-pagination-active-bg: var(--module-color);
    --bs-pagination-active-border-color: var(--module-color);
}

.progress-bar {
    background-color: var(--module-color);
}

/* Tastatur-Fokus einheitlich sichtbar */
:focus-visible {
    outline: 2px solid var(--module-color);
    outline-offset: 2px;
}

/* Symbol-Buttons der Shell (Topbar): quadratisch, ohne Rand, Hover-Flaeche - Touch-Ziel mindestens 40 px */
.shell-icon-btn {
    position: relative;
    width: var(--shell-btn);
    height: var(--shell-btn);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--app-text);
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color .15s ease, color .15s ease;
}

.shell-icon-btn i {
    font-size: 1.15rem;
    line-height: 1;
}

.shell-icon-btn:hover,
.shell-icon-btn[aria-expanded="true"] {
    background: var(--app-hover);
    color: var(--app-text);
}

.shell-icon-btn:focus-visible {
    outline: 2px solid var(--module-color);
    outline-offset: -2px;
}

@media/* Gleiche Kantenlaenge fuer alle Symbole der Topbar (Waffel, Modulsymbol, Glocke, Menue, Avatar) - Desktop 36 px, mobil 40 px.
   Die Touch-Flaeche bleibt mit 44 px+ gross: ein unsichtbarer Rand (::after) erweitert den Treffer, ohne das Bild zu vergroessern. */
.shell-icon-btn::after,
.topbar-action-btn::after,
.user-avatar-btn::after {
    content: "";
    position: absolute;
    inset: -4px;
}

 (max-width: 991.98px) {
    :root {
        --shell-btn: 40px;
    }
}

/* Avatar-Initialen (Core\Services\UserProfileService::getUserAvatar() liefert fest "text-black") im Dunkelmodus lesbar machen */
[data-bs-theme="dark"] .user-avatar-btn .text-black,
[data-bs-theme="dark"] .user-dropdown-header .text-black {
    color: var(--app-text) !important;
}

/* Umschalter-Gruppen (Woche/Monat/Jahr, Schaetzung ...): Bootstrap hebt den ueberfahrenen Button per z-index an - dessen
   Rand ueberdeckt dann den Rand des blauen (aktiven) Nachbarn und es blitzt ein senkrechter Strich auf. Der aktive Button
   bleibt deshalb immer oben, ueberfahrene/fokussierte Buttons wechseln nur ihre Flaeche. */
.btn-group > .btn,
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
    z-index: 0;
}

.btn-group > .btn-primary,
.btn-group > .btn-primary:hover,
.btn-group > .btn-primary:focus,
.btn-group > .btn-primary:active {
    z-index: 1;
}

/* ---------- Tabellen in Karten / Auswertungen: klare Zeilen, Kopf abgesetzt, ausreichend Abstand ---------- */
.table {
    --bs-table-border-color: var(--app-border);
}

.table > :not(caption) > * > * {
    padding: .55rem .75rem;
    border-bottom-color: var(--app-border);
}

.table-sm > :not(caption) > * > * {
    padding: .4rem .7rem;
}

.table > thead > tr > th {
    background: var(--app-shell-bg);
    border-bottom: 1px solid var(--app-border-strong);
}

.table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.card > .card-body > .table-responsive > .table,
.card > .table {
    margin-bottom: 0;
}

.card > .card-body.p-0 > .table-responsive:last-child > .table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

/* Karten: Inhalt (Tabelle mit eigenem Hintergrund) darf die abgerundeten Ecken nicht ueberdecken - der letzte Block
   uebernimmt deshalb den inneren Eckenradius der Karte (auch unten links/rechts). */
.card > :last-child,
.card > .card-body > .table-responsive:last-child {
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

.card > .card-header:first-child {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

/* Schrift auf Modulfarbe-Flaechen (Badges, "text-bg-primary"): weiss oder dunkel je nach Kontrast (topbar.php) */
.text-bg-primary {
    color: var(--module-on-color) !important;
    background-color: var(--module-color) !important;
}

/* Weitere Bootstrap-Komponenten, die ihr Blau fest eingebaut haben: aus der Modulfarbe */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--module-color);
    --bs-dropdown-link-active-color: var(--module-on-color);
}

.list-group {
    --bs-list-group-active-bg: var(--module-color);
    --bs-list-group-active-border-color: var(--module-color);
    --bs-list-group-active-color: var(--module-on-color);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--module-color);
}