@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg-0: #f6fbff;
  --bg-1: #ffffff;
  --panel: #ffffff;
  --muted: #6b7c8b;
  --text: #0f1724;
  --brand-1: #4d7cff;
  --brand-2: #2a9d8f;
  --accent: linear-gradient(90deg,var(--brand-1),var(--brand-2));
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 6px 18px rgba(15,23,36,0.06);
  --shadow-md: 0 14px 40px rgba(15,23,36,0.08);
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial;line-height:1.45;color:var(--text);background:var(--bg-0);}

/* App layout */
.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.app-sidebar{background:rgba(255,255,255,0.9);border-right:1px solid rgba(15,23,36,0.04);padding:18px;position:sticky;top:0;height:100vh;overflow:auto}
.app-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;padding:12px 20px;background:transparent;border-bottom:1px solid rgba(15,23,36,0.03)}
.app-content{padding:24px 28px;background:transparent}

.site-logo img{height:36px}

.sidebar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sidebar-close{display:none;background:none;border:0;font-size:24px}

.sidebar-nav{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none;border:1px solid transparent}
.nav-item i{width:20px;text-align:center}
.nav-item span{font-weight:600}
.nav-item.active{background:linear-gradient(180deg, rgba(77,124,255,0.06), rgba(42,157,143,0.03));box-shadow:var(--shadow-sm);border-color:rgba(77,124,255,0.12)}
.nav-group{margin-top:12px;color:var(--muted);font-size:0.85rem;padding:10px 6px}
.sidebar-footer{margin-top:18px}

/* Topbar */
.sidebar-open{display:none;background:none;border:0;padding:8px;border-radius:8px}
.topbar-search input{min-width:360px;padding:10px 12px;border-radius:10px;border:1px solid rgba(15,23,36,0.06)}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:12px}

/* Cards and grids */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.col-8{grid-column:span 8}
.col-4{grid-column:span 4}
.card{background:var(--panel);border-radius:var(--radius-lg);padding:18px;border:1px solid rgba(15,23,36,0.04);box-shadow:var(--shadow-md)}
.app-main{padding:22px 28px}
.app-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:1200px;margin:0 auto}
.hero-card{display:flex;justify-content:space-between;gap:18px;align-items:center}
.hero-left h1{font-size:1.6rem;margin:0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:12px;align-items:flex-start}
.kpi .kpi-value{font-size:1.6rem;font-weight:800}
.kpi .kpi-label{font-size:0.85rem;color:var(--muted)}
.kpi-primary{border-left:6px solid var(--brand-1)}
.kpi-accent{border-left:6px solid var(--brand-2)}
.kpi-alt{border-left:6px solid #ffb347}
.kpi-ghost{border-left:6px solid rgba(0,0,0,0.06)}

.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.panel h3{margin:0 0 8px 0}
.empty-state{display:flex;flex-direction:row;align-items:center;gap:12px;padding:8px 0}
.empty-illustration{font-size:28px;background:linear-gradient(90deg,#f0f8ff,#e6fff2);padding:12px;border-radius:10px}

.charts-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.chart-card{display:flex;flex-direction:column;gap:12px}
.chart-placeholder{height:220px;border-radius:10px;border:1px dashed rgba(15,23,36,0.06);display:flex;align-items:center;justify-content:center;color:var(--muted);background:linear-gradient(180deg,rgba(255,255,255,0.6),rgba(250,250,252,0.6))}
.chart-header{display:flex;align-items:center;justify-content:space-between}

/* Topbar and icon styles */
.icon-btn{background:transparent;border:0;padding:8px;border-radius:8px;cursor:pointer}
.icon-btn .badge{position:absolute;margin-top:-10px;margin-left:8px}

/* Focus rings */
button:focus, a:focus, input:focus{outline:3px solid rgba(77,124,255,0.12);outline-offset:3px}

/* CTA pill */
.cta{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--brand-1);color:#fff;font-weight:700;box-shadow:0 10px 30px rgba(77,124,255,0.12);transition:transform .18s ease,box-shadow .18s ease}
.cta:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(77,124,255,0.16)}

/* responsive adjustments for grid */
@media (max-width:900px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .cards-grid{grid-template-columns:1fr}
  .charts-grid{grid-template-columns:1fr}
}
.hero{padding:22px;border-radius:16px;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));color:#fff}
.hero h1{margin:0;font-size:1.8rem}
.hero p{margin:8px 0 0}

.empty-state{display:flex;flex-direction:column;align-items:flex-start;gap:12px;color:var(--muted)}
.cta{background:var(--brand-1);color:#fff;padding:10px 14px;border-radius:999px;border:none;box-shadow:0 10px 30px rgba(77,124,255,0.12);cursor:pointer}
.btn-ghost{background:transparent;border:1px solid rgba(15,23,36,0.06);padding:8px 10px;border-radius:10px}

/* small utilities */
.muted{color:var(--muted)}
.small{font-size:0.9rem;color:var(--muted)}
.badge{background:linear-gradient(90deg,#ffd08a,#ff7aa2);padding:4px 8px;border-radius:999px;font-weight:700;color:#09202a}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Responsive */
@media (max-width: 900px){
  .app-shell{grid-template-columns:1fr}
  .app-sidebar{position:fixed;left:-320px;top:0;bottom:0;width:280px;transition:left .28s cubic-bezier(.2,.9,.2,1);z-index:50}
  .app-sidebar.open{left:0}
  .sidebar-open{display:inline-flex}
  .sidebar-close{display:inline-flex}
  .topbar-search input{min-width:120px}
  .grid{grid-template-columns:repeat(6,1fr)}
  .col-8{grid-column:span 6}
  .col-4{grid-column:span 6}
}

/* Dark mode */
body.dark{--bg-0:#071025;--panel:rgba(6,10,20,0.6);--text:#e6f0f8;--muted:#9fb4c7}