/* ============================================================
   theme-light.css – 4nes Security Portal (Hell-Design)
   Angelehnt an die echten Markenwerte von www.4nes.com (Elementor-Kit
   post-1100.css): --e-global-color-primary:#1C244B, --accent:#467FF7,
   --text:#324A6D, --secondary:#F3F5F8.
   Ergänzt Bootstrap 5.3, ohne es zu ersetzen.
   ============================================================ */

:root {
  color-scheme: light;

  /* eigene Design-Variablen */
  --bg:      #E7EBF1;
  --bg2:     #DEE3EB;
  --bg-card: #FFFFFF;
  --cyan:    #467FF7;
  --navy:    #1C244B;
  --border:  rgba(28,36,75,.26);
  --text-1:  #1C244B;
  --text-2:  #5b6b85;
  --text-3:  #8291ab;

  /* Bootstrap-Variablen überschreiben — verhindert dunkle Tabellen, Dropdowns etc. */
  --bs-body-bg:        #E7EBF1;
  --bs-body-color:     #1C244B;
  --bs-card-bg:        #FFFFFF;
  --bs-border-color:   rgba(28,36,75,.26);
  --bs-table-bg:       transparent;
  --bs-table-striped-bg: rgba(28,36,75,.03);
  --bs-table-hover-bg:   rgba(70,127,247,.07);
  --bs-dropdown-bg:    #FFFFFF;
  --bs-dropdown-border-color: rgba(28,36,75,.14);
  --bs-dropdown-link-color:   #5b6b85;
  --bs-dropdown-link-hover-bg: #F3F5F8;
  --bs-modal-bg:       #FFFFFF;
  --bs-modal-header-bg: #1C244B;
  --bs-input-bg:       #FFFFFF;
  --bs-input-border-color: rgba(28,36,75,.2);
  --bs-input-color:    #1C244B;
}

/* Plattformweit +20%: Bootstrap-Komponenten (Buttons, Formulare, Badges, Nav, Alerts, Type-Scale)
   sind rem-basiert und skalieren dadurch komplett mit, ohne die (px-fixen) Bootstrap-Breakpoints
   anzufassen — Responsivitaet bleibt unveraendert erhalten. */
html { font-size: 120%; }

/* ——— Hintergrund ——— */
body {
  background-color: var(--bg) !important;
  color: var(--text-1) !important;
}

/* ——— Dezente moderne Uebergaenge ——— */
.btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary:hover { box-shadow: 0 4px 14px rgba(70,127,247,.4); }
.card, .container-box { transition: box-shadow .18s ease; }
.form-control, .form-select { transition: border-color .15s ease, box-shadow .15s ease; }
@keyframes fadeUpIn { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

#background-layer {
  background-color: var(--bg) !important;
}

/* ——— Haupt-Container ——— */
.container-box {
  background: var(--bg-card) !important;
  box-shadow: 0 6px 26px rgba(28,36,75,.16) !important;
  border: 1px solid var(--border);
}

.container-box .border-top {
  border-color: var(--border) !important;
}

.container-box footer .text-muted,
.container-box footer a.text-muted {
  color: var(--text-3) !important;
}

.container-box footer a {
  color: var(--text-2) !important;
}

.container-box footer a:hover {
  color: var(--cyan) !important;
}

/* ——— Überschriften / Text ——— */
h1, h2, h3, h4, h5, h6, p.lead {
  color: var(--text-1) !important;
}

.text-muted { color: var(--text-3) !important; }
.subtitle-tagline small { color: var(--text-3) !important; }

/* ——— Cards ——— */
.card {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
  box-shadow: 0 4px 14px rgba(28,36,75,.16);
}

.card-header {
  background-color: var(--navy) !important;
  border-bottom-color: var(--navy) !important;
  color: #ffffff !important;
}

.card-body {
  background-color: var(--bg-card) !important;
  color: var(--text-1) !important;
}

/* card-body.row hat durch Bootstrap-Gutter margin-top: -Xrem → zieht Body in den Header */
.card-body.row {
  margin-top: 0 !important;
}

/* ——— Formulare ——— */
.form-control,
.form-select {
  background-color: #FFFFFF !important;
  border-color: rgba(28,36,75,.2) !important;
  color: var(--text-1) !important;
}

.form-control::placeholder {
  color: var(--text-3) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: #FFFFFF !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 .2rem rgba(70,127,247,.2) !important;
  color: var(--text-1) !important;
}

