/* =========================================================
   Metronic 7.1.9 - Demo 1
   COMPLETE DARK MODE OVERRIDE LAYER
   File: custom.dark-mode.css
   ========================================================= */

/* =========================
   BASE
========================= */
html.dark-mode-preload,
html.dark-mode-preload body {
    background: #151521;
}

body.dark-mode {
    background: #151521 !important;
    color: #e4e6ef !important;
}

body.dark-mode a {
    color: #3699ff;
}

body.dark-mode hr {
    border-color: #2b2b40 !important;
}

/* Layout */
body.dark-mode .wrapper,
body.dark-mode .content,
body.dark-mode .content-wrapper,
body.dark-mode .d-flex.flex-column.flex-root {
    background: #151521 !important;
}

/* =========================
   HEADER + TOPBAR
========================= */
body.dark-mode .header,
body.dark-mode .header-mobile {
    background: #1e1e2d !important;
    border-bottom: 1px solid #2b2b40 !important;
}

body.dark-mode .topbar-item,
body.dark-mode .topbar-item .btn {
    color: #e4e6ef !important;
    background: transparent !important;
}

body.dark-mode .topbar-item i,
body.dark-mode .topbar-item svg {
    color: #a2a3b7 !important;
    fill: #a2a3b7 !important;
}

body.dark-mode .topbar-item:hover {
    background: #2b2b40 !important;
    border-radius: 4px;
}

body.dark-mode .topbar-item.show,
body.dark-mode .topbar-item.open {
    background: #2b2b40 !important;
}

/* =========================
   SUBHEADER
========================= */
body.dark-mode .subheader {
    background: #1e1e2d !important;
    border-bottom: 1px solid #2b2b40 !important;
}

body.dark-mode .subheader .text-dark {
    color: #e4e6ef !important;
}

body.dark-mode .subheader .text-muted {
    color: #6c7293 !important;
}

/* =========================
   ASIDE / MENU
========================= */
body.dark-mode .aside,
body.dark-mode .aside-menu {
    background: #1e1e2d !important;
    border-right: 1px solid #2b2b40 !important;
}

body.dark-mode .menu-nav > .menu-item > .menu-link {
    color: #a2a3b7 !important;
}

body.dark-mode .menu-nav > .menu-item:hover > .menu-link {
    background: #2b2b40 !important;
    color: #ffffff !important;
}

body.dark-mode .menu-nav > .menu-item.menu-item-active > .menu-link {
    background: rgba(54,153,255,0.15) !important;
    color: #ffffff !important;
}

body.dark-mode .menu-nav > .menu-item.menu-item-active > .menu-link i,
body.dark-mode .menu-nav > .menu-item.menu-item-active > .menu-link svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* =========================
   CARDS
========================= */
body.dark-mode .card {
    background: #1e1e2d !important;
    border: 1px solid #2b2b40 !important;
    box-shadow: none !important;
}

body.dark-mode .card-header {
    border-bottom: 1px solid #2b2b40 !important;
}

body.dark-mode .card-title,
body.dark-mode .card-label {
    color: #ffffff !important;
}

/* =========================
   TABLES
========================= */
body.dark-mode .table {
    color: #e4e6ef !important;
}

body.dark-mode .table th,
body.dark-mode .table td {
    border-color: #2b2b40 !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background: #2b2b40 !important;
}

/* =========================
   FORMS
========================= */
body.dark-mode .form-control {
    background: #151521 !important;
    border-color: #323248 !important;
    color: #e4e6ef !important;
}

body.dark-mode .form-control:focus {
    border-color: #3699ff !important;
    color: #ffffff !important;
}

body.dark-mode .form-control::placeholder {
    color: #6c7293 !important;
}

body.dark-mode .input-group-text {
    background: #1e1e2d !important;
    border-color: #323248 !important;
    color: #e4e6ef !important;
}

/* =========================
   BUTTONS
========================= */
body.dark-mode .btn-light,
body.dark-mode .btn-secondary {
    background: #2b2b40 !important;
    border-color: #323248 !important;
    color: #e4e6ef !important;
}

/* =========================
   DROPDOWNS / POPOVERS
========================= */
body.dark-mode .dropdown-menu {
    background: #1e1e2d !important;
    border: 1px solid #2b2b40 !important;
}

body.dark-mode .dropdown-item {
    color: #e4e6ef !important;
}

body.dark-mode .dropdown-item:hover {
    background: #2b2b40 !important;
}

/* =========================
   MODALS
========================= */
body.dark-mode .modal-content {
    background: #1e1e2d !important;
    border: 1px solid #2b2b40 !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #2b2b40 !important;
}

/* =========================
   FOOTER
========================= */
body.dark-mode .kt-footer,
body.dark-mode .footer {
    background: #1e1e2d !important;
    border-top: 1px solid #2b2b40 !important;
    color: #e4e6ef !important;
}

/* =========================
   UTILITIES
========================= */
body.dark-mode .text-dark {
    color: #e4e6ef !important;
}

body.dark-mode .text-muted {
    color: #6c7293 !important;
}

body.dark-mode .border {
    border-color: #2b2b40 !important;
}

/* =========================
   BG UTILITIES (CRITICAL)
========================= */
body.dark-mode .bg-gray-100 {
    background: #2e2e3d !important;
}
body.dark-mode .text-dark-75 {
    color: #6F7284 !important;
}

body.dark-mode .bg-gray-200 {
    background: #2b2b40 !important;
}

