/* ============================================
   THEME SYSTEM — Light & Dark Mode
   Colorful Edition — Full Page Coverage
   ============================================ */

:root {
    --theme-bg: #f5f5f7;
    --theme-bg-card: #ffffff;
    --theme-bg-input: #fafafa;
    --theme-bg-hover: #f2f2f7;
    --theme-bg-muted: #e5e5ea;
    --theme-bg-sidebar: #ffffff;
    --theme-text: #1c1c1e;
    --theme-text-secondary: #8e8e93;
    --theme-text-muted: #aeaeb2;
    --theme-border: #e5e5ea;
    --theme-border-light: #f2f2f7;
    --theme-accent: #34c759;
    --theme-accent-hover: #2db84d;
    --theme-shadow: rgba(0, 0, 0, 0.06);
    --theme-shadow-lg: rgba(0, 0, 0, 0.1);
    --theme-hero-from: #e8367c;
    --theme-hero-mid: #a855f7;
    --theme-hero-to: #7c3aed;
    --theme-overlay: rgba(0, 0, 0, 0.25);
    --theme-input-focus: rgba(232, 54, 124, 0.15);
    --theme-stat-bg: #ffffff;
    --theme-tab-bg: #e5e5ea;
    --theme-tab-active-bg: #ffffff;
    --theme-code-bg: #f5f5f7;
    --theme-success-bg: #d1fae5;
    --theme-success-text: #065f46;
    --theme-danger-bg: #fee2e2;
    --theme-danger-text: #991b1b;
    --theme-primary: #e8367c;
    --theme-primary-hover: #d42a6e;
    --theme-topbar-bg: rgba(255,255,255,0.85);
    --theme-nav-active-bg: #e8367c;
    --theme-nav-active-text: #ffffff;
    --theme-nav-text: #6e6e73;
    --theme-nav-hover-bg: #f2f2f7;
    --theme-nav-parent-open-bg: rgba(232,54,124,0.08);
    --theme-nav-parent-open-text: #e8367c;
}

[data-theme="dark"] {
    --theme-bg: #0a0c12;
    --theme-bg-card: #171b26;
    --theme-bg-input: #1e2330;
    --theme-bg-hover: #232838;
    --theme-bg-muted: #2a3040;
    --theme-bg-sidebar: #0e1019;
    --theme-text: #eef0f6;
    --theme-text-secondary: #9ca3b4;
    --theme-text-muted: #5c6478;
    --theme-border: #252a3a;
    --theme-border-light: #1c2030;
    --theme-accent: #34c759;
    --theme-accent-hover: #30d158;
    --theme-shadow: rgba(0, 0, 0, 0.4);
    --theme-shadow-lg: rgba(0, 0, 0, 0.6);
    --theme-hero-from: #e8367c;
    --theme-hero-mid: #a855f7;
    --theme-hero-to: #7c3aed;
    --theme-overlay: rgba(0, 0, 0, 0.6);
    --theme-input-focus: rgba(232, 54, 124, 0.25);
    --theme-stat-bg: #171b26;
    --theme-tab-bg: #171b26;
    --theme-tab-active-bg: #232838;
    --theme-code-bg: #1e2330;
    --theme-success-bg: #064e3b;
    --theme-success-text: #6ee7b7;
    --theme-danger-bg: #7f1d1d;
    --theme-danger-text: #fca5a5;
    --theme-primary: #e8367c;
    --theme-primary-hover: #f04d8d;
    --theme-topbar-bg: rgba(14,16,25,0.9);
    --theme-nav-active-bg: #e8367c;
    --theme-nav-active-text: #ffffff;
    --theme-nav-text: #7a829a;
    --theme-nav-hover-bg: #1e2330;
    --theme-nav-parent-open-bg: rgba(232,54,124,0.12);
    --theme-nav-parent-open-text: #f04d8d;
}

/* ===== SMOOTH TRANSITIONS ===== */
*,
*::before,
*::after {
    transition: background-color 0.35s ease,
                color 0.25s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* ===== GLOBAL BODY ===== */
body {
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

/* ===== SIDEBAR — Full Override ===== */
#userSidebar {
    background: var(--theme-bg-sidebar) !important;
    border-right-color: var(--theme-border) !important;
}

/* Sidebar brand */
#userSidebar .user-sidebar-brand {
    border-bottom-color: var(--theme-border) !important;
}
#userSidebar .user-sidebar-brand div[style*="background:#1c1c1e"] {
    background: var(--theme-primary) !important;
}
#userSidebar .user-sidebar-brand-text div:first-child,
#userSidebar .user-sidebar-brand div[style*="font-weight:800"] {
    color: var(--theme-text) !important;
}
#userSidebar .user-sidebar-brand div[style*="color:#86868b"],
#userSidebar .user-sidebar-brand-text div:last-child {
    color: var(--theme-text-secondary) !important;
}

