/*
 *
 *  * ------------------------------------------------------------------------------
 *  *  Trusted Network GmbH
 *  * ------------------------------------------------------------------------------
 *  *
 *  *  Copyright (c) 2026 Trusted Network GmbH
 *  *
 *  *  Address        : Max-Planck-Str. 1, D-85716 Unterschleissheim, Germany
 *  *  Phone          : 089 / 54 80 163 - 0
 *  *  Fax            : 089 / 54 80 163 - 222
 *  *  Web            : http://www.tnib.de
 *  *
 *  *  Managing Directors:
 *  *      - Joerg Staedele
 *  *      - Stefan Kinner
 *  *
 *  *  Registered Office:
 *  *      - Unterschleissheim, Germany
 *  *
 *  *  Register Court:
 *  *      - AG Muenchen HRB 108 388
 *  *
 *  *  Data Protection:
 *  *      - The information obligations regarding data protection, in particular
 *  *        the legal basis for customer communication, can be found at
 *  *        https://www.trusted-network.de/datenschutz
 *  *
 *  * ------------------------------------------------------------------------------
 *  *  File Information
 *  * ------------------------------------------------------------------------------
 *  *
 *  *  File Name      : kiss.design.css
 *  *  Created by     : cxylander
 *  *  Last modified  : 2026-7-29 at 11:27
 *  *
 *  * ------------------------------------------------------------------------------
 *
 */

/*
 * ------------------------------------------------------------------------------
 *  Trusted Network GmbH — KISS v2 Frontend
 * ------------------------------------------------------------------------------
 *  File           : kiss.design.css
 *  Purpose        : Globaler Design-CI-Layer ("Vorgabe") fuer das KISS-Portal.
 *                   Single Source of Truth fuer Design-Tokens und das
 *                   Komponenten-Aussehen. Abgeleitet aus den bereits gemochten
 *                   /user-Seiten und der Top-Navi-Suche.
 *
 *  Ladereihenfolge: style.min.css -> kiss.design.css -> page-CSS -> default.css
 *                   (eingebunden in Design::headerCSS()).
 *
 *  Theme          : Muss in allen drei Themes funktionieren
 *                   body[data-theme="default"|"dark"|"light"].
 *
 *  ----------------------------------------------------------------------------
 *  CI-KONVENTIONEN (fuer neue/zu modernisierende Module):
 *  ----------------------------------------------------------------------------
 *   - Icon-Set      : ausschliesslich Bootstrap Icons (<i class="bi bi-...">).
 *   - Karten        : .card border-0, weicher Radius, dezenter Schatten.
 *                     Prominente Header via .kiss-card-header (Gradient).
 *   - Primaeraktion : .kiss-btn-primary (Gradient + Hover-Lift).
 *   - Formulare     : .form-floating bevorzugt; Detail-/Formularseiten in
 *                     einen .kiss-narrow Container (max. --kiss-form-max) legen.
 *   - Tabellen      : ueber kissInitTable() aus kiss.tables.js initialisieren
 *                     (responsive, Re-Init-Schutz, Tab-Redraw).
 *   - Breite        : globale Obergrenze via Template-Boxed-Layout
 *                     (#main-wrapper[data-boxed-layout="boxed"], 1300px).
 *  ----------------------------------------------------------------------------
 */

/* ============================================================================
 *  1. DESIGN-TOKENS
 * ========================================================================== */
