/**
 * Unified Slider System
 * Base classes with color variants via CSS variables
 * All slider styles in one place for easy maintenance
 */

/* ============================================
   BASE GAME SLIDER - Standard size (8px track, 20px thumb)
   ============================================ */
.game-slider {
    --slider-color: var(--ui-teal);
    --slider-color-dark: var(--p-3dbdb5);
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    margin: 8px 0;
    background: linear-gradient(90deg, var(--ui-navy-1) 0%, var(--slider-color) 100%);
}
.game-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color), var(--slider-color-dark));
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--p-ffffff);
    transition: transform 0.2s, box-shadow 0.2s;
}
.game-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 3px 6px rgba(0, 0, 0, 0.4);
}
.game-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color), var(--slider-color-dark));
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--p-ffffff);
}

/* ============================================
   LARGE GAME SLIDER - Soul distribution size (16px track, 26px thumb)
   ============================================ */
.game-slider-lg {
    --slider-color: var(--ui-teal);
    --slider-color-light: var(--p-44ffdd);
    --slider-color-dark: var(--p-3dbdb5);
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 16px;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    margin: 8px 0;
    background: linear-gradient(90deg, var(--ui-navy-1) 0%, var(--slider-color) 50%, var(--slider-color-light) 100%);
}
.game-slider-lg::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color-light), var(--slider-color));
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.3);
    border: 3px solid var(--p-ffffff);
    transition: transform 0.2s, box-shadow 0.2s;
}
.game-slider-lg::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 5px 10px rgba(0, 0, 0, 0.4);
}
.game-slider-lg::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color-light), var(--slider-color));
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.3);
    border: 3px solid var(--p-ffffff);
}

/* ============================================
   SLIDER COLOR VARIANTS
   ============================================ */
.slider-teal { --slider-color: var(--ui-teal); --slider-color-light: var(--p-44ffdd); --slider-color-dark: var(--p-3dbdb5); }
.slider-amber { --slider-color: var(--p-f59e0b); --slider-color-light: var(--p-fbbf24); --slider-color-dark: var(--p-d97706); }
.slider-green { --slider-color: var(--ui-success); --slider-color-light: var(--p-4ade80); --slider-color-dark: var(--p-16a34a); }
.slider-red { --slider-color: var(--ui-danger); --slider-color-light: var(--p-ff8e8e); --slider-color-dark: var(--p-e55555); }
.slider-gold { --slider-color: var(--ui-gold); --slider-color-light: var(--p-ffec8b); --slider-color-dark: var(--p-ccac00); }
.slider-purple { --slider-color: var(--ui-purple); --slider-color-light: var(--p-c39bd3); --slider-color-dark: var(--p-7d4692); }
.slider-cyan { --slider-color: var(--p-06b6d4); --slider-color-light: var(--p-22d3ee); --slider-color-dark: var(--p-0891b2); }

/* ============================================
   LEGACY CLASS ALIASES - For backwards compatibility
   ============================================ */

/* Training & City sliders (teal) */
.training-slider, .city-slider {
    --slider-color: var(--ui-teal);
    --slider-color-dark: var(--p-3dbdb5);
}

/* Proficiency & Forge sliders (amber) */
.proficiency-slider, .forge-slider {
    --slider-color: var(--p-f59e0b);
    --slider-color-dark: var(--p-d97706);
}

/* Alchemy slider (green) */
.alchemy-slider {
    --slider-color: var(--ui-success);
    --slider-color-dark: var(--p-16a34a);
}

/* Intensity slider (uses parent color) */
.intensity-slider {
    --slider-color: var(--ui-teal);
    --slider-color-dark: var(--p-3dbdb5);
}

/* Recruit slider (teal) */
.recruit-slider {
    --slider-color: var(--ui-teal);
    --slider-color-dark: var(--p-3dbdb5);
}

/* Allocation slider (teal) */
.allocation-slider {
    --slider-color: var(--ui-teal);
    --slider-color-dark: var(--p-3dbdb5);
}

/* Legacy slider base styles */
.training-slider, .city-slider, .proficiency-slider,
.intensity-slider, .alchemy-slider, .forge-slider,
.recruit-slider, .allocation-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    margin: 8px 0;
    background: linear-gradient(90deg, var(--ui-navy-1) 0%, var(--slider-color) 100%);
}

.training-slider::-webkit-slider-thumb, .city-slider::-webkit-slider-thumb,
.proficiency-slider::-webkit-slider-thumb, .intensity-slider::-webkit-slider-thumb,
.alchemy-slider::-webkit-slider-thumb, .forge-slider::-webkit-slider-thumb,
.recruit-slider::-webkit-slider-thumb, .allocation-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color), var(--slider-color-dark));
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--p-ffffff);
    transition: transform 0.2s, box-shadow 0.2s;
}

