/* =====================================================
   DARK THEME — R10.NET Dark Colour Palette
   Applied via: html[data-theme="dark"]
   Default (light) variables are defined in :root.
   ===================================================== */

/* ── Light theme defaults ─────────────────────────── */
:root {
    --bg-primary:     #f6f6f6;
    --bg-secondary:   #ffffff;
    --bg-hover:       #f3f4f6;
    --bg-navbar:      #ffffff;
    --border-color:   #e5e7eb;
    --accent-primary: #1E88E5;
    --accent-success: #48BB78;
    --accent-warning: #f59e0b;
    --text-primary:   #111827;
    --text-secondary: #6b7280;
    --text-muted:     #9ca3af;
    --table-header:   #f9fafb;
    --bg-input:       #e8e8e8;
    --bg-icon:        #f6f6f6;
    --scrollbar-track:#f1f1f1;
    --scrollbar-thumb:#1E88E5;
    --preloader-bg:   #ffffff;
    --shadow-color:   rgba(0,0,0,0.1);
}

/* ── Dark theme overrides ─────────────────────────── */
[data-theme="dark"] {
    --bg-primary:     #383B50;
    --bg-secondary:   #333549;
    --bg-hover:       #38A9FF;
    --bg-navbar:      #323448;
    --border-color:   #393C51;
    --accent-primary: #4a9eff;
    --accent-success: #3dd68c;
    --accent-warning: #f0b429;
    --text-primary:   #e8eaf0;
    --text-secondary: #8b91a0;
    --text-muted:     #555d6e;
    --table-header:   #1e2128;
    --bg-input:       #3a3d52;
    --bg-icon:        #3a3d52;
    --scrollbar-track:#2a2d3e;
    --scrollbar-thumb:#4a9eff;
    --preloader-bg:   #383B50;
    --shadow-color:   rgba(0,0,0,0.4);
}

/* ── System dark mode (prefers-color-scheme) ─────── */
@media (prefers-color-scheme: dark) {
    :root[data-theme="dark"] {
        --bg-primary:     #383B50;
        --bg-secondary:   #333549;
        --bg-hover:       #38A9FF;
        --bg-navbar:      #323448;
        --border-color:   #393C51;
        --accent-primary: #4a9eff;
        --accent-success: #3dd68c;
        --accent-warning: #f0b429;
        --text-primary:   #e8eaf0;
        --text-secondary: #8b91a0;
        --text-muted:     #555d6e;
        --table-header:   #1e2128;
        --bg-input:       #3a3d52;
        --bg-icon:        #3a3d52;
        --scrollbar-track:#2a2d3e;
        --scrollbar-thumb:#4a9eff;
        --preloader-bg:   #383B50;
        --shadow-color:   rgba(0,0,0,0.4);
    }
}

/* =====================================================
   SCROLLBAR
   ===================================================== */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

/* =====================================================
   GLOBAL BODY & HTML
   ===================================================== */
[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* =====================================================
   PRELOADER
   ===================================================== */
[data-theme="dark"] #preloader {
    background-color: var(--preloader-bg) !important;
}

/* =====================================================
   HEADER & NAVBAR
   ===================================================== */
[data-theme="dark"] header {
    background-color: var(--bg-navbar) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Top bar */
[data-theme="dark"] header .bg-gray-100 {
    background-color: #2c2f42 !important;
}

/* Main header area */
[data-theme="dark"] header .bg-white {
    background-color: var(--bg-navbar) !important;
}

/* Nav links */
[data-theme="dark"] header nav a,
[data-theme="dark"] header .text-gray-600 {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] header nav a:hover {
    color: var(--accent-primary) !important;
}

/* Icon buttons (favourites, ticket, notifications, profile) */
[data-theme="dark"] header a[style*="background: #f6f6f6"],
[data-theme="dark"] header button[style*="background: #f6f6f6"],
[data-theme="dark"] header a[class*="text-black"],
[data-theme="dark"] header button[class*="text-black"] {
    background: var(--bg-icon) !important;
    color: var(--text-primary) !important;
}

/* Balance area */
[data-theme="dark"] header div[style*="background-color: #e6f3ff"] {
    background-color: var(--bg-secondary) !important;
    color: var(--accent-primary) !important;
}

/* Guest buttons */
[data-theme="dark"] header a[style*="background-color: #fdd5cc"] {
    background-color: #4a1f1c !important;
    color: #ff8a80 !important;
}
[data-theme="dark"] header a.bg-gray-200 {
    background-color: var(--bg-icon) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] header a.hover\:bg-gray-300:hover {
    background-color: #4a4e6a !important;
}

/* Amount text in header */
[data-theme="dark"] header .text-gray-800 {
    color: var(--text-primary) !important;
}

/* Mobile menu button */
[data-theme="dark"] #mobile-header-menu {
    color: var(--text-secondary) !important;
}