:root {
    /* Markenfarben (aus /user + Suche) */
    --kiss-navy:        #1f2f41;
    --kiss-blue:        #6797b0;
    --kiss-gradient:    linear-gradient(135deg, #1f2f41 0%, #6797b0 100%);

    /* Interaktion / States */
    --kiss-focus:       #6797b0;
    --kiss-focus-ring:  rgba(103, 151, 176, 0.25);
    --kiss-select-bg:   rgba(165, 246, 180, 0.83);
    --kiss-select-bd:   #179a0c;

    /* Radius */
    --kiss-radius-card: 1rem;     /* ~ rounded-4 */
    --kiss-radius:      0.75rem;  /* ~ rounded-3 (Tabellen/Alerts/Modal) */
    --kiss-radius-sm:   8px;      /* Inputs/Buttons */

    /* Schatten + Bewegung */
    --kiss-shadow:        0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
    --kiss-shadow-hover:  0 0.5rem 1.5rem rgba(0, 0, 0, 0.10);
    --kiss-shadow-btn:    0 4px 12px rgba(0, 0, 0, 0.15);
    --kiss-lift:          translateY(-1px);
    --kiss-transition:    all 0.3s ease;

    /* Typografie */
    --kiss-font-base:   14px;

    /* Breiten — Boxed-Obergrenze skaliert mit der Aufloesung (s. Media Queries unten) */
    --kiss-form-max:    960px;   /* schmaler Formular-/Detail-Container */
    --kiss-boxed-max:   1320px;  /* Basis: Laptops / kleinere Schirme */
}

/* Aufloesungs-Strategie fuer die globale Inhaltsbreite (Boxed-Layout):
 *  - Handy/Tablet (<992px): boxed greift nicht -> volle Breite minus Rand.
 *  - Laptop (Basis):            1320px
 *  - Full-HD (>=1600 logisch):  1560px
 *  - 1080p/breite Schirme 1920: 1760px
 *  - WQHD/Widescreen 2560:      2080px
 *  - 4K+ / 5000px:        Deckel 2360px (Lesbarkeit > Flaeche; bewusst zentriert
 *                         mit Rand statt edge-to-edge).
 * Formularseiten (.kiss-narrow) bleiben unabhaengig davon bei --kiss-form-max. */
@media (min-width: 1600px) { :root { --kiss-boxed-max: 1560px; } }
@media (min-width: 1920px) { :root { --kiss-boxed-max: 1760px; } }
@media (min-width: 2560px) { :root { --kiss-boxed-max: 2080px; } }
@media (min-width: 3200px) { :root { --kiss-boxed-max: 2360px; } }

/* ============================================================================
 *  2. TYPOGRAFIE  (Basis kleiner; em-basierte Altregeln in default.css
 *     skalieren dadurch automatisch mit -> dort nur body neutralisiert)
 * ========================================================================== */
body {
    font-size: var(--kiss-font-base);
}

/* ============================================================================
 *  3. LAYOUT / BREITE
 * ========================================================================== */
/* Schmaler, zentrierter Container fuer Formular-/Detailseiten */
.kiss-narrow {
    max-width: var(--kiss-form-max);
    margin-inline: auto;
}

/* Boxed-Breite anheben (Template-Default 1300px -> mehr Platz fuer breite
   Tabellen, weniger Spalten-Einklappen). Auch die fixierte Topbar mitziehen. */
#main-wrapper[data-layout="vertical"][data-boxed-layout="boxed"] {
    max-width: var(--kiss-boxed-max);
}
#main-wrapper[data-layout="vertical"][data-boxed-layout="boxed"][data-header-position="fixed"] .topbar {
    max-width: var(--kiss-boxed-max);
}

/* ============================================================================
 *  4. KARTEN
 * ========================================================================== */
.card {
    border: 0;
    border-radius: var(--kiss-radius-card);
    box-shadow: var(--kiss-shadow);
    transition: var(--kiss-transition);
}

.card:hover {
    box-shadow: var(--kiss-shadow-hover);
}

/* Prominenter Gradient-Header (Opt-in) – ersetzt hartes card-header bg-info */
.kiss-card-header {
    background: var(--kiss-gradient) !important;
    color: #fff;
    border: 0;
}

.kiss-card-header,
.kiss-card-header .card-title,
.kiss-card-header h1, .kiss-card-header h2, .kiss-card-header h3,
.kiss-card-header h4, .kiss-card-header h5, .kiss-card-header h6 {
    color: #fff !important;
}

.kiss-card-header .kiss-card-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

