/* Dashboard Themes - v20241219-subtle3 */

/* ==================== THEME VARIABLES ==================== */
:root {
    /* Default theme values - no colors, original neutral look */
    --theme-bg-gradient: none;
    --theme-accent-color: #8200DB;
    --theme-overlay-opacity: 0;
    --theme-pattern-opacity: 0;
}

/* ==================== THEME DEFINITIONS ==================== */
/* All gradients use low opacity (0.3-0.4) for subtle backgrounds that don't interfere with content */

/* Default - Original neutral look, no theme colors */
[data-theme="default"] {
    --theme-bg-gradient: none;
    --theme-accent-color: #8200DB;
    --theme-overlay-opacity: 0;
    --theme-pattern-opacity: 0;
}

/* Surfing Vibes - Ocean sunset with waves (from Figma spec) */
[data-theme="surfing"] {
    --theme-bg-gradient: linear-gradient(135deg, rgba(0, 119, 182, 0.4) 0%, rgba(0, 180, 216, 0.4) 50%, rgba(255, 152, 0, 0.3) 100%);
    --theme-accent-color: #00B4D8;
    --theme-overlay-opacity: 0.6;
    --theme-pattern-opacity: 0.1;
}

/* Coffee House - Warm browns */
[data-theme="coffee"] {
    --theme-bg-gradient: linear-gradient(135deg, rgba(74, 44, 42, 0.35) 0%, rgba(111, 78, 55, 0.35) 40%, rgba(166, 123, 91, 0.3) 100%);
    --theme-accent-color: #6F4E37;
    --theme-overlay-opacity: 0.6;
    --theme-pattern-opacity: 0;
}

/* Fitness Energy - Bold reds */
[data-theme="fitness"] {
    --theme-bg-gradient: linear-gradient(135deg, rgba(220, 38, 38, 0.35) 0%, rgba(244, 63, 94, 0.35) 50%, rgba(251, 113, 133, 0.3) 100%);
    --theme-accent-color: #DC2626;
    --theme-overlay-opacity: 0.6;
    --theme-pattern-opacity: 0;
}

/* Salon Elegance - Purple-blue sophisticated */
[data-theme="salon"] {
    --theme-bg-gradient: linear-gradient(135deg, rgba(124, 58, 237, 0.35) 0%, rgba(167, 139, 250, 0.35) 40%, rgba(196, 181, 253, 0.3) 100%);
    --theme-accent-color: #7C3AED;
    --theme-overlay-opacity: 0.6;
    --theme-pattern-opacity: 0;
}

/* Restaurant - Pink to red appetizing */
[data-theme="restaurant"] {
    --theme-bg-gradient: linear-gradient(135deg, rgba(190, 24, 93, 0.35) 0%, rgba(236, 72, 153, 0.35) 50%, rgba(244, 114, 182, 0.3) 100%);
    --theme-accent-color: #BE185D;
    --theme-overlay-opacity: 0.6;
    --theme-pattern-opacity: 0;
}

/* ==================== THEME BACKGROUND LAYER ==================== */
.ai-main-content {
    position: relative;
}

/* Ensure header stays white/neutral - no theme colors */
.ai-top-header {
    position: relative;
    z-index: 10;
    background: white !important;
}

/* Theme gradient starts BELOW the header (72px) */
.ai-main-content::before {
    content: '';
    position: absolute;
    top: 72px; /* Start below header */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--theme-bg-gradient);
    z-index: 0;
    pointer-events: none;
}

/* Pattern layer (for themes with patterns) */
.ai-main-content::after {
    content: '';
    position: absolute;
    top: 72px; /* Start below header */
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/patterns/waves.svg');
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 100% auto;
    opacity: var(--theme-pattern-opacity);
    z-index: 1;
    pointer-events: none;
}

/* White overlay for readability */
.ai-dashboard-home,
.ai-staff-management,
.ai-page-container {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, var(--theme-overlay-opacity));
    border-radius: 0;
    min-height: calc(100vh - 72px);
}

/* ==================== THEME SELECTOR ==================== */
.theme-selector-container {
    position: relative;
}

.theme-selector-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.theme-selector-btn:hover {
    background: var(--ai-bg-main);
}

.theme-selector-btn svg {
    width: 20px;
    height: 20px;
    color: var(--ai-text-medium);
}

/* Theme dropdown panel */
.theme-selector-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: white;
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.theme-selector-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.theme-selector-header {
    padding: 16px;
    border-bottom: 1px solid var(--ai-border);
}

.theme-selector-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ai-text-dark);
    margin: 0 0 4px 0;
}

.theme-selector-subtitle {
    font-size: 13px;
    color: var(--ai-text-muted);
    margin: 0;
}

.theme-selector-grid {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
}

.theme-option:hover {
    background: var(--ai-bg-main);
}

.theme-option.active {
    background: #F0F9FF;
    border-color: #0EA5E9;
}

.theme-option-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* Theme icon backgrounds */
.theme-option[data-theme="default"] .theme-option-icon {
    background: linear-gradient(135deg, #F3E8FF 0%, #DBEAFE 100%);
}
.theme-option[data-theme="surfing"] .theme-option-icon {
    background: linear-gradient(135deg, #CFFAFE 0%, #FEF3C7 100%);
}
.theme-option[data-theme="coffee"] .theme-option-icon {
    background: linear-gradient(135deg, #FED7AA 0%, #D6BCAB 100%);
}
.theme-option[data-theme="fitness"] .theme-option-icon {
    background: linear-gradient(135deg, #FECACA 0%, #FBCFE8 100%);
}
.theme-option[data-theme="salon"] .theme-option-icon {
    background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
}
.theme-option[data-theme="restaurant"] .theme-option-icon {
    background: linear-gradient(135deg, #FBCFE8 0%, #FECACA 100%);
}

.theme-option-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ai-text-dark);
}

.theme-option-check {
    margin-left: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0EA5E9;
    display: none;
    align-items: center;
    justify-content: center;
}

.theme-option.active .theme-option-check {
    display: flex;
}

.theme-option-check svg {
    width: 12px;
    height: 12px;
    color: white;
}

/* Footer note */
.theme-selector-footer {
    padding: 12px 16px;
    background: var(--ai-bg-main);
    border-top: 1px solid var(--ai-border);
}

.theme-selector-footer p {
    font-size: 12px;
    color: var(--ai-text-muted);
    margin: 0;
}

/* ==================== VISUAL INDICATOR ==================== */
.theme-debug-indicator {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: #0f0;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-family: monospace;
    z-index: 9999;
    display: none;
}

body.debug-mode .theme-debug-indicator {
    display: block;
}