/* Controller Interface — clean dark medical theme */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    min-height: 100vh;
    background: #0a0e1a;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #e0e0e0;
    overflow-x: hidden;
    --track-len: clamp(140px, 18vw, 220px);
}

#controller {
    max-width: 1060px;
    margin: 0 auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Header --- */

.header {
    background: linear-gradient(135deg, #1565c0, #0d47a1);
    border-radius: 10px;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

.connection-status {
    font-size: 11px;
    padding: 4px 14px;
    border-radius: 12px;
    background: #c62828;
    color: #fff;
    font-weight: 600;
}

.connection-status.connected {
    background: #2e7d32;
}

/* --- Section --- */

.section {
    background: #111827;
    border: 1px solid #1c2538;
    border-radius: 10px;
    padding: 14px;
}

.section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    margin-bottom: 10px;
}

/* --- Rhythm Grid --- */

.rhythm-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
}

.rhythm-btn {
    background: #1a2236;
    border: 1px solid #263050;
    border-radius: 8px;
    padding: 6px 3px;
    color: #8899aa;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.2;
}

.rhythm-btn:hover {
    background: #1e2a44;
    border-color: #3b6db5;
    color: #b0c0d0;
}

.rhythm-btn.active {
    background: #1565c0;
    border-color: #42a5f5;
    color: #fff;
    font-weight: 700;
}

.rhythm-btn .rhythm-abbr {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.rhythm-btn .rhythm-name {
    display: block;
    font-size: 8px;
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* --- Bottom Row (Sliders + Controls) --- */

.bottom-row {
    display: flex;
    gap: 8px;
}

.sliders-row {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

/* --- Controls Panel (right side) --- */

.controls-panel {
    width: 170px;
    flex-shrink: 0;
    background: #111827;
    border: 1px solid #1c2538;
    border-radius: 10px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.sync-btn, .pacing-btn {
    background: #1a2236;
    border: 1px solid #263050;
    border-radius: 8px;
    padding: 12px 0;
    color: #8899aa;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 1.5px;
    text-align: center;
}

.sync-btn:hover, .pacing-btn:hover {
    border-color: #3b6db5;
    color: #b0c0d0;
}

.sync-btn.active {
    background: #c2410c;
    border-color: #ea580c;
    color: #fff;
}

.pacing-btn.active {
    background: #1565c0;
    border-color: #42a5f5;
    color: #fff;
}

/* --- Pacing Controls --- */

.pacing-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pacing-param {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.pacing-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pacing-value {
    font-size: 14px;
    font-weight: 700;
    color: #42a5f5;
    min-width: 28px;
    text-align: right;
}

.pacing-unit {
    font-size: 9px;
    color: #475569;
}

.hslider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 4px;
    background: #2a3555;
    border-radius: 2px;
    cursor: pointer;
    flex: 1;
}

.hslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #42a5f5;
    border: 2px solid #fff;
    cursor: pointer;
}

.hslider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #42a5f5;
    border: 2px solid #fff;
    cursor: pointer;
}

/* --- Slider Columns --- */

.slider-col {
    flex: 1;
    min-width: 0;
    background: #111827;
    border: 1px solid #1c2538;
    border-radius: 10px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.slider-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.slider-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.slider-wrap {
    height: calc(var(--track-len) + 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.slider-range {
    font-size: 8px;
    color: #475569;
    text-align: center;
}

/* --- Slider Scale --- */

.slider-scale {
    position: relative;
    height: var(--track-len);
    width: 22px;
    flex-shrink: 0;
}

.scale-tick {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    font-size: 8px;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}

/* --- Vertical Slider Styling --- */

/*
 * Uses writing-mode for native vertical rendering.
 * No CSS rotation = no axis-swapped margin bugs.
 */
.vslider {
    -webkit-appearance: none;
    appearance: none;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 24px;
    height: var(--track-len);
    background: transparent;
    cursor: pointer;
}

/* Track */
.vslider::-webkit-slider-runnable-track {
    width: 6px;
    height: 100%;
    background: #2a3555;
    border-radius: 3px;
}

.vslider::-moz-range-track {
    width: 6px;
    height: 100%;
    background: #2a3555;
    border-radius: 3px;
}

/* Thumb — margin-left centers it on the 6px track */
.vslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    margin-left: -8px;
}

.vslider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
}

/* Slider colors per parameter */
.ecg-slider::-webkit-slider-thumb { background: #00dd38; }
.ecg-slider::-moz-range-thumb { background: #00dd38; }

.bp-slider::-webkit-slider-thumb { background: #ee3333; }
.bp-slider::-moz-range-thumb { background: #ee3333; }

.spo2-slider::-webkit-slider-thumb { background: #00bbdd; }
.spo2-slider::-moz-range-thumb { background: #00bbdd; }

.capno-slider::-webkit-slider-thumb { background: #ddcc00; }
.capno-slider::-moz-range-thumb { background: #ddcc00; }

/* --- Color classes --- */

.ecg-color { color: #00ff41; }
.spo2-color { color: #00d4ff; }
.capno-color { color: #ffdd00; }
.bp-color { color: #ff3333; }

/* --- Action Buttons --- */

.action-btn {
    padding: 11px 0;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-top: auto;
}

.reset-btn {
    background: #c62828;
    color: #fff;
}

.reset-btn:hover {
    background: #e53935;
}

/* --- Responsive --- */

@media (max-width: 500px) {
    .rhythm-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .slider-value {
        font-size: 22px;
    }
}