/* ── Pin Mapper Layout ───────────────────────────────────────────────────── */
.board-selector-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.main-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.25rem;
}

@media (max-width: 1200px) { .main-layout { grid-template-columns: 1fr; } }

.input-panel { display: flex; flex-direction: column; gap: 1rem; }

/* ── Board visual ─────────────────────────────────────────────────────────── */
.board-container {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 1.25rem;
    min-height: calc(100vh - 320px);
}

.board-outline {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    position: relative;
    padding: 1rem;
}

.board-label {
    position: absolute;
    top: -10px; left: 16px;
    background: var(--bg-secondary);
    padding: 0.25rem 0.7rem;
    border-radius: 3px;
    font-size: 0.78rem;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.driver-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; }
@media (max-width: 1000px) { .driver-slots { grid-template-columns: repeat(2, 1fr); } }

.driver-slot {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.55rem;
    transition: all 0.15s;
}

.driver-slot.active { border-color: var(--accent-dim); background: rgba(92, 219, 171, 0.03); }
.driver-slot.has-issue { border-color: var(--error); background: rgba(219, 107, 92, 0.05); }
.driver-slot.external-mcu { border-color: var(--info); background: rgba(97, 175, 239, 0.05); }

.slot-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; gap: 0.25rem; }
.slot-id { font-size: 0.72rem; color: var(--text-muted); }
.slot-driver { font-size: 0.68rem; padding: 0.1rem 0.3rem; background: var(--bg-primary); border-radius: 2px; color: var(--warning); }
.slot-current { font-size: 0.65rem; padding: 0.1rem 0.25rem; background: var(--bg-primary); border-radius: 2px; color: var(--text-muted); }
.slot-current.high { color: var(--error); }
.slot-motor { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.15rem; color: var(--text-primary); }
.slot-motor.empty { color: var(--text-muted); font-weight: 400; font-size: 0.8rem; }
.slot-motor-info { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.slot-pins { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem; font-size: 0.7rem; }
.pin-item { display: flex; justify-content: space-between; align-items: center; padding: 0.12rem 0.2rem; background: var(--bg-primary); border-radius: 2px; }
.pin-label { color: var(--text-muted); font-size: 0.65rem; }
.pin-value { color: var(--text-secondary); font-size: 0.72rem; font-family: 'SF Mono', Consolas, monospace; }
.pin-status { width: 6px; height: 6px; border-radius: 50%; margin-left: 3px; flex-shrink: 0; }
.pin-status.ok { background: var(--success); }
.pin-status.warn { background: var(--error); }

/* ── Issues panel ─────────────────────────────────────────────────────────── */
.issues-list { max-height: 250px; overflow-y: auto; }

.issue-item { padding: 0.6rem; background: var(--bg-primary); border-radius: 4px; margin-bottom: 0.4rem; border-left: 2px solid var(--error); font-size: 0.82rem; }
.issue-item.warning { border-left-color: var(--warning); }
.issue-item.info { border-left-color: var(--info); }
.issue-title { font-weight: 600; color: var(--text-primary); margin-bottom: 0.1rem; }
.issue-detail { color: var(--text-secondary); }
.issue-fix { margin-top: 0.3rem; padding: 0.3rem 0.5rem; background: var(--bg-tertiary); border-radius: 3px; font-family: 'SF Mono', Consolas, monospace; font-size: 0.82rem; color: var(--accent); display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.issue-fix code { flex: 1; }

.export-section { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color); }
.export-textarea { width: 100%; height: 150px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.5rem; color: var(--accent); font-family: 'SF Mono', Consolas, monospace; font-size: 0.65rem; resize: vertical; margin-top: 0.5rem; }

/* ── Table view ───────────────────────────────────────────────────────────── */
.table-container { max-height: calc(100vh - 280px); min-height: 400px; overflow-y: auto; }

.comparison-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.comparison-table th { position: sticky; top: 0; background: var(--bg-tertiary); padding: 0.45rem 0.55rem; text-align: left; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border-color); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.3px; }
.comparison-table td { padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--border-color); }
.comparison-table tr:hover td { background: var(--bg-tertiary); }
.comparison-table tr.mismatch-row td { background: rgba(219, 107, 92, 0.06); }
.pin-badge { display: inline-block; padding: 0.15rem 0.4rem; border-radius: 2px; font-size: 0.72rem; font-weight: 500; background: var(--bg-tertiary); color: var(--text-secondary); }
.status-chip { font-size: 0.75rem; font-weight: 500; }
.status-chip.match { color: var(--success); }
.status-chip.mismatch { color: var(--error); }

/* ── Stats ────────────────────────────────────────────────────────────────── */
.stats-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.stat-chip { display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.65rem; background: var(--bg-primary); border-radius: 4px; font-size: 0.8rem; color: var(--text-secondary); }
.stat-chip .value { font-weight: 600; color: var(--text-primary); }
.stat-chip.awd { background: rgba(97, 175, 239, 0.1); color: var(--info); }
.stat-chip.awd .value { color: var(--info); }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 0.25rem; margin-bottom: 0.85rem; }
.tab { padding: 0.4rem 0.85rem; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; border-radius: 4px; transition: all 0.15s; }
.tab:hover { background: var(--bg-tertiary); color: var(--text-secondary); }
.tab.active { background: var(--accent-dim); color: var(--bg-primary); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Detection debug ─────────────────────────────────────────────────────── */
.detection-debug { font-size: 0.82rem; }
.detection-score { display: flex; justify-content: space-between; padding: 0.2rem 0; border-bottom: 1px solid var(--border-color); }
.detection-score:last-child { border-bottom: none; }
.detection-score .board-name { color: var(--text-secondary); }
.detection-score .score { color: var(--text-muted); }
.detection-score.winner { background: var(--accent-glow); margin: 0 -0.5rem; padding: 0.2rem 0.5rem; border-radius: 3px; }
.detection-score.winner .score { color: var(--accent); font-weight: 600; }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.mcu-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border-color); }
.mcu-section-label { font-size: 0.8rem; color: var(--info); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.mcu-section-label::before, .mcu-section-label::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.external-motors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; }

.endstop-section-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0.75rem; margin-bottom: 0.35rem; }
.endstop-list { display: flex; flex-direction: column; gap: 0.25rem; }
.endstop-item { display: flex; justify-content: space-between; padding: 0.4rem 0.6rem; background: var(--bg-primary); border-radius: 3px; font-size: 0.82rem; }
.endstop-item .motor { color: var(--text-primary); }
.endstop-item .type { color: var(--text-muted); }
.endstop-item .type.sensorless { color: var(--info); }
.endstop-item .type.probe { color: var(--accent); }
.endstop-item .type.physical { color: var(--warning); }

.includes-list { display: flex; flex-direction: column; gap: 0.2rem; }
.include-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; background: var(--bg-primary); border-radius: 3px; font-size: 0.8rem; font-family: 'SF Mono', Consolas, monospace; color: var(--text-secondary); }
.include-item::before { content: '→'; color: var(--text-muted); }

.conflict-item { padding: 0.4rem 0.5rem; background: rgba(224, 108, 117, 0.1); border-radius: 4px; margin-bottom: 0.3rem; border-left: 2px solid var(--error); }
.conflict-pin { font-family: 'SF Mono', Consolas, monospace; font-weight: 600; color: var(--error); }
.conflict-uses { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.2rem; }