/* ═══════════════════════════════════════════════════════════════════════
   AIK PORTAL – Globale Apleona-Harmonisierung
   Einbinden in _Layout.cshtml: <link rel="stylesheet" href="/css/aik-portal.css">
   Überschreibt Bootstrap-Standardfarben konsequent.
═══════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────────────── */
:root {
    --apl-navy: #001e41;
    --apl-navy2: #002d5c;
    --apl-red: #C41230;
    --apl-red-dk: #8B0000;
    --apl-red-lt: #FDF0F1;
    --apl-red-bd: #E8B4BC;
    --apl-grn: #1F6B42;
    --apl-grn-lt: #EBF5EF;
    --apl-grn-bd: #A8D4BA;
    --apl-amb: #8A5C00;
    --apl-amb-lt: #FDF8EE;
    --apl-amb-bd: #E8C87A;
    --apl-gray: #2C2C2C;
    --apl-gray-md: #5A5A5A;
    --apl-gray-lt: #8A8A8A;
    --apl-border: #E0E4EA;
    --apl-bg: #F4F6F9;
    --apl-white: #FFFFFF;
}

/* ── Seitenhintergrund ──────────────────────────────────────────────── */
body {
    background: var(--apl-bg) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BADGES – Bootstrap-Klassen überschreiben
═══════════════════════════════════════════════════════════════════════ */
.badge.bg-success {
    background: var(--apl-grn-lt) !important;
    color: var(--apl-grn) !important;
    border: 1px solid var(--apl-grn-bd);
}

.badge.bg-danger {
    background: var(--apl-red-lt) !important;
    color: var(--apl-red) !important;
    border: 1px solid var(--apl-red-bd);
}

.badge.bg-warning {
    background: var(--apl-amb-lt) !important;
    color: var(--apl-amb) !important;
    border: 1px solid var(--apl-amb-bd);
}

.badge.bg-warning.text-dark {
    color: var(--apl-amb) !important;
}

.badge.bg-primary {
    background: var(--apl-navy) !important;
    color: #fff !important;
    border: none;
}

.badge.bg-info {
    background: #EBF5F9 !important;
    color: #1A6B8A !important;
    border: 1px solid #A8D4E8;
}

.badge.bg-secondary,
.badge.bg-secondary.text-white,
span.badge[class*="bg-secondary"] {
    background: #F0F0F0 !important;
    color: #5A5A5A !important;
    border: 1px solid #D0D0D0 !important;
}

.badge.bg-light {
    background: #F5F5F5 !important;
    color: var(--apl-gray-md) !important;
    border: 1px solid var(--apl-border);
}

/* ── Badge Text-Farben ───────────────────────────────────────────────── */
.text-success { color: var(--apl-grn) !important; }
.text-danger  { color: var(--apl-red) !important; }
.text-warning { color: var(--apl-amb) !important; }
.text-primary { color: var(--apl-navy) !important; }
.text-info    { color: #1A6B8A !important; }

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════════════ */
.btn-primary {
    background: var(--apl-red) !important;
    border-color: var(--apl-red) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background: var(--apl-red-dk) !important;
    border-color: var(--apl-red-dk) !important;
}

.btn-success {
    background: transparent !important;
    border-color: var(--apl-grn) !important;
    color: var(--apl-grn) !important;
}
.btn-success:hover { background: var(--apl-grn-lt) !important; }

.btn-danger {
    background: var(--apl-red) !important;
    border-color: var(--apl-red) !important;
    color: #fff !important;
}
.btn-danger:hover { background: var(--apl-red-dk) !important; }

.btn-warning {
    background: transparent !important;
    border-color: var(--apl-amb) !important;
    color: var(--apl-amb) !important;
}
.btn-warning:hover { background: var(--apl-amb-lt) !important; }

.btn-outline-primary, .btn-outline-secondary,
.btn-outline-success, .btn-outline-danger,
.btn-outline-warning, .btn-outline-info {
    background: #fff !important;
    border-color: var(--apl-border) !important;
    color: var(--apl-gray) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover,
.btn-outline-success:hover, .btn-outline-danger:hover,
.btn-outline-warning:hover, .btn-outline-info:hover {
    border-color: var(--apl-red) !important;
    color: var(--apl-red) !important;
    background: var(--apl-red-lt) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════════════════════════ */
.alert-success {
    background: var(--apl-grn-lt) !important;
    border-color: var(--apl-grn-bd) !important;
    color: var(--apl-grn) !important;
}
.alert-danger {
    background: var(--apl-red-lt) !important;
    border-color: var(--apl-red-bd) !important;
    color: var(--apl-red-dk) !important;
}
.alert-warning {
    background: var(--apl-amb-lt) !important;
    border-color: var(--apl-amb-bd) !important;
    color: var(--apl-amb) !important;
}
.alert-info {
    background: #EBF5F9 !important;
    border-color: #A8D4E8 !important;
    color: #1A6B8A !important;
}
.alert-light {
    background: #F5F5F5 !important;
    border-color: var(--apl-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABELLEN
═══════════════════════════════════════════════════════════════════════ */
.table > thead.table-light > tr > th,
.table > thead.table-light th {
    background: var(--apl-gray) !important;
    color: rgba(255,255,255,.8) !important;
    border: none !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
}
.table > thead.sticky-top th {
    background: var(--apl-gray) !important;
    color: rgba(255,255,255,.8) !important;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background: var(--apl-red-lt) !important;
}
tr.table-danger > td   { background: var(--apl-red-lt) !important; }
tr.table-warning > td  { background: var(--apl-amb-lt) !important; }
tr.table-success > td  { background: var(--apl-grn-lt) !important; }
tr.table-secondary > td{ background: #F5F5F5 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MODAL HEADER
═══════════════════════════════════════════════════════════════════════ */
.modal-header.bg-primary,
.modal-header.bg-success,
.modal-header.bg-danger,
.modal-header.bg-warning {
    background: var(--apl-navy) !important;
    color: #fff !important;
}
[style*="linear-gradient(135deg,#1e3a5f"],
[style*="linear-gradient(135deg, #1e3a5f"] {
    background: var(--apl-navy) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════════════════ */
.card { border-color: var(--apl-border) !important; }
.card-header.bg-white { background: var(--apl-white) !important; }
.card.bg-danger  { background: var(--apl-red) !important; }
.card.bg-success { background: var(--apl-grn) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   FORM CONTROLS
═══════════════════════════════════════════════════════════════════════ */
.form-control:focus,
.form-select:focus {
    border-color: var(--apl-navy) !important;
    box-shadow: 0 0 0 .2rem rgba(0,30,65,.15) !important;
}
.form-check-input:checked {
    background-color: var(--apl-red) !important;
    border-color: var(--apl-red) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   NAV TABS
═══════════════════════════════════════════════════════════════════════ */
.nav-tabs .nav-link {
    color: var(--apl-gray-md);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.nav-tabs .nav-link:hover {
    color: var(--apl-gray);
    border-bottom-color: var(--apl-border);
}
.nav-tabs .nav-link.active {
    color: var(--apl-red) !important;
    border-bottom: 2px solid var(--apl-red) !important;
    font-weight: 700;
    background: none !important;
}
.nav-tabs { border-bottom: 2px solid var(--apl-border); }

/* ═══════════════════════════════════════════════════════════════════════
   ACCORDION
═══════════════════════════════════════════════════════════════════════ */
.accordion-button:not(.collapsed) { color: var(--apl-navy); box-shadow: none; }
.accordion-button:focus            { box-shadow: none; }
.accordion-button                  { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════
   PROGRESS / SPINNER
═══════════════════════════════════════════════════════════════════════ */
.progress-bar.bg-success    { background: var(--apl-grn) !important; }
.text-success.spinner-border{ color: var(--apl-grn) !important; }
.text-info.spinner-border   { color: var(--apl-navy) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   RECHNUNGS-ANSICHT
═══════════════════════════════════════════════════════════════════════ */
.rechnungs-gruppe { transition: box-shadow .15s; }
.rechnungs-gruppe:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ABGLEICH-ANSICHT
═══════════════════════════════════════════════════════════════════════ */
#abgleichTabs .nav-link.active {
    color: var(--apl-red) !important;
    border-bottom-color: var(--apl-red) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SEITEN-HEADER
═══════════════════════════════════════════════════════════════════════ */
.page-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--apl-red);
}
.page-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--apl-gray);
    margin: 0;
    letter-spacing: -.2px;
}
.page-subtitle {
    font-size: 11px;
    color: var(--apl-gray-lt);
    margin: 2px 0 0;
}

/* ── Dropdown-Menü ──────────────────────────────────────────────────── */
.dropdown-item:hover  { background: var(--apl-red-lt) !important; color: var(--apl-red) !important; }
.dropdown-item.active { background: var(--apl-red) !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════════
   AD-FILTER BUTTONS
═══════════════════════════════════════════════════════════════════════ */
.apl-btn-grn  { background:#fff !important; border:1px solid #1F6B42 !important; color:#1F6B42 !important; }
.apl-btn-grn:hover, .apl-btn-grn.active { background:#EBF5EF !important; }
.apl-btn-rd   { background:#fff !important; border:1px solid #C41230 !important; color:#C41230 !important; }
.apl-btn-rd:hover, .apl-btn-rd.active { background:#FDF0F1 !important; }
.apl-btn-amb  { background:#fff !important; border:1px solid #8A5C00 !important; color:#8A5C00 !important; }
.apl-btn-amb:hover, .apl-btn-amb.active { background:#FDF8EE !important; }
.apl-btn-navy { background:#fff !important; border:1px solid #001e41 !important; color:#001e41 !important; }
.apl-btn-navy:hover, .apl-btn-navy.active { background:#E8EFF7 !important; }
.apl-btn-gray { background:#fff !important; border:1px solid #8A8A8A !important; color:#5A5A5A !important; }
.apl-btn-gray:hover, .apl-btn-gray.active { background:#F5F5F5 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ZUGRIFFSVERWALTUNG
═══════════════════════════════════════════════════════════════════════ */
.zv-liste-item {
    padding:8px 12px; border-radius:8px; cursor:pointer;
    border:1.5px solid transparent; margin-bottom:3px;
    font-size:13px; text-decoration:none; display:block;
    color:inherit; transition:all .15s;
}
.zv-liste-item:hover, .gruppe-item:hover {
    background:#FDF0F1 !important; border-color:#E8B4BC !important;
    color:inherit; text-decoration:none;
}
.zv-liste-item.aktiv, .gruppe-item.aktiv {
    background:#FDF0F1 !important; border-color:#C41230 !important;
    font-weight:700; color:inherit;
}
.zv-liste-item.hat-eintrag, .kst-item.hat-zuweisung {
    border-left:3px solid #1F6B42 !important;
}
.liste-col, .detail-col { height:calc(100vh - 260px); overflow-y:auto; }

.persp-btn {
    padding:7px 18px; border-radius:8px; border:1px solid #E0E4EA;
    background:#fff; font-weight:600; font-size:13px;
    text-decoration:none; color:#5A5A5A; display:inline-block; transition:all .15s;
}
.persp-btn:hover { background:#FDF0F1 !important; border-color:#C41230 !important; color:#C41230 !important; text-decoration:none; }
.persp-btn.aktiv { background:#001e41 !important; border-color:#001e41 !important; color:#fff !important; }

.gruppe-item {
    padding:10px 14px; border-radius:8px; border:1.5px solid transparent;
    margin-bottom:4px; text-decoration:none; display:block; color:inherit; transition:all .15s;
}
.gruppen-liste { height:calc(100vh - 280px); overflow-y:auto; }

.chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px; border-radius:20px; font-size:11px;
}
.chip-kst { background:#F0F4F8; border:1px solid #D0D8E4; }
.chip-ktr { background:#EBF5EF; border:1px solid #A8D4BA; }

.kst-item {
    padding:6px 10px; border-radius:7px; cursor:pointer;
    font-size:12px; border:1px solid transparent; transition:all .12s;
}
.kst-item:hover { background:#FDF0F1; border-color:#E8B4BC; }
.kst-item.aktiv { background:#FDF0F1; border-color:#C41230; font-weight:700; }

.person-badge {
    display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
    border-radius:20px; font-size:11px; border:1px solid #E0E4EA;
    background:#F5F5F5; cursor:pointer; transition:all .15s;
}
.person-badge:hover           { background:#FDF0F1; border-color:#C41230; }
.person-badge.ausgewaehlt     { background:#C41230 !important; color:#fff !important; border-color:#C41230 !important; }
.person-badge.zugewiesen      { background:#EBF5EF !important; color:#1F6B42 !important; border-color:#A8D4BA !important; cursor:default; }

.kst-vorschlag-row {
    display:flex; align-items:center; gap:8px; padding:6px 10px;
    border-radius:7px; cursor:pointer; border:1px solid #E0E4EA;
    background:#fff; transition:background .12s,border-color .12s;
}
.kst-vorschlag-row:hover    { background:#FDF0F1; border-color:#E8B4BC; }
.kst-vorschlag-row.selected { background:#EBF5EF !important; border-color:#1F6B42 !important; }

.split-panel { display:grid; grid-template-columns:340px 1fr; gap:20px; }

.ansp-card:hover { transform:translateY(-3px); box-shadow:0 4px 18px rgba(0,0,0,.09) !important; border-color:#C41230 !important; }
.ansp-group-icon, .text-aik-lime { color:#C41230 !important; }
.text-aik-blue  { color:#001e41 !important; }
.ansp-funktion  { color:#C41230 !important; }
.ansp-link:hover{ color:#001e41 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILFUNK VIEWS
═══════════════════════════════════════════════════════════════════════ */
#dropZone:hover { background:#FDF0F1 !important; border-color:#C41230 !important; }
.border-dashed  { border-style:dashed !important; }

.card-header .badge.bg-primary   { background:#001e41 !important; }
.card-header .badge.bg-secondary { background:#5A5A5A !important; }
.card-header .badge.bg-success   { background:#1F6B42 !important; }

.progress-bar.bg-success   { background:#1F6B42 !important; }
.spinner-border.text-success{ color:#1F6B42 !important; }

.fs-2.text-success  { color:#1F6B42 !important; }
.fs-2.text-danger   { color:#C41230 !important; }
.fs-2.text-warning  { color:#8A5C00 !important; }
.fs-2.text-secondary{ color:#5A5A5A !important; }

.nav-link .badge.bg-success  { background:#1F6B42 !important; }
.nav-link .badge.bg-danger   { background:#C41230 !important; }
.nav-link .badge.bg-warning  { background:#8A5C00 !important; color:#fff !important; }
.nav-link .badge.bg-secondary{ background:#5A5A5A !important; }

.bg-danger.bg-opacity-10  { background:rgba(196,18,48,.07) !important; }
.bg-warning.bg-opacity-10 { background:rgba(138,92,0,.07) !important; }

.table-warning   { background:#FDF8EE !important; }
.table-secondary { background:#F4F6F9 !important; }
.text-warning    { color:#8A5C00 !important; }

.badge.bg-danger           { background:#C41230 !important; }
.badge.bg-warning.text-dark{ background:#FDF8EE !important; color:#8A5C00 !important; border:1px solid #E8C87A; }
.badge.bg-secondary        { background:#5A5A5A !important; }
.badge.bg-info.text-dark   { background:#E8EFF7 !important; color:#001e41 !important; }

.text-primary { color:#001e41 !important; }
code.text-success { color:#1F6B42 !important; }
code.text-danger  { color:#C41230 !important; }
code.text-warning { color:#8A5C00 !important; }
code.text-muted   { color:#8A8A8A !important; }

.alert.alert-info    { background:#E8EFF7 !important; border-color:#C0CEDF !important; color:#001e41 !important; }
.alert.alert-warning { background:#FDF8EE !important; border-color:#E8C87A !important; color:#8A5C00 !important; }

#importModal .progress-bar { background:#1F6B42 !important; }

.marker-status-btn.active { outline:3px solid #C41230 !important; outline-offset:2px !important; }

.rech-kpi-card:hover { background:#FDF0F1 !important; }

.bg-primary.ms-1.badge { background:#001e41 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILFUNK – MARKER / PRÜFUNGS-BADGES
   Eigene Klassen – kein Bootstrap-Konflikt möglich
═══════════════════════════════════════════════════════════════════════ */
.marker-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.marker-badge-Korrekt {
    background: #E8F0E8 !important;
    border: 1px solid #b8d4b8 !important;
    color: #2D5A2D !important;
}

.marker-badge-NichtKorrekt {
    background: #FDF0F1 !important;
    border: 1px solid #E8B4BC !important;
    color: #C41230 !important;
}

.marker-badge-Klaerungsbedarf {
    background: #FFF8E8 !important;
    border: 1px solid #e8d48a !important;
    color: #7A5500 !important;
}

.marker-badge-Gekuendigt {
    background: #F5F5F5 !important;
    border: 1px solid #e0e0e0 !important;
    color: #5A5A5A !important;
}

.marker-badge-Kuendbar {
    background: #FDF0F1 !important;
    border: 1px solid #E8B4BC !important;
    color: #C41230 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILFUNK – SPEZIFISCHE FIXES
═══════════════════════════════════════════════════════════════════════ */

/* "Anlegen" Button im Rechnungs-Tab – grün outline */
.rech-anlegen,
button.rech-anlegen {
    font-size: 10px !important;
    border: 1px solid #1F6B42 !important;
    color: #1F6B42 !important;
    background: #fff !important;
}
.rech-anlegen:hover {
    background: #EBF5EF !important;
    color: #1F6B42 !important;
}

/* "Übernehmen" Button – grün */
.rech-uebernehmen,
button.rech-uebernehmen {
    border: 1px solid #1F6B42 !important;
    color: #1F6B42 !important;
    background: #EBF5EF !important;
}

/* Vertragsliste – "Nicht erfasst" Badge (bg-warning text-dark) */
.badge.bg-warning.text-dark {
    background: #FDF8EE !important;
    color: #8A5C00 !important;
    border: 1px solid #E8C87A !important;
}

/* Vertragsliste – "Kein Nutzer · keine Rechnung" Kündigungs-Kandidaten Badge */
.badge[style*="background:#FFF8E8"],
span.badge[style*="FFF8E8"] {
    color: #7A5500 !important;
}

/* Rote Badges in Vertragsliste (Nicht erfasst, Kündbar etc.) */
.badge.bg-danger {
    background: #FDF0F1 !important;
    color: #C41230 !important;
    border: 1px solid #E8B4BC !important;
}

/* Grüne Badges (In Vertragsliste, Korrekt) */
.badge.bg-success {
    background: #EBF5EF !important;
    color: #1F6B42 !important;
    border: 1px solid #A8D4BA !important;
}

/* Vertragsliste Rückgaben – rote Badges mit weißem Text lesbar machen */
#vertragsTabelle .badge.bg-danger,
#kuendigungTabInhalt .badge.bg-danger {
    background: #FDF0F1 !important;
    color: #C41230 !important;
    border: 1px solid #E8B4BC !important;
}

/* Kündigungskandidaten Badge – amber */
.badge[style*="background:#FFF8E8"],
.badge[style*="FFF8E8"] {
    color: #7A5500 !important;
}

/* Prüfungsstatus Leiste */
#awKorrekt      { background: #E8F0E8 !important; color: #2D5A2D !important; border: 1px solid #b8d4b8 !important; }
#awNichtKorrekt { background: #FDF0F1 !important; color: #C41230 !important; border: 1px solid #E8B4BC !important; }
#awKlaerung     { background: #FFF8E8 !important; color: #7A5500 !important; border: 1px solid #e8d48a !important; }
#awGekuendigt   { background: #F5F5F5 !important; color: #5A5A5A !important; border: 1px solid #e0e0e0 !important; }
#awKuendbar     { background: #FDF0F1 !important; color: #C41230 !important; border: 1px solid #E8B4BC !important; }
#awOffen        { background: #F0F0F0 !important; color: #5A5A5A !important; border: 1px solid #D0D0D0 !important; }

/* Bootstrap --bs-badge-color Override für bg-secondary */
.badge.bg-secondary {
    --bs-badge-color: #5A5A5A !important;
    background-color: #F0F0F0 !important;
    color: #5A5A5A !important;
}

/* ── bg-secondary komplett überschreiben inkl. CSS-Variable ── */
:root {
    --bs-secondary-bg: #F0F0F0;
    --bs-secondary: #5A5A5A;
}
.badge.bg-secondary,
.badge[class~="bg-secondary"] {
    --bs-badge-color: #5A5A5A !important;
    background: #F0F0F0 !important;
    background-color: #F0F0F0 !important;
    color: #5A5A5A !important;
    border: 1px solid #D0D0D0 !important;
}

/* ── Tab-Badges (nav-link) – immer weiße Schrift auf dunklem Grund ── */
.nav-link .badge.bg-secondary,
#vlTabs .badge.bg-secondary {
    background: #5A5A5A !important;
    background-color: #5A5A5A !important;
    color: #fff !important;
    border: none !important;
    --bs-badge-color: #fff !important;
}