.form-label { color: var(--text-2) !important; }
.form-text  { color: var(--text-3) !important; }

.form-check-label { color: var(--text-2) !important; }

.form-check-input {
  background-color: #FFFFFF !important;
  border-color: rgba(28,36,75,.3) !important;
}

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

/* Datumseingabe + Select: OS-UI hell */
input[type="date"].form-control,
.form-select,
select {
  color-scheme: light;
}

/* Native option-Elemente hell */
option {
  background-color: #FFFFFF;
  color: #1C244B;
}

option:hover,
option:focus,
option:checked {
  background-color: #F3F5F8;
  color: #1C244B;
}

/* ——— Alerts ——— */
.alert-success {
  background-color: #eafaf1 !important;
  border-color: rgba(34,197,94,.35) !important;
  color: #166534 !important;
}

.alert-info {
  background-color: #eaf2ff !important;
  border-color: rgba(70,127,247,.35) !important;
  color: #1d4ed8 !important;
}

.alert-danger {
  background-color: #fdecec !important;
  border-color: rgba(239,68,68,.35) !important;
  color: #b91c1c !important;
}

.alert-warning {
  background-color: #fef8e7 !important;
  border-color: rgba(234,179,8,.35) !important;
  color: #92400e !important;
}

/* ——— Badges ——— */
.badge-label { background: var(--text-3) !important; }
.badge-premium { background: #ffc107 !important; color: #000 !important; }
.badge-light   { background: #dbeafe !important; color: #1d4ed8 !important; }

/* ——— Buttons ——— */
.btn-outline-secondary {
  color: var(--text-2) !important;
  border-color: rgba(28,36,75,.25) !important;
}

.btn-outline-secondary:hover {
  background-color: rgba(28,36,75,.06) !important;
  color: var(--text-1) !important;
  border-color: rgba(28,36,75,.35) !important;
}

/* ——— Pagination ——— */
.pagination .page-link {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--cyan) !important;
}

.pagination .active .page-link {
  background-color: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: #fff !important;
}

.pagination .page-link:hover {
  background-color: #F3F5F8 !important;
  color: var(--text-1) !important;
}

/* ——— Popover ——— */
.popover {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

.popover-header {
  background-color: var(--navy) !important;
  border-bottom-color: var(--navy) !important;
  color: #fff !important;
}

.popover-body {
  color: var(--text-2) !important;
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after,
.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--bg-card) !important;
}

/* ——— iframe-Vorschau ——— */
.preview-wrap {
  border-color: var(--border) !important;
  background: #fff !important;
}

/* ——— Spinner ——— */
.spinner-border { color: var(--cyan) !important; }

/* ——— Collapse-Inhalte ——— */
.collapse .card-body {
  background-color: var(--bg-card) !important;
}

/* ============================================================
   ADMIN-SPEZIFISCHE ERWEITERUNGEN
   ============================================================ */

/* Navbar — bleibt bewusst dunkel (Marken-Navy) als Anker, auch im Hell-Design.
   !important noetig, sonst gewinnt sonst je nach Ladereihenfolge eine andere
   gleich-spezifische Regel (Bug behoben: Navbar zeigte zuvor faelschlich --bg2). */
.navbar-4nes { background: var(--navy) !important; }
/* Navbar bleibt immer dunkel (Marken-Navy) -> Text bewusst fest hell, NICHT var(--text-1)
   (das waere jetzt dunkles Navy -> Navy-auf-Navy, unsichtbar). */
.navbar-brand, .navbar .nav-link { color: #e8ebf5 !important; }
.navbar-toggler { border-color: rgba(28,36,75,.25) !important; }
.btn-abmelden { background-color: rgba(239,68,68,.1) !important; border: 1px solid rgba(239,68,68,.35) !important; color: #b91c1c !important; border-radius: 9999px !important; }
.btn-abmelden:hover { background-color: rgba(239,68,68,.18) !important; }

/* Dropdown-Menüs (Bootstrap JS-Dropdowns) */
.dropdown-menu {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}
.dropdown-item { color: var(--text-2) !important; }
.dropdown-item:hover, .dropdown-item:focus { background-color: #F3F5F8 !important; color: var(--text-1) !important; }
.dropdown-divider { border-color: var(--border) !important; }
.dropdown-header { color: var(--text-3) !important; }

/* Tabellen */
.table { color: var(--text-1) !important; border-color: var(--border) !important; }
.table td, .table th { border-color: var(--border) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--text-1) !important; background-color: rgba(28,36,75,.025) !important; }
.table-hover > tbody > tr:hover > * { background-color: rgba(70,127,247,.06) !important; color: var(--text-1) !important; }
thead.table-dark th, .table-dark thead th { background-color: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
thead.table-light th, .table-light th { background-color: #F3F5F8 !important; color: var(--text-2) !important; border-color: var(--border) !important; }
.table-bordered { border-color: var(--border) !important; }

/* Accordion */
.accordion-item { background-color: var(--bg-card) !important; border-color: var(--border) !important; }
.accordion-button { background-color: #F3F5F8 !important; color: var(--text-1) !important; }
.accordion-button:not(.collapsed) { background-color: #eaf2ff !important; color: var(--cyan) !important; box-shadow: 0 0 0 .2rem rgba(70,127,247,.15) !important; }
.accordion-body { background-color: var(--bg-card) !important; color: var(--text-1) !important; }

/* Tabs */
.nav-tabs { border-bottom-color: var(--border) !important; }
.nav-tabs .nav-link { color: var(--text-2) !important; border-color: transparent !important; }
.nav-tabs .nav-link:hover { color: var(--text-1) !important; border-color: var(--border) var(--border) transparent !important; }
.nav-tabs .nav-link.active { background-color: var(--bg-card) !important; border-color: var(--border) var(--border) var(--bg-card) !important; color: var(--cyan) !important; }

/* Modal */
.modal-content { background-color: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-1) !important; }
.modal-header { border-bottom-color: var(--navy) !important; background-color: var(--navy) !important; color: #fff !important; }
.modal-footer { border-top-color: var(--border) !important; background-color: var(--bg-card) !important; }

/* List-Group */
.list-group-item { background-color: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-1) !important; }

/* Input-Group */
.input-group-text { background-color: #F3F5F8 !important; border-color: rgba(28,36,75,.2) !important; color: var(--text-2) !important; }

/* Buttons */
.btn-primary {
  background-color: var(--cyan) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(70,127,247,.3) !important;
  transition: box-shadow .25s ease !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cyan) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(70,127,247,.25), 0 4px 16px rgba(70,127,247,.35) !important;
}
.btn-primary:active {
  box-shadow: 0 2px 8px rgba(70,127,247,.3) !important;
}

.btn-success { background-color: #16a34a !important; border-color: #16a34a !important; color: #fff !important; border-radius: 9999px !important; box-shadow: 0 2px 8px rgba(22,163,74,.25) !important; transition: box-shadow .25s ease !important; }
.btn-success:hover, .btn-success:focus { background-color: #15803d !important; box-shadow: 0 0 0 3px rgba(22,163,74,.2), 0 0 14px rgba(22,163,74,.35) !important; }
.btn-danger { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; border-radius: 9999px !important; box-shadow: 0 2px 8px rgba(220,38,38,.2) !important; transition: box-shadow .25s ease !important; }
.btn-danger:hover, .btn-danger:focus { background-color: #b91c1c !important; box-shadow: 0 0 0 3px rgba(220,38,38,.2), 0 0 12px rgba(220,38,38,.3) !important; }
.btn-warning { background-color: #f59e0b !important; border-color: #f59e0b !important; color: #78350f !important; border-radius: 9999px !important; box-shadow: 0 2px 8px rgba(245,158,11,.2) !important; transition: box-shadow .25s ease !important; }
.btn-warning:hover, .btn-warning:focus { background-color: #d97706 !important; box-shadow: 0 0 0 3px rgba(245,158,11,.2), 0 0 12px rgba(245,158,11,.3) !important; }
.btn-info { background-color: #eaf2ff !important; border-color: rgba(70,127,247,.4) !important; color: #1d4ed8 !important; border-radius: 9999px !important; }
.btn-info:hover { background-color: #dbe8ff !important; }
.btn-secondary { background-color: #F3F5F8 !important; border-color: rgba(28,36,75,.2) !important; color: var(--text-2) !important; border-radius: 9999px !important; }
.btn-outline-primary { color: var(--cyan) !important; border-color: var(--cyan) !important; border-radius: 9999px !important; }
.btn-outline-primary:hover { background-color: rgba(70,127,247,.1) !important; }
.btn-outline-danger { color: #dc2626 !important; border-color: rgba(220,38,38,.5) !important; border-radius: 9999px !important; }
.btn-outline-danger:hover { background-color: rgba(220,38,38,.08) !important; }
.btn-outline-light { color: var(--text-2) !important; border-color: rgba(28,36,75,.2) !important; border-radius: 9999px !important; }
.btn-outline-light:hover { background-color: rgba(28,36,75,.06) !important; }
.btn-outline-secondary { border-radius: 9999px !important; }
.btn-close { opacity: .6; }

/* Badges */
.badge.bg-primary { background-color: #467FF7 !important; }
.badge.bg-success { background-color: #dcfce7 !important; color: #166534 !important; }
.badge.bg-danger  { background-color: #fee2e2 !important; color: #b91c1c !important; }
.badge.bg-warning { background-color: #fef3c7 !important; color: #92400e !important; }
.badge.bg-secondary { background-color: #F3F5F8 !important; color: var(--text-2) !important; }
.badge.bg-info    { background-color: #dbeafe !important; color: #1d4ed8 !important; }
.badge.bg-dark    { background-color: var(--navy) !important; color: #fff !important; }
.badge.bg-light   { background-color: #F3F5F8 !important; color: var(--text-1) !important; }
.badge-extern     { background-color: #dbeafe !important; color: #1d4ed8 !important; }
.badge-manuell    { background-color: #dcfce7 !important; color: #166534 !important; }

/* Border-Utilities */
.border-primary { border-color: rgba(70,127,247,.5) !important; }
.border-success { border-color: rgba(22,163,74,.5) !important; }
.border-secondary { border-color: rgba(100,116,139,.4) !important; }
.border-danger  { border-color: rgba(220,38,38,.5) !important; }
.border-info    { border-color: rgba(70,127,247,.5) !important; }
.border-warning { border-color: rgba(245,158,11,.5) !important; }

/* Text-Utilities */
.text-primary { color: #467FF7 !important; }
.text-success { color: #16a34a !important; }
.text-secondary { color: var(--text-3) !important; }
.text-danger  { color: #dc2626 !important; }
.text-info    { color: #1d4ed8 !important; }
.text-warning { color: #92400e !important; }

/* Admin card-header Cyan-Linksstreifen */
.bg-cyan-header {
  background-color: var(--navy) !important;
  color: #fff !important;
  border-left: 4px solid var(--cyan) !important;
}

/* Modul-Kacheln (security.html) */
.modul-kachel { border-color: var(--border) !important; background-color: var(--bg-card) !important; transition: all 0.15s ease; }
.modul-kachel:not(.disabled):hover { border-color: var(--cyan) !important; background-color: #eaf2ff !important; }
.modul-kachel.active { border-color: var(--cyan) !important; background-color: rgba(70,127,247,.08) !important; }
.modul-kachel.active i { color: var(--cyan) !important; }
.modul-kachel.disabled { opacity: 0.4; cursor: default !important; }
.modul-kachel i { color: var(--text-3) !important; }

/* Empfänger-Quell-Kacheln (kunde_formular.html) */
.quellenKachel { background-color: #F3F5F8 !important; border: 2px solid var(--border) !important; border-radius: 8px; cursor: pointer; }
.quellenKachel.aktiv { border-color: var(--cyan) !important; background-color: rgba(70,127,247,.08) !important; }
.quellenKachel i { color: var(--text-3); }
.quellenKachel.aktiv i { color: var(--cyan) !important; }
.quellenKachel .kachel-label { color: var(--text-2); }
.quellenKachel.aktiv .kachel-label { color: var(--cyan) !important; }

/* Empfänger-Quell-Box (Manuell/AAD Inhalt) */
.empfaenger-quelle-box {
  background-color: rgba(70,127,247,.05) !important;
  border: 1px solid rgba(70,127,247,.25) !important;
  border-radius: 8px;
}

/* Cyan-Border-Utilities */
.border-cyan-2 { border: 2px solid rgba(70,127,247,.4) !important; }
.border-cyan-3 { border: 3px solid rgba(70,127,247,.5) !important; }

/* code/pre */
code { color: #1d4ed8 !important; background-color: rgba(70,127,247,.08) !important; padding: 0 4px; border-radius: 3px; }

/* form-control-plaintext */
.form-control-plaintext { color: var(--text-1) !important; }

/* details/summary */
summary { color: var(--text-2) !important; cursor: pointer; }