/* ── Theme CSS for Aniportal Dark/Light Mode ── */

/* Light Mode CSS Variables - Override :root variables */
:root.light-mode,
:root {
    --bg: #202125;
    --bg-alt: #0e0a1f;
    --panel: #2a2c31;
    --panel-2: #32353b;
    --accent: #86e3ce;
    --accent-2: #ffbade;
    --border: rgba(255,255,255,.08);
}

:root.light-mode {
    --bg: #f4f2fb;
    --bg-alt: #ffffff;
    --panel: #ffffff;
    --panel-2: #e6f7fd;
    --panel-3: #d3eefc;
    --text: #10202e;
    --muted: #4f7189;
    --accent: #0ea5e9;
    --accent-2: #0891b2;
    --ac: #0ea5e9;
    --ac2: #0891b2;
    --accent-soft: rgba(14, 165, 233, 0.1);
    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, 0.1);
    --border: rgba(14, 165, 233, 0.14);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.06);
    --sidebar-bg: #ffffff;
    --sidebar-hover: rgba(14,165,233,0.05);
    --sidebar-active: rgba(14,165,233,0.12);
    --sidebar-text: #6b6590;
    --sidebar-text-active: #1c1a2e;
    --glass-bg: rgba(255, 255, 255, 0.9);
}

/* Light Mode Overrides */
body.light-mode {
    background: #f4f2fb !important;
    color: #10202e !important;
}

body.light-mode #wrapper {
    background: #f4f2fb !important;
}

body.light-mode #header,
body.light-mode .aniki-header {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom-color: rgba(14, 165, 233, 0.1);
}

body.light-mode #search .search-input,
body.light-mode .ah-search input {
    background: rgba(14, 165, 233, 0.06) !important;
    border-color: rgba(14, 165, 233, 0.15) !important;
    color: #10202e !important;
}

body.light-mode #search .search-input:focus,
body.light-mode .ah-search input:focus {
    border-color: rgba(14, 165, 233, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
}

body.light-mode .theme-toggle-btn,
body.light-mode .ah-icon-btn {
    background: rgba(14, 165, 233, 0.06);
    border-color: rgba(14, 165, 233, 0.1);
    color: #4f7189;
}

body.light-mode .theme-toggle-btn:hover,
body.light-mode .ah-icon-btn:hover {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

body.light-mode .ah-vip {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.05));
    border-color: rgba(14, 165, 233, 0.2);
    color: #0ea5e9;
}

body.light-mode .ah-dropdown {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(14, 165, 233, 0.1);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.1);
}

body.light-mode .ah-dropdown a {
    color: #4f7189;
}

body.light-mode .ah-dropdown a:hover {
    background: rgba(14, 165, 233, 0.05);
    color: #10202e;
}

body.light-mode #pick_menu {
    background: #ffffff;
    border-color: rgba(14, 165, 233, 0.1);
}

body.light-mode #pick_menu .pmu-item-icon {
    background: rgba(14, 165, 233, 0.06);
    color: #4f7189;
}

body.light-mode #pick_menu .pmu-item-icon:hover {
    background: #0ea5e9;
    color: #fff;
}

body.light-mode .filter-icon {
    background: #0ea5e9;
    color: #fff;
}

body.light-mode .toggle-lang {
    background: rgba(14, 165, 233, 0.06);
}

body.light-mode .toggle-lang .en {
    color: #0ea5e9;
}

body.light-mode .theme-dropdown {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(14, 165, 233, 0.1);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.1);
}

body.light-mode .theme-dropdown-item {
    color: #4f7189;
}

body.light-mode .theme-dropdown-item:hover {
    background: rgba(14, 165, 233, 0.05);
    color: #10202e;
}

body.light-mode .theme-dropdown-item.active {
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.08);
}

body.light-mode .theme-dropdown-item i {
    color: #4f7189;
}

body.light-mode .aniki-ad {
    background: rgba(14, 165, 233, 0.04);
    border-color: rgba(14, 165, 233, 0.1);
}

body.light-mode .aniki-ad-label {
    color: rgba(14, 165, 233, 0.4);
}

body.light-mode .notif-badge-zia {
    border-color: rgba(255, 255, 255, 0.5);
}

body.light-mode .engage-bar-container {
    color: #10202e;
}

body.light-mode .engage-heading span {
    color: #0ea5e9;
}

body.light-mode #sidebar_menu {
    background: #ffffff;
}

body.light-mode .sidebar_menu-list a {
    color: #4f7189;
}

body.light-mode .sidebar_menu-list a:hover {
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.05);
}

body.light-mode .ah-avatar-fallback {
    background: linear-gradient(135deg, #0ea5e9, #22d3ee);
    color: #fff;
}

body.light-mode .site-footer {
    background: rgba(14, 165, 233, 0.04);
    border-top-color: rgba(14, 165, 233, 0.1);
}