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

/* Default Theme - Deep Purple & Amber (Purple background, White content) */
: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;
}

/* Theme 1: Deep Purple & Amber - Purple background, White content */
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;
}

/* Theme 2: Indigo Pink - Blue background, White content */
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;
}

/* Theme 3: Pink Blue Grey - Pink background, Grey content */
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;
}

/* Theme 4: Purple Green - Grey background, Grey content */
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 to Components
   ========================================================================== */

/* Navigation Bar */
.top-toolbar {
    background: var(--navbar-bg);
    color: var(--navbar-text);
}

/* Main Background */
body {
    background: var(--background-color);
    color: var(--text-color);
}

/* Content Areas */
.page-content,
.home-page,
main {
    background: var(--content-bg);
    color: var(--text-color);
}

/* Cards */
.mat-card,
.custom-card {
    background: var(--content-bg);
    color: var(--text-color);
}

/* Carousel */
.carousel,
.mat-carousel-wrapper {
    background: var(--content-bg);
}

/* Latest Update Section - Updated for new classes */
.drama-section {
    background: var(--content-bg);
    color: var(--text-color);
}

.section-title {
    color: var(--text-color);
}

.title-btn {
    color: var(--primary-color);
}

/* Navigation arrows */
.nav-arrow {
    color: var(--text-color);
}

/* Drama Cards Text */
.drama-title,
.mat-card-title {
    color: var(--text-color);
}

/* Buttons */
.btn,
.custom-button {
    color: var(--primary-color);
}

/* Navigation Buttons */
.nav-btn {
    color: var(--navbar-text);
    transition: all 0.3s ease;
}

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

/* Sidenav */
.sidenav {
    background: var(--content-bg);
    color: var(--text-color);
}

.menu-button {
    color: var(--text-color);
}

.menu-item.active .menu-button {
    color: var(--primary-color);
}

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

/* Theme Menu */
.theme-menu .mat-menu-panel {
    background: var(--content-bg);
    color: var(--text-color);
}

.mat-menu-item {
    color: var(--text-color);
}

.mat-menu-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Sign In Menu */
.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);
}

/* Responsive Text Colors */
@media (max-width: 768px) {
    .drama-title,
    .mat-card-title {
        color: var(--text-color);
    }
}

/* Ensure proper contrast for content areas */
.mat-card-content,
.aspect-ratio-box,
.episode-overlay {
    color: inherit;
}
.app-loading {
    background: var(--background-color);
    color: var(--text-color);
}
.custom-expansion-indicator {
    color: #333333;
}
body.deeppurple-amber-theme .custom-expansion-indicator {
    color: #333333;
}

/* Theme 2: Indigo Pink */
body.indigo-pink-theme .custom-expansion-indicator {
    color: #333333;
}

/* Theme 3: Pink Blue Grey */
body.pink-bluegrey-theme .custom-expansion-indicator {
    color: #ffffff;
}

/* Theme 4: Purple Green */
body.purple-green-theme .custom-expansion-indicator {
    color: #ffffff;
}

/* Footer Links Background Colors */
.footer-links {
    background: #f5f5f5;
}

/* Theme 1: Deep Purple & Amber */
body.deeppurple-amber-theme .footer-links {
    background: #f5f5f5;
}

/* Theme 2: Indigo Pink */
body.indigo-pink-theme .footer-links {
    background: #f5f5f5;
}

/* Theme 3: Pink Blue Grey */
body.pink-bluegrey-theme .footer-links {
    background: var(--content-bg);
}

/* Theme 4: Purple Green */
body.purple-green-theme .footer-links {
    background: var(--content-bg);
}

/* Footer Links Text Colors */
.footer-links a {
    color: #333333;
}

/* Theme 1: Deep Purple & Amber */
body.deeppurple-amber-theme .footer-links a {
    color: #333333;
}

/* Theme 2: Indigo Pink */
body.indigo-pink-theme .footer-links a {
    color: #333333;
}

/* Theme 3: Pink Blue Grey */
body.pink-bluegrey-theme .footer-links a {
    color: #ffffff;
}

/* Theme 4: Purple Green */
body.purple-green-theme .footer-links a {
    color: #ffffff;
}

/* Drama Card Title Colors */
.drama-card-title {
    color: #333333;
}

/* Theme 1: Deep Purple & Amber */
body.deeppurple-amber-theme .drama-card-title {
    color: #333333;
}

/* Theme 2: Indigo Pink */
body.indigo-pink-theme .drama-card-title {
    color: #333333;
}

/* Theme 3: Pink Blue Grey */
body.pink-bluegrey-theme .drama-card-title {
    color: #ffffff;
}

