:root{
  --bg:#f6f7fb;
  --card:#fff;
  --text:#111;
  --muted:#6b7280;
  --pri:#1f7ae0;
}

/* Base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}

/* Top bar + top nav (pill style) */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid #e5e7eb;background:#fff;
  position:sticky;top:0;z-index:20
}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:700}
.topnav{display:flex;gap:8px;flex-wrap:wrap}
.topnav a{
  display:inline-block;padding:8px 12px;border:1px solid #e5e7eb;border-radius:999px;
  text-decoration:none;color:#111827;background:#fff;transition:background .15s,border-color .15s,color .15s
}
.topnav a:hover{background:#f3f4f6}
.topnav a.active{background:#1f7ae0;border-color:#1f7ae0;color:#fff}

/* Layout */
.wrap{display:flex;min-height:calc(100vh - 56px)}
.content{flex:1;padding:18px}

/* Sidebar (default) */
.sidenav{
  width:220px;background:#fff;border-right:1px solid #e5e7eb;
  padding:16px;display:flex;flex-direction:column;gap:10px
}
.sidenav a{
  color:#111;text-decoration:none;padding:8px;border-radius:6px;transition:background .15s,color .15s
}
.sidenav a:hover{background:#f0f4ff}
.sidenav a.active{background:#eef5ff;color:#0b63c5}

/* Purple sidebar variant */
.sidenav.purple{
  width:240px;background:linear-gradient(180deg,#7c3aed 0%, #6d28d9 100%);color:#fff;border-right:none
}
.sidenav.purple a{
  display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;padding:10px 14px;border-radius:10px
}
.sidenav.purple a:hover{background:rgba(255,255,255,.10)}
.sidenav.purple a.active{background:rgba(255,255,255,.18)}
.i{display:inline-block;width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.6)}

/* Content grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:960px){.grid{grid-template-columns:1fr}}

.grid-3-1{display:grid;grid-template-columns:2.2fr 1fr;gap:18px}
@media(max-width:1000px){.grid-3-1{grid-template-columns:1fr}}

.grid-3{display:grid;grid-template-columns:1fr;gap:18px}
@media(max-width:1000px){.grid-3{grid-template-columns:1fr}}

/* Cards */
.card{
  background:var(--card);padding:18px;border:1px solid #e5e7eb;border-radius:12px
}
.card.span-2{grid-column:span 2}
.card-head{font-weight:700;margin-bottom:8px}

/* Text utils */
.muted{color:var(--muted)}
.big{font-size:34px;font-weight:800;margin-top:6px}

/* Forms and buttons */
input,select,textarea,button{
  width:100%;padding:10px;border:1px solid #d1d5db;border-radius:8px;outline:none
}
input:focus,select:focus,textarea:focus{
  border-color:#1f7ae0;box-shadow:0 0 0 3px rgba(31,122,224,.12)
}
button{
  background:var(--pri);color:#fff;border:none;cursor:pointer;transition:filter .15s
}
button:hover{filter:brightness(1.05)}
.btn{
  display:inline-block;background:var(--pri);color:#fff;padding:10px 16px;border-radius:8px;
  text-decoration:none;transition:filter .15s
}
.btn:hover{filter:brightness(1.05)}
.btn.outline{background:#fff;color:#1f7ae0;border:1px solid #1f7ae0}

/* Tables */
table{width:100%;border-collapse:collapse}
thead th{font-weight:600;color:#374151;background:#f9fafb}
th,td{padding:10px;border-bottom:1px solid #f0f0f0;text-align:left}

/* Alerts */
.alert{background:#fff3cd;border:1px solid #ffeeba;padding:10px;border-radius:8px;margin:10px 0;color:#8a6d3b}

/* Public landing */
.wrap.public{display:block}
.wrap.public .content{padding:48px 20px;max-width:980px;margin:0 auto}
.hero{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:#fff;
  border:1px solid #e5e7eb;border-radius:12px;padding:28px 24px;margin-bottom:20px
}
.hero h1{font-size:28px;margin:0;line-height:1.2}
.hero .muted{color:var(--muted);font-weight:600}
.hero .lead{color:#374151;margin:0}
.cta{display:flex;gap:10px;margin-top:8px}
.brand .brand-logo{display:block;max-height:28px;width:auto}
@media(min-width:1024px){ .brand .brand-logo{max-height:32px} }

/* Mobile */
@media(max-width:960px){.sidenav{display:none}}

/* Type pills */
.type-pills{display:flex;gap:8px;flex-wrap:wrap}
.type-pills .pill{
  padding:8px 12px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:#111827;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s
}
.type-pills .pill:hover{background:#f3f4f6}
.type-pills .pill.active{background:#1f7ae0;border-color:#1f7ae0;color:#fff}
.panel{transition:opacity .15s}

/* Dashboard header */
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.searchbar{flex:1;max-width:560px;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px}
.icons{display:flex;gap:12px;align-items:center}
.avatar{width:28px;height:28px;border-radius:999px;background:#e5e7eb;display:inline-block}
.icon-bell{width:18px;height:18px;border-radius:4px;background:#e5e7eb;display:inline-block}

/* KPI grid */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.kpi-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px}
.kpi-title{color:#6b7280;font-weight:600}
.kpi-value{font-size:28px;font-weight:800;margin-top:8px}
.kpi-sub{color:#6b7280;margin-top:4px}

/* Legend */
.legend{margin-top:8px;color:#6b7280;font-size:14px;display:flex;gap:16px;align-items:center}
.dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:4px}
.dot.spend{background:#7c3aed}
.dot.conv{background:#a78bfa}
.dot.ctr{background:#c4b5fd}

/* Shell (alternate topbar + actions) */
.top-actions{display:flex;align-items:center;gap:12px}
.searchbar{width:420px;max-width:52vw;border-radius:12px}
.searchbar:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.icon-btn{width:34px;height:34px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;position:relative}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:6px;height:6px;background:#7c3aed;border-radius:999px}

/* Profile menu */
.avatar-btn{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;
  border:1px solid #e5e7eb;background:#fff;cursor:pointer
}
.avatar-initial{font-weight:700;color:#4b5563}
.profile-menu{position:relative}
.profile-menu .menu{
  position:absolute;right:0;top:44px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.06);display:none;z-index:30
}
.profile-menu .menu.open{display:block}
.profile-menu .menu a{display:block;padding:10px 12px;color:#111;text-decoration:none}
.profile-menu .menu a:hover{background:#f8f5ff;color:#4c1d95}

.badge{background:#dc3545;color:#fff;border-radius:10px;padding:0 6px;font-size:12px;margin-left:6px}
.dropdown{background:#fff;border:1px solid #eee;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.dropdown-body{max-height:320px;overflow:auto}
.alert-item{padding:10px 12px;border-bottom:1px solid #f2f2f2}
.alert-item:last-child{border-bottom:none}

/* Scoped chart fixes (perfChart) */
.card.chart-card{
  position:relative;
  width:100%;
  max-width:100%;
  height:340px;              /* extra room so legend never overlaps */
  max-height:340px;
  overflow:visible;          /* let axes/tooltip extend; no clipping */
  padding-left:8px !important;
  padding-right:8px !important;
}
.card.chart-card .card-head,
.card.chart-card .card-content,
.card.chart-card .card-body{
  padding-left:8px !important;
  padding-right:8px !important;
}
#perfChart{
  display:block;
  width:100%;
  height:260px;              /* plot area height */
  max-width:100%;
  overflow:visible;          /* prevents right-side cut */
}