/* UNIFIED-SELECTORS.CSS - LENS277
   =================================
   FINAL AUTHORITY for all color selector styling

   This file MUST be loaded LAST (after all other CSS files)
   Uses CSS variables from config-theme.css

   Applies to ALL 5 selectors:
   1. Solid Tint (#baseTintButtons)
   2. Gradient Tint (#gradientPresets)
   3. Polarized (#polarizedColorButtons)
   4. Transitions (#photochromicColorButtons)
   5. Mirrors (#mirrorColorButtons)

   IMPORTANT: All rules use !important to override previous CSS files
*/

/* ===== BASE COLOR BUTTON GRID ===== */
.color-button-grid {
    /* Layout */
    display: grid !important;
    grid-template-columns: repeat(var(--selector-grid-columns), 1fr) !important;
    gap: var(--selector-gap) !important;
    justify-items: center !important;

    /* Sizing */
    margin: var(--selector-margin) !important;
    max-width: var(--selector-max-width) !important;

    /* Background */
    background: var(--selector-container-bg) !important;
    padding: var(--selector-container-padding) !important;
    border-radius: var(--selector-container-border-radius) !important;

    /* Remove any flex properties from old CSS */
    align-items: initial !important;
    flex-wrap: initial !important;
}

/* ===== INDIVIDUAL COLOR BUTTON ===== */
.color-button {
    /* Layout */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    /* Sizing */
    width: var(--selector-button-width) !important;
    min-height: var(--selector-button-min-height) !important;

    /* Interaction */
    cursor: pointer !important;
    transition: transform 0.2s ease !important;

    /* Remove any inline-flex or other display modes */
    vertical-align: initial !important;
    margin: 0 !important;
}

/* ===== COLOR SWATCH (Circle/Square with color) ===== */
.color-button-swatch {
    /* Sizing */
    width: var(--selector-swatch-size) !important;
    height: var(--selector-swatch-size) !important;
    margin-bottom: var(--selector-swatch-margin) !important;
    flex-shrink: 0 !important;

    /* Styling */
    border: var(--selector-swatch-border) !important;
    border-radius: var(--selector-swatch-border-radius) !important;
    box-shadow: var(--selector-swatch-shadow) !important;

    /* Keep background color from JavaScript/inline styles - DO NOT override! */
    /* background is set via JavaScript for each color */
}

/* ===== COLOR NAME TEXT ===== */
.color-button-name {
    /* Text Styling */
    color: var(--selector-text-color) !important;
    font-size: var(--selector-font-size) !important;
    font-weight: var(--selector-font-weight) !important;
    line-height: var(--selector-line-height) !important;
    text-align: center !important;

    /* Layout */
    min-height: var(--selector-text-min-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;

    /* Remove text-shadow unless specifically needed */
    text-shadow: none !important;
}

/* ===== SELECTED/ACTIVE STATE ===== */
.color-button.selected {
    transform: var(--selector-active-transform) !important;
}

.color-button.selected .color-button-swatch {
    border: var(--selector-active-border) !important;
    box-shadow: var(--selector-active-shadow) !important;
}

/* ===== HOVER STATE ===== */
.color-button:hover {
    transform: var(--selector-hover-transform) !important;
}

.color-button:hover .color-button-swatch {
    border: var(--selector-hover-border) !important;
}

/* ===== SPECIFIC SELECTOR OVERRIDES ===== */

/* 1. TRANSITIONS - White text on dark background */
#photochromicColorButtons .color-button-name {
    color: var(--transitions-text-color) !important;
    text-shadow: var(--transitions-text-shadow) !important;
    font-weight: 600 !important;
}

/* 2. POLARIZED - 3 columns instead of 4 */
#polarizedColorButtons.color-button-grid {
    grid-template-columns: repeat(var(--polarized-grid-columns), 1fr) !important;
    max-width: var(--polarized-max-width) !important;
}

/* Use default white text from config-theme.css */

/* 3. GRADIENT PRESETS - 8 columns for compact display */
#gradientPresets.color-button-grid {
    grid-template-columns: repeat(var(--gradient-presets-grid-columns), 1fr) !important;
    gap: var(--gradient-presets-gap) !important;
}

/* Gradient preset labels - force white text to override inline styles */
#gradientPresets span,
.gradient-preset-item span {
    color: #ffffff !important;
    font-size: 11px !important;
    text-align: center !important;
}

/* 4. SOLID TINT - Use default white text from config-theme.css */

/* 5. MIRRORS - Use default white text from config-theme.css */

/* ===== LABELS FOR SELECTORS ===== */
.color-picker-container label,
.control-group label {
    color: var(--selector-label-color) !important;
    font-size: var(--selector-label-font-size) !important;
    font-weight: var(--selector-label-font-weight) !important;
    margin: var(--selector-label-margin) !important;
    text-align: var(--selector-label-text-align) !important;
}