/* Kopfzeile im Gradient-Header: Titel links, Zusatzkachel rechts, darunter die Tabs.
 *
 * Bewusst Flex statt der frueheren float-left/float-end-Kombination: die Kachel ist
 * hoeher als der Titel, wurde als Float unter die Tab-Zeile gedrueckt und ragte unten
 * aus dem Header heraus, weil der Header die Floats nicht umschloss. Flex legt beide
 * Kinder an derselben Oberkante ab und laesst den Header mitwachsen. */
.kiss-cardhead-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.6rem 0;
}

.kiss-cardhead-row > .card-title {
    margin: 0;
    padding: 0.15rem 0 0;
    align-self: center;
}

/* ----------------------------------------------------------------------------
 *  Domainfilter der E-Mail-Reiter (.kiss-domfilter)
 *
 *  Ersetzt die reinen A-Z-Buttons: Suchfeld + Trefferliste mit Zaehlern. Der
 *  Anfangsbuchstabe traegt bei vielen aehnlichen Domains nicht (Kunde 9999: 63 von
 *  103 Domains beginnen mit "t"), deshalb steht die Volltextsuche vorn und A-Z nur
 *  noch als Schnellsprung. Verhalten: public/js/email/domainfilter.js
 * ------------------------------------------------------------------------- */
.kiss-domfilter {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(128, 145, 160, 0.22);
    border-radius: var(--kiss-radius);
}

.kiss-domfilter-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.kiss-domfilter-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Aktiver Filter als Chip — mit "x" zum Zuruecksetzen, damit man nicht raten muss,
   wie man wieder zur Gesamtansicht kommt. */
