/* ═══════════════════════════════════════════════════════════
   CHART TYPE SELECTOR + DROPDOWN
   Single source of truth for all Chart Type styling.
   ═══════════════════════════════════════════════════════════ */

/* ── Chart-type button group container ── */
.chart-type-group {
    display: flex;
    align-items: center;
    gap: 2px;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 0;
    flex-shrink: 0;
}

/* ── Chart-type button (base + shared resets) ── */
.chart-type-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ui-muted);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    font-family: inherit;
    padding: 0;
}
.chart-type-btn:hover {
    background: var(--toolbar-hover, var(--ui-hover));
    border-color: var(--ui-panel-border);
    color: var(--ui-fg);
}
.chart-type-btn.active {
    background: transparent;
    color: var(--ui-fg);
}

/* ── Chart-type dropdown ── */
.ct-dropdown {
    background: var(--ui-panel);
    border: 1px solid var(--ui-panel-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    padding: 4px 0;
    min-width: 200px;
    font-size: 12px;
    color: var(--ui-fg);
    user-select: none;
    max-height: 80vh;
    overflow-y: auto;
}

/* ── Dropdown row / item ── */
.ct-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 3px;
    margin: 1px 4px;
}
.ct-row:hover    { background: var(--ui-button-hover); }
.ct-row.ct-active { background: rgba(41,98,255,0.15); color: var(--ui-primary, #2962ff); }

/* ── Dropdown icon ── */
.ct-icon { display:flex; align-items:center; flex-shrink:0; opacity:0.85; }
.ct-row.ct-active .ct-icon { opacity:1; }

/* ── Dropdown label ── */
.ct-label { flex:1; white-space:nowrap; }

/* ── Dropdown separator ── */
.ct-sep {
    height: 1px;
    background: var(--ui-panel-border);
    margin: 4px 10px;
}


/* ==========================================================
   Responsive Overrides
   ========================================================== */

/* Touch device (WCAG touch targets) */
@media (hover: none) and (pointer: coarse) {
    .chart-type-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Large desktop (>=1440px) */
@media (min-width: 1440px) {
    .chart-type-btn {
        min-width: 38px;
    }
}

/* Standard desktop (1200px – 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .chart-type-btn {
        min-width: 32px;
        padding: 0 4px;
    }
}

/* Laptop (1024px – 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .chart-type-btn {
        min-width: 28px;
        padding: 0 4px;
    }
}

/* Tablet (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .chart-type-btn {
        min-width: 28px;
        padding: 0 3px;
        height: 28px;
    }
}

/* Small tablet / large mobile (480px – 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .topbar-group-primary .chart-type-group {
        flex-shrink: 0;
        height: 40px;
        display: flex;
        align-items: center;
    }
    .chart-type-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }
}

/* Small mobile (< 480px) */
@media (max-width: 479px) {
    .chart-type-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        padding: 0 4px;
    }
}