/* ==============================================
   PGRBuilder - Theme Styles
   ============================================== */

/* ==============================================
   Light Theme Configuration
   ============================================== */
.light-theme {
    /* Light Theme Variables */
    --bg-color: #f2f2f5;
    --panel-bg: #ffffff;
    --text-color: #1a1a1a;
    --text-highlight: #000000;
    --accent-red: #d32f2f;
    --accent-dim: #f0f0f0;
    --border-color: #e0e0e0;
    --input-bg: #f5f5f7;
}

/* 
   LIGHT THEME OVERRIDES 
   Specific adjustments for elements where variable swapping isn't enough
*/

/* Containers & Slots */
.light-theme .mem-box,
.light-theme .harm-slot,
.light-theme .res-group,
.light-theme .stat-box:not(.empty-state) {
    background-color: #fcfcfc !important;
    border-color: #ccc !important;
}

/* Left Panel Background */
.light-theme .left-panel {
    background-color: var(--panel-bg) !important;
    border-color: #ddd !important;
}

/* Input Fields Text Color */
.light-theme input,
.light-theme .stat-input,
.light-theme .mem-input,
.light-theme .harm-input,
.light-theme .build-title input,
.light-theme .res-val-input,
.light-theme .res-desc-input {
    color: #333 !important;
}

/* Stat Labels (Class, Element, etc.) */
.light-theme .stat-label {
    color: #666 !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border-bottom-color: #ddd !important;
    border-top-color: #ddd !important;
}

/* Top Navigation Bar */
.light-theme .top-nav {
    background: #fff !important;
    color: #333 !important;
    border-bottom-color: #ddd !important;
}

.light-theme .nav-right {
    color: #666;
}

/* Section Headers */
.light-theme .section-header {
    color: #333 !important;
    border-bottom-color: #eee !important;
}

/* Tactical Analysis Box */
.light-theme .tac-box {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: #ddd !important;
}

/* Rich Text Editor */
.light-theme .rich-textarea {
    color: #333 !important;
}

/* Portrait Placeholder */
.light-theme .portrait-placeholder {
    background-color: #f7f7f7 !important;
    color: #999;
}

/* Borders for various containers */
.light-theme .build-row,
.light-theme .stats-row,
.light-theme .stats-container,
.light-theme .section-header {
    border-bottom-color: #eee !important;
}

/* Decorative Corners */
.light-theme .page-corner {
    border-color: #ccc !important;
}

/* Suggestions Dropdown */
.light-theme .suggestions-box {
    background: #fff !important;
    border-color: #ccc !important;
}

.light-theme .suggestions-box div {
    color: #333 !important;
    border-bottom-color: #eee !important;
}

.light-theme .suggestions-box div:hover {
    background: #f0f0f0 !important;
}

/* Light Theme for Popup Menus & Color Picker */
.light-theme #custom-color-picker,
.light-theme .rte-dropdown-menu {
    background-color: #ffffff !important;
    border-color: #ccc !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
    color: #333 !important;
}

.light-theme .cp-hex-input {
    background: #f0f0f0 !important;
    color: #333 !important;
    border-color: #ccc !important;
}

.light-theme .cp-btn {
    background: #f0f0f0 !important;
    color: #333 !important;
}

.light-theme .cp-btn:hover {
    background: #e0e0e0 !important;
}

.light-theme .rte-dropdown-item {
    color: #333 !important;
}

.light-theme .rte-dropdown-item:hover {
    background-color: #f0f0f0 !important;
}

/* Light Theme Overrides for Text Inputs */
.light-theme .nav-left,
.light-theme .char-name-input,
.light-theme .section-header,
.light-theme .tac-header,
.light-theme .weapon-textarea,
.light-theme .stat-input {
    color: #333 !important;
}

/* Invert White Icons to Black in Light Theme (EXCEPT Weapon and CUB which are colored) */
.light-theme .stat-icon:not(#weapon-img):not(#cub-img) {
    filter: invert(1);
    opacity: 0.8;
}

/* Light Theme Weapon Resonance */
.light-theme .weapon-res-group {
    background: #fcfcfc !important;
    border-color: #ccc !important;
    border-left: 2px solid #ccc !important;
    /* Match border color */
}

.light-theme .portrait-area {
    border-bottom-color: #ddd !important;
}

.light-theme .weapon-res-box {
    background: #f5f5f7 !important;
    border-color: #ddd !important;
}

.light-theme .weapon-res-box:hover {
    border-color: var(--accent-red) !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) !important;
}

.light-theme .weapon-res-group .res-label {
    color: #555 !important;
}

