/* ==========================================================================
   KissKH Clone - Theme Color System
   ========================================================================== */

/* Default Theme - Deep Purple & Amber */
:root {
    --loading: rgba(0, 0, 0, .4);
    --placeholder: rgba(255, 255, 255, .5);
    --menu-backdrop: rgba(0, 0, 0, .5);
    --draw-bg: rgba(33, 33, 33, .98);
    --primary-color: #673ab7;
    --accent-color: #ffd740;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --card-bg: #673ab7;
    --border-color: rgba(255, 255, 255, 0.12);
    --background-color: #673ab7;
    --content-bg: #ffffff;
    --navbar-bg: #673ab7;
    --navbar-text: #ffffff;
}

body.deeppurple-amber-theme {
    --primary-color: #673ab7;
    --accent-color: #ffd740;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --card-bg: #673ab7;
    --border-color: rgba(255, 255, 255, 0.12);
    --background-color: #673ab7;
    --content-bg: #ffffff;
    --navbar-bg: #673ab7;
    --navbar-text: #ffffff;
}

body.indigo-pink-theme {
    --primary-color: #3f51b5;
    --accent-color: #e91e63;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --card-bg: #3f51b5;
    --border-color: rgba(255, 255, 255, 0.12);
    --background-color: #3f51b5;
    --content-bg: #ffffff;
    --navbar-bg: #3f51b5;
    --navbar-text: #ffffff;
}

body.pink-bluegrey-theme {
    --primary-color: #e91e63;
    --accent-color: #607d8b;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --card-bg: #e91e63;
    --border-color: rgba(255, 255, 255, 0.12);
    --background-color: #e91e63;
    --content-bg: #607d8b;
    --navbar-bg: #e91e63;
    --navbar-text: #ffffff;
}

body.purple-green-theme {
    --primary-color: #9c27b0;
    --accent-color: #4caf50;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --card-bg: #607d8b;
    --border-color: rgba(255, 255, 255, 0.12);
    --background-color: #607d8b;
    --content-bg: #607d8b;
    --navbar-bg: #607d8b;
    --navbar-text: #ffffff;
}

/* Apply Theme Colors */
.top-toolbar { background: var(--navbar-bg); color: var(--navbar-text); }
body { background: var(--background-color); color: var(--text-color); }
.page-content, .home-page, main { background: var(--content-bg); }
.drama-section { background: var(--content-bg); }
.section-title { color: var(--text-color); }
.title-btn { color: var(--primary-color); }
.nav-arrow { color: var(--text-color); }
.drama-title, .mat-card-title { color: var(--text-color); }
.nav-btn { color: var(--navbar-text); transition: all 0.3s ease; }
.sidenav { background: var(--content-bg); color: var(--text-color); }
.menu-button { color: var(--text-color); }
.menu-item.active .menu-button { color: var(--primary-color); }
.app-footer { background: var(--navbar-bg); color: var(--navbar-text); }
.custom-menu-content { background: var(--content-bg); color: var(--text-color); }
.custom-menu-item { color: var(--text-color); }
.custom-menu-item:hover { background: rgba(0, 0, 0, 0.04); }
.app-loading { background: var(--background-color); color: var(--text-color); }

/* Nav Active States */
.nav-btn.active, .nav-btn.current-menu-item, .current-menu-item .nav-btn, .current_page_item .nav-btn {
    color: var(--background-color) !important;
    background: var(--accent-color) !important;
    border-radius: 4px;
}

/* Menu Active */
.menu-item.active .menu-button { background: var(--accent-color); color: var(--background-color); border-radius: 4px; }
.menu-item:not(.active) .menu-button:hover { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }

/* Theme 1 */
body.deeppurple-amber-theme .nav-btn.active,
body.deeppurple-amber-theme .current-menu-item .nav-btn,
body.deeppurple-amber-theme .current_page_item .nav-btn { background: #ffffff !important; color: #333333 !important; }
body.deeppurple-amber-theme .menu-item.active .menu-button { background: #ffffff; color: #333333; }
body.deeppurple-amber-theme .menu-item.active .menu-button .material-icons { color: #673ab7; }

/* Theme 2 */
body.indigo-pink-theme .nav-btn.active,
body.indigo-pink-theme .current-menu-item .nav-btn,
body.indigo-pink-theme .current_page_item .nav-btn { background: #ffffff !important; color: #333333 !important; }
body.indigo-pink-theme .menu-item.active .menu-button { background: #ffffff; color: #333333; }
body.indigo-pink-theme .menu-item.active .menu-button .material-icons { color: #3f51b5; }

/* Drama Card Titles */
.drama-card-title { color: #333333; }
body.pink-bluegrey-theme .drama-card-title,
body.purple-green-theme .drama-card-title { color: #ffffff; }

/* Footer Links */
.footer-links { background: #f5f5f5; }
.footer-links a { color: #333333; }
body.pink-bluegrey-theme .footer-links,
body.purple-green-theme .footer-links { background: var(--content-bg); }
body.pink-bluegrey-theme .footer-links a,
body.purple-green-theme .footer-links a { color: #ffffff; }

/* Filter Buttons */
.filter-btn { background-color: #e0e0e0 !important; color: rgba(0,0,0,0.87) !important; border: none; cursor: pointer; padding: 6px 16px; border-radius: 16px; font-size: 14px; font-weight: 500; transition: all 0.2s ease; }
.filter-btn:hover { background-color: #d0d0d0 !important; }
.filter-btn.active { background-color: var(--primary-color) !important; color: #ffffff !important; }

body.pink-bluegrey-theme .filter-btn,
body.purple-green-theme .filter-btn { background-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; }
body.pink-bluegrey-theme .filter-btn.active,
body.purple-green-theme .filter-btn.active { background-color: rgba(255, 255, 255, 0.3) !important; }

/* Episode Buttons */
.episode-btn.active { background: #ffd740; color: #333333; }
body.indigo-pink-theme .episode-btn.active { background: #ff4081; color: #ffffff; }

/* Post Block Info */
body.pink-bluegrey-theme .post-block-info,
body.purple-green-theme .post-block-info { background: #424242 !important; color: #ffffff !important; }

/* Search Category */
body.indigo-pink-theme .search-category-btn.active { background: var(--primary-color) !important; color: #ffffff !important; }

/* Error 404 */
body.deeppurple-amber-theme .error-404-title,
body.deeppurple-amber-theme .error-404-text,
body.deeppurple-amber-theme .error-404-subtitle,
body.indigo-pink-theme .error-404-title,
body.indigo-pink-theme .error-404-text,
body.indigo-pink-theme .error-404-subtitle { color: #333333 !important; }

/* Dark theme content areas */
body.pink-bluegrey-theme .page-content-body *,
body.purple-green-theme .page-content-body * { color: #ffffff !important; }
body.pink-bluegrey-theme .faq-question-header,
body.purple-green-theme .faq-question-header { background: #424242; }
body.pink-bluegrey-theme .custom-menu-content,
body.purple-green-theme .custom-menu-content { background: #424242 !important; }