/* Layout & Shell – Refined spacing system */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:14px;}
body{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text-primary);line-height:1.5;overflow:hidden;}
#app{display:flex;height:100vh;overflow:hidden;}

/* ── Sidebar ── */
.sidebar{width:var(--nav-width);background:var(--nav-bg);display:flex;flex-direction:column;flex-shrink:0;z-index:100;}
.sidebar-brand{padding:14px 16px 12px;border-bottom:1px solid rgba(255,255,255,0.08);}
.brand-mark{display:flex;align-items:center;gap:10px;}
.brand-icon{width:30px;height:30px;background:linear-gradient(135deg,#60A5FA,#2563EB);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-icon svg{width:16px;height:16px;}
.brand-text{display:flex;flex-direction:column;min-width:0;}
.brand-name{font-size:11px;font-weight:700;color:#FFF;letter-spacing:.02em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-sub{font-size:9px;color:var(--nav-text);letter-spacing:.04em;text-transform:uppercase;margin-top:1px;}
.sidebar-alert-badge{margin:10px 10px 4px;background:rgba(185,28,28,.15);border:1px solid rgba(185,28,28,.35);border-radius:var(--r-md);padding:6px 10px;}
.alert-badge-label{font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#FCA5A5;margin-bottom:2px;}
.alert-badge-value{font-size:11px;font-weight:700;color:#FEE2E2;display:flex;align-items:center;gap:6px;}
.alert-dot{width:6px;height:6px;border-radius:50%;background:#F87171;animation:pulse 2s infinite;flex-shrink:0;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.6;transform:scale(1.2);}}
.sidebar-nav{flex:1;overflow-y:auto;padding:6px 0;}
.nav-section-label{font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(168,187,207,.5);padding:10px 16px 3px;}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 16px;cursor:pointer;transition:background var(--transition);position:relative;border:none;background:none;width:100%;text-align:left;color:var(--nav-text);}
.nav-item:hover{background:var(--nav-hover-bg);color:#D1DFF0;}
.nav-item.active{background:rgba(96,165,250,.12);color:var(--nav-active);}
.nav-item.active::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--nav-indicator);border-radius:0 2px 2px 0;}
.nav-item-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.8;}
.nav-item.active .nav-item-icon{opacity:1;}
.nav-item-label{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-item-badge{margin-left:auto;background:var(--critical);color:#fff;font-size:8.5px;font-weight:700;padding:1px 5px;border-radius:8px;flex-shrink:0;}
.sidebar-footer{padding:10px 16px;border-top:1px solid rgba(255,255,255,.08);}
.sidebar-time{font-size:9.5px;color:var(--nav-text);line-height:1.6;}
.sidebar-time strong{color:#D1DFF0;font-weight:600;}

/* ── Main area ── */
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

/* Topbar – 52px */
.topbar{height:52px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 18px;gap:14px;flex-shrink:0;}
.topbar-title{flex:1;min-width:0;}
.topbar-page-title{font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em;}
.topbar-page-subtitle{font-size:10.5px;color:var(--text-tertiary);margin-top:1px;}
.topbar-actions{display:flex;align-items:center;gap:8px;}
.topbar-btn{display:flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text-secondary);font-size:11.5px;font-weight:500;cursor:pointer;transition:all var(--transition);white-space:nowrap;}
.topbar-btn:hover{background:var(--surface-3);border-color:var(--border-strong);}
.topbar-btn.primary{background:var(--brand-500);border-color:var(--brand-500);color:#fff;}
.topbar-btn.primary:hover{background:var(--brand-700);}
.topbar-btn.copilot-btn{background:linear-gradient(135deg,#7C3AED,#5B21B6);border-color:#7C3AED;color:#fff;}
.topbar-btn.copilot-btn:hover,.topbar-btn.active-copilot{opacity:.9;}
.topbar-btn.active-copilot{background:linear-gradient(135deg,#6D28D9,#4C1D95);border-color:#6D28D9;color:#fff;}

/* ── Global Filter Strip – 40px – always visible ── */
.global-filter-strip{
  height:40px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 18px;
  gap:0;
  flex-shrink:0;
}
.gf-context{
  display:flex;
  align-items:center;
  gap:6px;
  padding-right:14px;
  border-right:1px solid var(--border);
  flex-shrink:0;
}
.gf-context-label{
  font-size:9px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  white-space:nowrap;
}
.gf-context-value{
  font-size:10.5px;
  font-weight:600;
  color:var(--heat);
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.gf-area-section{
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 14px;
  flex:1;
  min-width:0;
  overflow:hidden;
}
.gf-area-label{
  font-size:9px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  white-space:nowrap;
  flex-shrink:0;
}
.gf-area-chips{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
  overflow:hidden;
}
.gf-chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:10.5px;
  font-weight:500;
  padding:2px 8px;
  border-radius:3px;
  cursor:pointer;
  white-space:nowrap;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-secondary);
  transition:all var(--transition);
  flex-shrink:0;
  line-height:1.4;
}
.gf-chip:hover{background:var(--surface-3);border-color:var(--border-strong);}
.gf-chip.selected{background:var(--qlik-selected-bg);border-color:var(--qlik-selected-border);color:var(--qlik-selected);font-weight:600;}
.gf-chip.excluded{background:var(--qlik-excluded-bg);color:var(--qlik-excluded);opacity:.65;cursor:default;}
.gf-chip .gf-chip-x{font-size:11px;opacity:.6;cursor:pointer;transition:opacity var(--transition);}
.gf-chip .gf-chip-x:hover{opacity:1;}
.gf-clear{
  margin-left:auto;
  font-size:10px;
  font-weight:500;
  color:var(--brand-500);
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  padding-left:10px;
  text-decoration:none;
}
.gf-clear:hover{text-decoration:underline;}
.gf-clear.hidden{visibility:hidden;}

/* Selections bar – shows active qlik state (minimal, only when needed) */
.selections-bar{background:var(--qlik-selected-bg);border-bottom:1px solid var(--qlik-selected-border);padding:4px 18px;display:none;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;min-height:32px;}
.selections-bar.visible{display:none;} /* hidden - replaced by global filter strip */
.selections-label{font-size:10px;font-weight:600;color:var(--qlik-selected);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;}
.selection-chip{display:flex;align-items:center;gap:5px;background:var(--qlik-selected);color:#fff;font-size:11px;font-weight:500;padding:2px 7px;border-radius:3px;}
.selection-chip-clear{cursor:pointer;opacity:.75;font-size:12px;line-height:1;transition:opacity var(--transition);}
.selection-chip-clear:hover{opacity:1;}
.clear-all-btn{margin-left:auto;font-size:10px;font-weight:500;color:var(--qlik-selected);cursor:pointer;text-decoration:underline;white-space:nowrap;}

/* Page content – refined padding */
.page-content{flex:1;overflow-y:auto;padding:14px 18px 14px;}
.page{display:none;}
.page.active{display:block;}

/* Grid helpers – consistent 12px gaps */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;}
.col-3{grid-column:span 3;}
.col-4{grid-column:span 4;}
.col-5{grid-column:span 5;}
.col-6{grid-column:span 6;}
.col-7{grid-column:span 7;}
.col-8{grid-column:span 8;}
.col-9{grid-column:span 9;}
.col-12{grid-column:span 12;}

/* Spacing utilities */
.mb-8{margin-bottom:8px;}
.mb-10{margin-bottom:10px;}
.mb-12{margin-bottom:12px;}
.mb-14{margin-bottom:10px;}
.mb-16{margin-bottom:12px;}
.mb-20{margin-bottom:16px;}
.flex{display:flex;}.flex-col{flex-direction:column;}.flex-center{align-items:center;}.gap-8{gap:8px;}.gap-12{gap:12px;}.gap-16{gap:16px;}
.grow{flex:1;}