/* ═══════════════════════════════════════════════════════════════════
   DARK MODE THEME VARIABLES
   Implementasi CSS Variables untuk light dan dark mode
   ═══════════════════════════════════════════════════════════════════ */

/* ── Light Mode (Default) ────────────────────────────────────────── */
:root {
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f4f6f9;
    
    /* Text colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #8795a5;
    
    /* Navbar colors */
    --navbar-bg: #f9ca86;
    --navbar-text: #4e342e;
    --navbar-text-hover: #2d1f1a;
    --navbar-border: rgba(78, 52, 46, 0.3);
    
    /* Footer colors */
    --footer-bg: #1b1b1b;
    --footer-text: #e9e4dd;
    --footer-link: #e0c9a6;
    --footer-link-hover: #ffffff;
    
    /* Card colors */
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --card-shadow: rgba(0, 0, 0, 0.1);
    
    /* Border colors */
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    
    /* Button colors */
    --btn-brown-bg: #f9ca86;
    --btn-brown-text: #4e342e;
    --btn-brown-border: #e8b86d;
    --btn-brown-hover-bg: #f0b85a;
    --btn-brown-hover-text: #2d1f1a;
    
    /* Form elements */
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-text: #212529;
    --input-placeholder: #6c757d;
    
    /* Table colors */
    --table-bg: #ffffff;
    --table-stripe-bg: #f8f9fa;
    --table-border: #dee2e6;
    --table-hover-bg: #f5f5f5;
    
    /* Badge colors */
    --badge-light-bg: #f8f9fa;
    --badge-light-text: #495057;
    
    /* Modal colors */
    --modal-bg: #ffffff;
    --modal-header-bg: #f8f9fa;
    
    /* Dropdown colors */
    --dropdown-bg: #ffffff;
    --dropdown-link-hover: #f8f9fa;
}

/* ── Dark Mode ───────────────────────────────────────────────────── */
body.dark-mode {
    /* Background colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #242424;
    
    /* Text colors */
    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --text-muted: #6c757d;
    
    /* Navbar colors - darker golden */
    --navbar-bg: #3d3022;
    --navbar-text: #f9ca86;
    --navbar-text-hover: #ffd89d;
    --navbar-border: rgba(249, 202, 134, 0.3);
    
    /* Footer colors */
    --footer-bg: #0d0d0d;
    --footer-text: #adb5bd;
    --footer-link: #f9ca86;
    --footer-link-hover: #ffd89d;
    
    /* Card colors */
    --card-bg: #2d2d2d;
    --card-border: #404040;
    --card-shadow: rgba(0, 0, 0, 0.5);
    
    /* Border colors */
    --border-color: #404040;
    --border-light: #333333;
    
    /* Button colors */
    --btn-brown-bg: #5a4829;
    --btn-brown-text: #f9ca86;
    --btn-brown-border: #4a3a20;
    --btn-brown-hover-bg: #6b5633;
    --btn-brown-hover-text: #ffd89d;
    
    /* Form elements */
    --input-bg: #2d2d2d;
    --input-border: #404040;
    --input-text: #e9ecef;
    --input-placeholder: #6c757d;
    
    /* Table colors */
    --table-bg: #2d2d2d;
    --table-stripe-bg: #242424;
    --table-border: #404040;
    --table-hover-bg: #333333;
    
    /* Badge colors */
    --badge-light-bg: #404040;
    --badge-light-text: #e9ecef;
    
    /* Modal colors */
    --modal-bg: #2d2d2d;
    --modal-header-bg: #242424;
    
    /* Dropdown colors */
    --dropdown-bg: #2d2d2d;
    --dropdown-link-hover: #333333;
}

/* ── Apply Theme Variables to Elements ───────────────────────────── */

/* Body and backgrounds */
body {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Navbar */
.navbar-brown {
    background-color: var(--navbar-bg) !important;
    color: var(--navbar-text);
}

.navbar-brown .navbar-brand,
.navbar-brown .navbar-nav .nav-link {
    color: var(--navbar-text);
}

.navbar-brown .navbar-nav .nav-link:hover,
.navbar-brown .navbar-nav .nav-link:focus,
.navbar-brown .navbar-nav .nav-link.active {
    color: var(--navbar-text-hover);
}

.navbar-brown .navbar-toggler {
    border-color: var(--navbar-border);
}

/* Footer */
.my-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
}

