/* 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(--dm-input-focus);
    box-shadow: 0 0 0 0.2rem rgba(108, 141, 168, 0.25);
}
.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;
}

/* 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;
}

/* btn-primary (Bestellen, Abo aktivieren etc.) ins MainHoster-Grün */
.btn-primary {
    --bs-btn-bg: var(--mh-green);
    --bs-btn-border-color: var(--mh-green);
    --bs-btn-hover-bg: var(--mh-green-dark);
    --bs-btn-hover-border-color: var(--mh-green-dark);
    --bs-btn-focus-shadow-rgb: 31, 157, 87;
    --bs-btn-active-bg: var(--mh-green-dark);
    --bs-btn-active-border-color: var(--mh-green-dark);
    --bs-btn-disabled-bg: var(--mh-green);
    --bs-btn-disabled-border-color: var(--mh-green);
}

/* ---------- 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: var(--mh-green);
    background-color: var(--mh-green) !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;
}

/* ---------- 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);
}