/* =========================================================================
   Dark theme for the custom `html[data-theme="theme-dark"]` toggle.
   Sneat's core.css ships hardcoded light colors (no dark build), so we
   re-skin the main surfaces here. Loaded after core/theme CSS; every rule
   is scoped to html[data-theme="theme-dark"] so light mode is untouched.
   ========================================================================= */

html[data-theme="theme-dark"] {
    --bs-body-bg: #232333;
    --bs-body-color: #b7b9d4;
    --bs-border-color: rgba(255, 255, 255, 0.10);
    --bs-heading-color: #e4e6f4;
    --bs-emphasis-color: #e4e6f4;
    --bs-secondary-color: #8589ad;
    color-scheme: dark;
}

/* ---- App shell ---- */
html[data-theme="theme-dark"],
html[data-theme="theme-dark"] body,
html[data-theme="theme-dark"] .layout-wrapper,
html[data-theme="theme-dark"] .layout-page,
html[data-theme="theme-dark"] .content-wrapper {
    background-color: #232333;
    color: #b7b9d4;
}

/* ---- Headings & emphasis text ---- */
html[data-theme="theme-dark"] h1, html[data-theme="theme-dark"] h2,
html[data-theme="theme-dark"] h3, html[data-theme="theme-dark"] h4,
html[data-theme="theme-dark"] h5, html[data-theme="theme-dark"] h6,
html[data-theme="theme-dark"] .card-title,
html[data-theme="theme-dark"] .text-heading,
html[data-theme="theme-dark"] .text-dark,
html[data-theme="theme-dark"] .text-black,
html[data-theme="theme-dark"] .fw-bold,
html[data-theme="theme-dark"] .fw-semibold {
    color: #e4e6f4 !important;
}
html[data-theme="theme-dark"] .text-muted,
html[data-theme="theme-dark"] .text-secondary { color: #8589ad !important; }
html[data-theme="theme-dark"] a { color: #a3a6ff; }

/* ---- Cards & raised surfaces ---- */
html[data-theme="theme-dark"] .card,
html[data-theme="theme-dark"] .bg-white,
html[data-theme="theme-dark"] .modal-content,
html[data-theme="theme-dark"] .offcanvas,
html[data-theme="theme-dark"] .accordion-item,
html[data-theme="theme-dark"] .list-group-item,
html[data-theme="theme-dark"] .toast,
html[data-theme="theme-dark"] .popover {
    background-color: #2b2c40 !important;
    color: #b7b9d4;
    border-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="theme-dark"] .card-header,
html[data-theme="theme-dark"] .card-footer,
html[data-theme="theme-dark"] .modal-header,
html[data-theme="theme-dark"] .modal-footer {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="theme-dark"] .bg-light,
html[data-theme="theme-dark"] .bg-lighter,
html[data-theme="theme-dark"] .bg-body { background-color: #2f3047 !important; }

/* ---- Borders / dividers ---- */
html[data-theme="theme-dark"] .border,
html[data-theme="theme-dark"] .border-top,
html[data-theme="theme-dark"] .border-bottom,
html[data-theme="theme-dark"] .border-start,
html[data-theme="theme-dark"] .border-end { border-color: rgba(255, 255, 255, 0.08) !important; }
html[data-theme="theme-dark"] hr { border-color: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.10); }

/* ---- Tables ---- */
html[data-theme="theme-dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #b7b9d4;
    --bs-table-border-color: rgba(255, 255, 255, 0.08);
    color: #b7b9d4;
}
html[data-theme="theme-dark"] .table th,
html[data-theme="theme-dark"] .table td { border-color: rgba(255, 255, 255, 0.06); }
html[data-theme="theme-dark"] .table > :not(caption) > * > * { color: #b7b9d4; }
html[data-theme="theme-dark"] .table thead th { color: #9396ba; }
html[data-theme="theme-dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.03); color: #e4e6f4; }
html[data-theme="theme-dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.02); }

/* ---- Forms ---- */
html[data-theme="theme-dark"] .form-control,
html[data-theme="theme-dark"] .form-select,
html[data-theme="theme-dark"] .input-group-text {
    background-color: #2f3047;
    color: #cdd0ee;
    border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="theme-dark"] .form-control::placeholder { color: #6f7390; }
html[data-theme="theme-dark"] .form-control:focus,
html[data-theme="theme-dark"] .form-select:focus {
    background-color: #34354e; border-color: #696cff; color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25);
}
html[data-theme="theme-dark"] .form-control:disabled,
html[data-theme="theme-dark"] .form-control[readonly] { background-color: #292a3c; color: #7c7fa0; }
html[data-theme="theme-dark"] .form-label,
html[data-theme="theme-dark"] label,
html[data-theme="theme-dark"] .col-form-label { color: #b7b9d4; }
html[data-theme="theme-dark"] .form-check-input { background-color: #2f3047; border-color: rgba(255, 255, 255, 0.20); }
html[data-theme="theme-dark"] .form-check-input:checked { background-color: #696cff; border-color: #696cff; }

/* ---- Dropdowns ---- */
html[data-theme="theme-dark"] .dropdown-menu {
    background-color: #2b2c40;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
html[data-theme="theme-dark"] .dropdown-item { color: #b7b9d4; }
html[data-theme="theme-dark"] .dropdown-item:hover,
html[data-theme="theme-dark"] .dropdown-item:focus { background-color: rgba(105, 108, 255, 0.16); color: #fff; }
html[data-theme="theme-dark"] .dropdown-divider { border-color: rgba(255, 255, 255, 0.08); }

/* ---- Tabs / pills / pagination / breadcrumb ---- */
html[data-theme="theme-dark"] .nav-tabs { border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="theme-dark"] .nav-tabs .nav-link { color: #8589ad; }
html[data-theme="theme-dark"] .nav-tabs .nav-link.active { color: #696cff; background: transparent; border-color: transparent transparent #696cff; }
html[data-theme="theme-dark"] .page-link { background-color: #2b2c40; border-color: rgba(255, 255, 255, 0.08); color: #b7b9d4; }
html[data-theme="theme-dark"] .page-item.active .page-link { background-color: #696cff; border-color: #696cff; color: #fff; }
html[data-theme="theme-dark"] .page-item.disabled .page-link { background-color: #2b2c40; color: #5a5d7a; }
html[data-theme="theme-dark"] .breadcrumb-item, html[data-theme="theme-dark"] .breadcrumb-item a { color: #8589ad; }
html[data-theme="theme-dark"] .breadcrumb-item.active { color: #b7b9d4; }

/* ---- Sidebar ----
   Sneat's `.bg-menu-theme { background-color:#fff !important; color:#697a8d }` (theme-default.css)
   overrode the dev's plain dark rule, so the menu never went dark. Beat it with !important and
   Sneat's own selectors (prefixed for higher specificity). */
html[data-theme="theme-dark"] .bg-menu-theme,
html[data-theme="theme-dark"] .layout-menu {
    background-color: #2b2c40 !important;
    background-image: none !important;
    color: #b7b9d4 !important;
}
html[data-theme="theme-dark"] .bg-menu-theme .menu-inner > .menu-item > .menu-link,
html[data-theme="theme-dark"] .bg-menu-theme .menu-sub > .menu-item > .menu-link,
html[data-theme="theme-dark"] .layout-menu .menu-link,
html[data-theme="theme-dark"] .layout-menu .menu-link > div { color: #b7b9d4; }
html[data-theme="theme-dark"] .bg-menu-theme .menu-icon,
html[data-theme="theme-dark"] .layout-menu .menu-icon { color: #8b8fb5; }
html[data-theme="theme-dark"] .bg-menu-theme .menu-header,
html[data-theme="theme-dark"] .bg-menu-theme .menu-header-text,
html[data-theme="theme-dark"] .layout-menu .menu-header { color: #7f829e !important; }
html[data-theme="theme-dark"] .layout-menu .menu-sub .menu-link::before { background: #5b5e85; }
html[data-theme="theme-dark"] .app-brand,
html[data-theme="theme-dark"] .sidebar-footer { border-color: rgba(255, 255, 255, 0.06) !important; }
html[data-theme="theme-dark"] .menu-inner-shadow { background: linear-gradient(#2b2c40 41%, rgba(43,44,64,0.11) 95%, rgba(43,44,64,0)) !important; }

/* ---- Misc ---- */
html[data-theme="theme-dark"] code { background: rgba(255, 255, 255, 0.08); color: #e685b5; }
html[data-theme="theme-dark"] .btn-outline-secondary { color: #b7b9d4; border-color: rgba(255, 255, 255, 0.18); }
html[data-theme="theme-dark"] .btn-label-secondary,
html[data-theme="theme-dark"] .btn-secondary { background: #3a3b54; border-color: #3a3b54; color: #cdd0ee; }
html[data-theme="theme-dark"] .text-body { color: #b7b9d4 !important; }