/* Sidebar user info */
#userSidebar .user-sidebar-info {
    border-bottom-color: var(--theme-border) !important;
}
#userSidebar .user-sidebar-info div[style*="color:#1d1d1f"],
#userSidebar .user-sidebar-info div[style*="font-weight:700"] {
    color: var(--theme-text) !important;
}
#userSidebar .user-sidebar-info div[style*="color:#86868b"] {
    color: var(--theme-text-secondary) !important;
}
#userSidebar .user-sidebar-info div[style*="background:#f0f0f2"] {
    background: var(--theme-bg-hover) !important;
    color: var(--theme-text) !important;
}

/* Sidebar nav links — NOT active */
#userSidebar nav a.user-nav-link:not(.active) {
    color: var(--theme-nav-text) !important;
    background: transparent !important;
}
#userSidebar nav a.user-nav-link:not(.active):hover {
    background: var(--theme-nav-hover-bg) !important;
    color: var(--theme-text) !important;
}

/* Sidebar nav links — ACTIVE (pink) */
#userSidebar nav a.user-nav-link.active {
    background: var(--theme-nav-active-bg) !important;
    color: var(--theme-nav-active-text) !important;
}

/* Sidebar nav parent buttons */
#userSidebar .user-nav-parent {
    color: var(--theme-nav-text) !important;
    background: transparent !important;
}
#userSidebar .user-nav-parent:hover {
    background: var(--theme-nav-hover-bg) !important;
    color: var(--theme-text) !important;
}
#userSidebar .user-nav-parent.is-open {
    background: var(--theme-nav-parent-open-bg) !important;
    color: var(--theme-nav-parent-open-text) !important;
}

/* Sidebar sub menu border */
#userSidebar .user-nav-sub {
    border-left-color: var(--theme-border) !important;
}

/* Sidebar chevron */
#userSidebar .user-nav-chevron {
    color: var(--theme-text-muted) !important;
}

/* Sidebar bottom */
#userSidebar .user-sidebar-bottom,
#userSidebar div[style*="border-top"] {
    border-top-color: var(--theme-border) !important;
}
#userSidebar .user-sidebar-bottom a,
#userSidebar a[style*="color:#6e6e73"],
#userSidebar a[style*="color:#86868b"] {
    color: var(--theme-nav-text) !important;
}
#userSidebar a[style*="color:#6e6e73"]:hover,
#userSidebar a[style*="color:#86868b"]:hover {
    color: var(--theme-text) !important;
    background: var(--theme-nav-hover-bg) !important;
}

/* ===== MAIN AREA ===== */
.up-main {
    background: var(--theme-bg) !important;
}

/* ===== TOPBAR ===== */
.up-topbar {
    background: var(--theme-topbar-bg) !important;
    border-bottom-color: var(--theme-border) !important;
}
.up-topbar h1,
.up-topbar .up-topbar-sub,
.up-topbar span[style*="color:#1d1d1f"],
.up-topbar div[style*="color:#1d1d1f"] {
    color: var(--theme-text) !important;
}
.up-topbar input,
.up-topbar .search-box,
.up-topbar div[style*="background:#f2f2f7"],
.up-topbar div[style*="background:#f0f0f2"] {
    background: var(--theme-bg-input) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}
.up-topbar div[style*="color:#86868b"],
.up-topbar span[style*="color:#86868b"],
.up-topbar i[style*="color:#86868b"] {
    color: var(--theme-text-secondary) !important;
}

