/* ═══════════════════════════════════════════════════════════════
   KMAN DROPDOWNS — Shared CSS for chart control dropdowns
   Used by: charts.html, chart-slot.html (future), watchlist.html (future)
   ═══════════════════════════════════════════════════════════════ */

/* ── Base dropdown container ── */
.kdd{position:relative;}
.kdd-btn{display:flex;align-items:center;gap:1px;background:none;border:1px solid #2d3748;border-radius:3px;color:#9ca3af;padding:1px 4px;cursor:pointer;font-family:'Rajdhani',sans-serif;font-size:9px;font-weight:600;transition:all .15s;white-space:nowrap;height:20px;}
.kdd-btn:hover{border-color:#4b5563;color:#e5e7eb;}
.kdd-btn.open{border-color:#3b82f6;color:#3b82f6;}
.kdd-btn .kdd-arrow{font-size:7px;color:#6b7280;transition:transform .2s;}
.kdd-btn.open .kdd-arrow{transform:rotate(180deg);color:#3b82f6;}
.kdd-btn.override{color:#f59e0b;border-color:#f59e0b;}

/* ── Dropdown menu panel ── */
.kdd-menu{background:#1a1f2e;border:1px solid #2d3748;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.7);z-index:10200;min-width:120px;max-height:70vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2d3748 transparent;padding:4px 0;}
.kdd-menu.open{display:block;}
.kdd-menu.drop-down{top:calc(100% + 4px);bottom:auto;}
.kdd-menu.drop-up{bottom:calc(100% + 4px);top:auto;}

/* ── Sections & labels ── */
.kdd-section{padding:4px 0;border-bottom:1px solid rgba(44,55,74,.4);}
.kdd-section:last-child{border-bottom:none;}
.kdd-label{padding:3px 12px;font-size:9px;font-weight:700;color:#4b5563;letter-spacing:.5px;text-transform:uppercase;}

/* ── Standard dropdown items (TF, Actions) ── */
.kdd-item{display:flex;align-items:center;gap:8px;padding:5px 12px;cursor:pointer;font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:600;color:#9ca3af;transition:background .1s;}
.kdd-item:hover{background:rgba(59,130,246,.06);color:#e5e7eb;}
.kdd-item.active{color:#3b82f6;}
.kdd-item .kdd-check{font-size:10px;color:#3b82f6;visibility:hidden;margin-left:auto;}
.kdd-item.active .kdd-check{visibility:visible;}
.kdd-item.live-item{color:#10b981;}
.kdd-item.live-item.active{color:#10b981;background:rgba(16,185,129,.1);}

/* ── Chart Type items (purple accent) ── */
.kdd-item.ct-item.active{color:#8b5cf6;}
.kdd-item.ct-item.active .kdd-check{color:#8b5cf6;}
.kdd-item.ct-item:hover{background:rgba(139,92,246,.06);}
.kdd-ct-svg{width:14px;height:14px;flex-shrink:0;}

/* ── Interval grid items ── */
.kdd-iv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:4px;}
.kdd-iv-item{padding:4px 0;text-align:center;border-radius:4px;cursor:pointer;font:700 .78em Rajdhani,sans-serif;color:#9ca3af;transition:all .12s;border:1px solid transparent;}
.kdd-iv-item:hover{color:#fff;background:rgba(59,130,246,.1);border-color:#2d3748;}
.kdd-iv-item.active{color:#3b82f6;background:rgba(59,130,246,.12);border-color:#3b82f6;}
.kdd-iv-item.disabled{color:#374151;pointer-events:none;opacity:.3;}
.kdd-iv-reset{text-align:center;padding:5px;margin-top:3px;border-top:1px solid #1e293b;color:#6b7280;font:600 .72em Rajdhani,sans-serif;cursor:pointer;transition:color .12s;}
.kdd-iv-reset:hover{color:#3b82f6;}

/* ── Indicator dropdown ── */
.kdd-ind-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:#3b82f6;color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:all .2s;pointer-events:none;line-height:1;}
.kdd-ind-badge.visible{opacity:1;transform:scale(1);}
.kdd-ind-row{display:flex;align-items:center;gap:8px;padding:5px 10px;cursor:pointer;transition:background .15s;border-radius:4px;}
.kdd-ind-row:hover{background:rgba(59,130,246,.08);}
.kdd-ind-icon{width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;}
.kdd-ind-icon.overlay{background:rgba(59,130,246,.12);color:#3b82f6;}
.kdd-ind-icon.oscillator{background:rgba(139,92,246,.12);color:#8b5cf6;}
.kdd-ind-icon.volatility{background:rgba(245,158,11,.12);color:#f59e0b;}
.kdd-ind-icon.volume-ind{background:rgba(16,185,129,.12);color:#10b981;}
.kdd-ind-icon.profile-ind{background:rgba(59,130,246,.12);color:#3b82f6;}
.kdd-ind-name{flex:1;font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:600;color:#d1d5db;}
.kdd-ind-toggle{width:28px;height:15px;border-radius:8px;background:#252d3d;border:1px solid #3d4555;cursor:pointer;position:relative;transition:all .2s;flex-shrink:0;}
.kdd-ind-toggle::after{content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:#6b7280;transition:all .2s;}
.kdd-ind-toggle.on{background:rgba(59,130,246,.25);border-color:#3b82f6;}
.kdd-ind-toggle.on::after{left:15px;background:#3b82f6;box-shadow:0 0 4px rgba(59,130,246,.5);}

/* ── Icon buttons (symbol change, refresh, news) ── */
.kdd-icon-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:none;border:1px solid #2d3748;border-radius:3px;color:#6b7280;cursor:pointer;font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:600;transition:all .12s;padding:0;line-height:1;}
.kdd-icon-btn:hover{border-color:#4b5563;color:#e5e7eb;}
.kdd-icon-btn.kdd-icon-news{color:#3b82f6;border-color:rgba(59,130,246,0.3);font-size:9px;}
.kdd-icon-btn.kdd-icon-news:hover{border-color:#3b82f6;background:rgba(59,130,246,0.08);}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}