.my-footer a {
    color: var(--footer-link);
}

.my-footer a:hover,
.my-footer a:focus {
    color: var(--footer-link-hover);
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
}

.card-header,
.card-footer {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Buttons */
.btn-brown {
    background-color: var(--btn-brown-bg);
    color: var(--btn-brown-text);
    border-color: var(--btn-brown-border);
}

.btn-brown:hover,
.btn-brown:focus {
    background-color: var(--btn-brown-hover-bg);
    color: var(--btn-brown-hover-text);
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--btn-brown-bg);
}

.form-control::placeholder {
    color: var(--input-placeholder);
}

/* Tables */
.table {
    color: var(--text-primary);
    border-color: var(--table-border);
}

.table > :not(caption) > * > * {
    background-color: var(--table-bg);
    border-bottom-color: var(--table-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-stripe-bg);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover-bg);
}

/* Badges */
.badge.bg-light {
    background-color: var(--badge-light-bg) !important;
    color: var(--badge-light-text) !important;
}

/* Modals */
.modal-content {
    background-color: var(--modal-bg);
    color: var(--text-primary);
}

.modal-header {
    background-color: var(--modal-header-bg);
    border-bottom-color: var(--border-color);
}

.modal-footer {
    border-top-color: var(--border-color);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--dropdown-link-hover);
    color: var(--text-primary);
}

/* Borders */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--border-color) !important;
}

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

.list-group-item:hover {
    background-color: var(--bg-secondary);
}

/* Alerts - maintain visibility in dark mode */
body.dark-mode .alert-primary {
    background-color: #1a4d7a;
    color: #b8daff;
    border-color: #194c77;
}

body.dark-mode .alert-success {
    background-color: #1e5631;
    color: #d4edda;
    border-color: #1c4f2e;
}

body.dark-mode .alert-warning {
    background-color: #7a5c1a;
    color: #fff3cd;
    border-color: #6e5318;
}

body.dark-mode .alert-danger {
    background-color: #721c24;
    color: #f8d7da;
    border-color: #6a1b23;
}