/* Theme 4: Purple Green */
body.purple-green-theme .drama-card-title {
    color: #ffffff;
}

/* Header Menu Active States */
.menu-item.active .menu-button {
    background: var(--accent-color);
    color: var(--background-color);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.menu-item.active .menu-button .material-icons {
    color: var(--background-color);
}

/* Header Menu Hover States */
.menu-item:not(.active) .menu-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Theme 1: Deep Purple & Amber - Navigation */
body.deeppurple-amber-theme .nav-btn.active,
body.deeppurple-amber-theme .nav-btn.current-menu-item,
body.deeppurple-amber-theme .current-menu-item .nav-btn,
body.deeppurple-amber-theme .current_page_item .nav-btn,
body.deeppurple-amber-theme .menu-item-home .nav-btn {
    background: #ffffff !important;
    color: #333333 !important;
}

/* Theme 1: Deep Purple & Amber - Sidenav */
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: Indigo Pink - Navigation */
body.indigo-pink-theme .nav-btn.active,
body.indigo-pink-theme .nav-btn.current-menu-item,
body.indigo-pink-theme .current-menu-item .nav-btn,
body.indigo-pink-theme .current_page_item .nav-btn,
body.indigo-pink-theme .menu-item-home .nav-btn {
    background: #ffffff !important;
    color: #333333 !important;
}

/* Theme 2: Indigo Pink - Sidenav */
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;
}

/* Theme 3: Pink Blue Grey - Navigation */
body.pink-bluegrey-theme .nav-btn.active,
body.pink-bluegrey-theme .nav-btn.current-menu-item,
body.pink-bluegrey-theme .current-menu-item .nav-btn,
body.pink-bluegrey-theme .current_page_item .nav-btn,
body.pink-bluegrey-theme .menu-item-home .nav-btn {
    background: #424242 !important;
    color: #ffffff !important;
}

/* Theme 3: Pink Blue Grey - Sidenav */
body.pink-bluegrey-theme .menu-item.active .menu-button {
    background: #424242 !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .menu-item.active .menu-button .material-icons {
    color: #e91e63;
}

/* Theme 4: Purple Green - Navigation */
body.purple-green-theme .nav-btn.active,
body.purple-green-theme .nav-btn.current-menu-item,
body.purple-green-theme .current-menu-item .nav-btn,
body.purple-green-theme .current_page_item .nav-btn,
body.purple-green-theme .menu-item-home .nav-btn {
    background: #424242 !important;
    color: #ffffff !important;
}

/* Theme 4: Purple Green - Sidenav */
body.purple-green-theme .menu-item.active .menu-button {
    background: #424242 !important;
    color: #ffffff !important;
}

body.purple-green-theme .menu-item.active .menu-button .material-icons {
    color: #607d8b;
}

/* Post Block Info Styles */
.post-block-info {
    /* Default styling handled in main.css */
}

/* Theme 3: Pink Blue Grey - Post Block Info */
body.pink-bluegrey-theme .post-block-info {
    background: #424242 !important;
    color: #ffffff !important;
}

/* Theme 4: Purple Green - Post Block Info */
body.purple-green-theme .post-block-info {
    background: #424242 !important;
    color: #ffffff !important;
}

/* Theme 3 & 4: Post Block Info H3 */
body.pink-bluegrey-theme .post-block-info h3,
body.purple-green-theme .post-block-info h3 {
    color: #ffffff !important;
}

