/*!
 * TBK Partner-Portal – Global Styles (bereinigt & konsolidiert)
 * Ergänzt Bootstrap um projektweite Anpassungen + geteilte Utilities
 */

/* =========================================
   1) Resets & Grundlayout
========================================= */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-family: system-ui, sans-serif;
    background-color: #f8f9fa;
    color: #212529;
}

/* Seiten-Container wie Startseite */
/* NEU 25-08-12: auf kleineren Screens min-width deaktivieren und volle Breite nutzen */
@media (max-width: 992px) {
    .pp-page {
        min-width: 0; /* darf schrumpfen */
        width: 100%; /* sicherheitshalber volle Breite */
        padding-left: .75rem;
        padding-right: .75rem;
    }
}
/* Weißer Rahmen / „Card“ */
.pp-panel {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 6px; /* statt zuvor 0.75rem */
    overflow: hidden;
}

/* =========================================
   2) Links & Interaktionen
========================================= */
a {
    color: #275AAB;
    text-decoration: none;
}

    a:hover {
        color: #123B80;
        text-decoration: underline;
    }

.no-underline-hover {
    text-decoration: none !important;
    transition: transform 0.2s ease;
}

    .no-underline-hover:hover,
    .no-underline-hover:focus {
        text-decoration: none !important;
        transform: scale(1.1);
    }

/* =========================================
   3) Typo & Form-Utilities
========================================= */
.pp-form-label-sm {
    margin-bottom: .25rem;
    font-size: .925rem;
}

/* Fokuszustände vereinheitlichen */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(39, 90, 171, 0.25);
    border-color: #275AAB;
}

/* Readonly-Optik für Suchblöcke */
.such-block .form-control {
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    height: auto;
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #212529;
    box-shadow: none;
    cursor: default;
}

    .such-block .form-control:focus {
        background-color: #f8f9fa;
        border-color: #dee2e6;
        box-shadow: none;
    }

/* =========================================
   4) „Such“-Layout-Utilities
========================================= */
.such-block {
    font-size: 0.9rem;
}

.such-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 0.5rem;
    column-gap: .75rem;
}

.such-label {
    width: 100px;
    margin-right: 0.5rem;
    flex: 0 0 auto;
}

.such-input {
    flex: 1 1 0%;
    min-width: 0;
}

.such-input-sm {
    width: 100px;
    margin-right: 0.5rem;
    flex: 0 0 auto;
}

.such-input-md {
    width: 80px;
    margin-right: 0.5rem;
    flex: 0 0 auto;
}

.such-section {
    margin-top: 0.2rem;
}
/* Inputs in Flex-Zeilen: echtes Schrumpfen */
.such-row .form-control {
    min-width: 0;
    width: auto !important;
    box-sizing: border-box;
}

/* proportionale / zeichenbasierte Flex-Breiten */
.fx-1-3 {
    flex: 0 0 33.333%;
}

.fx-2-3 {
    flex: 0 0 66.667%;
}

/* feste Breite in Zeichen */
.fx-ch-10 {
    flex: 0 0 10ch;
}

.fx-ch-5 {
    flex: 0 0 5ch;
}

/* Breitenbegrenzungen */
.cap {
    flex: 1 1 auto !important;
    max-width: 100%;
    min-width: 0;
}

.cap-05ch {
    max-width: 5ch;
}

.cap-10ch {
    max-width: 10ch;
}

.cap-15ch {
    max-width: 15ch;
}

.cap-20ch {
    max-width: 20ch;
}

.cap-25ch {
    max-width: 25ch;
}

.cap-30ch {
    max-width: 30ch;
}

.cap-50ch {
    max-width: 50ch;
}

.cap-80ch {
    max-width: 80ch;
}

.cap-PLZ {
    max-width: 8ch;
}

.cap-Datum {
    max-width: 12ch;
}

/* dezenter Trenner (Trennlinie) innerhalb von Cards */
.pp-divider {
    border: 0;
    border-top: 1px solid #888;
    margin: .75rem 0 .75rem;
}

