/* ==========================================================================
   Dark mode (public site only)
   - Switched with <html data-theme="dark"> (set by includes/dark-mode-init.blade.php,
     chosen by the sun/moon button in the navbar, remembered in localStorage and
     following the device setting until the visitor chooses).
   - Not loaded for the author dashboard, admin, reviewer or live previews.
   - The "generated" section below mirrors the light surfaces found in app.css.
   ========================================================================== */

/* ---- navbar toggle button (both modes) ---- */
.theme-toggle .theme-toggle-sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-sun {
    display: inline-block;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-moon {
    display: none;
}

/* ---- palette ---- */
html[data-theme="dark"] {
    color-scheme: dark;
    --dm_surface: #1b1f27;
    --dm_surface_2: #232833;
    --dm_line: #3a4152;
    --dm_text_soft: #cfd5e1;

    --background_color: #12151b;
    --navbar2_background_color: #1b1f27;
    --header_background_color: #161a21;
    --swiper_background_color: #161a21;
    --text_color: #cfd5e1;
    --heading_color: #f2f4f9;
    --text_muted: #8a93a6;
    --border_color: #2b313d;

    /* Bootstrap 5.3 components (cards, modals, dropdowns, pagination, tables ...) */
    --bs-body-bg: var(--dm_surface);
    --bs-body-color: var(--text_color);
    --bs-emphasis-color: var(--heading_color);
    --bs-heading-color: var(--heading_color);
    --bs-secondary-bg: var(--dm_surface_2);
    --bs-tertiary-bg: var(--dm_surface_2);
    --bs-secondary-color: var(--text_muted);
    --bs-border-color: var(--border_color);
}

html[data-theme="dark"] body {
    color: var(--text_color);
    background-color: var(--background_color);
}

/* ---- Bootstrap utility classes used in the public views ---- */
html[data-theme="dark"] .bg-white {
    background-color: var(--dm_surface) !important;
}

html[data-theme="dark"] body.bg-white {
    background-color: var(--background_color) !important;
}

html[data-theme="dark"] .bg-light {
    background-color: var(--dm_surface_2) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--heading_color) !important;
}

html[data-theme="dark"] .text-secondary {
    color: var(--dm_text_soft) !important;
}

html[data-theme="dark"] .border-secondary {
    border-color: var(--dm_line) !important;
}

html[data-theme="dark"] .bg-secondary {
    background-color: var(--dm_line) !important;
}

/* ---- buttons built on --secondary_color (near-black by default) ---- */
html[data-theme="dark"] .btn.btn-secondary {
    background-color: var(--dm_line);
    border-color: var(--dm_line);
    color: #fff;
}

html[data-theme="dark"] .btn.btn-outline-secondary {
    color: var(--dm_text_soft);
    border-color: var(--dm_line);
}

html[data-theme="dark"] .btn.btn-outline-secondary:active,
html[data-theme="dark"] .btn.btn-outline-secondary:focus,
html[data-theme="dark"] .btn.btn-outline-secondary:hover {
    background-color: var(--dm_line);
    border-color: var(--dm_line);
    color: #fff;
}

html[data-theme="dark"] .tabs-custom .nav-pills .nav-link {
    color: var(--dm_text_soft);
    border-color: var(--dm_line);
}

html[data-theme="dark"] .tabs-custom .nav-pills .nav-link.active {
    color: #fff;
}

html[data-theme="dark"] .plan-switcher .plan-switcher-item,
html[data-theme="dark"] .plan .plan-title,
html[data-theme="dark"] .plan .plan-text,
html[data-theme="dark"] .plan .plan-feat span {
    color: var(--dm_text_soft);
}

html[data-theme="dark"] .plan-switcher .plan-switcher-item.active {
    background-color: var(--primary_color);
    color: #fff;
}

html[data-theme="dark"] .categories .category .category-link {
    color: var(--dm_text_soft);
}

/* ---- forms ---- */
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--dm_surface_2) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    color: var(--text_color);
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--text_muted);
}

/* ---- misc surfaces ---- */
html[data-theme="dark"] .changelogs pre {
    background-image: none;
    border-color: var(--border_color);
    color: var(--text_color);
}

html[data-theme="dark"] .nav-bar.nav-bar-sm {
    border-bottom-color: var(--border_color);
}

html[data-theme="dark"] .card-v:hover {
    border-color: var(--dm_line);
}

/* ---- scrollbars ---- */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #181b22;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3a4152;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4d566b;
}

/* ---- generated: light surfaces from app.css -> dark ---- */
html[data-theme="dark"] .btn-social {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .btn-social:hover,
html[data-theme="dark"] .btn-social:focus,
html[data-theme="dark"] .btn-social:active {
    background-color: var(--dm_surface) !important;
}

html[data-theme="dark"] .btn-soft {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .form-control {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .form-control:focus {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .form-select {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .form-select:focus {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .form-check-input:not(:checked) {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .drop-down .drop-down-menu {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .card-v {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .card-bg {
    background-color: var(--dm_surface_2) !important;
}

html[data-theme="dark"] .search .search-input input {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .nav-search {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .profile-dropdown .btn {
    background: var(--dm_surface);
}

html[data-theme="dark"] .profile-dropdown .btn-check:checked+.btn,
html[data-theme="dark"] .profile-dropdown .btn.active,
html[data-theme="dark"] .profile-dropdown .btn.show,
html[data-theme="dark"] .profile-dropdown .btn:first-child:active,
html[data-theme="dark"] .profile-dropdown :not(.btn-check)+.btn:active {
    background: var(--dm_surface);
}

html[data-theme="dark"] .home-category {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .item {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .custom-tabs-item {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .blog-post {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .accordion-custom .accordion-item {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .testimonial {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .table thead th:not(:last-child) {
    border-right: 2px solid var(--border_color);
}

html[data-theme="dark"] .table tbody td {
    border-top: 2px solid var(--border_color);
}

html[data-theme="dark"] .table tbody td:not(:last-child) {
    border-right: 2px solid var(--border_color);
}

html[data-theme="dark"] .table.table-striped thead th {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .table.table-striped tbody td {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .table.table-striped tr:nth-child(odd) td {
    background-color: var(--dm_surface_2);
}

html[data-theme="dark"] .table.table-striped tr:nth-child(odd) .dropdown-btn {
    background-color: var(--dm_surface_2);
}

html[data-theme="dark"] .table.table-striped tr:hover td {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .cookies {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .changelogs pre {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .plan-switcher {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .plan-switcher .plan-switcher-item {
    background-color: var(--dm_surface);
}

html[data-theme="dark"] .plan {
    background-color: var(--dm_surface);
}

@media (max-width: 1199.98px) {
    html[data-theme="dark"] .nav-bar.nav-bar-sm .nav-bar-menu .nav-bar-menu-inner {
        background-color: var(--dm_surface);
    }

}