.training-slider::-webkit-slider-thumb:hover, .city-slider::-webkit-slider-thumb:hover,
.proficiency-slider::-webkit-slider-thumb:hover, .intensity-slider::-webkit-slider-thumb:hover,
.alchemy-slider::-webkit-slider-thumb:hover, .forge-slider::-webkit-slider-thumb:hover,
.recruit-slider::-webkit-slider-thumb:hover, .allocation-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 3px 6px rgba(0, 0, 0, 0.4);
}

.training-slider::-moz-range-thumb, .city-slider::-moz-range-thumb,
.proficiency-slider::-moz-range-thumb, .intensity-slider::-moz-range-thumb,
.alchemy-slider::-moz-range-thumb, .forge-slider::-moz-range-thumb,
.recruit-slider::-moz-range-thumb, .allocation-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color), var(--slider-color-dark));
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--p-ffffff);
}

/* ============================================
   SOUL SLIDER - Large slider for soul distribution
   ============================================ */
.soul-slider {
    --slider-color: var(--ui-teal);
    --slider-color-light: var(--p-44ffdd);
}
.soul-slider.dantian-slider {
    --slider-color: var(--ui-teal);
    --slider-color-light: var(--p-44ffdd);
}
.soul-slider.luck-slider {
    --slider-color: var(--ui-gold);
    --slider-color-light: var(--p-ffec8b);
}
.soul-slider.talent-slider {
    --slider-color: var(--ui-purple);
    --slider-color-light: var(--p-c39bd3);
}
.soul-slider.body-slider {
    --slider-color: var(--ui-red);
    --slider-color-light: var(--p-f1948a);
}

.soul-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 16px;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    margin: 8px 0;
    background: linear-gradient(90deg, var(--ui-navy-1) 0%, var(--slider-color) 50%, var(--slider-color-light) 100%);
}
.soul-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color-light), var(--slider-color));
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.3);
    border: 3px solid var(--p-ffffff);
    transition: transform 0.2s, box-shadow 0.2s;
}
.soul-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 5px 10px rgba(0, 0, 0, 0.4);
}
.soul-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--slider-color-light), var(--slider-color));
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5), 0 3px 6px rgba(0, 0, 0, 0.3);
    border: 3px solid var(--p-ffffff);
}

/* ============================================
   INTERACTIVE CARD COMPONENTS
   ============================================ */

/* Mission Option Card (hover effect) */
.mission-option-card:hover {
    border-color: var(--ui-teal) !important;
}

/* ============================================
   GAME CHECKBOX - Styled checkbox
   ============================================ */
.game-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ui-teal);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}
.game-checkbox:hover {
    border-color: var(--p-5ee0d8);
    box-shadow: 0 0 8px rgba(78, 205, 196, 0.4);
}
.game-checkbox:checked {
    background: linear-gradient(135deg, var(--ui-teal), var(--p-3dbdb5));
    border-color: var(--ui-teal);
}
.game-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--p-ffffff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.game-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   RATE BUTTONS - Spirit Stone rate selection
   ============================================ */
.rate-btn {
    padding: 4px 8px;
    font-size: 0.75em;
    background: rgba(78, 205, 196, 0.2);
    border: 1px solid var(--ui-teal);
    border-radius: 4px;
    color: var(--ui-teal);
    cursor: pointer;
    transition: all 0.2s ease;
}
.rate-btn:hover {
    background: rgba(78, 205, 196, 0.4);
    box-shadow: 0 0 8px rgba(78, 205, 196, 0.4);
}
.rate-btn.active {
    background: linear-gradient(135deg, var(--ui-teal), var(--p-3dbdb5));
    color: var(--ui-navy-1);
    font-weight: bold;
}
.rate-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.rate-btn-max {
    background: rgba(255, 215, 0, 0.2);
    border-color: var(--ui-gold);
    color: var(--ui-gold);
}
.rate-btn-max:hover {
    background: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
.rate-btn-max.active {
    background: linear-gradient(135deg, var(--ui-gold), var(--p-ccac00));
    color: var(--ui-navy-1);
}

/* ============================================
   SLIDER CONTAINERS & LABELS
   ============================================ */

/* Workshop Intensity Container */
.workshop-intensity {
    margin: 12px 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}
.workshop-intensity label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9em;
}

/* Slider Labels (min/max indicators) */
.intensity-labels, .slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    color: var(--p-888888);
    margin-top: 2px;
}