/* =========================================
   5) Komponenten / Struktur
========================================= */
.user-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.2;
}

footer {
    background-color: #343a40;
    color: #f8f9fa;
}

    footer a {
        color: #f8f9fa;
    }

        footer a:hover {
            color: #dee2e6;
        }

/* Tabellen (Startseite) */
.daten-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

    .daten-tabelle th {
        background-color: #f0f0f0;
        text-align: left;
        padding: 0.5rem;
        border: 1px solid #ddd;
    }

    .daten-tabelle td {
        padding: 0.5rem;
        border: 1px solid #ddd;
    }

    .daten-tabelle button {
        font-size: 0.8rem;
        padding: 2px 6px;
        cursor: pointer;
    }

/* Eigene Card-Optik (falls Bootstrap-Card überschrieben werden soll) */
.card {
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

    .card h5, .card h6 {
        margin-bottom: 1rem;
        font-size: 1.2rem;
        padding-bottom: 0.3rem;
        border-bottom: 1px solid #ccc;
    }

.card-header-line {
    border-bottom: 1px solid #ccc; /* gleiche Farbe wie vorherige Trenner */
    margin-bottom: .75rem; /* Abstand zum Content */
    padding-bottom: .25rem; /* etwas Luft über der Linie */
}

/* Überschrift in der Card-Kopfzeile: keine eigene Linie/Abstand,
   Linie liegt am Container .card-header-line */
.card .card-header-line h6 {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}


/* Platzhalter */
.placeholder {
    color: #999;
    font-style: italic;
}

/* Zurück-Button (sticky) */
.zurueck-button-wrapper {
    position: sticky;
    bottom: 20px;
    left: 0;
    display: flex;
    justify-content: flex-start;
    margin-left: 20px;
    z-index: 9999;
}

.zurueck-button {
    background-color: #004080;
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, bottom 0.5s ease;
    z-index: 9999;
}

    .zurueck-button:hover {
        background-color: #002d5c;
        color: white;
        text-decoration: none;
        filter: brightness(180%);
    }

/* =========================================
   6) States / Meldungen
========================================= */
.validation-summary-errors {
    color: #a94442;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    padding: 10px;
    border-radius: 4px;
}

.pp-message {
    font-size: 1.2rem;
    font-family: inherit;
    font-weight: 500;
    margin-top: 1rem;
    transition: opacity 0.4s ease;
}

.pp-error {
    color: var(--bs-danger);
}

.pp-ok-message {
    color: var(--bs-success);
}

.pp-message.fade-out {
    opacity: 0;
}

.pp-message.fade-in-prep {
    opacity: 0;
}

.pp-message.fade-in {
    opacity: 1;
}

/* =========================================
   7) Bootstrap-Ergänzungen
========================================= */
.bg-danger-alpha {
    background-color: rgba(220, 53, 69, 0.15);
}

/* =========================================
   8) Listenfarben
========================================= */
.zeile-hell {
    background-color: #ffffff;
}

.zeile-dunkel {
    background-color: #f9f9f9;
}

/* =========================================
   9) Responsive
========================================= */
@media (max-width: 576px) {
    .user-info-list li {
        font-size: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-message {
        transition: none;
    }
}

/* =========================================
   10) Legacy Layout Overrides (minimal aus _Layout.cshtml.css)
========================================= */
/* Branding im Header darf umbrechen */
.navbar-brand {
    white-space: normal;
    word-break: break-word;
    font-size: 25px;
    font-weight: 600;
}

/* Footer: feste Zeilenhöhe, falls gewünscht */
.footer {
    line-height: 60px;
    white-space: nowrap;
}

/* =========================================
   11) select2 / mehrspaltige DDL
========================================= */

/* Placeholder im Select2 nicht ausgegraut darstellen */
.select2-container--bootstrap-5 .select2-selection__placeholder {
    color: var(--bs-body-color);
    opacity: 1;
}

/* Ausgewählter Text einzeilig mit Ellipsis */
.select2-container--bootstrap-5 .select2-selection__rendered {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zwei Spalten im Dropdown (wie zuvor) */
.s2-col-bez {
    flex: 1 1 auto;
    min-width: 0;
}

.s2-col-knz {
    flex: 0 0 auto;
    min-width: 7ch;
    text-align: right;
    opacity: .75;
}

/* Header bündig & sticky (wie zuletzt) */
.phm-s2-header {
    padding: .375rem .75rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
    color: #6c757d;
    font-weight: 600;
}

@supports (position: sticky) {
    .phm-s2-header {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

/* Multi-Column Select2: Header optisch an Optionen angleichen */
.s2-mc-header {
    padding: .375rem .75rem; /* wie .select2-results__option im Bootstrap-5 Theme */
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
    color: #6c757d;
    font-weight: 600;
}

@supports (position: sticky) {
    .s2-mc-header-sticky {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

/* (Optional) Dropdown etwas breiter */
.select2-dropdown {
    min-width: 34ch;
}


/* =========================================
   12) Expander / toggle-button
========================================= */
/* Icon im Toggle: ▲ / ▼ über aria-expanded steuern */
#toggleFilterBtn .toggle-icon::after {
    content: '▲';
    display: inline-block;
    line-height: 1;
    font-size: 1rem;
}

#toggleFilterBtn[aria-expanded="false"] .toggle-icon::after {
    content: '▼';
}

/* Optional: kompakter Icon-Button */
#toggleFilterBtn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#filterToggleBtn:focus {
    box-shadow: none;
}

/* =========================================
   12) Contrls (checkbox, LinkButton, etc.)
========================================= */

.checkbox-disabled-display-normal {
    pointer-events: none; /* verhindert Klicks */
    accent-color: #0d6efd; /* Bootstrap-Primary-Blau (optional) */
    opacity: 1 !important; /* entfernt das Ausgrauen */
    cursor: default; /* Standard-Cursor */
}

.btn-link-button {
    display: inline-block;
    text-decoration: none; /* keine Unterstreichung */
    color: #fff; /* Textfarbe (z. B. weiß auf blauem Hintergrund) */
    background-color: #007bff; /* Bootstrap-primary-blau */
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .btn-link-button:hover {
        text-decoration: none; /* wichtig: auch im Hover */
        background-color: #0056b3; /* etwas dunkleres Blau beim Hover */
        color: #fff;
    }

/* Utility: normale Cursor auf Tabellenzeilen, "Hand" nur bei echten Controls */
.pp-table-rows-default tbody tr {
    cursor: default;
}

    .pp-table-rows-default tbody tr button,
    .pp-table-rows-default tbody tr a {
        cursor: pointer;
    }

/* Modal-Tabelle: Zeilen sollen keinen Hand-Cursor zeigen */
html body #ppModalAuswahl .table-responsive .daten-tabelle tbody tr {
    cursor: default !important;
}
    /* Falls irgendwo auf :hover erneut gesetzt wird */
    html body #ppModalAuswahl .table-responsive .daten-tabelle tbody tr:hover {
        cursor: default !important;
    }
/* Nur echte Controls sollen die Hand zeigen */
html body #ppModalAuswahl .daten-tabelle tbody tr button,
html body #ppModalAuswahl .daten-tabelle tbody tr a {
    cursor: pointer !important;
}


/* =========================================
   Vollseiten-Ladeoverlay (Home)
========================================= */
.pp-loading-overlay {
    position: fixed;
    inset: 0;
    /* vorher hell: background: rgba(255,255,255,0.65); */
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(1px);
    display: none; /* standardmäßig versteckt */
    align-items: center;
    justify-content: center;
    z-index: 2000; /* über Bootstrap-Modal (1055) */
}

    .pp-loading-overlay.is-visible {
        display: flex;
    }

.pp-loading-box {
    /* vorher weiß: background: #fff; */
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.pp-loading-text {
    font-weight: 600;
    color: #495057;
}