/* Invert Weapon Resonance Icons in Light Theme */
.light-theme .weapon-res-box img,
.light-theme .wres-item img {
    filter: invert(1);
    opacity: 0.8;
}

/* Light Theme Modals (Char/Mem/Weapon) */
.light-theme .modal-content,
.light-theme .wres-modal-content {
    background: #fff !important;
    border-color: #ccc !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15) !important;
}

.light-theme .modal-header,
.light-theme .wres-modal-header {
    background: #fff !important;
    border-bottom-color: #eee !important;
}

.light-theme .modal-header h3,
.light-theme .wres-modal-header {
    color: #333 !important;
    text-shadow: none !important;
}

.light-theme .modal-close,
.light-theme .wres-modal-close {
    color: #666 !important;
    /* Close button */
}

/* Light Theme Lists (Memories/Characters/WRes) */
.light-theme .mem-option,
.light-theme .wres-item {
    background: #fff !important;
    border-color: #eee !important;
}

.light-theme .mem-option:hover,
.light-theme .wres-item:hover:not(.disabled) {
    background: #f0f0f0 !important;
    border-color: var(--accent-red) !important;
}

.light-theme .mem-opt-name,
.light-theme .wres-item span {
    color: #333 !important;
}

.light-theme .mem-search,
.light-theme .modal-search-box input {
    background: #fff !important;
    color: #333 !important;
    border-bottom-color: #e0e0e0 !important;
    /* Lighter border for search */
}

.light-theme .modal-search-box {
    border-bottom-color: #e0e0e0 !important;
}

/* Light Theme Scrollbars */
.light-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.light-theme ::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.light-theme ::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.light-theme ::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Fix Black Blocks in Resonance Dropdowns */
.light-theme .custom-res-select .res-select-trigger {
    background-color: #fff !important;
    border-color: #ddd !important;
    color: #333 !important;
}

.light-theme .res-select-options {
    background: #fff !important;
    border-color: #ddd !important;
}

.light-theme .res-select-option {
    background: #fff !important;
    color: #333 !important;
}

.light-theme .res-select-option:hover {
    background: #f5f5f5 !important;
}

/* Windows-style Close Button for Weapon Resonance Modal - Light Theme Override */
.light-theme .wres-modal-close {
    color: #000 !important;
    /* Just force black text for light theme */
}

.light-theme .wres-modal-close:hover {
    background: #e81123 !important;
    color: #fff !important;
    transform: none !important;
}

/* Light Theme Input Highlighting (Mem/Harm) */
.light-theme .mem-input:hover,
.light-theme .mem-input:focus,
.light-theme .harm-input:hover,
.light-theme .harm-input:focus {
    background: #fff !important;
    border: 1px solid #ccc !important;
    color: #000 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Light Theme Harmony Slot Hover */
.light-theme .harm-slot:hover {
    background: #fff !important;
    border-color: #d32f2f !important;
    box-shadow: 0 0 8px rgba(211, 47, 47, 0.4) !important;
}

/* Light Theme Resilience Skill Input */
.light-theme .res-skill-input {
    border-bottom-color: #ccc !important;
    color: #333 !important;
}

/* Fix Weapon Resonance Modal Backgrounds */
.light-theme .wres-item {
    box-shadow: none !important;
    /* Remove heavy shadows */
}

.light-theme .wres-modal-content {
    border: 1px solid #ddd !important;
}

/* Light Theme Buttons */
.light-theme .btn {
    background: #f0f0f0 !important;
    color: #333 !important;
    border-color: #ccc !important;
}

.light-theme .btn:hover {
    background: #e0e0e0 !important;
    border-color: #999 !important;
}

.light-theme .custom-res-select:hover .res-select-trigger,
.light-theme .custom-res-select.open .res-select-trigger {
    background: #fff;
    border-color: #ccc;
}

.light-theme .add-build-wide-btn {
    border-color: #ccc;
    color: #888;
}

.light-theme .add-build-wide-btn:hover {
    border-color: var(--accent-red);
    color: #333;
    background: rgba(0, 0, 0, 0.02);
}

/* 
   Global Smooth Theme Transition 
   ----------------------------------------------
   This block ensures that ALL elements transition their colors/backgrounds/borders
   smoothly when the 'changing-theme' class is applied to the body.
   This class is added via JS for 550ms during the toggle.
*/
.changing-theme,
.changing-theme *,
.changing-theme *::before,
.changing-theme *::after {
    transition: all 0.5s ease !important;
    transition-delay: 0s !important;
}