/* Theme Toggle Button */
.theme-toggle-wrapper {
    width: auto;
    margin-left: 1rem;
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background-color: transparent;
    border: 1px solid var(--navbar-border);
    border-radius: 0.375rem;
    color: var(--navbar-text);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

body.dark-mode .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle-icon {
    font-size: 1.3rem;
    transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-toggle-icon {
    transform: scale(1.1);
}

/* Toggle Switch Styling */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #ccc;
    border-radius: 24px;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

body.dark-mode .toggle-switch {
    background-color: #f9ca86;
}

.toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .toggle-slider {
    transform: translateX(20px);
    background-color: #4e342e;
}

/* Mobile - toggle button di dalam menu navbar */
@media (max-width: 991.98px) {
    /* Toggle button di dalam nav-item untuk mobile */
    .nav-item .theme-toggle {
        width: 100%;
        padding: 0.5rem 1rem;
        border: none;
        justify-content: flex-start;
        text-align: left;
    }
    
    .nav-item .theme-toggle .toggle-switch {
        margin-left: auto;
    }
    
    .theme-toggle-text {
        flex: 1;
    }
}

/* ── Additional Dark Mode Fixes ──────────────────────────────────── */

/* Text colors - ensure all text is readable in dark mode */
body.dark-mode {
    color: var(--text-primary);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-primary);
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode div,
body.dark-mode li,
body.dark-mode td,
body.dark-mode th {
    color: var(--text-primary);
}

body.dark-mode a {
    color: #6cb4ff;
}

body.dark-mode a:hover {
    color: #8fc7ff;
}

/* Article/News content */
body.dark-mode .article-content,
body.dark-mode .news-content,
body.dark-mode .content-area {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* Ensure all cards have proper dark background */
body.dark-mode .card-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* Text in cards */
body.dark-mode .card-text,
body.dark-mode .card-title {
    color: var(--text-primary);
}

/* Breadcrumbs */
body.dark-mode .breadcrumb {
    background-color: var(--bg-secondary);
}

body.dark-mode .breadcrumb-item,
body.dark-mode .breadcrumb-item a {
    color: var(--text-secondary);
}

body.dark-mode .breadcrumb-item.active {
    color: var(--text-primary);
}

/* Pagination */
body.dark-mode .pagination .page-link {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--btn-brown-bg);
    border-color: var(--btn-brown-border);
    color: var(--btn-brown-text);
}

body.dark-mode .pagination .page-link:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Labels and small text */
body.dark-mode label,
body.dark-mode .form-label {
    color: var(--text-primary);
}

body.dark-mode small,
body.dark-mode .small {
    color: var(--text-secondary);
}

/* Jumbotron / Hero sections */
body.dark-mode .jumbotron,
body.dark-mode .hero {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Blockquotes */
body.dark-mode blockquote {
    border-left-color: var(--border-color);
    color: var(--text-secondary);
}

/* Code blocks */
body.dark-mode code {
    background-color: var(--bg-secondary);
    color: #ff7b72;
}

body.dark-mode pre {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Nav tabs */
body.dark-mode .nav-tabs {
    border-bottom-color: var(--border-color);
}

body.dark-mode .nav-tabs .nav-link {
    color: var(--text-secondary);
}

body.dark-mode .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
    color: var(--text-primary);
}

/* Accordion */
body.dark-mode .accordion-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .accordion-button {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

body.dark-mode .accordion-button:not(.collapsed) {
    background-color: var(--btn-brown-bg);
    color: var(--btn-brown-text);
}

body.dark-mode .accordion-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* Progress bars */
body.dark-mode .progress {
    background-color: var(--bg-secondary);
}

/* Tooltips and popovers */
body.dark-mode .tooltip-inner {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body.dark-mode .popover {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .popover-body {
    color: var(--text-primary);
}

/* Spinners and loaders */
body.dark-mode .spinner-border,
body.dark-mode .spinner-grow {
    color: var(--text-primary);
}

/* Images - keep them visible */
body.dark-mode img {
    opacity: 1;
}

/* Text selection */
body.dark-mode ::selection {
    background-color: #3d5a80;
    color: #ffffff;
}

/* Disabled states */
body.dark-mode .disabled,
body.dark-mode :disabled {
    color: var(--text-muted);
    opacity: 0.6;
}

/* HR separator */
body.dark-mode hr {
    border-color: var(--border-color);
    opacity: 0.5;
}

/* Text colors for specific Bootstrap text utilities */
body.dark-mode .text-muted {
    color: var(--text-muted) !important;
}

body.dark-mode .text-body {
    color: var(--text-primary) !important;
}

body.dark-mode .text-dark {
    color: var(--text-primary) !important;
}

/* Background utilities */
body.dark-mode .bg-light {
    background-color: var(--bg-secondary) !important;
}

body.dark-mode .bg-white {
    background-color: var(--bg-primary) !important;
}

/* Ensure catalog items are readable */
body.dark-mode .catalog-item,
body.dark-mode .product-card {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

body.dark-mode .catalog-item:hover,
body.dark-mode .product-card:hover {
    background-color: var(--bg-secondary);
}

/* Price tags and badges */
body.dark-mode .price,
body.dark-mode .badge {
    color: inherit;
}

/* ── Comprehensive Template Coverage ──────────────────────────────── */

/* Ensure ALL containers have proper background */
body.dark-mode .container,
body.dark-mode .container-fluid,
body.dark-mode .row,
body.dark-mode section,
body.dark-mode article,
body.dark-mode main {
    color: var(--text-primary);
}

/* All text elements */
body.dark-mode strong,
body.dark-mode b,
body.dark-mode em,
body.dark-mode i,
body.dark-mode u,
body.dark-mode mark {
    color: inherit;
}

/* Definition lists */
body.dark-mode dl,
body.dark-mode dt,
body.dark-mode dd {
    color: var(--text-primary);
}

/* Address and contact info */
body.dark-mode address {
    color: var(--text-primary);
}

/* Figure and figcaption */
body.dark-mode figure,
body.dark-mode figcaption {
    color: var(--text-primary);
}

/* Time element */
body.dark-mode time {
    color: var(--text-secondary);
}

/* Summary/Details */
body.dark-mode details {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode summary {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

/* Well and panel components */
body.dark-mode .well,
body.dark-mode .panel {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .panel-heading {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

body.dark-mode .panel-body {
    background-color: var(--card-bg);
}

/* Media objects */
body.dark-mode .media,
body.dark-mode .media-body {
    color: var(--text-primary);
}

/* Thumbnail */
body.dark-mode .thumbnail {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Caption */
body.dark-mode .caption {
    color: var(--text-primary);
}

/* Text utilities override */
body.dark-mode .text-white {
    color: #ffffff !important;
}

body.dark-mode .text-black {
    color: var(--text-primary) !important;
}

/* Background utilities */
body.dark-mode .bg-primary,
body.dark-mode .bg-success,
body.dark-mode .bg-info,
body.dark-mode .bg-warning,
body.dark-mode .bg-danger {
    color: #ffffff !important;
}

body.dark-mode .bg-secondary {
    color: var(--text-primary) !important;
}

/* Offcanvas */
body.dark-mode .offcanvas {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

body.dark-mode .offcanvas-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

/* Toast notifications */
body.dark-mode .toast {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .toast-header {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

/* Carousel captions */
body.dark-mode .carousel-caption {
    background-color: rgba(0, 0, 0, 0.7);
}

body.dark-mode .carousel-caption h1,
body.dark-mode .carousel-caption h2,
body.dark-mode .carousel-caption h3,
body.dark-mode .carousel-caption h4,
body.dark-mode .carousel-caption h5,
body.dark-mode .carousel-caption h6,
body.dark-mode .carousel-caption p {
    color: #ffffff;
}

/* Input checkbox and radio labels */
body.dark-mode .form-check-label {
    color: var(--text-primary);
}

/* File input */
body.dark-mode .form-control[type="file"]::file-selector-button {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Switch toggle */
body.dark-mode .form-switch .form-check-input {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .form-switch .form-check-input:checked {
    background-color: var(--btn-brown-bg);
}

/* Validation feedback */
body.dark-mode .was-validated .form-control:valid,
body.dark-mode .form-control.is-valid {
    border-color: #198754;
    background-color: var(--input-bg);
    color: var(--input-text);
}

body.dark-mode .was-validated .form-control:invalid,
body.dark-mode .form-control.is-invalid {
    border-color: #dc3545;
    background-color: var(--input-bg);
    color: var(--input-text);
}

/* Close button */
body.dark-mode .btn-close {
    filter: invert(1);
}

/* Textarea */
body.dark-mode textarea.form-control {
    background-color: var(--input-bg);
    color: var(--input-text);
}

/* Legend in fieldset */
body.dark-mode legend {
    color: var(--text-primary);
}

body.dark-mode fieldset {
    border-color: var(--border-color);
}

/* Kbd (keyboard) */
body.dark-mode kbd {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Ensure all Bootstrap button variants are visible */
body.dark-mode .btn-light {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .btn-light:hover {
    background-color: var(--bg-tertiary);
}

body.dark-mode .btn-dark {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Prevent white backgrounds from leaking through */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background-color: #fff"] {
    background-color: var(--card-bg) !important;
}

body.dark-mode [style*="color: black"],
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color:#000"],
body.dark-mode [style*="color: #000000"],
body.dark-mode [style*="color:#000000"],
body.dark-mode [style*="color: rgb(0, 0, 0)"],
body.dark-mode [style*="color:rgb(0, 0, 0)"],
body.dark-mode [style*="color: rgba(0, 0, 0"],
body.dark-mode [style*="color:rgba(0, 0, 0"],
body.dark-mode [style*="color: #212529"],
body.dark-mode [style*="color:#212529"] {
    color: var(--text-primary) !important;
}

/* TinyMCE editor if used */
body.dark-mode .mce-content-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* SweetAlert2 if used */
body.dark-mode .swal2-popup {
    background-color: var(--modal-bg);
    color: var(--text-primary);
}

body.dark-mode .swal2-title,
body.dark-mode .swal2-html-container {
    color: var(--text-primary);
}

/* Ensure all custom content classes are styled */
body.dark-mode [class*="content"],
body.dark-mode [class*="article"],
body.dark-mode [class*="news"],
body.dark-mode [class*="post"],
body.dark-mode [class*="blog"] {
    color: var(--text-primary);
}

/* ── AGGRESSIVE WHITE BACKGROUND OVERRIDES ────────────────────────── */
/* Force ALL white/light backgrounds to dark */

body.dark-mode,
body.dark-mode * {
    background-color: inherit;
}

/* Override inline styles and specific white backgrounds */
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background-color:white"],
body.dark-mode [style*="background-color:#fff"],
body.dark-mode [style*="background-color:#ffffff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background:#ffffff"] {
    background-color: var(--card-bg) !important;
    background: var(--card-bg) !important;
}

/* Force all potentially white elements */
body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .bg-transparent {
    background-color: var(--bg-primary) !important;
}

/* Sections and containers */
body.dark-mode section,
body.dark-mode article,
body.dark-mode main,
body.dark-mode aside,
body.dark-mode .container,
body.dark-mode .container-fluid {
    background-color: transparent !important;
}

/* All divs without specific background classes */
body.dark-mode div:not([class*="bg-"]):not(.card):not(.modal):not(.dropdown):not(.navbar) {
    background-color: transparent;
}

/* Specific elements that often have white backgrounds */
body.dark-mode .row,
body.dark-mode .col,
body.dark-mode [class*="col-"] {
    background-color: transparent !important;
}

/* Ensure colored backgrounds keep their color - these maintain Bootstrap's default colors */

/* Make sure text is visible everywhere */
body.dark-mode,
body.dark-mode * {
    border-color: var(--border-color);
}

/* Override any remaining light backgrounds */
body.dark-mode .wrapper,
body.dark-mode .content,
body.dark-mode .page,
body.dark-mode .section {
    background-color: var(--bg-tertiary) !important;
}

/* ── ULTIMATE DARK MODE ENFORCER ──────────────────────────────────── */
/* This ensures EVERY element gets proper dark styling */

/* Main body MUST be dark */
body.dark-mode {
    background-color: var(--bg-tertiary) !important;
}

/* Every direct child of body */
body.dark-mode > * {
    background-color: transparent;
}

/* All major layout containers */
body.dark-mode nav:not(.navbar-brown),
body.dark-mode header,
body.dark-mode footer:not(.my-footer),
body.dark-mode main,
body.dark-mode section:not([class*="bg-"]),
body.dark-mode article:not([class*="bg-"]) {
    background-color: transparent !important;
}

/* Card backgrounds - FORCE dark */
body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .card-footer {
    background-color: var(--card-bg) !important;
}

body.dark-mode .card-header {
    background-color: var(--bg-secondary) !important;
}

/* Any element with white/light background class */
body.dark-mode [class*="white"],
body.dark-mode [class*="light"] {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Prevent Bootstrap's default whites */
body.dark-mode .bg-body {
    background-color: var(--bg-tertiary) !important;
}

body.dark-mode .text-bg-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Ensure all wrappers are transparent or dark */
body.dark-mode [class*="wrapper"],
body.dark-mode [class*="container"] {
    background-color: transparent !important;
}

/* All panels and boxes */
body.dark-mode [class*="panel"],
body.dark-mode [class*="box"] {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Tables absolutely MUST be dark */
body.dark-mode table,
body.dark-mode table thead,
body.dark-mode table tbody,
body.dark-mode table tfoot {
    background-color: transparent !important;
}

body.dark-mode table tr {
    background-color: var(--table-bg) !important;
}

body.dark-mode table th,
body.dark-mode table td {
    background-color: inherit !important;
    color: var(--text-primary) !important;
}

/* Forms - ALL inputs must be dark */
body.dark-mode input:not([type="checkbox"]):not([type="radio"]),
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

/* Content areas */
body.dark-mode [class*="content"],
body.dark-mode [class*="body"] {
    background-color: transparent;
    color: var(--text-primary) !important;
}

/* ALL text elements MUST be light - PAKSA SEMUA TEKS JADI PUTIH */
body.dark-mode * {
    color: var(--text-primary) !important;
}

/* Headings explicitly - PAKSA */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: var(--text-primary) !important;
}

/* Paragraphs and text - PAKSA */
body.dark-mode p, body.dark-mode span, body.dark-mode div,
body.dark-mode li {
    color: var(--text-primary) !important;
}

/* Links yang bukan button */
body.dark-mode a {
    color: var(--text-primary) !important;
}

/* Override untuk link di navbar dan button - biarkan sesuai design */
body.dark-mode .nav-link,
body.dark-mode .navbar a,
body.dark-mode .btn,
body.dark-mode .dropdown-item {
    color: var(--navbar-text) !important;
}

body.dark-mode .btn-primary,
body.dark-mode .btn-success,
body.dark-mode .btn-danger,
body.dark-mode .btn-warning,
body.dark-mode .btn-info {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FIX: Remove black shadows on carousel text and navigation
   ═══════════════════════════════════════════════════════════════════ */

/* HILANGKAN SEMUA background hitam pada carousel-caption dan semua elemen di dalamnya */
body.dark-mode .carousel-caption,
body.dark-mode .carousel-caption *,
body.dark-mode .carousel-inner .carousel-caption,
body.dark-mode .carousel-inner .carousel-caption * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* HILANGKAN text-shadow hitam dan BUAT TULISAN PUTIH pada carousel */
body.dark-mode .carousel-caption,
body.dark-mode .carousel-caption h1,
body.dark-mode .carousel-caption h2,
body.dark-mode .carousel-caption h3,
body.dark-mode .carousel-caption h4,
body.dark-mode .carousel-caption h5,
body.dark-mode .carousel-caption h6,
body.dark-mode .carousel-caption p,
body.dark-mode .carousel-caption div,
body.dark-mode .carousel-caption span,
body.dark-mode .carousel-caption a,
body.dark-mode .carousel-caption strong,
body.dark-mode .carousel-caption em {
    text-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important; /* PUTIH untuk semua teks carousel */
}

/* Khusus untuk teks besar/judul utama carousel - pastikan PUTIH */
body.dark-mode .carousel-caption h1,
body.dark-mode .carousel-caption h2 {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* PAKSA semua teks di dalam carousel menjadi PUTIH - termasuk konten dinamis dari admin */
/* Tapi jangan sentuh tombol navigasi dan icon-nya */
body.dark-mode .carousel-caption,
body.dark-mode .carousel-caption *,
body.dark-mode .carousel-indicators {
    color: #ffffff !important;
}

/* Paksa background transparent untuk semua elemen di carousel KECUALI tombol navigasi dan icon */
body.dark-mode .carousel,
body.dark-mode .carousel-inner,
body.dark-mode .carousel-item {
    background-color: transparent !important;
}

/* Background transparent untuk konten carousel tapi jangan sentuh navigation controls dan icons */
body.dark-mode .carousel-caption,
body.dark-mode .carousel-caption * {
    background-color: transparent !important;
    background-image: none !important;
}

/* Tombol navigasi carousel - tanpa background, hanya icon */
body.dark-mode #main-carousel .carousel-control-prev,
body.dark-mode #main-carousel .carousel-control-next,
body.dark-mode .carousel .carousel-control-prev,
body.dark-mode .carousel .carousel-control-next {
    background-color: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
}

body.dark-mode #main-carousel .carousel-control-prev:hover,
body.dark-mode #main-carousel .carousel-control-next:hover,
body.dark-mode .carousel .carousel-control-prev:hover,
body.dark-mode .carousel .carousel-control-next:hover {
    background-color: transparent !important;
    opacity: 1 !important;
}

/* Icon navigasi carousel - putih terang dengan shadow kuat agar sangat terlihat */
body.dark-mode #main-carousel .carousel-control-prev-icon,
body.dark-mode #main-carousel .carousel-control-next-icon,
body.dark-mode .carousel .carousel-control-prev-icon,
body.dark-mode .carousel .carousel-control-next-icon {
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 4px rgba(255, 255, 255, 1)) !important;
    width: 3rem !important;
    height: 3rem !important;
}

body.dark-mode #main-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
body.dark-mode #main-carousel .carousel-control-next:hover .carousel-control-next-icon,
body.dark-mode .carousel .carousel-control-prev:hover .carousel-control-prev-icon,
body.dark-mode .carousel .carousel-control-next:hover .carousel-control-next-icon {
    filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(255, 255, 255, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, 1)) !important;
    transform: scale(1.15);
    transition: all 0.2s ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════════
   SUPER FORCE: Paksa SEMUA teks menjadi putih di dark mode
   Aturan ini HARUS di paling akhir untuk override semua CSS lainnya
   ═══════════════════════════════════════════════════════════════════ */

/* PAKSA SEMUA ELEMEN TEXT menjadi PUTIH - Final Override */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode div,
body.dark-mode li,
body.dark-mode td,
body.dark-mode th,
body.dark-mode label,
body.dark-mode strong,
body.dark-mode em,
body.dark-mode i,
body.dark-mode b {
    color: #e9ecef !important;
}

/* PAKSA semua container/section utama */
body.dark-mode main,
body.dark-mode section,
body.dark-mode article,
body.dark-mode .container,
body.dark-mode .content {
    color: #e9ecef !important;
}

/* PAKSA khusus untuk konten dinamis yang mungkin dari CMS/Admin */
body.dark-mode [class*="content"],
body.dark-mode [class*="text"],
body.dark-mode [class*="description"],
body.dark-mode [class*="title"],
body.dark-mode [class*="heading"] {
    color: #e9ecef !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HILANGKAN BACKGROUND GRADIENT PADA HEADER (Dashboard, dll)
   ═══════════════════════════════════════════════════════════════════ */

/* Hilangkan background gradient pada reservations-header */
body.dark-mode .reservations-header,
body.dark-mode .page-header,
body.dark-mode [class*="header"] h1,
body.dark-mode [class*="header"] {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Pastikan teks di header tetap putih dan jelas */
body.dark-mode .reservations-header h1,
body.dark-mode .page-header h1,
body.dark-mode [class*="header"] h1 {
    color: #e9ecef !important;
    text-shadow: none !important;
}

/* Hilangkan SEMUA background gradient yang menggunakan inline style 
   (untuk header seperti: Office Boy Report, Dashboard, dll) */
body.dark-mode div[style*="background: linear-gradient"],
body.dark-mode div[style*="background:linear-gradient"] {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Pastikan semua h1 dan p di dalam div dengan inline style tetap putih */
body.dark-mode div[style*="background"] h1,
body.dark-mode div[style*="background"] p,
body.dark-mode div[style*="background"] span {
    color: #e9ecef !important;
    text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   EXCEPTION: Override SUPER FORCE untuk elemen tertentu
   ═══════════════════════════════════════════════════════════════════ */

/* CAROUSEL CAPTION - Teks harus PUTIH TERANG dan KONTRAS di dark mode */
body.dark-mode #main-carousel .carousel-caption h1,
body.dark-mode #main-carousel .carousel-caption h2,
body.dark-mode #main-carousel .carousel-caption h3,
body.dark-mode #main-carousel .carousel-caption h4,
body.dark-mode #main-carousel .carousel-caption h5,
body.dark-mode #main-carousel .carousel-caption h6,
body.dark-mode #main-carousel .carousel-caption p,
body.dark-mode #main-carousel .carousel-caption span,
body.dark-mode #main-carousel .carousel-caption div,
body.dark-mode .carousel-caption h1,
body.dark-mode .carousel-caption h2,
body.dark-mode .carousel-caption h3,
body.dark-mode .carousel-caption h4,
body.dark-mode .carousel-caption h5,
body.dark-mode .carousel-caption h6,
body.dark-mode .carousel-caption p,
body.dark-mode .carousel-caption span,
body.dark-mode .carousel-caption div {
    color: #ffffff !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9) !important;
}

/* BLOCKQUOTE - Background gelap sedikit lebih cerah, teks putih untuk serasi */
body.dark-mode blockquote,
body.dark-mode blockquote p,
body.dark-mode blockquote span,
body.dark-mode .blockquote,
body.dark-mode .blockquote p {
    color: #e9ecef !important;
    background-color: #3a3a3a !important;
    border-left: 4px solid #f9ca86 !important;
    padding: 1rem 1.5rem !important;
}

/* TinyMCE content blockquote */
body.dark-mode .static-page-content blockquote,
body.dark-mode .static-page-content blockquote p,
body.dark-mode .article-content blockquote,
body.dark-mode .article-content blockquote p {
    color: #e9ecef !important;
    background-color: #3a3a3a !important;
}