.kiss-domfilter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    text-decoration: none;
    background: var(--kiss-gradient);
    color: #fff;
}
.kiss-domfilter-chip:hover  { color: #fff; opacity: 0.9; }
.kiss-domfilter-chip.is-all { background: rgba(128, 145, 160, 0.25); color: inherit; }

.kiss-domfilter-search {
    position: relative;
    display: flex;
    align-items: center;
}
.kiss-domfilter-search > .bi-search {
    position: absolute;
    left: 0.7rem;
    opacity: 0.55;
    pointer-events: none;
}
.kiss-domfilter-search .form-control {
    padding-left: 2.1rem;
    padding-right: 4rem;
}
.kiss-domfilter-count {
    position: absolute;
    right: 0.75rem;
    font-size: 0.74rem;
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.kiss-domfilter-az { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.kiss-az {
    min-width: 1.9rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid rgba(128, 145, 160, 0.35);
    border-radius: var(--kiss-radius-sm);
    background: transparent;
    color: inherit;
    font-size: 0.78rem;
    line-height: 1.6;
}
.kiss-az:hover      { border-color: var(--kiss-blue); }
.kiss-az.is-active  { background: var(--kiss-gradient); border-color: transparent; color: #fff; }

/* Liste scrollt in sich, damit 100 Domains die Seite nicht nach unten schieben. */
.kiss-domfilter-list {
    display: flex;
    flex-direction: column;
    max-height: 17rem;
    overflow-y: auto;
    border: 1px solid rgba(128, 145, 160, 0.2);
    border-radius: var(--kiss-radius-sm);
}

/* Festes Spaltenraster statt Flex: nur so stehen Zahlen, Icons und Vertragsnummern
   ueber alle Zeilen senkrecht untereinander. Kopfzeile und Datenzeilen teilen sich
   dasselbe Raster. */
.kiss-domrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.75rem 4.75rem 6rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.65rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(128, 145, 160, 0.14);
}
.kiss-domrow:last-child { border-bottom: 0; }
.kiss-domrow:hover      { background: rgba(103, 151, 176, 0.14); color: inherit; }
.kiss-domrow:focus-visible { outline: 2px solid var(--kiss-focus); outline-offset: -2px; }
.kiss-domrow.is-active  { background: rgba(103, 151, 176, 0.22); font-weight: 600; }

/* Spaltenueberschriften: gleiches Raster, aber nicht klickbar und ohne Rahmenlinie. */
.kiss-domhead {
    padding-bottom: 0.15rem;
    border-bottom: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.55;
}
.kiss-domhead .kiss-domrow-num,
.kiss-domhead .kiss-domrow-contract {
    display: block;
    text-align: right;
    font-family: inherit;
    font-size: inherit;
    opacity: 1;
}
.kiss-domhead .kiss-domrow-contract { text-align: left; }

.kiss-domrow-name { min-width: 0; overflow-wrap: anywhere; }

/* Zahl rechtsbuendig, Icon in fester Spur dahinter — dadurch fluchten sowohl die
   Ziffern (tabular-nums) als auch die Symbole. */
.kiss-domrow-num {
    display: grid;
    grid-template-columns: 1fr 1rem;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.kiss-domrow-val         { text-align: right; }
.kiss-domrow-num > i     { opacity: 0.65; text-align: left; }
.kiss-domrow-num.is-zero { opacity: 0.38; }

.kiss-domrow-contract {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    opacity: 0.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kiss-domfilter-empty { font-size: 0.85rem; opacity: 0.7; }

/* Schmale Schirme: Vertragsspalte faellt weg, das Raster schrumpft mit. */
@media (max-width: 575.98px) {
    .kiss-domrow { grid-template-columns: minmax(0, 1fr) 4rem 4rem; }
    .kiss-domrow-contract { display: none; }
}

/* ----------------------------------------------------------------------------
 *  Paket-Kachel im Gradient-Header (.kiss-pkgbox)
 *
 *  WARUM abgesetzt: die Kachel steht neben einem Domainnamen, zeigt aber Zahlen
 *  des PAKETS. Ohne sichtbare Abgrenzung liest man "10 / 20" als Angabe zur
 *  Domain — genau das ist passiert. Eigener Rahmen + eigener Fond machen daraus
 *  ein erkennbar eigenes Objekt, die Ueberschrift "PAKET" benennt es, und die
 *  Zahl traegt den Zusatz "im Paket" direkt bei sich statt in einer Klammer.
 *
 *  Liegt hier und nicht im Seiten-CSS, weil die Kachel von allen E-Mail-Reitern
 *  ueber private/pages/email/inc.package_header.php geteilt wird.
 * ------------------------------------------------------------------------- */
.kiss-pkgbox {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--kiss-radius-sm);
    background: rgba(255, 255, 255, 0.10);
    line-height: 1.35;
}

.kiss-pkgbox-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.kiss-pkgbox-ident {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.86rem;
}

.kiss-pkgbox-name   { font-weight: 600; }

/* Vertragsnummer bewusst monospace: sie ist eine Kennung zum Ablesen und
   Weitergeben, kein Fliesstext. */
.kiss-pkgbox-contract {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.72);
}

.kiss-pkgbox-count {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.8rem;
}

.kiss-pkgbox-count .badge { font-weight: 600; }
.kiss-pkgbox-count .kiss-pkgbox-scope { color: rgba(255, 255, 255, 0.86); }
.kiss-pkgbox-count .kiss-pkgbox-free  { color: rgba(255, 255, 255, 0.66); }

/* Schmale Schirme: die Kachel rutscht unter den Domainnamen statt ihn zu quetschen. */
@media (max-width: 767.98px) {
    .kiss-pkgbox { width: 100%; }
}

/* ============================================================================
 *  5. BUTTONS
 * ========================================================================== */
/* Dezenter Hover-Lift fuer Standard-Buttons (kleine/Link-/Close-Buttons aus,
   damit dichte Tabellen-/Pagination-UIs ruhig bleiben) */
.btn:not(.btn-sm):not(.btn-link):not(.btn-close):not(.page-link):hover {
    transform: var(--kiss-lift);
    box-shadow: var(--kiss-shadow-btn);
}

/* Primaerer Marken-Button (Gradient, wie /user) */
.kiss-btn-primary {
    background: var(--kiss-gradient) !important;
    border: none !important;
    color: #fff !important;
}

.kiss-btn-primary:hover,
.kiss-btn-primary:focus {
    color: #fff !important;
    opacity: 0.92;
    transform: var(--kiss-lift);
    box-shadow: var(--kiss-shadow-btn);
}

/* ============================================================================
 *  6. FORMULARE
 * ========================================================================== */
.form-control,
.form-select {
    border-radius: var(--kiss-radius-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--kiss-focus);
    box-shadow: 0 0 0 0.25rem var(--kiss-focus-ring);
}

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

.form-check-input:focus {
    border-color: var(--kiss-focus);
    box-shadow: 0 0 0 0.25rem var(--kiss-focus-ring);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--kiss-navy);
}

/* BS4-Kompatibilitaet: .input-group-append/-prepend gibt es in BS5 nicht mehr.
   display:contents loest den Wrapper auf -> das innere .input-group-text/.btn
   wird direktes Flex-Kind der .input-group und sitzt korrekt (kein Doppel-Rand,
   richtige Rundung). Fixt Alt-Markup portalweit ohne Aenderung am PHP. */
.input-group > .input-group-append,
.input-group > .input-group-prepend {
    display: contents;
}

/* ============================================================================
 *  7. TABELLEN
 * ========================================================================== */
.table > thead.table-light th,
.table thead th {
    font-weight: 600;
    text-transform: none;
}

/* DataTables-Responsive: Aufklapp-Steuerung gut sichtbar */
table.dataTable > tbody > tr > td.dtr-control:before,
table.dataTable > tbody > tr > th.dtr-control:before {
    background-color: var(--kiss-blue);
    border-color: var(--kiss-blue);
}

/* DataTables Buttons (Export Kopieren/CSV/Excel/PDF/Drucken) — die Buttons-CSS
   der Extension ist nicht eingebunden, daher hier portalweit als CI-Buttons. */
.dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.dt-button,
button.dt-button,
div.dt-button,
a.dt-button {
    background: #fff;
    border: 1px solid #dee2e6;
    color: var(--kiss-navy);
    border-radius: var(--kiss-radius-sm);
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: none;
    transition: var(--kiss-transition);
}

.dt-button:hover,
button.dt-button:hover,
a.dt-button:hover {
    background: var(--kiss-gradient);
    border-color: transparent;
    color: #fff;
    transform: var(--kiss-lift);
    box-shadow: var(--kiss-shadow-btn);
}

.dt-button:focus,
.dt-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--kiss-focus-ring);
}

