/* ═══════════════════════════════════════════════════════════════════════
   CHART SPECIFIC STYLES
   ═══════════════════════════════════════════════════════════════════════ */

#chartCanvas { 
    cursor: default; 
}

#chartCanvas.drawing {
    cursor: crosshair;
}

/* ═══════════════════════════════════════════════════════════════════════
   FLOATING DOCK PANELS
   ═══════════════════════════════════════════════════════════════════════ */

.dock-panel {
    position: fixed;
    width: 300px;
    max-height: calc(100vh - 16px);
    background: #161822;
    border: 1px solid #1e2030;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
    z-index: 30; /* above the canvas/crosshair (z-10), below toasts/modals (z-50) */
    display: flex;
    flex-direction: column;
}

/* Tailwind's .hidden and .dock-panel are both single-class selectors (equal
   specificity); since chart.css loads after the compiled Tailwind file,
   .dock-panel's display:flex would otherwise win. This rule's higher
   specificity guarantees hidden panels actually stay display:none. */
.dock-panel.hidden {
    display: none;
}

.dock-panel-dragging {
    box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(240,180,41,0.3);
}

.dock-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    background: rgba(15,16,24,0.5);
    border-bottom: 1px solid #1e2030;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.dock-panel-dragging .dock-panel-header {
    cursor: grabbing;
}

.dock-panel-close {
    color: #4a4e6a;
    transition: color 0.15s ease;
    padding: 0.125rem 0.375rem;
    border-radius: 0.375rem;
    line-height: 1;
}

.dock-panel-close:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.05);
}

.dock-panel-body {
    overflow-y: auto;
    flex: 1;
}

/* Rail button active highlight — same colour language as .tool-active in main.css */
.dock-rail-active {
    background: rgba(240,180,41,0.15) !important;
    border-color: #f0b429 !important;
    color: #f0b429 !important;
}

/* ─── Mobile fallback (below lg: 1024px) ──────────────────────────────────
   Floating/draggable behaviour is gated off in JS via matchMedia; this CSS
   makes the same elements render as the old inline-stacked accordion when
   that gate is closed, so no JS positioning is required below 1024px. */
@media (max-width: 1023.98px) {
    .dock-panel {
        position: static;
        width: 100%;
        max-height: none;
        box-shadow: none;
        margin-bottom: 0.75rem;
    }
    .dock-panel-header {
        cursor: default;
        touch-action: auto;
    }
}