/* =========================
   PAGINATION
========================= */
body.dark-mode .pagination .page-link {
    background: #1e1e2d !important;
    border-color: #2b2b40 !important;
    color: #e4e6ef !important;
}

body.dark-mode .pagination .page-item.active .page-link {
    background: #3699ff !important;
    border-color: #3699ff !important;
    color: #ffffff !important;
}

/* =========================
   BADGES / LABELS
========================= */
body.dark-mode .label,
body.dark-mode .badge {
    background: #2b2b40 !important;
    color: #e4e6ef !important;
}

/* =========================
   SELECT2
========================= */
body.dark-mode .select2-container--default .select2-selection--single {
    background: #151521 !important;
    border-color: #323248 !important;
}

body.dark-mode .select2-container--default .select2-selection__rendered {
    color: #e4e6ef !important;
}

/* =========================
   DATATABLE
========================= */
body.dark-mode .datatable-table {
    background: #1e1e2d !important;
    color: #e4e6ef !important;
}

/* =========================
   DATEPICKER
========================= */
body.dark-mode .datepicker,
body.dark-mode .daterangepicker {
    background: #1e1e2d !important;
    border-color: #2b2b40 !important;
    color: #e4e6ef !important;
}

/* =========================
   SWEETALERT2
========================= */
body.dark-mode .swal2-popup {
    background: #1e1e2d !important;
    color: #e4e6ef !important;
}

/* =========================
   QUICK PANEL / NOTIFICATIONS
========================= */
body.dark-mode .offcanvas,
body.dark-mode .quick-panel,
body.dark-mode .notification-panel {
    background: #1e1e2d !important;
    color: #e4e6ef !important;
}

/* =========================
   SCROLLBAR
========================= */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #151521;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #2b2b40;
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #3699ff;
}

/* =========================
   CHECKBOX BASE
========================= */
body.dark-mode .checkbox {
    color: #e4e6ef !important;
}

body.dark-mode .checkbox > label {
    color: #e4e6ef !important;
}

/* Box */
body.dark-mode .checkbox > label:before {
    background: #151521 !important;
    border: 1px solid #323248 !important;
}

/* Checkmark */
body.dark-mode .checkbox > input:checked ~ label:after {
    border-color: #ffffff !important;
}

/* Hover */
body.dark-mode .checkbox > label:hover:before {
    border-color: #3699ff !important;
}

/* Disabled */
body.dark-mode .checkbox > input:disabled ~ label {
    color: #6c7293 !important;
}

/* =========================
   CHECKBOX LG (IMPORTANT)
========================= */

/* größere Box */
body.dark-mode .checkbox.checkbox-lg > label:before {
    width: 22px;
    height: 22px;
    top: -2px;
}

/* Checkmark korrekt skalieren */
body.dark-mode .checkbox.checkbox-lg > input:checked ~ label:after {
    width: 6px;
    height: 12px;
    top: 2px;
    left: 8px;
    border-width: 0 2px 2px 0;
}

/* optional: bessere Hit-Area */
body.dark-mode .checkbox.checkbox-lg > label {
    padding-left: 32px;
}

/* =========================
   CHECKBOX LIGHT WHITE (SPAN-BASED FIX)
========================= */

body.dark-mode .checkbox.checkbox-light-white {
    color: #e4e6ef !important;
}

/* visueller Box-Container (label ODER span Varianten) */
body.dark-mode .checkbox.checkbox-light-white > label:before,
body.dark-mode .checkbox.checkbox-light-white > span {
    background: #1e1e2d !important;
    border: 1px solid #323248 !important;
}

/* Hover */
body.dark-mode .checkbox.checkbox-light-white > label:hover:before,
body.dark-mode .checkbox.checkbox-light-white > span:hover:before {
    border-color: #3699ff !important;
    background: #1e1e2d !important;
}

/* Checked State Hintergrund */
body.dark-mode .checkbox.checkbox-light-white > input:checked ~ label:before,
body.dark-mode .checkbox.checkbox-light-white > input:checked ~ span:before {
    background: rgba(54,153,255,0.15) !important;
    border-color: #3699ff !important;
}

/* Checkmark (wichtig!) */
body.dark-mode .checkbox.checkbox-light-white > input:checked ~ label:after,
body.dark-mode .checkbox.checkbox-light-white > input:checked ~ span:after {
    border-color: #ffffff !important;
}

/* Text (kommt oft als direktes span oder sibling) */
body.dark-mode .checkbox.checkbox-light-white span {
    color: #e4e6ef !important;
}
/* =========================
   TOPBAR DROPDOWN TEXT FIX
========================= */

body.dark-mode .dropdown-menu .navi-link,
body.dark-mode .dropdown-menu .navi-text,
body.dark-mode .dropdown-menu .navi-item span {
    color: #e4e6ef !important;
}

/* Icons im Dropdown */
body.dark-mode .dropdown-menu .navi-icon i,
body.dark-mode .dropdown-menu .navi-icon svg {
    color: #a2a3b7 !important;
    fill: #a2a3b7 !important;
}

/* Hover State */
body.dark-mode .dropdown-menu .navi-link:hover {
    background: #2b2b40 !important;
    color: #ffffff !important;
}

/* Separator */
body.dark-mode .dropdown-menu .navi-separator {
    border-color: #2b2b40 !important;
}

/* Username / Header Text im Dropdown */
body.dark-mode .dropdown-menu .text-nowrap,
body.dark-mode .dropdown-menu strong {
    color: #e4e6ef !important;
}