.dt-button.disabled,
.dt-button:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Dark-Theme: Buttons lesbar halten */
body[data-theme="dark"] .dt-button {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e9ecef;
}

/* ============================================================================
 *  8. BADGES / TABS / BREADCRUMB / MODAL
 * ========================================================================== */
.badge {
    font-weight: 500;
}

/* Pill-Tabbing fuer die Profil-Tabs: aktiver Tab = Marken-Gradient */
.nav-tabs.profile-tab {
    border-bottom: 0;
    gap: 0.25rem;
    margin-bottom: 10px;
    padding: 0.375rem;
    background: rgba(31, 47, 65, 0.05);
    border: 1px solid rgba(31, 47, 65, 0.10);
    border-radius: var(--kiss-radius);
    box-shadow: var(--kiss-shadow);
}

.nav-tabs.profile-tab .nav-link {
    border: 0;
    margin-bottom: 0;
    border-radius: var(--kiss-radius-sm);
    color: inherit;
    transition: var(--kiss-transition);
}

.nav-tabs.profile-tab .nav-link:not(.active):hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--kiss-blue);
}

.nav-tabs.profile-tab .nav-link.active {
    background: var(--kiss-gradient);
    color: #fff;
    border-radius: var(--kiss-radius-sm);
    font-weight: 600;
    box-shadow: var(--kiss-shadow-btn);
}

.page-titles {
    margin-bottom: 1.25rem;
}

/* ============================================================================
 *  8b. NAVIGATION (Sidebar + Topbar)
 * ========================================================================== */
/* Navigations-Schrift: Sidebar kompakter (13px, inkl. Firmen-/Kundenname +
   Kundennummer, die ebenfalls .sidebar-link sind), Topbar 14px. */
.left-sidebar .sidebar-nav .sidebar-link {
    font-size: 13px;
}
.topbar .navbar-nav .nav-link {
    font-size: 14px;
}
/* User-Profil-Eintrag (Firmen-/Kundenname) kompakter */
.left-sidebar .sidebar-nav .user-profile > .sidebar-link {
    font-size: 11px;
}

