/* 
 * Enhanced HistoryDex theme CSS
 * 
 * This file provides improved theme implementation for the HistoryDex tab
 * with stronger specificity and more comprehensive styling.
 */

/* Core HistoryDex colors with increased specificity */
body.theme-historydex {
    /* Primary orange colors */
    --color-primary: #f59e0b !important;
    --color-primary-hover: #d97706 !important;
    --color-primary-light: #fdba74 !important;
    --color-primary-dark: #92400e !important;
    --color-primary-glow: rgba(245, 158, 11, 0.5) !important;

    /* Override all blue theme variables with orange equivalents */
    --shadow-neon-blue: 0 0 5px rgba(245, 158, 11, 0.5), 
                        0 0 10px rgba(245, 158, 11, 0.4), 
                        0 0 15px rgba(245, 158, 11, 0.3) !important;
    
    /* Section header backgrounds */
    --color-bg-header: rgba(245, 158, 11, 0.5) !important;
}

/* Tab styling */
body.theme-historydex .tab-btn.active {
    border-bottom-color: #f59e0b !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

body.theme-historydex .tab-btn:hover {
    border-bottom-color: #d97706 !important;
    color: #fef3c7 !important;
}

/* Logo and glow effects */
body.theme-historydex #logo {
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.5)) !important;
}

/* Section headers */
body.theme-historydex .section-header {
    background-color: rgba(245, 158, 11, 0.5) !important;
}

body.theme-historydex .section-header:hover,
body.theme-historydex .section-header:focus {
    background-color: rgba(245, 158, 11, 0.7) !important;
}

body.theme-historydex .section-title {
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important;
    color: #fef3c7 !important;
}

/* Form controls */
body.theme-historydex input:focus,
body.theme-historydex select:focus,
body.theme-historydex textarea:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important;
}

body.theme-historydex .format-help-btn:hover,
body.theme-historydex .format-help-btn:focus {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
}

body.theme-historydex input:checked + .toggle-slider {
    background-color: #f59e0b !important;
}

body.theme-historydex input:focus + .toggle-slider {
    box-shadow: 0 0 1px #f59e0b !important;
}

/* Control buttons */
body.theme-historydex .control-btn {
    background-color: rgba(245, 158, 11, 0.25) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
}

body.theme-historydex .control-btn:hover,
body.theme-historydex .control-btn:focus {
    background-color: rgba(245, 158, 11, 0.5) !important;
    transform: translateY(-1px) !important;
}

/* Download buttons */
body.theme-historydex .action-button.download-button-blue {
    background-color: #f59e0b !important;
}

body.theme-historydex .action-button.download-button-blue:hover,
body.theme-historydex .action-button.download-button-blue:focus {
    background-color: #d97706 !important;
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4) !important;
}

body.theme-historydex #download-card-sm-btn,
body.theme-historydex #download-card-btn,
body.theme-historydex #download-card-large-btn {
    background-color: #f59e0b !important;
}

body.theme-historydex #download-card-sm-btn:hover,
body.theme-historydex #download-card-btn:hover,
body.theme-historydex #download-card-large-btn:hover {
    background-color: #d97706 !important;
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4) !important;
}

/* Reset button */
body.theme-historydex .reset-btn {
    background-color: #92400e !important;
}

body.theme-historydex .reset-btn:hover,
body.theme-historydex .reset-btn:focus {
    background-color: #d97706 !important;
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4) !important;
}

/* Layer manager */
body.theme-historydex .layer-item.active-layer {
    background-color: rgba(245, 158, 11, 0.3) !important;
    border-left-color: #f59e0b !important;
}

body.theme-historydex .layer-item:hover {
    background-color: rgba(245, 158, 11, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Image drop areas */
body.theme-historydex .img-drop:hover,
body.theme-historydex .img-drop-secondary:hover,
body.theme-historydex .img-drop:focus,
body.theme-historydex .img-drop-secondary:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
}

body.theme-historydex .img-drop.active,
body.theme-historydex .img-drop-secondary.active {
    background-color: rgba(245, 158, 11, 0.2) !important;
    border-color: #fdba74 !important;
}

/* Custom animations for HistoryDex */
@keyframes neonPulseOrange {
    0%, 100% {
        box-shadow: 0 0 5px rgba(245, 158, 11, 0.5), 
                    0 0 10px rgba(245, 158, 11, 0.3), 
                    0 0 15px rgba(245, 158, 11, 0.2);
    }
    50% {
        box-shadow: 0 0 10px rgba(245, 158, 11, 0.6), 
                    0 0 15px rgba(245, 158, 11, 0.4), 
                    0 0 20px rgba(245, 158, 11, 0.3);
    }
}

/* Apply animations */
body.theme-historydex .card-wrapper {
    animation: neonPulseOrange 4s infinite !important;
}

body.theme-historydex .download-button-blue::after {
    animation: neonPulseOrange 4s infinite !important;
}

body.theme-historydex .img-drop::after,
body.theme-historydex .img-drop-secondary::after {
    animation: neonPulseOrange 4s infinite !important;
}

/* Fixes for scrollbars */
body.theme-historydex ::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 5px rgba(245, 158, 11, 0.5) !important;
}

body.theme-historydex ::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.7) !important;
}

body.theme-historydex * {
    scrollbar-color: rgba(245, 158, 11, 0.5) rgba(0, 0, 0, 0.2) !important;
}

/* Apply to specific scrollable areas */
body.theme-historydex .input-container,
body.theme-historydex .layer-manager,
body.theme-historydex .card-preview-upload-area,
body.theme-historydex .layer-list-display {
    scrollbar-color: rgba(245, 158, 11, 0.5) rgba(0, 0, 0, 0.2) !important;
}

/* Fix for top-right icon */
body.theme-historydex .top-right-icon {
    filter: sepia(0.5) !important;
}

/* Fix for modals */
body.theme-historydex .modal-content h4 {
    color: #f59e0b !important;
}

body.theme-historydex .modal-close-btn:hover,
body.theme-historydex .modal-close-btn:focus {
    color: #f59e0b !important;
}

/* Fix for layer actions */
body.theme-historydex .layer-upload .action-button,
body.theme-historydex .layer-actions .action-button:not(.danger-button) {
    background-color: rgba(245, 158, 11, 0.6) !important;
}

body.theme-historydex .layer-upload .action-button:hover,
body.theme-historydex .layer-actions .action-button:not(.danger-button):hover {
    background-color: rgba(245, 158, 11, 0.8) !important;
}

/* Fix for add layer button */
body.theme-historydex .add-new-layer-btn {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border: 1px dashed rgba(245, 158, 11, 0.4) !important;
}

body.theme-historydex .add-new-layer-btn:hover {
    background-color: rgba(245, 158, 11, 0.25) !important;
}

/* Fix for opacity slider */
body.theme-historydex input[type="range"]::-webkit-slider-thumb {
    background: #f59e0b !important;
}

body.theme-historydex input[type="range"]::-moz-range-thumb {
    background: #f59e0b !important;
}