/* ============================================================
   panel.css — Complice Manager v2.0
   Painel lateral de controles ISO (controls-panel)
   ============================================================ */

.controls-panel {
    width: 300px;
    background: var(--panel-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.25s ease;
}

.controls-panel.hidden {
    width: 0;
    overflow: hidden;
}

/* Header do painel */
.panel-header {
    padding: 20px 16px 12px;
    border-bottom: 1px solid var(--border);
}

.panel-header h6 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 12px;
}

/* Campo de busca */
.search-box { position: relative; }

.search-box input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}
.search-box input:focus       { border-color: var(--accent); }
.search-box input::placeholder { color: var(--text-muted); }

.search-box .bi-search {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
}

/* Tabs de domínio */
.domain-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px 0;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
.domain-tabs::-webkit-scrollbar { display: none; }

.domain-tab {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    transition: all 0.15s;
}
.domain-tab:hover  { background: #e2e8f0; color: var(--text-primary); }
.domain-tab.active { background: var(--accent); color: #fff; }

/* Lista de controles */
.controls-list {
    overflow-y: auto;
    flex: 1;
    padding: 8px;
}
.controls-list::-webkit-scrollbar       { width: 4px; }
.controls-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.domain-group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 8px 4px;
}

/* Item de controle */
.control-item {
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 1px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.control-item:hover  { background: #e2e8f0; }
.control-item.active { background: var(--accent-soft); }

.control-code {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--accent);
    background: #dbeafe;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    margin-top: 1px;
    flex-shrink: 0;
}
.control-item.active .control-code { background: var(--accent); color: #fff; }

.control-title { font-size: 12.5px; line-height: 1.4; color: var(--text-primary); }
.control-item.active .control-title { font-weight: 500; }

.no-results {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 40px 16px;
}