/* Search inputs */
[data-theme="dark"] input[type="text"][style*="background-color: #e8e8e8"],
[data-theme="dark"] .search-input {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .search-input::placeholder {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .search-button {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .search-button:hover {
    color: var(--accent-primary) !important;
}

/* =====================================================
   CATALOG DROPDOWN
   ===================================================== */
[data-theme="dark"] #catalog-dropdown {
    background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] #catalog-dropdown .bg-white {
    background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] #catalog-dropdown .bg-gray-50 {
    background-color: var(--bg-primary) !important;
}
[data-theme="dark"] #catalog-dropdown .border-r,
[data-theme="dark"] #catalog-dropdown .border-b,
[data-theme="dark"] #catalog-dropdown .border-gray-200,
[data-theme="dark"] #catalog-dropdown .border-gray-100 {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #catalog-dropdown .text-gray-800,
[data-theme="dark"] #catalog-dropdown h3,
[data-theme="dark"] #catalog-dropdown h4,
[data-theme="dark"] #catalog-dropdown h5 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] #catalog-dropdown .text-gray-600 {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] #catalog-dropdown .text-gray-400 {
    color: var(--text-muted) !important;
}
[data-theme="dark"] #catalog-dropdown .bg-gray-100 {
    background-color: var(--bg-icon) !important;
}
[data-theme="dark"] #catalog-dropdown .text-gray-600.hover\:bg-gray-200:hover,
[data-theme="dark"] #catalog-dropdown span.alphabet-btn:not(.bg-red-500):hover {
    background-color: var(--bg-hover) !important;
    color: #fff !important;
}
[data-theme="dark"] #catalog-dropdown span.alphabet-btn:not(.bg-red-500) {
    background-color: var(--bg-icon) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] #catalog-dropdown .hover\:bg-gray-50:hover {
    background-color: var(--bg-hover) !important;
}
/* Sticky letter headings in content area */
[data-theme="dark"] #content-area h4,
[data-theme="dark"] #mobile-content-area h4 {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #content-area a,
[data-theme="dark"] #mobile-content-area a {
    color: var(--text-primary) !important;
}
[data-theme="dark"] #content-area a:hover,
[data-theme="dark"] #mobile-content-area a:hover {
    background-color: rgba(56, 169, 255, 0.15) !important;
}
[data-theme="dark"] #content-area h5,
[data-theme="dark"] #mobile-content-area h5 {
    color: var(--text-primary) !important;
}

/* Mobile catalog */
[data-theme="dark"] #mobile-catalog-dropdown {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #mobile-catalog-dropdown .border-b {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #mobile-catalog-dropdown .text-gray-800 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] #mobile-catalog-dropdown .bg-gray-200 {
    background-color: var(--bg-icon) !important;
    color: var(--text-secondary) !important;
}

/* =====================================================
   NOTIFICATION DROPDOWN
   ===================================================== */
[data-theme="dark"] #notification-dropdown {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 30px var(--shadow-color) !important;
}
[data-theme="dark"] #notification-dropdown .border-b {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #notification-dropdown .text-gray-800 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] #notification-dropdown .text-gray-500 {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] #notification-dropdown .text-gray-400 {
    color: var(--text-muted) !important;
}
[data-theme="dark"] #notification-dropdown .text-gray-300 {
    color: var(--text-muted) !important;
}
[data-theme="dark"] #notification-dropdown .border-gray-50 {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #notification-dropdown .hover\:bg-gray-50:hover {
    background-color: rgba(56, 169, 255, 0.1) !important;
}

/* Mobile notifications panel */
[data-theme="dark"] #mobile-notification-dropdown {
    background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] #mobile-notification-dropdown .bg-white {
    background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] #mobile-notification-dropdown .border-b {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #mobile-notification-dropdown .text-gray-800 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] #mobile-notification-dropdown .text-gray-500 {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] #mobile-notification-dropdown .text-gray-400 {
    color: var(--text-muted) !important;
}
[data-theme="dark"] #mobile-notification-dropdown .text-gray-300 {
    color: var(--text-muted) !important;
}
[data-theme="dark"] #mobile-notification-dropdown .border-gray-100 {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #mobile-notification-dropdown .text-gray-500 {
    color: var(--text-secondary) !important;
}

