/* ═══════════════════════════════════════
   PANELS — Control Panel + Panel Card + Header + Content
   ═══════════════════════════════════════ */

/* ─── CONTROL PANEL ─── */
#controlPanel.control-panel {
    overflow: hidden !important; display: flex !important; flex-direction: column !important;
    position: fixed !important; top: 50px; left: 60px;
    width: 368px; max-height: calc(100vh - 140px);
    z-index: 400;
    transform: translateX(-200%); opacity: 0;
    transition: transform .38s var(--ease-smooth), opacity .28s var(--ease-out);
    pointer-events: none;
}

#controlPanel.control-panel.active {
    transform: translateX(0); opacity: 1; pointer-events: auto;
}

#controlPanel .panel-card:first-child { flex: 0 0 auto !important; height: auto !important; margin-bottom: 10px !important; }
#controlPanel .panel-card:last-child { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; height: auto !important; }
#controlPanel .panel-card:last-child .panel-content { flex: 1 !important; overflow-y: auto !important; max-height: none !important; padding-bottom: 40px !important; }

/* ─── PANEL CARD ─── */
.panel-card {
    display: flex; flex-direction: column; max-height: 80vh;
    background: var(--glass-bg);
    backdrop-filter: blur(32px) saturate(1.4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color .25s var(--ease-out);
}

.panel-card:hover { border-color: var(--border-strong); }

#dashboardPanel .panel-card { max-height: calc(100vh - 150px); overflow: hidden; display: flex; flex-direction: column; }
#dashboardPanel .panel-header { cursor: grab; user-select: none; }
#analisePanel .panel-card {
    max-height: calc(100vh - 130px) !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important; height: 100% !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background: linear-gradient(150deg, rgba(6,14,26,0.98) 0%, rgba(3,8,16,0.99) 100%) !important;
    border: 1px solid rgba(56,189,248,0.12) !important;
    border-top-color: rgba(56,189,248,0.38) !important;
    box-shadow: 0 40px 100px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.03), inset 0 1px 0 rgba(56,189,248,0.07) !important;
    border-radius: var(--radius-xl) !important;
}
/* Override global blue panel-header/title tints for analise */
#analisePanel .panel-header {
    background: rgba(56,189,248,0.025) !important;
    border-bottom: 1px solid rgba(56,189,248,0.07) !important;
}
#analisePanel .panel-header::after { display: none !important; }
#analisePanel .panel-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
    color: rgba(255,255,255,0.92) !important;
}
#analisePanel .panel-subtitle {
    color: rgba(56,189,248,0.55) !important;
    -webkit-text-fill-color: rgba(56,189,248,0.55) !important;
}
#dashboardPanel .panel-header:active { cursor: grabbing; }
#dashboardPanel .panel-card > div[style*="flex:1"] { overflow-y: auto; }
#dashboardPanel .panel-card > div[style*="flex:1"]::-webkit-scrollbar { width: 3px; }
#dashboardPanel .panel-card > div[style*="flex:1"]::-webkit-scrollbar-track { background: transparent; }
#dashboardPanel .panel-card > div[style*="flex:1"]::-webkit-scrollbar-thumb { background: rgba(56,189,248,0.25); border-radius: 3px; }

/* ─── PANEL HEADER ─── */
.panel-header {
    padding: 12px 16px;
    background: rgba(56,189,248,0.03);
    border-bottom: 1px solid var(--border-subtle);
    position: relative; flex-shrink: 0;
}

.panel-header::after {
    content: ''; position: absolute; bottom: 0; left: 16px; right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,0.4), transparent);
    opacity: 0.7;
}

.panel-title {
    font-size: 11px; font-weight: 700; margin-bottom: 2px;
    letter-spacing: 0.06em; text-transform: uppercase;
    background: linear-gradient(120deg, var(--accent-sky), var(--accent-blue));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.panel-subtitle { font-size: 10px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }

/* ─── PANEL CONTENT ─── */
.panel-content {
    flex: 1; padding: 12px; padding-bottom: 20px;
    max-height: 75vh !important; overflow-y: auto !important; overflow-x: hidden;
}

.panel-content::-webkit-scrollbar { width: 3px !important; display: block !important; }
.panel-content::-webkit-scrollbar-track { background: transparent !important; }
.panel-content::-webkit-scrollbar-thumb { background: rgba(56,189,248,0.28) !important; border-radius: 3px !important; min-height: 40px !important; }
.panel-content::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,0.55) !important; }