/* Mirror label specific styling (uppercase) */
label[for="mirrorColor"] {
    text-transform: var(--mirror-label-uppercase) !important;
    letter-spacing: var(--mirror-label-letter-spacing) !important;
}

/* ===== REMOVE WHITE BACKGROUND BOXES ===== */
/* Previous versions had white boxes around selectors - remove them */
.mirror-color-controls,
.photochromic-settings,
.polarized-settings,
.tint-controls,
.gradient-controls {
    background: transparent !important;
}

/* Remove any wrapper white boxes */
.special-controls.mirror-controls > div[style*="background: #fff"],
.special-controls.mirror-controls > div[style*="background:#fff"] {
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
}

/* ===== COLOR WHEEL PICKERS (Solid & Gradient) ===== */
/* These are the circular color inputs with <input type="color"> */

/* Container for color wheel displays */
.color-picker-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: var(--selector-container-padding) !important;
}

/* The visible color wheel display */
#solidTintColorDisplay,
#gradientTopColorDisplay,
#gradientBottomColorDisplay {
    width: 50px !important;
    height: 50px !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    transition: transform 0.2s ease !important;
}

#solidTintColorDisplay:hover,
#gradientTopColorDisplay:hover,
#gradientBottomColorDisplay:hover {
    transform: scale(1.05) !important;
}

/* The hidden actual color input */
#solidTintColorInput,
#gradientTopColorInput,
#gradientBottomColorInput {
    position: absolute !important;
    opacity: 0 !important;
    width: 50px !important;
    height: 50px !important;
    cursor: pointer !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .color-button-grid {
        grid-template-columns: repeat(var(--selector-grid-columns), 1fr) !important;
        gap: var(--selector-gap) !important;
        max-width: 100% !important;
    }

    .color-button {
        width: var(--selector-button-width) !important;
        min-height: var(--selector-button-min-height) !important;
    }

    .color-button-swatch {
        width: var(--selector-swatch-size) !important;
        height: var(--selector-swatch-size) !important;
    }

    .color-button-name {
        font-size: var(--selector-font-size) !important;
    }
}

@media (max-width: 480px) {
    .color-button-grid {
        grid-template-columns: repeat(var(--selector-grid-columns), 1fr) !important;
    }

    /* Gradient presets stay 8 columns even on mobile - just smaller */
    #gradientPresets.color-button-grid {
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 4px !important;
    }
}

/* ===== OVERRIDE ALL PREVIOUS CSS FILES ===== */
/* These rules ensure this file wins over:
   - lens159-color-buttons.css
   - lens163-fixes.css
   - lens164-color-layout.css
   - lens165-grid.css
   - lens166-compact.css
   - Any inline styles in HTML
*/

/* Force grid layout (overrides flex from lens159, lens163, lens164) */
.color-button-grid,
#baseTintButtons,
#gradientPresets,
#polarizedColorButtons,
#photochromicColorButtons,
#mirrorColorButtons {
    display: grid !important;
}

/* Force specific grid columns for each selector */
#baseTintButtons.color-button-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

#polarizedColorButtons.color-button-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

#photochromicColorButtons.color-button-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

#mirrorColorButtons.color-button-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

#gradientPresets.color-button-grid {
    grid-template-columns: repeat(8, 1fr) !important;
}

/* ===== LENS278: TRANSITIONS DEMO BUTTONS - FINAL AUTHORITY ===== */
/*
   These rules override ALL conflicting CSS from:
   - lens163-fixes.css
   - lens165-grid.css
   - lens166-compact.css

   Using ID selectors to match/beat lens165-grid.css specificity
*/

/* Base styles for all demo buttons */
.demo-btn {
    padding: 12px 24px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

/* Non-active buttons - White background */
.demo-btn:not(.active) {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 2px solid #dee2e6 !important;
}

/* Non-active hover state */
.demo-btn:not(.active):hover {
    background: #f5f5f5 !important;
    border-color: #d0d0d0 !important;
}

/* Active button - Gold gradient */
.demo-btn.active {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%) !important;
    color: #1a1a1a !important;
    border: 2px solid #d4af37 !important;
    font-weight: 600 !important;
}

/* ID-specific overrides to beat lens165-grid.css (lines 92-98)
   These have same specificity as lens165 but win because this file loads LAST */
#indoorDemo:not(.active),
#lowLightDemo:not(.active),
#daylightDemo:not(.active),
#brightLightDemo:not(.active) {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 2px solid #dee2e6 !important;
}

#indoorDemo.active,
#lowLightDemo.active,
#daylightDemo.active,
#brightLightDemo.active {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%) !important;
    color: #1a1a1a !important;
    border: 2px solid #d4af37 !important;
    font-weight: 600 !important;
}

/* ===== DEBUG HELPER (Comment out in production) ===== */
/* Uncomment this to see borders around all selectors for debugging */
/*
.color-button-grid {
    border: 2px solid red !important;
}
.color-button {
    border: 1px solid blue !important;
}
.color-button-swatch {
    border: 1px solid green !important;
}
*/