/* =====================================================
   MOBILE NAV MENU
   ===================================================== */
[data-theme="dark"] #mobile-nav-menu {
    background-color: var(--bg-navbar) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #mobile-nav-menu a {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] #mobile-nav-menu a:hover {
    color: var(--accent-primary) !important;
}

/* =====================================================
   ALERT TOASTS
   ===================================================== */
[data-theme="dark"] .alert-toast--success {
    background: #1a3d2b !important;
    border-color: #2d6a4a !important;
    color: var(--accent-success) !important;
}
[data-theme="dark"] .alert-toast--error {
    background: #3d1a1a !important;
    border-color: #6a2d2d !important;
    color: #ff8a80 !important;
}
[data-theme="dark"] .alert-toast--info {
    background: #1a2d3d !important;
    border-color: #2d4a6a !important;
    color: var(--accent-primary) !important;
}

/* =====================================================
   MAIN CONTENT AREA (general overrides for child views)
   ===================================================== */
/* White backgrounds → secondary bg */
[data-theme="dark"] main .bg-white {
    background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] main .bg-gray-50 {
    background-color: var(--bg-primary) !important;
}
[data-theme="dark"] main .bg-gray-100 {
    background-color: #2c2f42 !important;
}
[data-theme="dark"] main .bg-gray-200 {
    background-color: var(--bg-icon) !important;
}

/* Text colours */
[data-theme="dark"] main .text-gray-900,
[data-theme="dark"] main .text-gray-800 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] main .text-gray-700,
[data-theme="dark"] main .text-gray-600 {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] main .text-gray-500,
[data-theme="dark"] main .text-gray-400,
[data-theme="dark"] main .text-gray-300 {
    color: var(--text-muted) !important;
}

/* Borders */
[data-theme="dark"] main .border-gray-200,
[data-theme="dark"] main .border-gray-100,
[data-theme="dark"] main .border-gray-300 {
    border-color: var(--border-color) !important;
}

/* Links */
[data-theme="dark"] main a:not([class*="bg-"]):not([class*="text-white"]):not([class*="text-red"]):not([class*="text-blue"]) {
    color: var(--accent-primary);
}

/* Hover states */
[data-theme="dark"] main .hover\:bg-gray-50:hover {
    background-color: rgba(56, 169, 255, 0.1) !important;
}
[data-theme="dark"] main .hover\:bg-gray-100:hover {
    background-color: rgba(56, 169, 255, 0.1) !important;
}
[data-theme="dark"] main .hover\:bg-gray-200:hover {
    background-color: rgba(56, 169, 255, 0.12) !important;
}

/* Inputs */
[data-theme="dark"] main input[type="text"],
[data-theme="dark"] main input[type="number"],
[data-theme="dark"] main input[type="email"],
[data-theme="dark"] main input[type="password"],
[data-theme="dark"] main textarea,
[data-theme="dark"] main select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] main input::placeholder,
[data-theme="dark"] main textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}
[data-theme="dark"] main input:focus,
[data-theme="dark"] main textarea:focus,
[data-theme="dark"] main select:focus {
    border-color: var(--accent-primary) !important;
    outline-color: var(--accent-primary) !important;
}

/* Cards */
[data-theme="dark"] main .rounded-xl.bg-white,
[data-theme="dark"] main .rounded-lg.bg-white,
[data-theme="dark"] main .rounded-2xl.bg-white,
[data-theme="dark"] main .card {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Tables */
[data-theme="dark"] main table {
    background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] main thead,
[data-theme="dark"] main th {
    background-color: var(--table-header) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] main td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] main tr:hover td {
    background-color: rgba(56, 169, 255, 0.07) !important;
}
[data-theme="dark"] main .divide-gray-200 > * + * {
    border-color: var(--border-color) !important;
}

/* Badges / pills */
[data-theme="dark"] main .bg-gray-100.text-gray-800 {
    background-color: var(--bg-icon) !important;
    color: var(--text-secondary) !important;
}

/* Gray buttons (non-branded) */
[data-theme="dark"] main button.bg-gray-200,
[data-theme="dark"] main a.bg-gray-200 {
    background-color: var(--bg-icon) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] main button.bg-gray-200:hover,