/* Theme 3: Pink Blue Grey - Search Category Buttons */
body.pink-bluegrey-theme .search-category-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 .search-category-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.pink-bluegrey-theme .search-category-btn.active {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
body.indigo-pink-theme .search-category-btn.active {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}
/* Theme 4: Purple Green - Search Category Buttons */
body.purple-green-theme .search-category-btn {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.purple-green-theme .search-category-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.purple-green-theme .search-category-btn.active {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Filter Buttons Styling for Different Themes */

/* Theme 1: Deep Purple & Amber - Filter Buttons */
body.deeppurple-amber-theme .filter-btn {
    background-color: #e0e0e0 !important;
    color: rgba(0, 0, 0, 0.87) !important;
}

body.deeppurple-amber-theme .filter-btn:hover {
    background-color: #d0d0d0 !important;
}

body.deeppurple-amber-theme .filter-btn.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Theme 2: Indigo Pink - Filter Buttons */
body.indigo-pink-theme .filter-btn {
    background-color: #e0e0e0 !important;
    color: rgba(0, 0, 0, 0.87) !important;
}

body.indigo-pink-theme .filter-btn:hover {
    background-color: #d0d0d0 !important;
}

body.indigo-pink-theme .filter-btn.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Theme 3: Pink Blue Grey - Filter Buttons */
body.pink-bluegrey-theme .filter-btn {
    background-color: #616161 !important;
    color: #ffffff !important;
}

body.pink-bluegrey-theme .filter-btn:hover {
    background-color: #757575 !important;
}

body.pink-bluegrey-theme .filter-btn.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}
/* Theme 4: Purple Green - Filter Buttons */
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.purple-green-theme .filter-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.purple-green-theme .filter-btn.active {
    background-color: #fff  !important;;
    color: #030303  !important;;
    border: 1px solid rgba(255,255,255,.1) !important;
}

/* Episode Button Active States */
.episode-btn.active {
    background: #ffd740;
    color: #333333;
}

/* Theme 1: Deep Purple & Amber */
body.deeppurple-amber-theme .episode-btn.active {
    background: #ffd740;
    color: #333333;
}

/* Theme 2: Indigo Pink */
body.indigo-pink-theme .episode-btn.active {
    background: #ff4081;
    color: #ffffff;
}

/* Theme 3: Pink Blue Grey */
body.pink-bluegrey-theme .episode-btn.active {
    background: #b0bec5;
    color: #333333;
}

/* Theme 4: Purple Green */
body.purple-green-theme .episode-btn.active {
    background: #ffffff;
    color: #333333;
}
body.pink-bluegrey-theme .page-content-body *,
body.purple-green-theme .page-content-body *{
    color: #ffffff !important;
}
body.pink-bluegrey-theme .faq-question-text,body.pink-bluegrey-theme .faq-answer-content,
body.pink-bluegrey-theme .faq-expand-arrow,
body.purple-green-theme .faq-question-text,body.purple-green-theme .faq-answer-content,
body.purple-green-theme .faq-expand-arrow{
    color: #ffffff !important;
}
body.pink-bluegrey-theme .faq-question-header,body.pink-bluegrey-theme .faq-question-item,
body.purple-green-theme .faq-question-header,body.purple-green-theme .faq-question-item{
    background: #424242;
}
body.pink-bluegrey-theme .user-info-section,
body.purple-green-theme .user-info-section{
    background: #424242;
    border-color: rgba(255,255,255,.1);
}
body.pink-bluegrey-theme .custom-menu-content,
body.purple-green-theme .custom-menu-content,
body.pink-bluegrey-theme .user-menu-items,
body.purple-green-theme .user-menu-items{
    background:#424242 !important;
}
body.pink-bluegrey-theme .user-name,
body.purple-green-theme .user-name,
body.pink-bluegrey-theme .custom-menu-item .custom-icons i,
body.purple-green-theme .custom-menu-item .custom-icons i{
    color:#ffffff;
}
body.pink-bluegrey-theme .custom-menu-item:hover,
body.purple-green-theme .custom-menu-item:hover{
    background: rgba(0, 0, 0, 0.26) !important;
}

body.deeppurple-amber-theme .error-404-title,
body.deeppurple-amber-theme .error-404-text,
body.deeppurple-amber-theme .error-404-subtitle,
body.deeppurple-amber-theme .error-404-home-btn,
body.indigo-pink-theme .error-404-title,
body.indigo-pink-theme .error-404-text,
body.indigo-pink-theme .error-404-subtitle,
body.indigo-pink-theme .error-404-home-btn{
    color: #333333 !important;
}
body.pink-bluegrey-theme .mat-paginator-container *,
body.purple-green-theme .mat-paginator-container *{
    color: rgba(255,255,255,.7) !important;
}
body.pink-bluegrey-theme .mat-dropdown-trigger,
body.purple-green-theme .mat-dropdown-trigger{
    border-bottom-color: rgba(255,255,255,.7);
}
body.pink-bluegrey-theme .mat-dropdown-arrow,
body.purple-green-theme .mat-dropdown-arrow ,
body.pink-bluegrey-theme .mat-paginator-icon,
body.purple-green-theme .mat-paginator-icon{
    fill: rgba(255,255,255,.7) !important;
}
body.pink-bluegrey-theme .mat-dropdown-panel,
body.purple-green-theme .mat-dropdown-panel{
    background: #424242 !important;
}
body.pink-bluegrey-theme .mat-dropdown-option-selected,
body.purple-green-theme .mat-dropdown-option-selected{
    background: rgba(255,255,255,.12)  !important;
}
body.pink-bluegrey-theme .favorites-title,
body.pink-bluegrey-theme  .favorites-end-text,
body.purple-green-theme .favorites-title,
body.purple-green-theme  .favorites-end-text{
    color: #ffffff !important;
}