/* ===== NOTICE BANNER ===== */
.up-notice,
.up-user-banner,
div[style*="border-radius:16px"][style*="border:1px solid"] {
    background: var(--theme-bg-card) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

/* ===== HERO / BALANCE CARD ===== */
.up-hero {
    background: linear-gradient(135deg, var(--theme-hero-from) 0%, var(--theme-hero-mid) 50%, var(--theme-hero-to) 100%) !important;
}

/* ===== STAT CARDS ===== */
.up-stat {
    background: var(--theme-stat-bg) !important;
}
.up-stat-val {
    color: var(--theme-text) !important;
}
.up-stat-lbl {
    color: var(--theme-text-secondary) !important;
}

/* ===== CARDS & PANELS ===== */
.up-card {
    background: var(--theme-bg-card) !important;
    border-color: var(--theme-border) !important;
}
.up-card-head {
    border-bottom-color: var(--theme-border-light) !important;
}
.up-card-title {
    color: var(--theme-text) !important;
}
.up-card-title i {
    color: var(--theme-text-secondary) !important;
}
.up-card-link {
    color: var(--theme-text-secondary) !important;
}
.up-card-link:hover {
    color: var(--theme-text) !important;
}

/* ===== TABLE ===== */
.up-table th {
    background: var(--theme-bg-hover) !important;
    color: var(--theme-text-secondary) !important;
    border-bottom-color: var(--theme-border) !important;
}
.up-table td {
    color: var(--theme-text) !important;
    border-bottom-color: var(--theme-border-light) !important;
}
.up-table tr:hover td {
    background: var(--theme-bg-hover) !important;
}
.up-table td a {
    color: var(--theme-text) !important;
}
.up-table td span[style*="color:#86868b"],
.up-table td span[style*="color:#6e6e73"] {
    color: var(--theme-text-secondary) !important;
}

/* ===== SERVICE PANEL ===== */
.up-svc-item,
div[style*="border-bottom:1px solid #f0f0f0"] {
    border-bottom-color: var(--theme-border-light) !important;
}
.up-svc-name,
div[style*="font-weight:600"][style*="color:#1d1d1f"] {
    color: var(--theme-text) !important;
}
.up-svc-group,
div[style*="color:#86868b"],
span[style*="color:#86868b"] {
    color: var(--theme-text-secondary) !important;
}
.up-svc-price {
    color: var(--theme-text) !important;
}

/* Order button — gradient */
.up-order-btn {
    background: linear-gradient(135deg, #e8367c, #7c3aed) !important;
    color: #fff !important;
    border: none !important;
}
.up-order-btn:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px);
}

/* ===== PROFILE PAGE ===== */
.pr-header {
    background: linear-gradient(135deg, var(--theme-hero-from) 0%, var(--theme-hero-mid) 50%, var(--theme-hero-to) 100%) !important;
}
.pr-stat {
    background: var(--theme-stat-bg) !important;
    border-color: var(--theme-border) !important;
}
.pr-stat-val { color: var(--theme-text) !important; }
.pr-stat-lbl { color: var(--theme-text-secondary) !important; }
.pr-tabs { background: var(--theme-tab-bg) !important; }
.pr-tab { color: var(--theme-text-secondary) !important; }
.pr-tab:hover { color: var(--theme-text) !important; }
.pr-tab.active { background: var(--theme-tab-active-bg) !important; color: var(--theme-text) !important; }
.pr-card, .tg-card, .tx-card { background: var(--theme-bg-card) !important; border-color: var(--theme-border) !important; }
.pr-label { color: var(--theme-text) !important; }
.pr-input {
    background: var(--theme-bg-input) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}
.pr-input:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px var(--theme-input-focus) !important;
}
.pr-input:disabled { background: var(--theme-bg-hover) !important; color: var(--theme-text-muted) !important; }
.pr-alert-s { background: var(--theme-success-bg) !important; color: var(--theme-success-text) !important; }
.pr-alert-d { background: var(--theme-danger-bg) !important; color: var(--theme-danger-text) !important; }
.tx-table th { background: var(--theme-bg-hover) !important; color: var(--theme-text-secondary) !important; border-bottom-color: var(--theme-border) !important; }
.tx-table td { color: var(--theme-text) !important; border-bottom-color: var(--theme-border-light) !important; }
.tx-table tr:hover td { background: var(--theme-bg-hover) !important; }
.tg-cmds { background: var(--theme-code-bg) !important; }
.tg-cmds code { background: var(--theme-bg-card) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; }
.tg-code-box { background: var(--theme-code-bg) !important; border-color: var(--theme-border) !important; }
.tg-code { color: var(--theme-text) !important; }

/* ===== FORMS (Global) ===== */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"],
select, textarea {
    background: var(--theme-bg-input) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px var(--theme-input-focus) !important;
}

/* ===== BUTTONS ===== */
.btn-primary, button[type="submit"]:not(.up-order-btn) {
    background: var(--theme-primary) !important;
    color: #fff !important;
    border-color: var(--theme-primary) !important;
}
.btn-primary:hover, button[type="submit"]:not(.up-order-btn):hover {
    background: var(--theme-primary-hover) !important;
}