[data-theme="dark"] main a.bg-gray-200:hover {
    background-color: var(--bg-hover) !important;
    color: #fff !important;
}

/* =====================================================
   FOOTER
   ===================================================== */
[data-theme="dark"] footer {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] footer .border-t {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] footer .text-gray-800 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] footer .text-gray-600 {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] footer .text-gray-400 {
    color: var(--text-muted) !important;
}
[data-theme="dark"] footer .hover\:text-blue-500:hover { color: var(--accent-primary) !important; }
[data-theme="dark"] footer .hover\:text-red-500:hover  { color: #ff5252 !important; }
[data-theme="dark"] footer a { color: var(--text-secondary) !important; }
[data-theme="dark"] footer a:hover { color: var(--accent-primary) !important; }

/* =====================================================
   TOP-UP MODAL (Bakiye Yükle)
   ===================================================== */
[data-theme="dark"] #topup-modal > .absolute {
    background: rgba(0,0,0,0.7);
}

/* Right panel (payment details) */
[data-theme="dark"] #topup-modal .bg-white {
    background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] #topup-modal .text-gray-800 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] #topup-modal .text-gray-700,
[data-theme="dark"] #topup-modal .text-gray-600 {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] #topup-modal .text-gray-500,
[data-theme="dark"] #topup-modal .text-gray-400 {
    color: var(--text-muted) !important;
}
[data-theme="dark"] #topup-modal .border-gray-200,
[data-theme="dark"] #topup-modal .border-gray-300 {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #topup-modal input[type="number"] {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #topup-modal input[type="number"]::placeholder {
    color: var(--text-muted) !important;
}
[data-theme="dark"] #topup-modal .border-t {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #topup-modal .text-gray-300 {
    color: var(--text-muted) !important;
}

