/* BCR2000 Web Editor — Hardware & Component Styles
   Layout utilities are handled by Tailwind CDN.
   This file contains only hardware-specific visuals and
   stateful transitions that Tailwind can't easily express. */

:root {
    --bcr-body: #1e3050;
    --bcr-body-light: #2a4468;
    --bcr-body-dark: #152238;
    --bcr-strip: #c8ccd0;
    --enc-ring-bg: #1a1a1e;
    --enc-led: #ff2020;
    --enc-knob-center: #444;
    --enc-knob-edge: #1a1a1a;
    --btn-hw: #1e1e22;
    --btn-hw-border: #3a3a40;
    --btn-hw-hover: #2e2e36;
    --accent: #e94560;
    --accent-light: #ff6b81;
    --text-secondary: #99a8b8;
    --text-muted: #5a6a7a;
}

/* ═══════════ GLOBAL FORM DARK THEME ═══════════ */
input,
select,
textarea {
    background: #0f1923;
    color: #e8e8e8;
    border: 1px solid #2a3a4a;
    border-radius: 3px;
    padding: 4px 6px;
    font-size: 12px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #e94560;
    outline: none;
}

input[type="checkbox"] {
    accent-color: #e94560;
}

/* ═══════════ BCR2000 FRAME ═══════════ */
.bcr2000 {
    background: linear-gradient(170deg, var(--bcr-body-light) 0%, var(--bcr-body) 30%, var(--bcr-body-dark) 100%);
    border: 2px solid #3a5070;
    border-radius: 14px;
    padding: 12px;
    max-width: 960px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.device-body {
    display: flex;
    gap: 10px;
}

.main-area {
    flex: 1;
    min-width: 0;
}

/* Push encoder labels */
.push-encoder-labels {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-bottom: 2px;
}

.push-encoder-labels span {
    font-size: 7px;
    color: #7a8a9a;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ═══════════ ENCODER ROW ═══════════ */
.encoder-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.push-enc-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* ═══════════ BUTTON GRID ROW ═══════════ */
.button-grid-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-bottom: 3px;
}

/* ═══════════ STRIP DIVIDER ═══════════ */
.strip-divider {
    background: var(--bcr-strip);
    height: 16px;
    margin: 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 700;
    color: #444;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 2px;
}

/* ═══════════ ENCODER ELEMENT ═══════════ */
.element {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .12s;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 2px;
}

.element:hover {
    border-color: rgba(233, 69, 96, .35);
    background: rgba(233, 69, 96, .04);
}

.element.selected {
    border-color: var(--accent);
    background: rgba(233, 69, 96, .1);
    box-shadow: 0 0 10px rgba(233, 69, 96, .2);
}

.element.configured .element-label {
    color: var(--accent-light);
}

/* Encoder ring */
.enc-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #252525 55%, #181818 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .6), inset 0 0 0 2px #3a3a42;
}

.enc-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2.5px dotted var(--enc-led);
    opacity: .35;
}

.enc-knob {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--enc-knob-center), var(--enc-knob-edge));
    box-shadow: 0 1px 5px rgba(0, 0, 0, .6);
    position: relative;
}

.enc-knob::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    width: 2px;
    height: 8px;
    transform: translateX(-50%);
    background: #999;
    border-radius: 1px;
}

.element-label {
    font-size: 9px;
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.2;
    max-width: 72px;
    overflow: hidden;
    margin-top: 1px;
    word-break: break-all;
}

/* ═══════════ HARDWARE BUTTONS ═══════════ */
.hw-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    background: var(--btn-hw);
    border: 1px solid var(--btn-hw-border);
    border-radius: 3px;
    cursor: pointer;
    transition: all .1s;
}

.hw-button:hover {
    background: var(--btn-hw-hover);
    border-color: #555;
}

.hw-button.selected {
    border-color: var(--accent);
    box-shadow: 0 0 6px rgba(233, 69, 96, .3);
}

.hw-button .element-label {
    font-size: 8px;
    margin: 0;
    color: var(--text-muted);
}

