/* ===========================================
   AXSPA.CSS - axSpA (BASDAI/ASDAS) Styles
   =========================================== */

/* -------------------------------------------
   AXSPA THEME COLORS (Teal/Cyan)
   ------------------------------------------- */
:root {
    --axspa-teal: #0891B2;
    --axspa-teal-dark: #0E7490;
    --axspa-teal-light: rgba(8, 145, 178, 0.1);
    --axspa-teal-border: #22D3EE;
    
    /* Score state colors */
    --axspa-inactive: #059669;
    --axspa-inactive-bg: rgba(5, 150, 105, 0.1);
    --axspa-low: #10B981;
    --axspa-low-bg: rgba(16, 185, 129, 0.1);
    --axspa-high: #D97706;
    --axspa-high-bg: rgba(217, 119, 6, 0.1);
    --axspa-very-high: #DC2626;
    --axspa-very-high-bg: rgba(220, 38, 38, 0.1);
    --axspa-active: #DC2626;
    --axspa-active-bg: rgba(220, 38, 38, 0.1);
}

[data-theme="dark"] {
    --axspa-teal-light: rgba(8, 145, 178, 0.2);
    --axspa-inactive-bg: rgba(5, 150, 105, 0.2);
    --axspa-low-bg: rgba(16, 185, 129, 0.2);
    --axspa-high-bg: rgba(217, 119, 6, 0.2);
    --axspa-very-high-bg: rgba(220, 38, 38, 0.2);
    --axspa-active-bg: rgba(220, 38, 38, 0.2);
}

/* Note: Page theme (data-page="axspa") is defined in variables.css */

/* -------------------------------------------
   CONTAINER
   ------------------------------------------- */
.axspa-container {
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

@media (min-width: 900px) {
    [data-page="axspa"] .page-content {
        max-width: var(--layout-wide);
    }

    .axspa-container {
        max-width: 1400px;
    }
}

.axspa-card-asdas {
    border-top: 3px solid var(--theme-primary);
}

/* -------------------------------------------
   TWO-COLUMN LAYOUT (Desktop)
   ------------------------------------------- */
.axspa-columns {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .axspa-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        align-items: start;
    }
    
    .axspa-card-asdas,
    .axspa-card-basdai {
        margin-bottom: 0;
    }
}

/* -------------------------------------------
   SECTION STYLING
   ------------------------------------------- */
[data-page="axspa"] .section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

[data-page="axspa"] .section-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--axspa-teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

[data-page="axspa"] .section-icon.basdai-only-icon {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
    font-size: 1.5rem;
    font-weight: 600;
}

[data-theme="dark"] [data-page="axspa"] .section-icon.basdai-only-icon {
    background: rgba(156, 163, 175, 0.2);
    color: var(--text-primary);
}

[data-page="axspa"] .section-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

[data-page="axspa"] .section-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

/* -------------------------------------------
   QUESTION BLOCKS
   ------------------------------------------- */
.questions-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.question-block {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.question-block:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.question-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.question-label {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.question-badge {
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.question-badge.shared {
    background: var(--axspa-teal-light);
    color: var(--axspa-teal-dark);
}

.question-badge.basdai-only {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
}

[data-theme="dark"] .question-badge.shared {
    color: var(--axspa-teal-border);
}

[data-theme="dark"] .question-badge.basdai-only {
    background: rgba(156, 163, 175, 0.15);
}

.question-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

/* -------------------------------------------
   SLIDER ROW
   ------------------------------------------- */
.slider-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.anchor {
    font-size: var(--text-xs);
    color: var(--text-muted);
    flex-shrink: 0;
    width: 70px;
}

.anchor-min {
    text-align: right;
}

.anchor-max {
    text-align: left;
}

/* Slider container */
.slider-container {
    position: relative;
    flex: 1;
    height: 44px;
    display: flex;
    align-items: center;
}

.slider-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    pointer-events: none;
}

.slider-fill {
    position: absolute;
    left: 0;
    height: 6px;
    background: var(--axspa-teal);
    border-radius: 3px;
    pointer-events: none;
}

/* Native range input styling */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* Pristine state - muted fill */
.slider[data-pristine="true"] + .slider-track + .slider-fill {
    background: var(--border-color);
}

/* Disabled state */
.slider.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.slider.disabled + .slider-track {
    opacity: 0.4;
}

.slider.disabled + .slider-track + .slider-fill {
    opacity: 0.5;
}

/* Thumb styling - Webkit */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--axspa-teal);
    box-shadow: var(--shadow-md);
    cursor: grab;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
}