/* Sanfter Uebergang Topbar -> Sidebar/Content: weicher Schatten nach unten
   (Template hatte nur 1px 0 7px -> fast nur horizontal -> harte Kante). */
.topbar {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Initialen-Avatar (Profil in der Topbar) statt Default-Bild */
.kiss-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    user-select: none;
}

.kiss-avatar-lg {
    width: 60px;
    height: 60px;
    font-size: 22px;
}

/* Deterministische Farbpalette (Index aus dem Namen) */
.kiss-avatar-c0 { background: #2f6fed; }
.kiss-avatar-c1 { background: #16a085; }
.kiss-avatar-c2 { background: #8e44ad; }
.kiss-avatar-c3 { background: #d35400; }
.kiss-avatar-c4 { background: #c0392b; }
.kiss-avatar-c5 { background: #2c82c9; }
.kiss-avatar-c6 { background: #27ae60; }
.kiss-avatar-c7 { background: #e67e22; }

/* Haupt-Navigationspunkte: modern + praegnant als Top-Level-Eintraege.
   Direkte Kinder von #sidebarnav = Hauptpunkte (Sub-Links liegen tiefer in .first-level). */
/* WICHTIG: nur im ausgeklappten Zustand (data-sidebartype="full"). Im
   eingefahrenen Zustand (mini-sidebar) gilt das Template-Layout -> konsistente
   Breite + korrekt zentrierte, voll umschlossene Icons. */
#main-wrapper[data-sidebartype="full"] .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item {
    width: auto;          /* Template setzt width:100% -> sonst laeuft das rechte Margin ueber */
    margin: 2px 3px;
}

#main-wrapper[data-sidebartype="full"] .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link {
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: 10px;
    padding: 11px 10px;
    opacity: 1;
    transition: var(--kiss-transition);
}

#main-wrapper[data-sidebartype="full"] .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link i {
    font-size: 1.15rem;
    margin-right: 0.35rem;
}

#main-wrapper[data-sidebartype="full"] .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link:hover {
    background: rgba(103, 151, 176, 0.18);
    opacity: 1;
}

/* Aktiver bzw. geoeffneter Hauptpunkt: Marken-Gradient als klare Markierung */
#main-wrapper[data-sidebartype="full"] .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item.active > .sidebar-link,
#main-wrapper[data-sidebartype="full"] .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item.selected > .sidebar-link,
#main-wrapper[data-sidebartype="full"] .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link[aria-expanded="true"] {
    background: var(--kiss-gradient);
    color: #fff !important;
    box-shadow: var(--kiss-shadow-btn);
    opacity: 1;
}

#main-wrapper[data-sidebartype="full"] .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item.active > .sidebar-link i,
#main-wrapper[data-sidebartype="full"] .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item.selected > .sidebar-link i,
#main-wrapper[data-sidebartype="full"] .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link[aria-expanded="true"] i {
    color: #fff !important;
}

/* has-arrow Chevron in der Hauptebene folgt der Textfarbe (weiss auf Gradient) */
#main-wrapper[data-sidebartype="full"] .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link.has-arrow::after {
    border-color: currentColor;
}

/* Sub-Menue sichtbar dem Hauptlink zuordnen: dezente Einrueckung + blaue
   Akzent-Kante + leichter Hintergrund + Innenschatten.
   WICHTIG: Template-Einrueckung reduzieren (sonst addieren sich
   .first-level{padding-left:33px} + Sub-Link{padding-left:15px} + eigene Werte). */
#main-wrapper[data-sidebartype="full"] .sidebar-nav ul .sidebar-item .first-level {
    position: relative;
    padding-left: 0 !important;   /* schlaegt Template .user-profile .first-level{padding-left:48px!important} */
    margin: 2px 0.5rem 8px 0.75rem;
    background: rgba(127, 127, 127, 0.07);
    border-left: 3px solid var(--kiss-blue);
    border-radius: 0 var(--kiss-radius-sm) var(--kiss-radius-sm) 0;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.06);
}

