.table-clickable tbody tr {
    background: #f2f3ff;
    outline: none;
    cursor: pointer;
}

.dt-info {
    margin-top: 18px;
    font-size: 0.9em;
    float: left;
}

.dt-paging {
    float: right;
}

div.dt-container div.dt-paging {
    margin-top: 12px;
    margin-bottom: 16px;
}

.table-responsive {
    /* box-shadow: 1px 1px 12px -2px rgb(155 168 179 / 76%); */
    padding-block-start: 20px;
    padding-block-end: 10px;
    padding-left: 10px;
    padding-right: 10px;
}



:root {
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 70px;
}

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--hb-primary);
    color: var(--hb-light);
    transition: all 0.3s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar > .border-bottom {
    flex: 0 0 auto;
}

/* Nav area scrolls independently of the main page once it exceeds the viewport height */
.sidebar > nav {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.sidebar > nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar > nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.sidebar > nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar .nav-link {
    /* color: rgba(255, 255, 255, 0.8); */
    color: var(--hb-light);
    padding: 0.4rem 1rem;
    border-radius: 5px;
    margin: 0.1rem 0;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    /* background-color: rgba(255, 255, 255, 0.1); */
    color: var(--hb-info);
}

.sidebar .nav-link i {
    width: 24px;
    margin-right: 0.5rem;
}

.sidebar.collapsed .nav-text {
    display: none;
}

.sidebar .nav-sublink {
    padding-left: 2.5rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.85em;
}

.sidebar .nav-chevron {
    transition: transform 0.2s;
    font-size: 0.75rem;
}

.sidebar [aria-expanded="true"] .nav-chevron {
    transform: rotate(180deg);
}

.main-content {
    margin-left: var(--sidebar-width);
    padding: 0.5rem;
    transition: margin-left 0.3s;
}

.main-content.expanded {
    margin-left: var(--sidebar-collapsed-width);
}

.toggle-sidebar {
    background: none;
    border: none;
    color: var(--hb-light);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.card-stat {
    border-left: 4px solid;
}

.card-stat.primary {
    border-color:rgba(var(--hb-primary-rgb))!important;
}

.card-stat.success {
    border-color:rgba(var(--hb-success-rgb))!important;
}

.card-stat.warning {
    border-color:rgba(var(--hb-warning-rgb))!important;
}

.card-stat.danger {
    border-color:rgba(var(--hb-danger-rgb))!important;
}

@media (max-width: 1200px) {
    .sidebar {
        width: var(--sidebar-collapsed-width);
    }

    .sidebar .nav-text {
        display: none;
    }

    .main-content {
        margin-left: var(--sidebar-collapsed-width);
    }
}

/* Custom DataTables Pagination */
.page-item.active .page-link {
    background-color: var(--hb-primary);
    border-color: var(--hb-primary);
    color: var(--hb-light);
    /* Using the light variable for text */
}

.page-link {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: var(--hb-light) !important;
}

.page-link:hover {
    color: var(--hb-info) !important;
    /* Highlight color on hover */
    background-color: rgba(var(--hb-primary-rgb), 0.1) !important;
    /* Subtle background tint */
}

/* DataTables: right-aligned columns — keep flex row direction and push title+arrow to the right */
table.dataTable thead th.dt-type-date,
table.dataTable thead th.dt-type-num,
table.dataTable thead th.text-end {
    flex-direction: row !important;
    justify-content: flex-end !important;
}

/* ---------------------------------------------------------------
   Controlling-Cockpit (/finanzen/controlling/)
   --------------------------------------------------------------- */
.kpi-delta-gut { color: #006300; }
.kpi-delta-schlecht { color: #d03b3b; }

/* Dimension-Umschalter der Analyse-Tabelle: kompakte Pills */
.ctl-pills .nav-link {
    padding: 0.2rem 0.65rem;
    font-size: 0.85rem;
    border: 0;
}

/* Sortierbare Spalten */
th.ctl-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.ctl-sort::after {
    content: "↕";
    opacity: 0.35;
    font-size: 0.7em;
    margin-left: 0.25rem;
}
th.ctl-sort.sorted-asc::after { content: "↑"; opacity: 1; }
th.ctl-sort.sorted-desc::after { content: "↓"; opacity: 1; }

/* Aufklapp-Chevron dreht bei geöffnetem Breakdown */
.ctl-chevron { display: inline-block; transition: transform 0.15s; font-size: 0.8rem; }
[aria-expanded="true"] > .ctl-chevron { transform: rotate(90deg); }

/* Inline-Datenbalken hinter dem Deckungsbeitrag (relative Grösse) */
td.ctl-db { position: relative; }
td.ctl-db .ctl-balken {
    position: absolute;
    right: 0.25rem;
    top: 18%;
    height: 64%;
    background: rgba(42, 120, 214, 0.14);
    border-radius: 2px;
    max-width: calc(100% - 0.5rem);
    pointer-events: none;
}
td.ctl-db .ctl-balken.negativ { background: rgba(227, 73, 72, 0.16); }
td.ctl-db .ctl-db-wert { position: relative; }

/* htmx-Ladeindikator: Tabelle während des Nachladens abblenden */
#analyse-tabelle.htmx-request { opacity: 0.5; transition: opacity 0.15s; }

/* ---------------------------------------------------------------
   Select2 multi-select - compact (small) variant
   Opt-in: pass
     selectionCssClass: 'select2--small',
     dropdownCssClass:  'select2--small'
   to $(...).select2({...}). Matches form-select-sm height and keeps the
   pills + inline search on a single row until they really overflow.
   --------------------------------------------------------------- */
.select2-container--bootstrap-5 .select2-selection--multiple.select2--small {
    min-height: calc(1.5em + 0.5rem + 2px) !important;
    height: auto !important;
    max-height: none !important;
    padding: 0.125rem 0.375rem !important;
    line-height: 1.5;
    display: flex !important;
    align-items: center;
}
.select2-container--bootstrap-5 .select2-selection--multiple.select2--small > textarea,
.select2-container--bootstrap-5 .select2-selection--multiple.select2--small > .select2-search--inline {
    display: none !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple.select2--small .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple.select2--small .select2-selection__choice {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 0.375rem !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    border-radius: 0.2rem;
}
.select2-container--bootstrap-5 .select2-selection--multiple.select2--small .select2-selection__choice__remove {
    margin: 0 0.25rem 0 0 !important;
    padding: 0 0.25rem !important;
    border: 0 !important;
    line-height: 1.4 !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple.select2--small .select2-search--inline {
    flex: 1 1 4ch;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple.select2--small .select2-search--inline .select2-search__field {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------
   Titel-Detail im Controlling-Offcanvas (680px, vertikal gescrollt)
   ---------------------------------------------------------------
   Gestaltprinzip: gruppieren statt trennen. Vorher standen acht bis zehn
   gleichrangige Abschnitte untereinander, unterschieden nur durch graue
   Grossbuchstaben-Überschriften und Trennlinien — man musste lesen, um zu
   navigieren. Jetzt trägt jede Sinneinheit eine eigene Karte mit farbigem
   Kopf; die Nähe innerhalb der Karte und der Abstand zwischen den Karten
   machen die Gruppierung sichtbar, ohne eine einzige zusätzliche Linie.
   Farbe ist dabei Kennzeichnung (welcher Block?) oder Bedeutung (Vorzeichen),
   nie Dekoration. */

.td-kopf {
    position: sticky;
    top: calc(-1 * var(--hb-offcanvas-padding-y, 1rem));
    z-index: 3;
    margin: calc(-1 * var(--hb-offcanvas-padding-y, 1rem))
            calc(-1 * var(--hb-offcanvas-padding-x, 1rem)) 0.75rem;
    padding: 0.6rem var(--hb-offcanvas-padding-x, 1rem);
    background: var(--hb-body-bg);
    border-bottom: 1px solid var(--hb-border-color);
}

/* Eine Karte je Sinneinheit. Der farbige Streifen links ist die schnellste
   Wiedererkennung beim Scrollen — kräftiger als jede Überschrift. */
.td-card {
    border: 1px solid var(--hb-border-color);
    border-left: 4px solid var(--td-akzent, var(--hb-border-color));
    border-radius: var(--hb-border-radius);
    background: var(--hb-body-bg);
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.td-card > .td-card-kopf {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    background: var(--td-kopf-bg, var(--hb-tertiary-bg));
    color: var(--td-kopf-color, var(--hb-body-color));
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.td-card > .td-card-kopf .bi { color: var(--td-akzent); font-size: 1rem; }
.td-card > .td-card-kopf .td-kopf-wert { margin-left: auto; font-variant-numeric: tabular-nums; }
.td-card > .td-card-inhalt { padding: 0.65rem; }
.td-card > .td-card-inhalt.p-0 { padding: 0; }
/* Fussnote gehört zur Karte, nicht daneben: gleicher Kasten, ruhiger Grund. */
.td-card > .td-fuss {
    padding: 0.45rem 0.65rem;
    background: var(--hb-tertiary-bg);
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--hb-secondary-color);
}

/* Akzentfarben je Block — sechs klar verschiedene Farbtoene aus dem Theme
   (gruen / navy / orange / rot / pflaume / grau), nicht frei erfunden.
   Der Kopf traegt die Farbe dreifach: kraeftiger Randstreifen, getoenter Grund
   und eingefaerbte Schrift. Ein einzelner blasser Tupfer reicht nicht, um beim
   Scrollen einen Block vom naechsten zu unterscheiden. */
.td-akzent-familie {
    --td-akzent: var(--hb-success);
    --td-kopf-bg: rgba(var(--hb-success-rgb), 0.20);
    --td-kopf-color: var(--hb-success-text-emphasis);
}
.td-akzent-ergebnis {
    --td-akzent: var(--hb-dark);
    --td-kopf-bg: rgba(var(--hb-dark-rgb), 0.16);
    --td-kopf-color: var(--hb-dark);
}
.td-akzent-absatz {
    --td-akzent: var(--hb-info);
    --td-kopf-bg: rgba(var(--hb-info-rgb), 0.28);
    --td-kopf-color: #7a4d00;
}
.td-akzent-honorar {
    --td-akzent: var(--hb-secondary);
    --td-kopf-bg: rgba(var(--hb-secondary-rgb), 0.16);
    --td-kopf-color: var(--hb-secondary);
}
.td-akzent-kosten {
    /* Violett statt des Theme-Primaers: #4a404d ist fast entsaettigt, jede
       Deckkraft davon ergibt wieder Grau und damit dieselbe Anmutung wie die
       Belegkarte. Ein eigener Farbton ist hier der Punkt — die sechs Bloecke
       muessen sich beim Scrollen an der Farbe unterscheiden lassen. */
    --td-akzent: #6a4c93;
    --td-kopf-bg: rgba(106, 76, 147, 0.20);
    --td-kopf-color: #4e3670;
}
.td-akzent-beleg {
    /* Bewusst farblos: Belege sind Nachweis, nicht Kennzahl. Das Grau ist die
       Abwesenheit eines Akzents, kein siebter Farbton. */
    --td-akzent: var(--hb-gray-400);
    --td-kopf-bg: var(--hb-tertiary-bg);
    --td-kopf-color: var(--hb-secondary-color);
}

/* ── Rechenkette (Erlös − Honorar − Kosten = DB …) ──────────────────────── */
.td-kette { display: flex; flex-direction: column; }
.td-kette-zeile {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.28rem 0.5rem;
    border-radius: 3px;
    font-size: 0.85rem;
}
/* Der Anteilsbalken liegt HINTER der Zeile: er zeigt das Gewicht des Postens
   am Erlös, ohne eine Spalte zu kosten. */
.td-kette-balken {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(var(--hb-secondary-rgb), 0.18);
    border-radius: 3px;
    pointer-events: none;
}
.td-kette-op {
    flex: 0 0 0.9rem;
    text-align: center;
    font-weight: 700;
    color: var(--hb-secondary-color);
}
.td-kette-label { position: relative; }
.td-kette-wert {
    position: relative;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.td-kette-anteil {
    position: relative;
    flex: 0 0 3.2rem;
    text-align: right;
    font-size: 0.7rem;
    color: var(--hb-secondary-color);
    font-variant-numeric: tabular-nums;
}
/* Zwischensummen heben sich durch Fläche ab, nicht durch eine weitere Linie. */
.td-kette-zeile.ist-zwischen {
    background: var(--hb-tertiary-bg);
    font-weight: 600;
    margin-top: 0.15rem;
}
.td-kette-zeile.ist-ergebnis {
    margin-top: 0.3rem;
    padding: 0.45rem 0.5rem;
    background: rgba(var(--hb-success-rgb), 0.20);
    color: var(--hb-success-text-emphasis);
    font-weight: 700;
    font-size: 0.95rem;
}
.td-kette-zeile.ist-ergebnis.negativ {
    background: rgba(var(--hb-danger-rgb), 0.18);
    color: var(--hb-danger-text-emphasis);
}

/* ── Kennzahl-Chips (Menge, Remissionsquote …) ──────────────────────────── */
.td-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.td-chip {
    flex: 1 1 7rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--hb-border-radius);
    background: var(--hb-tertiary-bg);
}
.td-chip .td-chip-label { font-size: 0.68rem; color: var(--hb-secondary-color); }
.td-chip .td-chip-wert {
    font-size: 0.95rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Tabellen in Karten: keine Aussenrahmen, die Karte rahmt schon. */
.td-card table { margin-bottom: 0; font-size: 0.82rem; }
.td-card table > thead th {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--hb-secondary-color);
    border-bottom-color: var(--hb-border-color);
    padding-top: 0.3rem; padding-bottom: 0.3rem;
}
.td-card table > tbody td, .td-card table > tfoot td { padding: 0.3rem 0.5rem; }
.td-card table > tbody tr:last-child td { border-bottom: 0; }
.td-card table > tfoot td {
    background: var(--hb-tertiary-bg);
    border-top: 1px solid var(--hb-border-color);
    font-weight: 600;
}
.td-card table > tfoot tr.td-nebensumme td {
    background: transparent;
    border-top: 0;
    font-weight: 400;
    color: var(--hb-secondary-color);
}
/* Zeilen ausserhalb der gewählten Periode: zurückgenommen, nicht versteckt. */
.td-card tr.td-blass td { opacity: 0.62; }

/* Kostenblöcke: Gruppenzeile trägt den Namen, die Positionen rücken ein. */
.td-gruppe td {
    background: var(--hb-tertiary-bg);
    font-weight: 600;
}
.td-position td:first-child { padding-left: 1.6rem !important; }

/* Aufklappbare Belegblöcke (Aufwände, Abrechnungen) — geschlossen ruhig. */
.td-card details > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.4rem 0.65rem;
    font-size: 0.78rem;
    color: var(--hb-secondary-color);
}
.td-card details > summary::-webkit-details-marker { display: none; }
.td-card details > summary::after {
    content: "▾";
    float: right;
    transition: transform 0.15s;
    display: inline-block;
}
.td-card details[open] > summary::after { transform: rotate(180deg); }

/* Bootstrap-Zeilenfarben in DataTables-Tabellen.
 *
 * Bootstrap faerbt eine Zeile ueber `background-color: var(--hb-table-bg)` auf
 * den Zellen; DataTables setzt deren Hintergrund selbst und gewinnt, sodass
 * `.table-warning` & Co. in einer initialisierten Tabelle wirkungslos bleiben
 * (die Zeile blitzt beim Laden kurz farbig auf und wird dann weiss).
 *
 * Der Umweg ueber `box-shadow: inset` ist derselbe Kanal, den beide Frameworks
 * fuers Einfaerben benutzen. `--hb-table-bg-state` zuerst, damit der
 * Hover-Effekt erhalten bleibt (Bootstrap setzt die Variable auf `tr:hover`) —
 * sonst verloeren ausgerechnet die anklickbaren Pruefzeilen ihre Rueckmeldung.
 */
table.dataTable > tbody > tr.table-warning > *,
table.dataTable > tbody > tr.table-danger > *,
table.dataTable > tbody > tr.table-success > * {
    box-shadow: inset 0 0 0 9999px var(--hb-table-bg-state, var(--hb-table-bg));
}