/* ===== MODALS ===== */
.modal-content, .dialog-content {
    background: var(--theme-bg-card) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}
.modal-header, .dialog-header { border-bottom-color: var(--theme-border) !important; }
.modal-footer, .dialog-footer { border-top-color: var(--theme-border) !important; }

/* ===== DROPDOWNS ===== */
.dropdown-menu, .sub-menu {
    background: var(--theme-bg-card) !important;
    border-color: var(--theme-border) !important;
}
.dropdown-item, .sub-menu a { color: var(--theme-text-secondary) !important; }
.dropdown-item:hover, .sub-menu a:hover {
    background: var(--theme-bg-hover) !important;
    color: var(--theme-text) !important;
}

/* ===== PAGINATION ===== */
.pagination .page-link {
    background: var(--theme-bg-card) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text-secondary) !important;
}
.pagination .page-item.active .page-link {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #fff !important;
}

/* ===== SCROLLBAR (Dark) ===== */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--theme-bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--theme-bg-muted); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--theme-text-muted); }

/* ===== DARK MODE CARD HOVER GLOW ===== */
[data-theme="dark"] .up-stat:hover {
    box-shadow: 0 4px 20px rgba(232, 54, 124, 0.1) !important;
    border-color: rgba(232, 54, 124, 0.2) !important;
}
[data-theme="dark"] .up-card:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
    border-color: var(--theme-bg-muted) !important;
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle-wrap {
    padding: 8px 12px;
}
.theme-toggle-btn {
    display: flex;
    align-items:center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--theme-border);
    background: var(--theme-bg-hover);
    color: var(--theme-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}
.theme-toggle-btn:hover {
    background: var(--theme-primary);
    color: #fff;
    border-color: var(--theme-primary);
}

/* ===== CATCH-ALL: Override remaining hardcoded inline styles ===== */
[data-theme="dark"] div[style*="background:#ffffff"],
[data-theme="dark"] div[style*="background: #ffffff"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:white"] {
    background: var(--theme-bg-card) !important;
}
[data-theme="dark"] div[style*="background:#f5f5f7"],
[data-theme="dark"] div[style*="background:#f5f5f5"],
[data-theme="dark"] div[style*="background: #f5f5f7"],
[data-theme="dark"] div[style*="background:#fafafa"],
[data-theme="dark"] div[style*="background:#f2f2f7"],
[data-theme="dark"] div[style*="background:#f0f0f2"] {
    background: var(--theme-bg-hover) !important;
}
[data-theme="dark"] [style*="color:#1c1c1e"],
[data-theme="dark"] [style*="color:#1d1d1f"],
[data-theme="dark"] [style*="color: #1c1c1e"],
[data-theme="dark"] [style*="color: #1d1d1f"] {
    color: var(--theme-text) !important;
}
[data-theme="dark"] [style*="color:#86868b"],
[data-theme="dark"] [style*="color:#6e6e73"],
[data-theme="dark"] [style*="color: #86868b"],
[data-theme="dark"] [style*="color: #6e6e73"],
[data-theme="dark"] [style*="color:#aeaeb2"] {
    color: var(--theme-text-secondary) !important;
}
[data-theme="dark"] [style*="border-bottom:1px solid #e8e8e8"],
[data-theme="dark"] [style*="border:1px solid #e8e8e8"],
[data-theme="dark"] [style*="border-right:1px solid #e8e8e8"],
[data-theme="dark"] [style*="border-top:1px solid #e8e8e8"] {
    border-color: var(--theme-border) !important;
}
[data-theme="dark"] [style*="border-bottom:1px solid #f0f0f0"],
[data-theme="dark"] [style*="border:1px solid #f0f0f0"],
[data-theme="dark"] [style*="border-left:2px solid #e8e8e8"] {
    border-color: var(--theme-border) !important;
}
[data-theme="dark"] [style*="background:#e8e8e8"],
[data-theme="dark"] [style*="background:#e5e5e7"] {
    background: var(--theme-bg-muted) !important;
}

/* Fix sidebar overlay in dark */
[data-theme="dark"] .user-sidebar-overlay.show {
    background: rgba(0,0,0,0.5) !important;
}

/* Low credit popup & notification */
[data-theme="dark"] .low-credit-popup,
[data-theme="dark"] .notification-popup {
    background: var(--theme-bg-card) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}