#main-wrapper[data-sidebartype="full"] .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link {
    font-size: 13px;
    font-weight: 400;
    padding: 6px 12px 6px 14px !important;   /* !important schlaegt .p-0 am Sub-Link; statt Template 7px 35px 7px 15px */
    border-radius: 6px;
    opacity: 0.92;
    transition: var(--kiss-transition);
}

#main-wrapper[data-sidebartype="full"] .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link:hover {
    background: rgba(127, 127, 127, 0.12);
    opacity: 1;
}

/* Aktiver Sub-Link hervorheben */
#main-wrapper[data-sidebartype="full"] .sidebar-nav ul .sidebar-item .first-level .sidebar-item.active > .sidebar-link {
    color: var(--kiss-blue);
    font-weight: 600;
    background: rgba(103, 151, 176, 0.14);
}

/* Dark-Theme: Gruppen-Hintergrund/Hover etwas kraeftiger */
body[data-theme="dark"] #main-wrapper[data-sidebartype="full"] .sidebar-nav ul .sidebar-item .first-level {
    background: rgba(255, 255, 255, 0.04);
}
body[data-theme="dark"] #main-wrapper[data-sidebartype="full"] .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Impersonation-Hinweis: "SU BACK" (Topbar) als kompakte rote Pille,
   vertikal eingerueckt (nicht ueber die volle Topbar-Hoehe) */
.topbar .navbar-nav .nav-link.su-back-btn {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin: 5px 0;
    background: #ef5350;
    color: #fff !important;
    border-radius: 50rem;
    padding: 0.2rem 0.7rem;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    transition: var(--kiss-transition);
}

.topbar .navbar-nav .nav-link.su-back-btn:hover {
    background: #e53935;
    color: #fff !important;
    transform: var(--kiss-lift);
    box-shadow: var(--kiss-shadow-btn);
}

/* Impersonation-Hinweis: "Switch Back" (Sidebar) = rote Variante eines
   Hauptpunkts. Layout (Breite/Padding/Radius) wird von den Hauptpunkt-Regeln
   geerbt (full) bzw. vom Template (mini) -> Icon im eingefahrenen Zustand voll
   umschlossen. Hier nur die rote Optik (in beiden Zustaenden). */
.left-sidebar .sidebar-nav .sidebar-link.su-back-link {
    background: #ef5350 !important;
    color: #fff !important;
    font-weight: 600;
}

.left-sidebar .sidebar-nav .sidebar-link.su-back-link:hover {
    background: #e53935 !important;
    color: #fff !important;
}

.modal-content {
    border: 0;
    border-radius: var(--kiss-radius);
}

/* ============================================================================
 *  9. THEME-FEINABSTIMMUNG (nur wo noetig)
 * ========================================================================== */
/* Dark: Formularfelder lesbar halten (uebernommen aus /user) */
body[data-theme="dark"] .form-floating > label {
    color: #adb5bd;
}

body[data-theme="dark"] .form-floating > .form-control:focus ~ label,
body[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--kiss-blue);
}

body[data-theme="dark"] .nav-tabs.profile-tab {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

body[data-theme="dark"] .nav-tabs.profile-tab .nav-link:not(.active):hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

body[data-theme="dark"] .card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}

/* Kompakte Gruppen-Ueberschriften + enge Link-Zeilen INNERHALB des
 * "Meine TNIB"-Untermenues (Zeit & Abwesenheit / Tools / Work).
 * Gescopt auf li.tnib-tnibtool ul.first-level + hoehere Spezifitaet, damit
 * andere Menues und die Top-Level-Sektionstrenner unveraendert bleiben. */
/* Hinweis: Es gibt KEINEN .tnibNavLeft-Wrapper (Markup: aside.left-sidebar >
 * nav.sidebar-nav). Daher hier OHNE .tnibNavLeft und mit Spezifitaet, die die
 * Theme-Regel `.sidebar-nav ul .nav-small-cap` (style.min.css) schlaegt.
 * Die .kiss-nav-subcap-Klasse gibt es nur an unseren Untermenue-Headern. */