.slider[data-pristine="true"]::-webkit-slider-thumb {
    border-color: var(--border-color);
}

.slider.disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

/* Thumb styling - Firefox */
.slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--axspa-teal);
    box-shadow: var(--shadow-md);
    cursor: grab;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.slider::-moz-range-thumb:active {
    cursor: grabbing;
}

.slider[data-pristine="true"]::-moz-range-thumb {
    border-color: var(--border-color);
}

/* Track styling - Firefox */
.slider::-moz-range-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

/* -------------------------------------------
   VALUE INPUT ROW
   ------------------------------------------- */
.value-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.value-input {
    width: 60px;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-lg);
    font-weight: 600;
    font-family: var(--font-mono);
    text-align: center;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.value-input:focus {
    outline: none;
    border-color: var(--axspa-teal);
    box-shadow: 0 0 0 3px var(--axspa-teal-light);
}

.value-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.value-row.focused .value-input {
    border-color: var(--axspa-teal);
    background: var(--bg-elevated);
}

.value-max {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
}

/* -------------------------------------------
   CRP INPUT
   ------------------------------------------- */
.crp-input-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.crp-label {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.crp-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.crp-input {
    width: 80px;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-lg);
    font-weight: 600;
    font-family: var(--font-mono);
    text-align: center;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.crp-input:focus {
    outline: none;
    border-color: var(--axspa-teal);
    box-shadow: 0 0 0 3px var(--axspa-teal-light);
}

.crp-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.crp-unit {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
}

/* -------------------------------------------
   ACTIONS (RESTART BUTTON)
   Note: .axspa-actions base styles moved to components.css
   ------------------------------------------- */

@media (min-width: 900px) {
    .axspa-actions .btn {
        flex: none;
        max-width: none;
    }
}

/* -------------------------------------------
   DESKTOP: STICKY HEADER BAR (900px+)
   Uses shared .calc-sticky-header base from components.css
   ------------------------------------------- */
@media (min-width: 900px) {
    .axspa-header-scores {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .axspa-header-score {
        display: flex;
        align-items: baseline;
        gap: 0.375rem;
        padding: 0.5rem 0.875rem;
        border-radius: var(--radius-md);
        background: var(--bg-primary);
    }
    
    .axspa-header-score-label {
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }
    
    .axspa-header-score-value {
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
        font-family: var(--font-mono);
        color: var(--text-muted);
    }    
    .axspa-header-score-value.has-value {
        color: var(--text-primary);
    }
    
    /* ASDAS states */
    .axspa-header-score.asdas.inactive .axspa-header-score-value {
        color: var(--axspa-inactive);
    }
    .axspa-header-score.asdas.low .axspa-header-score-value {
        color: var(--axspa-low);
    }
    .axspa-header-score.asdas.high .axspa-header-score-value {
        color: var(--axspa-high);
    }
    .axspa-header-score.asdas.very-high .axspa-header-score-value {
        color: var(--axspa-very-high);
    }
    
    /* BASDAI states */
    .axspa-header-score.basdai.low .axspa-header-score-value {
        color: var(--axspa-low);
    }
    .axspa-header-score.basdai.active .axspa-header-score-value {
        color: var(--axspa-active);
    }
}

/* -------------------------------------------
   RESPONSIVE ADJUSTMENTS
   ------------------------------------------- */
@media (max-width: 500px) {
    .anchor {
        width: 55px;
        font-size: 0.75rem; /* WCAG AAA: was 0.6875rem (11px), now 12px minimum */
    }
    
    .slider-row {
        gap: 0.5rem;
    }
}

/* -------------------------------------------
   DARK MODE ADJUSTMENTS
   ------------------------------------------- */
[data-theme="dark"] .slider-track {
    background: var(--bg-primary);
}

[data-theme="dark"] .slider::-webkit-slider-thumb {
    background: var(--bg-elevated);
}

[data-theme="dark"] .slider::-moz-range-thumb {
    background: var(--bg-elevated);
}

[data-theme="dark"] .value-input,
[data-theme="dark"] .crp-input {
    background: var(--bg-elevated);
}