/* MainHoster Dark Mode — Override für SB Admin Pro */

:root {
    --dm-bg: #1e2a38;
    --dm-card-bg: #2a3a4d;
    --dm-card-header-bg: #243345;
    --dm-border: #3d5066;
    --dm-text: #e5e7eb;
    --dm-text-muted: #9ca3af;
    --dm-input-bg: #34465a;
    --dm-input-focus: #6c8da8;
    /* MainHoster Grün-Theme */
    --mh-green: #4bc986;
    --mh-green-dark: #2da269;
}

/* ---------- Body & Layout ---------- */
body {
    /* Bootstrap-Variablen überschreiben — sonst greift --bs-body-color: #69707a überall durch */
    --bs-body-color: #e5e7eb;
    --bs-body-color-rgb: 229, 231, 235;
    --bs-heading-color: #e5e7eb;
    background-color: var(--dm-bg);
    color: var(--dm-text);
}

#layoutSidenav,
#layoutSidenav_content {
    background-color: var(--dm-bg);
    color: var(--dm-text);
}

main {
    color: var(--dm-text);
}

/* Headings und Card-Titles greifen Bootstrap's --bs-heading-color, das wir oben gesetzt haben.
   Hier zusätzlich explizit, falls eine Komponente das ignoriert. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title {
    color: var(--dm-text);
}

/* ---------- Cards (außer wenn explizit bg-xxx gesetzt) ---------- */
.card:not([class*="bg-"]) {
    background-color: var(--dm-card-bg);
    color: var(--dm-text);
    border-color: var(--dm-border);
}
.card:not([class*="bg-"]) > .card-header,
.card:not([class*="bg-"]) > .card-footer {
    background-color: var(--dm-card-header-bg);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
.card:not([class*="bg-"]) > .card-body {
    color: var(--dm-text);
}

/* bg-light (z.B. Support-Tickets) ins Dark-Theme ziehen,
   sonst bleibt heller Bootstrap-Hintergrund + hell gemachter text-dark = unleserlich */
.bg-light {
    background-color: var(--dm-card-bg) !important;
    color: var(--dm-text);
}
.card.bg-light > .card-header,
.card.bg-light > .card-footer {
    background-color: var(--dm-card-header-bg) !important;
    border-color: var(--dm-border) !important;
}

/* ---------- Tabellen ---------- */
.table {
    color: var(--dm-text);
    border-color: var(--dm-border);
    --bs-table-bg: transparent;
    --bs-table-color: var(--dm-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-striped-color: var(--dm-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.08);
    --bs-table-hover-color: var(--dm-text);
    --bs-table-border-color: var(--dm-border);
}
.table > thead {
    color: var(--dm-text);
    border-color: var(--dm-border);
}
.table > :not(caption) > * > * {
    border-color: var(--dm-border);
}
.bg-gray-100 {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ---------- Forms ---------- */
.form-control,
.form-select,
input[type="text"]:not([class*="bg-"]),
input[type="email"]:not([class*="bg-"]),
input[type="password"]:not([class*="bg-"]),
input[type="number"]:not([class*="bg-"]),
textarea:not([class*="bg-"]) {
    background-color: var(--dm-input-bg);
    color: var(--dm-text);
    border-color: var(--dm-border);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--dm-input-bg);
    color: var(--dm-text);
    border-color: var(--mh-green);
    box-shadow: 0 0 0 0.25rem rgba(75, 201, 134, 0.45);
}
/* Checkboxen/Radios im CI-Grün (überschreibt Bootstrap-Blau aus styles.css) */
.form-check-input:focus {
    border-color: var(--mh-green);
    box-shadow: 0 0 0 0.25rem rgba(75, 201, 134, 0.45);
}
.form-check-input:checked {
    background-color: var(--mh-green);
    border-color: var(--mh-green);
}
.form-control::placeholder {
    color: var(--dm-text-muted);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--dm-text-muted);
}
.input-group-text {
    background-color: var(--dm-card-header-bg);
    color: var(--dm-text);
    border-color: var(--dm-border);
}
.form-label, label {
    color: var(--dm-text);
}

/* ---------- Text-Helfer ---------- */
.text-muted {
    color: var(--dm-text-muted) !important;
}
/* text-dark + alle Text-Kinder werden im Darkmode hell */
.text-dark,
.text-dark .h1, .text-dark .h2, .text-dark .h3, .text-dark .h4, .text-dark .h5, .text-dark .h6,
.text-dark h1, .text-dark h2, .text-dark h3, .text-dark h4, .text-dark h5, .text-dark h6,
.text-dark span,
.text-dark p {
    color: var(--dm-text) !important;
}
.small.text-muted em {
    color: var(--dm-text-muted);
}

/* ---------- MainHoster Grün-Theme ---------- */
/* Überschriften und text-primary in MainHoster-Grün statt Bootstrap-Blau */
.text-primary {
    color: var(--mh-green) !important;
}

/* Links in Alert-Boxen immer im CI-Gruen. Bootstrap faerbt sie sonst blau, und
   das zog sich durch alle Meldungen mit "Zum Warenkorb" / "Klicke hier, um
   zurueck zu gelangen" — zwei Seiten hatten es einzeln mit inline color:white
   geflickt, der Rest blieb blau.
   Fett und unterstrichen, weil die gefuellten Alerts (alert-solid) einen
   kraeftigen Grund haben: auf dem Rot von alert-danger (#e81500) kommt das
   Gruen nur auf 2,2:1 Kontrast. Wo eine Meldung eine wirklich prominente
   Weiterfuehrung braucht, ist ein <a class="btn btn-mh"> das bessere
   Mittel als ein Textlink — der ist gruen UND lesbar.
   :not(.btn) haelt genau diese Buttons heraus: deren Farbe kommt aus der
   Button-Klasse und darf hier nicht ueberschrieben werden. */
.alert a:not(.btn) {
    color: var(--mh-green) !important;
    text-decoration: underline;
    font-weight: 600;
}
/* Einzige Ausnahme: der gefuellte gruene Kasten traegt das CI schon als Flaeche,
   dort waere Gruen auf Gruen unlesbar. Weisser Text auf Marken-Gruen ist
   dieselbe Kombination wie bei den Buttons und den bg-mh-green-Kacheln. */
.alert-success.alert-solid a:not(.btn) {
    color: #fff !important;
}

/* Textlinks in normalen (dunklen) Karten im CI-Gruen statt im Theme-Blau
   #0061f2 aus styles.css. Betraf vor allem die Admin-Seiten (Kapazitaet,
   Gameserver Hosts, Aufladungen, Umsatzprognose), deren Querverweise ohne
   Klasse blau waren.
   :where() haelt die Spezifitaet auf der eines nackten "a": Jede Regel mit
   eigener Klasse gewinnt weiterhin — Buttons, Navigation, .crm-nav, .crm-link,
   .mh-link, Pagination. Karten mit eigener Hintergrundfarbe (bg-mh-green
   usw.) sind ausgenommen, Gruen auf Gruen waere unlesbar. */
:where(.card:not([class*="bg-"]) .card-body) a {
    color: var(--mh-green);
}
:where(.card:not([class*="bg-"]) .card-body) a:hover {
    color: #3bb676;
}

/* Im Dark Mode das hellere Grün — das #2da269 aus custom.css ist auf dunklem
   Grund zu kontrastarm. stroke mit, damit Feather-Icons ebenfalls umschalten. */
.text-mh-green {
    color: var(--mh-green) !important;
    stroke: var(--mh-green) !important;
}

/* Header-Banner: dunkler MainHoster-Grün-Gradient für lesbaren Subtext */
.bg-gradient-primary-to-secondary {
    background-image: linear-gradient(135deg, var(--mh-green-dark) 0%, #1f7a4f 100%) !important;
}

/* Topnav-Dropdown-Header (Störungs Center) im gleichen Grün statt Bootstrap-Blau */
.dropdown-notifications .dropdown-menu .dropdown-notifications-header {
    background-color: var(--mh-green-dark) !important;
    background-image: linear-gradient(135deg, var(--mh-green-dark) 0%, #1f7a4f 100%) !important;
}

/* Altlast/Sicherheitsnetz: Das Interface nutzt seit 03.10.2026 .btn-mh /
   .btn-outline-mh (custom.css). Diese Regeln halten nur noch vergessene oder
   aus Altcode kopierte btn-primary/btn-success im CI-Gruen.
   Aktions-Buttons (btn-primary = "Bestellen/Abo aktivieren", btn-success = die
   meisten CTAs) im MainHoster-CI-Grün. Invertiert: Ruhezustand dunkel (#3bb676),
   Hover hell (#4bc986 = --mh-green), Active zurück auf Dunkel. Hover-Ton bewusst
   als var(--mh-green) / #3bb676 als Literal, damit die Notification-Header-
   Verläufe (die --mh-green-dark = #2da269 nutzen) unberührt bleiben. */
.btn-primary,
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3bb676;
    --bs-btn-border-color: #3bb676;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mh-green);
    --bs-btn-hover-border-color: var(--mh-green);
    --bs-btn-focus-shadow-rgb: 75, 201, 134;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3bb676;
    --bs-btn-active-border-color: #3bb676;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3bb676;
    --bs-btn-disabled-border-color: #3bb676;
}

/* Sekundaere Aktionen (z. B. die Kebab-Menues in den Admin-Tabellen) ebenfalls
   im CI-Gruen statt im Bootstrap-Ton #00ac69. btn-outline-secondary scheidet
   dafuer aus: --bs-secondary ist in diesem Theme Violett (#6900c7). */
.btn-outline-success {
    --bs-btn-color: var(--mh-green);
    --bs-btn-border-color: #3bb676;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3bb676;
    --bs-btn-hover-border-color: #3bb676;
    --bs-btn-focus-shadow-rgb: 75, 201, 134;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3bb676;
    --bs-btn-active-border-color: #3bb676;
    --bs-btn-disabled-color: var(--mh-green);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #3bb676;
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
    background-color: var(--dm-card-bg);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
.dropdown-item {
    color: var(--dm-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--dm-text);
}
.dropdown-header {
    color: var(--dm-text-muted);
}
.dropdown-divider {
    border-color: var(--dm-border);
}

/* ---------- Modal ---------- */
.modal-content {
    background-color: var(--dm-card-bg);
    color: var(--dm-text);
    border-color: var(--dm-border);
}
.modal-header,
.modal-footer {
    border-color: var(--dm-border);
}
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

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

/* ---------- Border-Helfer ---------- */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end,
.border-light,
.border-bottom-0,
.border-top-0 {
    border-color: var(--dm-border) !important;
}

/* ---------- Wizard (mehrstufige Forms) ---------- */
.nav-wizard .nav-link {
    color: var(--dm-text);
    background-color: var(--dm-card-header-bg);
}
.nav-wizard .nav-link.active {
    color: #fff;
    --bs-nav-pills-link-active-bg: #2da269;
    /* MainHoster-Grün-Verlauf statt einfarbig (gleicher Verlauf wie Page-Header / .bg-mh-green) */
    background-color: #2da269 !important;
    background-image: linear-gradient(135deg, #2da269 0%, #1f7a4f 100%) !important;
}
/* Wizard-Step-Icon: weißes Quadrat mit Step-Zahl — Zahl im MainHoster-Grün */
.nav-wizard .nav-link.active .wizard-step-icon {
    color: var(--mh-green);
}
.nav-wizard .nav-link.active .wizard-step-icon i,
.nav-wizard .nav-link.active .wizard-step-icon svg,
.nav-wizard .nav-link.active .wizard-step-icon .feather {
    color: var(--mh-green);
}

/* ---------- HR ---------- */
hr {
    border-color: var(--dm-border);
    opacity: 0.5;
}

/* ---------- Pagination ---------- */
.page-link {
    background-color: var(--dm-card-bg);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
.page-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--dm-text);
}
.page-item.disabled .page-link {
    background-color: var(--dm-card-bg);
    color: var(--dm-text-muted);
    border-color: var(--dm-border);
}

/* ---------- DataTables (Plugin) ---------- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--dm-text);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--dm-text) !important;
}

/* Responsive-Aufklapp-Pfeil (DataTables 2 / Responsive 3) in CI-Grün statt
   halbtransparentem Schwarz. Das Plugin-CSS lädt erst in footer.php, also
   nach dieser Datei — daher das vorangestellte body für mehr Spezifität. */
body table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
body table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    border-left-color: var(--mh-green, #4bc986);
    vertical-align: middle;
}
body table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
body table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {
    border-left-color: transparent;
    border-top-color: var(--mh-green, #4bc986);
}
body table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:hover:before,
body table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:hover:before {
    border-left-color: #3bb676;
}
body table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:hover:before,
body table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:hover:before {
    border-left-color: transparent;
    border-top-color: #3bb676;
}
/* Aufgeklappte Detailzeile: Theme-Farben statt heller Trennlinien */
body table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom-color: var(--dm-border);
    color: var(--dm-text);
}
body table.dataTable > tbody > tr.child span.dtr-title {
    color: var(--dm-text-muted);
}

/* ---------- Footer ---------- */
.footer-admin {
    background-color: var(--dm-card-bg);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

/* Sticky Footer — robuste Variante mit position: absolute.
   Padding auf BEIDE potenziellen Container, weil der Footer je nach HTML-Struktur
   einer Seite mal direkter Body-Child, mal in #layoutSidenav_content landet. */
body,
#layoutSidenav_content {
    position: relative !important;
    min-height: 100vh !important;
    padding-bottom: 6rem !important; /* Platz für den Footer (~ 80–90px hoch) */
}
.footer-admin {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1;
}
/* Footer auf Mobile: aus der absoluten Positionierung nehmen (sonst bezieht er
   sich auf den überbreiten Bezugsrahmen). Stattdessen Flexbox-Sticky-Footer –
   margin-top:auto schiebt ihn ans Seitenende, egal ob er im body oder in
   #layoutSidenav_content landet, und respektiert dabei die Viewport-Breite. */
@media (max-width: 991.98px) {
    body { display: flex; flex-direction: column; } /* body ist bereits min-height:100vh */
    .footer-admin {
        position: static !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: auto !important; /* schiebt Footer ans Seitenende */
    }
    body,
    #layoutSidenav_content { padding-bottom: 0 !important; }
    .footer-admin .container-xl { max-width: 100% !important; }
    .footer-admin .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: center !important;
    }
    .footer-admin .row > [class*="col-"] {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* Footer auf Desktop am Sidebar-Versatz (15rem) ausrichten, damit er bündig
   mit dem Hauptinhalt (main .container-xl) steht statt im vollen Viewport
   zentriert (und dadurch 120px nach links versetzt) zu sein. */
@media (min-width: 992px) {
    .footer-admin { left: 15rem !important; }
    .sidenav-toggled .footer-admin { left: 0 !important; }
}

/* ---------- User-Dropdown im Header ---------- */
.dropdown-user .dropdown-menu .dropdown-header .dropdown-user-details .dropdown-user-details-name {
    color: var(--dm-text);
}
.dropdown-user .dropdown-menu .dropdown-header .dropdown-user-details .dropdown-user-details-email {
    color: var(--dm-text-muted);
}

/* ---------- Transparente Buttons in Tabellen / Topnav ---------- */
/* SB-Admin-Pro setzt color: rgba(33,40,50,0.5) !important — wir müssen mit !important rüberbügeln */
.btn-transparent-dark {
    --bs-btn-color: rgba(255, 255, 255, 0.75);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.2);
    --bs-btn-disabled-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.75) !important;
}
.btn-transparent-dark:hover,
.btn-transparent-dark:focus {
    color: #fff !important;
}
.btn-transparent-dark i,
.btn-transparent-dark svg,
.btn-datatable i,
.btn-datatable svg {
    color: inherit;
}

/* ---------- Code/Pre ---------- */
pre, code {
    background-color: var(--dm-card-header-bg);
    color: var(--dm-text);
    border-color: var(--dm-border);
}