@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{font-family:'Inter',sans-serif;margin:0;box-sizing:border-box}
body{background:#f1f5f9;min-height:100vh}

/* SIDEBAR */
.sidebar{position:fixed;top:0;left:0;width:240px;height:100vh;background:linear-gradient(180deg,#0f172a,#1e293b);padding:0;overflow-y:auto;z-index:50;transition:transform .25s ease}
.sidebar.hidden{transform:translateX(-240px)}
.sidebar-header{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-header .logo{font-size:.95rem;font-weight:800;color:#fff;line-height:1.3}
.sidebar-header .logo span{color:#22c55e}
.sidebar-toggle{background:none;border:none;color:#94a3b8;font-size:1.2rem;cursor:pointer;padding:4px}
.sidebar-toggle:hover{color:#fff}
.sidebar .commune{padding:12px 20px;font-size:.78rem;color:#22c55e;border-bottom:1px solid rgba(255,255,255,.08);line-height:1.4}
.sidebar nav{padding:12px 0}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 20px;color:#94a3b8;text-decoration:none;font-size:.85rem;transition:all .15s;border-left:3px solid transparent}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar nav a.active{background:rgba(34,197,94,.08);color:#22c55e;border-left-color:#22c55e}
.sidebar .bottom{position:absolute;bottom:0;left:0;right:0;padding:14px 20px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar .bottom .user{color:#e2e8f0;font-size:.8rem;font-weight:600;margin-bottom:4px}
.sidebar .bottom .logout{color:#94a3b8;font-size:.75rem;cursor:pointer;text-decoration:underline;background:none;border:none;padding:0}

/* MAIN */
.main{margin-left:240px;padding:24px 28px;transition:margin-left .25s ease}
.main.full{margin-left:0}

/* TOP BAR */
.topbar{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.topbar .hamburger{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:#0f172a;padding:4px}
.topbar h1{font-size:1.4rem;font-weight:800;color:#0f172a;flex:1}
.topbar .badge{background:#f0fdf4;color:#16a34a;padding:6px 14px;border-radius:8px;font-size:.8rem;font-weight:600}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.kpi .label{font-size:.72rem;color:#64748b;text-transform:uppercase;letter-spacing:.5px}
.kpi .val{font-size:1.8rem;font-weight:800;color:#0f172a;margin:6px 0 2px}
.kpi .change{font-size:.8rem;color:#22c55e;font-weight:600}

/* CARDS */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card h3{font-size:.95rem;font-weight:700;color:#0f172a;margin-bottom:12px}
.card .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:.85rem;color:#475569}
.card .row:last-child{border:none}

/* RESPONSIVE */
@media(max-width:900px){
    .sidebar{transform:translateX(-240px)}
    .sidebar.show{transform:translateX(0)}
    .main{margin-left:0}
    .topbar .hamburger{display:block}
    .kpis{grid-template-columns:1fr 1fr}
    .cards{grid-template-columns:1fr}
}