/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.6;
  min-height:100vh;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg-surface)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#484f58}

/* ── HEADER ── */
.app-header{
  position:sticky;top:0;z-index:100;
  background:rgba(13,17,23,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-soft);
  padding:0 24px;
  height:56px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.app-logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-title);font-size:20px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-primary);
}
.app-logo .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}
.header-status{
  font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);
  display:flex;align-items:center;gap:8px;
}
.status-badge{
  padding:2px 8px;border-radius:20px;font-size:10px;font-weight:500;
  border:1px solid currentColor;
}
.status-badge.idle{color:var(--text-muted);border-color:var(--text-muted)}
.status-badge.ready{color:var(--success);border-color:var(--success)}
.status-badge.loading{color:var(--accent);border-color:var(--accent)}

/* ── PAGE LAYOUT ── */
.app-body{display:flex;min-height:calc(100vh - 56px)}

.sidebar{
  width:280px;min-width:280px;
  background:var(--bg-surface);
  border-right:1px solid var(--border-soft);
  padding:20px 16px;
  overflow-y:auto;
  position:sticky;top:56px;
  height:calc(100vh - 56px);
  display:flex;flex-direction:column;gap:20px;
}

.main-content{
  flex:1;padding:24px;
  overflow-x:hidden;
  display:flex;flex-direction:column;gap:24px;
}

/* ── SIDEBAR FILTER SECTION ── */
.filter-header{
  font-family:var(--font-title);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);
  padding-bottom:10px;border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:space-between;
}
.filter-group{display:flex;flex-direction:column;gap:6px}
.filter-label{
  font-size:11px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-secondary);
  font-family:var(--font-title);
}
.filter-input,.filter-select{
  width:100%;padding:8px 10px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text-primary);
  font-size:13px;font-family:var(--font-body);
  outline:none;transition:border-color .2s;
  appearance:none;
  -webkit-appearance:none;
}
.filter-input:focus,.filter-select:focus{border-color:var(--accent)}
.filter-select option{background:var(--bg-card);color:var(--text-primary)}
.select-wrapper{position:relative}
.select-wrapper::after{
  content:'▾';position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--text-secondary);pointer-events:none;font-size:12px;
}

.multi-select-container{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);max-height:140px;overflow-y:auto;
}
.multi-select-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;cursor:pointer;
  transition:background .15s;font-size:12px;
}
.multi-select-item:hover{background:rgba(245,158,11,.08)}
.multi-select-item input[type=checkbox]{
  accent-color:var(--accent);cursor:pointer;
}

.btn-clear{
  width:100%;padding:8px;
  background:transparent;border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text-secondary);
  font-size:12px;font-family:var(--font-title);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;
}
.btn-clear:hover{border-color:var(--danger);color:var(--danger)}

.btn-apply{
  width:100%;padding:9px;
  background:var(--accent);border:none;
  border-radius:var(--radius);color:#000;
  font-size:12px;font-family:var(--font-title);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;
}
.btn-apply:hover{background:#fbbf24;box-shadow:0 2px 12px rgba(245,158,11,.4)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .app-body{flex-direction:column}
  .sidebar{
    width:100%;min-width:0;
    height:auto;position:static;
    border-right:none;border-bottom:1px solid var(--border-soft);
  }
  .charts-grid{grid-template-columns:1fr}
  .chart-card.full-width{grid-column:auto}
}

/* ── MISC ── */
.filter-spacer{flex-shrink:0;height:1px;background:var(--border-soft)}