/* ── Shopier form inner elements ── */
[data-theme="dark"] .payment-info {
    background: #2a2d3e !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .payment-info p {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .payment-info b,
[data-theme="dark"] .payment-info b.copy-email {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .amount-item {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .amount-item:hover {
    border-color: var(--accent-primary) !important;
}
[data-theme="dark"] .amount-text {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .qty-control {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .qty-btn {
    background: var(--bg-icon) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .qty-btn:hover {
    background: var(--bg-hover) !important;
    color: #fff !important;
}
[data-theme="dark"] .qty-input {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .link-button {
    background: var(--bg-icon) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .link-button:hover {
    background: var(--bg-hover) !important;
    color: #fff !important;
}
[data-theme="dark"] .selection-summary {
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Warning overlay */
[data-theme="dark"] .warning-overlay {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .warning-overlay h3 {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .warning-overlay ul li {
    background: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .warning-overlay ul li b {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .copy-email-box {
    background: var(--bg-icon) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .copy-email-box span {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .confirm-btn {
    background: var(--accent-primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .confirm-btn:hover {
    background: #357abd !important;
}
[data-theme="dark"] .copy-email-btn {
    background: var(--accent-primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .copy-email-btn:hover {
    background: #357abd !important;
}
[data-theme="dark"] .copy-email-btn.copied {
    background: var(--accent-success) !important;
}

/* Checkbox area */
[data-theme="dark"] .checkbox-warning {
    background: #3a2e10 !important;
    border-color: var(--accent-warning) !important;
    color: var(--accent-warning) !important;
}
[data-theme="dark"] .checkbox-label {
    background: var(--bg-icon) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .checkbox-label:hover {
    border-color: var(--accent-primary) !important;
    background: var(--bg-secondary) !important;
}
[data-theme="dark"] .checkbox-custom {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .checkbox-text {
    color: var(--text-secondary) !important;
}

/* =====================================================
   SCROLL TO TOP BUTTON
   ===================================================== */
[data-theme="dark"] #scroll-top {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] #scroll-top:hover {
    background-color: var(--accent-primary) !important;
    color: #fff !important;
}

/* =====================================================
   THEME TOGGLE BUTTON
   ===================================================== */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    background: var(--bg-icon);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-size: 1rem;
    flex-shrink: 0;
}
.theme-toggle-btn:hover {
    background: var(--accent-primary) !important;
    color: #fff !important;
    border-color: var(--accent-primary) !important;
}
.theme-toggle-btn:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* =====================================================
   FOCUS RING — global override for dark
   ===================================================== */
[data-theme="dark"] button:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] a:focus {
    outline-color: var(--accent-primary) !important;
}

/* =====================================================
   QUANTITY BUTTONS & FORM CONTROLS
   ===================================================== */
[data-theme="dark"] .quantity-btn {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .quantity-btn:hover {
    background: rgba(56, 169, 255, 0.2) !important;
    border-color: var(--accent-primary) !important;
}
[data-theme="dark"] .quantity-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
[data-theme="dark"] #quantity {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #quantity:focus {
    border-color: var(--accent-primary) !important;
    outline-color: var(--accent-primary) !important;
}

/* =====================================================
   CATEGORY NAVIGATION (Hardcoded #ededed)
   ===================================================== */
[data-theme="dark"] a[style*="background-color: #ededed"],
[data-theme="dark"] a[style*="background:#ededed"],
[data-theme="dark"] a[style*="background: #ededed"],
[data-theme="dark"] [style*="background-color: #ededed"],
[data-theme="dark"] [style*="background:#ededed"],
[data-theme="dark"] [style*="background: #ededed"] {
    background-color: var(--bg-icon) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] a[style*="background-color: #ededed"]:hover,
[data-theme="dark"] a[style*="background:#ededed"]:hover,
[data-theme="dark"] a[style*="background: #ededed"]:hover {
    background-color: var(--bg-hover) !important;
    color: #fff !important;
}

/* =====================================================
   HERO SECTION LOADING PLACEHOLDER
   ===================================================== */
[data-theme="dark"] #mobile-hero-placeholder {
    background: linear-gradient(90deg, #383B50 25%, #3a3d52 50%, #383B50 75%) !important;
}

/* =====================================================
   MISC UTILITY OVERRIDES IN DARK MODE
   ===================================================== */
/* Shadow utilities */
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl,
[data-theme="dark"] .shadow-md {
    box-shadow: 0 4px 20px var(--shadow-color) !important;
}

/* Gray scale background overrides */
[data-theme="dark"] .bg-gray-50  { background-color: var(--bg-primary)   !important; }
[data-theme="dark"] .bg-gray-100 { background-color: #2c2f42             !important; }
[data-theme="dark"] .bg-gray-200 { background-color: var(--bg-icon)      !important; }
[data-theme="dark"] .bg-gray-800 { background-color: #1e2128             !important; }
[data-theme="dark"] .bg-gray-900 { background-color: #16181f             !important; }
[data-theme="dark"] .bg-white    { background-color: var(--bg-secondary)  !important; }

/* Gray scale text overrides */
[data-theme="dark"] .text-gray-900 { color: var(--text-primary)   !important; }
[data-theme="dark"] .text-gray-800 { color: var(--text-primary)   !important; }
[data-theme="dark"] .text-gray-700 { color: var(--text-secondary)  !important; }
[data-theme="dark"] .text-gray-600 { color: var(--text-secondary)  !important; }
[data-theme="dark"] .text-gray-500 { color: var(--text-muted)      !important; }
[data-theme="dark"] .text-gray-400 { color: var(--text-muted)      !important; }
[data-theme="dark"] .text-gray-300 { color: var(--text-muted)      !important; }
[data-theme="dark"] .text-black    { color: var(--text-primary)   !important; }

/* Border overrides */
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
    border-color: var(--border-color) !important;
}

/* Hover overrides */
[data-theme="dark"] .hover\:bg-gray-50:hover  { background-color: rgba(56,169,255,0.08) !important; }
[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: rgba(56,169,255,0.10) !important; }
[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: rgba(56,169,255,0.12) !important; }
[data-theme="dark"] .hover\:bg-gray-300:hover { background-color: rgba(56,169,255,0.15) !important; }

/* Divide */
[data-theme="dark"] .divide-gray-100 > * + *,
[data-theme="dark"] .divide-gray-200 > * + *,
[data-theme="dark"] .divide-gray-300 > * + * {
    border-color: var(--border-color) !important;
}

/* Ring / outline */
[data-theme="dark"] .ring-gray-200 { --tw-ring-color: var(--border-color) !important; }

/* Inline style overrides for hardcoded bg "#f6f6f6" */
[data-theme="dark"] [style*="background-color: #f6f6f6"],
[data-theme="dark"] [style*="background:#f6f6f6"],
[data-theme="dark"] [style*="background: #f6f6f6"] {
    background-color: var(--bg-primary) !important;
}
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"] {
    background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] [style*="background-color: #e8e8e8"],
[data-theme="dark"] [style*="background:#e8e8e8"],
[data-theme="dark"] [style*="background: #e8e8e8"] {
    background-color: var(--bg-input) !important;
}

/* Inline color text overrides */
[data-theme="dark"] [style*="color: #333333"],
[data-theme="dark"] [style*="color:#333333"] {
    color: var(--text-primary) !important;
}
[data-theme="dark"] [style*="color: #111"],
[data-theme="dark"] [style*="color:#111"] {
    color: var(--text-primary) !important;
}
[data-theme="dark"] [style*="color: #555"],
[data-theme="dark"] [style*="color:#555"] {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#666"] {
    color: var(--text-muted) !important;
}
[data-theme="dark"] [style*="color: #444"],
[data-theme="dark"] [style*="color:#444"] {
    color: var(--text-secondary) !important;
}

/* Inline border-color overrides */
[data-theme="dark"] [style*="border-color: #e5e7eb"],
[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
[data-theme="dark"] [style*="border-color: #e8e8e8"] {
    border-color: var(--border-color) !important;
}

/* =====================================================
   LOGIN & REGISTER PAGES (auth)
   ===================================================== */
[data-theme="dark"] .text-gray-600 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-gray-700 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-gray-500 { color: var(--text-muted) !important; }
[data-theme="dark"] .text-gray-400 { color: var(--text-muted) !important; }

/* Labels */
[data-theme="dark"] label {
    color: var(--text-primary) !important;
}

/* Form containers */
[data-theme="dark"] .form-input {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .form-input::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}
[data-theme="dark"] .form-input:focus {
    background-color: var(--bg-secondary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

/* Input group label */
[data-theme="dark"] .input-group label {
    color: var(--text-secondary) !important;
}

/* Form field container */
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

/* Submit/Primary buttons */
[data-theme="dark"] button[type="submit"],
[data-theme="dark"] .btn-primary {
    background-color: var(--accent-primary) !important;
    color: #fff !important;
}
[data-theme="dark"] button[type="submit"]:hover,
[data-theme="dark"] .btn-primary:hover {
    background-color: #357abd !important;
}

/* Secondary/Link buttons */
[data-theme="dark"] a.text-blue-500,
[data-theme="dark"] a.text-blue-600,
[data-theme="dark"] .text-blue-500,
[data-theme="dark"] .text-blue-600 {
    color: var(--accent-primary) !important;
}
[data-theme="dark"] a.hover\:text-blue-600:hover {
    color: #357abd !important;
}

/* Divider lines */
[data-theme="dark"] .border-t,
[data-theme="dark"] .border-b,
[data-theme="dark"] .border-l,
[data-theme="dark"] .border-r {
    border-color: var(--border-color) !important;
}

/* Card/Box backgrounds */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-secondary) !important;
}

/* Messages & alerts */
[data-theme="dark"] .alert,
[data-theme="dark"] [role="alert"] {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .text-red-500,
[data-theme="dark"] .text-red-600 {
    color: #ff8a80 !important;
}
[data-theme="dark"] .text-green-500,
[data-theme="dark"] .text-green-600 {
    color: var(--accent-success) !important;
}

/* =====================================================
   ADMIN BADGE — MOBILE HEADER
   ===================================================== */
[data-theme="dark"] .admin-badge-mobile {
    background-color: #1e3a5f !important;
    color: #93c5fd !important;
}
[data-theme="dark"] .admin-badge-mobile:hover {
    background-color: #2d4f7f !important;
    color: #bfdbfe !important;
}

/* =====================================================
   EXPLICIT LIGHT MODE — force reset when data-theme="light"
   Prevents any residual dark styles from lingering.
   ===================================================== */
[data-theme="light"] body {
    background-color: #f6f6f6 !important;
    color: #111827 !important;
}
[data-theme="light"] header {
    background-color: #ffffff !important;
    color: #111827 !important;
}
[data-theme="light"] header * {
    color: inherit;
}
[data-theme="light"] .bg-gray-100 {
    background-color: #f3f4f6 !important;
}
[data-theme="light"] .bg-white {
    background-color: #ffffff !important;
}
[data-theme="light"] .text-gray-600 {
    color: #4b5563 !important;
}
[data-theme="light"] .text-gray-700 {
    color: #374151 !important;
}
[data-theme="light"] .text-gray-500 {
    color: #6b7280 !important;
}
[data-theme="light"] .border-gray-200 {
    border-color: #e5e7eb !important;
}
[data-theme="light"] .border-gray-100 {
    border-color: #f3f4f6 !important;
}