.hw-button.configured .element-label {
    color: var(--accent-light);
}

/* Push button (tiny, under push encoder) */
.push-button-cell {
    width: 100%;
    height: 16px;
    background: var(--btn-hw);
    border: 1px solid var(--btn-hw-border);
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .1s;
    max-width: 64px;
}

.push-button-cell:hover {
    background: var(--btn-hw-hover);
}

.push-button-cell.selected {
    border-color: var(--accent);
}

.push-button-cell .element-label {
    font-size: 7px;
    margin: 0;
}

/* ═══════════ SIDE PANEL ═══════════ */
.side-panel {
    width: 150px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 2px;
}

/* LED Display */
.led-display {
    background: #0a0a0a;
    border: 2px solid #333;
    border-radius: 4px;
    padding: 8px 16px;
    text-align: center;
    width: 100%;
}

.led-text {
    font-family: 'Courier New', monospace;
    font-size: 30px;
    font-weight: bold;
    color: #ff3030;
    text-shadow: 0 0 10px rgba(255, 48, 48, .6);
    letter-spacing: 3px;
}

.panel-label {
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: center;
    width: 100%;
}

/* 2x2 grid for side panel groups */
.side-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 100%;
}

.hw-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    background: var(--btn-hw);
    border: 1px solid var(--btn-hw-border);
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.hw-btn:hover {
    background: var(--btn-hw-hover);
    color: #e8e8e8;
    border-color: #555;
}

.group-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 6px rgba(233, 69, 96, .3);
}

.func-btn:hover {
    border-color: var(--accent);
}

/* Status LEDs */
.status-leds {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 2px;
}

.led-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #500;
    box-shadow: 0 0 2px rgba(255, 0, 0, .2);
}

.led-dot.green {
    background: #050;
    box-shadow: 0 0 2px rgba(0, 255, 0, .2);
}

.led-dot.amber {
    background: #530;
    box-shadow: 0 0 2px rgba(255, 160, 0, .2);
}

.status-led-labels {
    display: flex;
    gap: 5px;
    justify-content: center;
    font-size: 6px;
    color: var(--text-muted);
}

/* Branding */
.branding {
    text-align: center;
    margin: 6px 0;
    user-select: none;
}

.brand-line {
    font-size: 10px;
    letter-spacing: 3px;
    color: #8899aa;
    font-weight: 700;
}

.brand-sub {
    font-size: 8px;
    color: var(--accent);
    letter-spacing: 2px;
    font-weight: 600;
}

.brand-model {
    font-size: 11px;
    letter-spacing: 2px;
    color: #8899aa;
    font-weight: 700;
    margin-top: 2px;
}

/* Preset nav */
.preset-nav-hw {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    justify-content: center;
    margin-top: 2px;
}

.preset-label {
    font-size: 7px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.preset-hw-btn {
    width: 34px;
}

/* ═══════════ EDITOR PANEL TRANSITION ═══════════ */
.editor-panel {
    width: 0;
    background: #141e2e;
    border-left: 1px solid #2a3a4a;
    overflow-y: auto;
    transition: width .2s;
    flex-shrink: 0;
}

.editor-panel.open {
    width: 310px;
}

/* ═══════════ LOG PANEL TRANSITION ═══════════ */
.log-panel {
    height: 130px;
    transition: height .2s;
}

.log-panel.collapsed {
    height: 24px;
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 800px) {
    .device-body {
        flex-direction: column;
    }

    .side-panel {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .side-panel>* {
        flex-shrink: 0;
    }

    .side-grid-2x2 {
        width: auto;
        min-width: 120px;
    }

    .led-display {
        width: auto;
        min-width: 100px;
    }

    .enc-ring {
        width: 50px;
        height: 50px;
    }

    .enc-knob {
        width: 26px;
        height: 26px;
    }

    .enc-knob::after {
        height: 6px;
    }
}

/* ═══════════ SCROLLBAR ═══════════ */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0f1923;
}

::-webkit-scrollbar-thumb {
    background: #2a3a4a;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #445;
}