/* =====================================================================
   INTELEO — Authenticated app layout
   ===================================================================== */

.app { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }

/* ---- Sidebar ------------------------------------------------------- */
.sidebar { background:var(--bg-base); border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; }
.sidebar .sb-brand { display:flex; align-items:center; gap:10px; padding:18px 20px; border-bottom:1px solid var(--border-subtle); }
.sidebar .sb-brand .wm { font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--text-strong); letter-spacing:-.02em; }
.sb-nav { flex:1; overflow-y:auto; padding:14px 12px; }
.sb-nav .grp { font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint); padding:14px 10px 6px; font-weight:600; }
.sb-nav a { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-sm); color:var(--text-muted);
  font-size:var(--fs-sm); font-weight:450; transition:background var(--transition), color var(--transition); margin-bottom:1px; }
.sb-nav a svg { width:18px; height:18px; flex:none; opacity:.85; }
.sb-nav a:hover { background:var(--surface-2); color:var(--text-strong); }
.sb-nav a.active { background:rgba(59,130,246,.13); color:var(--brand-300); }
.sb-nav a.active svg { opacity:1; color:var(--brand-400); }
.sb-nav a .count { margin-left:auto; font-family:var(--font-mono); font-size:var(--fs-2xs); background:var(--surface-3); color:var(--text-muted); padding:1px 7px; border-radius:var(--r-pill); }
.sb-foot { padding:12px; border-top:1px solid var(--border-subtle); }
.sb-user { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-md); cursor:pointer; }
.sb-user:hover { background:var(--surface-2); }
.avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--brand-500),var(--accent-cyan-600)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:var(--fs-xs); font-weight:600; flex:none; }

/* ---- Topbar -------------------------------------------------------- */
.main { min-width:0; display:flex; flex-direction:column; }
.topbar { height:var(--topbar-h); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:16px;
  padding:0 28px; position:sticky; top:0; background:rgba(8,14,22,0.82); backdrop-filter:blur(12px); z-index:40; }
.topbar .search { flex:1; max-width:440px; position:relative; }
.topbar .search svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-subtle); }
.topbar .search input { width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:9px 12px 9px 38px; color:var(--text-strong); font-size:var(--fs-sm); }
.topbar .search input:focus { outline:none; border-color:var(--border-focus); box-shadow:var(--ring); }
.topbar .tb-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }
.icon-btn { width:38px; height:38px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface-1); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:all var(--transition); }
.icon-btn:hover { border-color:var(--border-strong); color:var(--text-strong); }
.icon-btn svg { width:18px; height:18px; }
.icon-btn .dot { position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:2px solid var(--surface-1); }

/* ---- Content ------------------------------------------------------- */
.content { padding:28px; max-width:1280px; width:100%; margin-inline:auto; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.page-head h1 { font-size:1.9rem; letter-spacing:-.02em; }
.page-head .sub { color:var(--text-muted); font-size:var(--fs-base); margin-top:4px; }

/* stat cards */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; }
.stat .st-top { display:flex; align-items:center; justify-content:space-between; }
.stat .st-ic { width:34px; height:34px; border-radius:var(--r-sm); background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--brand-400); }
.stat .st-ic svg{ width:17px; height:17px; }
.stat .st-val { font-family:var(--font-display); font-size:2rem; color:var(--text-strong); letter-spacing:-.02em; margin-top:14px; line-height:1; }
.stat .st-lbl { color:var(--text-muted); font-size:var(--fs-sm); margin-top:6px; }
.stat .st-trend { font-size:var(--fs-xs); font-family:var(--font-mono); }
.st-trend.up { color:var(--success); } .st-trend.down { color:var(--danger-text); }

.dash-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:18px; margin-top:18px; }
.widget { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.widget-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-subtle); }
.widget-head h3 { font-size:var(--fs-base); font-family:var(--font-sans); font-weight:600; }
.widget-body { padding:18px 20px; }

/* bar chart (risk distribution) */
.barchart { display:flex; align-items:flex-end; gap:14px; height:120px; padding-top:10px; }
.barchart .bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.barchart .bar .fill { width:100%; border-radius:6px 6px 0 0; min-height:6px; }
.barchart .bar .cap { font-size:var(--fs-2xs); color:var(--text-subtle); font-family:var(--font-mono); }

/* progress rows (source coverage) */
.cov-row { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.cov-row .cv-top { display:flex; justify-content:space-between; font-size:var(--fs-sm); }
.cov-row .cv-track { height:7px; border-radius:4px; background:var(--surface-4); overflow:hidden; }
.cov-row .cv-fill { height:100%; border-radius:4px; background:var(--brand-500); }

/* mobile sidebar */
.mobile-bar { display:none; }
@media (max-width: 1024px){
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .dash-grid { grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .app { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .mobile-bar { display:flex; align-items:center; gap:12px; height:58px; padding:0 18px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg-base); z-index:50; }
  .topbar .search { max-width:none; }
}
@media (max-width: 560px){
  .stat-grid { grid-template-columns:1fr; }
  .content { padding:18px; }
}