.sidebar-nav .nav-small-cap.kiss-nav-subcap {
    padding: 0 14px 0 20px;       /* wie Theme-Vorgabe: kein vertikales Padding */
    margin: 0;
    font-size: 10px;
    line-height: 16px;            /* statt 30px aus dem Theme -> kompakt */
    min-height: 0;
    opacity: .6;
    letter-spacing: .03em;
}
.sidebar-nav li.tnib-tnibtool .first-level li.sidebar-item,
.sidebar-nav li.tnib-admin .first-level li.sidebar-item {
    margin: 0;
    padding: 0;
}
.sidebar-nav li.tnib-tnibtool .first-level li.sidebar-item a.sidebar-link,
.sidebar-nav li.tnib-admin .first-level li.sidebar-item a.sidebar-link {
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 1.25;
}
/* Gruppierte Links etwas weiter einruecken (Theme: .hide-menu margin-left:14px) */
.sidebar-nav li.tnib-tnibtool .first-level li.sidebar-item a.sidebar-link .hide-menu,
.sidebar-nav li.tnib-admin .first-level li.sidebar-item a.sidebar-link .hide-menu {
    margin-left: 20px;
}

/* ===================================================================
 * .kiss-fieldgroup / .kiss-form-section — gruppierte Formular-Bloecke.
 * Panel mit Kopf (Icon + Titel) und gepolstertem Body; saubere Sektions-
 * Trennung mit Abstand. Wiederverwendbar (Paket-Templates etc.).
 * Dark-Theme-tauglich (rgba + color: inherit, keine harten Textfarben).
 * =================================================================== */
.kiss-fieldgroup {
    border: 1px solid rgba(103, 151, 176, 0.25);
    border-radius: var(--kiss-radius);
    background: rgba(103, 151, 176, 0.045);
    margin-bottom: 1rem;
    overflow: hidden;
}
.kiss-fieldgroup__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    background: rgba(103, 151, 176, 0.10);
    border-bottom: 1px solid rgba(103, 151, 176, 0.18);
    font-weight: 600;
    font-size: 0.9rem;
    color: inherit;
}
.kiss-fieldgroup__head .bi { color: var(--kiss-blue); }
.kiss-fieldgroup__actions { margin-left: auto; }
.kiss-fieldgroup__body { padding: 0.9rem; }

.kiss-form-section { margin-bottom: 1.5rem; }
.kiss-form-section:last-child { margin-bottom: 0; }
.kiss-form-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: inherit;
    margin: 0 0 0.85rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(103, 151, 176, 0.22);
}
.kiss-form-section__title .bi { color: var(--kiss-blue); }
.kiss-form-section__title .kiss-form-section__action { margin-left: auto; }

/* ─── ERP Beleg-Vorschau (gemeinsames Modal #erpPreviewModal, siehe page.erp.php) ─── */
.erp-preview-frame {
    width: 100%;
    height: 75vh;
    border: 0;
    display: block;
    /* heller Hintergrund, damit das Dokument auch im Dark-Theme korrekt erscheint */
    background: #fff;
}

/* Belegart-Farbe "Rechnungskorrektur": Lila (Bootstrap hat kein bg-purple). */
.badge.bg-purple {
    background-color: #7460ee;
    color: #fff;
}

/* ------------------------------------------------------------------------------
 *  Preloader: Hintergrund an das Theme koppeln.
 *  Das Vendor-Stylesheet (style.min.css) setzt .preloader{background:#fff}. Da der
 *  Default-Theme dark ist (Core::themeTpl), erzeugt das einen weissen Vollbild-Blitz
 *  vor dem Erscheinen des dunklen Layouts. Wir setzen den Ladeschirm im Dark-Theme
 *  auf die dunkle Basisfarbe (#323743, identisch zur [data-theme=dark]-Page-Basis).
 *  Light-Theme behaelt bewusst den hellen Ladeschirm.
 * ------------------------------------------------------------------------------ */
body[data-theme="dark"] .preloader {
    background: #323743;
}