/* SUS360 Painel Cirurgias v0.8.0 — dropdowns */

        /* ═══════ COMPETENCIA DROPDOWN ═══════ */
        .comp-dropdown {
            position: relative;
        }
        .comp-trigger {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 5px 10px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
        .comp-trigger-ano { width:160px; }
        .comp-trigger-comp { width:150px; }
        .comp-trigger:hover { border-color: var(--sus-blue); }
        .comp-trigger i { font-size: 9px; opacity: 0.6; }
        .comp-panel {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.18);
            padding: 10px;
            z-index: 1200;
            min-width: 220px;
        }
        .comp-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4px;
        }
        .comp-chip {
            padding: 4px 6px;
            font-size: 10px;
            font-weight: 600;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            text-align: center;
            cursor: pointer;
            transition: all 0.15s;
            background: transparent;
            color: var(--text-muted);
        }
        .comp-chip:hover { border-color: var(--sus-blue); color: var(--sus-blue); }
        .comp-chip.selected {
            background: var(--sus-blue);
            border-color: var(--sus-blue);
            color: white;
        }
        .comp-clear {
            display: block;
            margin-top: 6px;
            text-align: center;
            font-size: 10px;
            color: var(--text-muted);
            cursor: pointer;
            border: none;
            background: none;
            padding: 3px;
        }
        .comp-clear:hover { color: var(--color-danger); }

        /* ═══════ SEARCHABLE DROPDOWN — UF & Municipio ═══════ */
        .sd { position:relative; }
        .sd-trigger {
            /* trigger font */
            display:flex; align-items:center; gap:8px; padding:7px 30px 7px 12px;
            border:1px solid var(--border-color); border-radius:var(--radius-full);
            background:var(--bg-body); color:var(--text-primary); font-size:11px; font-weight:500;
            cursor:pointer; white-space:nowrap; transition:border-color 0.2s, box-shadow 0.2s;
            position:relative; min-height:36px; width:160px; overflow:hidden; text-overflow:ellipsis;
        }
        .sd-trigger.sd-uf-trigger { width:220px; }
        .sd-trigger.sd-mun-trigger { width:220px; }
        .sd-trigger::after {
            content:''; position:absolute; right:0; top:0; bottom:0; width:30px;
            background:linear-gradient(to right, transparent 0%, var(--bg-body) 40%);
            pointer-events:none;
        }
        .sd-trigger::before {
            content:''; position:absolute; right:11px; top:50%; transform:translateY(-50%);
            border-left:4px solid transparent; border-right:4px solid transparent;
            border-top:5px solid var(--text-muted); pointer-events:none; z-index:1;
        }
        .sd-trigger:hover { border-color:color-mix(in srgb, var(--sus-blue) 40%, var(--border-color)); }
        .sd-trigger.has-value { border-color:var(--sus-blue); background:rgba(0,102,204,0.06); font-weight:600; }
        .sd-trigger.has-value::after { background:linear-gradient(to right, transparent 0%, rgba(0,102,204,0.06) 40%); }
        .sd-trigger-flag { width:20px; height:14px; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,0.1); flex-shrink:0; }
        .sd-trigger-ph { color:var(--text-muted); font-weight:400; }
        .sd-panel {
            position:absolute; top:calc(100% + 4px); left:0; min-width:100%; width:max-content;
            max-width:380px; background:var(--bg-card); border:1px solid var(--border-color);
            border-radius:var(--radius-lg); box-shadow:0 12px 40px rgba(0,0,0,0.18);
            z-index:9999; overflow:hidden; animation:sdIn 0.15s ease;
        }
        @keyframes sdIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
        .sd-search { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border-color); }
        .sd-search i { color:var(--text-muted); font-size:14px; flex-shrink:0; }
        .sd-search input { flex:1; border:none; background:none; outline:none; font-size:13px; color:var(--text-primary); min-width:0; }
        .sd-search input::placeholder { color:var(--text-muted); }
        .sd-list { max-height:260px; overflow-y:auto; padding:4px; }
        .sd-list::-webkit-scrollbar { width:5px; }
        .sd-list::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:3px; }
        .sd-item {
            display:flex; align-items:center; gap:10px; padding:8px 10px;
            border-radius:var(--radius-md); cursor:pointer; transition:background 0.12s;
            font-size:13px; color:var(--text-primary);
        }
        .sd-item:hover { background:rgba(0,102,204,0.08); }
        .sd-item-active { background:rgba(0,102,204,0.12) !important; border-left:3px solid var(--sus-blue); font-weight:700; }
        .sd-item-active .sd-item-tag { color:var(--sus-blue); font-weight:700; }
        .sd-item-flag { width:22px; height:16px; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,0.08); flex-shrink:0; }
        .sd-item-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .sd-item-text strong { font-weight:600; }
        .sd-item-tag { font-size:10px; font-weight:600; color:var(--text-muted); background:var(--bg-body); padding:2px 6px; border-radius:var(--radius-sm); white-space:nowrap; }
        .sd-empty { padding:16px; text-align:center; color:var(--text-muted); font-size:12px; }
        .sd-uf-w { min-width:260px; }
        .sd-mun-w { min-width:320px; }
        .sd-trigger.sd-cnes-trigger { width:260px; }
        .sd-cnes-w { min-width:340px; }

        /* ═══════ MULTI-SELECT — checkbox + actions bar ═══════ */
        .sd-check {
            display:inline-flex; align-items:center; justify-content:center;
            width:16px; height:16px; flex-shrink:0;
            color:var(--text-muted); font-size:14px; transition:color 0.15s, opacity 0.15s;
            opacity:0.35;
        }
        .sd-item-active .sd-check { color:var(--sus-blue); opacity:1; }
        .sd-item:hover .sd-check { opacity:0.7; }
        .sd-item-active:hover .sd-check { opacity:1; }

        .sd-actions {
            display:flex; align-items:center; gap:4px;
            padding:6px 12px; border-bottom:1px solid var(--border-color);
        }
        .sd-action-btn {
            font-size:11px; font-weight:500; color:var(--sus-blue);
            background:none; border:1px solid transparent; cursor:pointer;
            padding:3px 8px; border-radius:6px; transition:all 0.15s;
            white-space:nowrap;
        }
        .sd-action-btn:hover { background:rgba(0,102,204,0.08); border-color:rgba(0,102,204,0.15); }
        .sd-action-btn.sd-action-clear { color:var(--text-muted); }
        .sd-action-btn.sd-action-clear:hover { color:var(--color-danger, #ef4444); background:rgba(239,68,68,0.06); border-color:rgba(239,68,68,0.12); }

        /* Active item in multi-select: softer highlight (no left border) */
        .sd-item.sd-item-active:has(.sd-check) {
            background:rgba(0,102,204,0.08) !important;
            border-left:none;
            font-weight:500;
        }

/* ═══════ SELECTED ITEMS ═══════ */
.sd-actions-sep { width: 1px; height: 14px; background: var(--border-color); flex-shrink: 0; }
.sd-item-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex-shrink: 0; margin-left: auto;
    border: none; background: rgba(239,68,68,0.08); cursor: pointer;
    color: #ef4444; font-size: 11px; border-radius: 6px; padding: 0;
    transition: all 0.12s; opacity: 0.7;
}
.sd-item-remove:hover { opacity: 1; background: rgba(239,68,68,0.15); }