/* App Layout: header + left blue sidebar, responsive */
:root{
  --bg:#f5f7fb; --text:#1d2433; --muted:#6b7280; --primary:#2563eb; --primary-600:#1d4ed8; --card:#ffffff; --border:#e5e7eb;
}
html,body{height:100%;}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color:var(--text); background:var(--bg);} 

.app{
  display:grid; grid-template-rows:56px 1fr; grid-template-columns: 260px 1fr; grid-template-areas:
    "header header"
    "sidebar main";
  min-height:100vh;
}
@media(max-width: 980px){
  .app{grid-template-columns: 1fr; grid-template-areas:
    "header"
    "main";}
  .sidebar{position:fixed; inset:56px 0 auto 0; height:calc(100vh - 56px); transform:translateX(-100%); transition:transform .3s ease; z-index:40;}
  .sidebar.open{transform:translateX(0);}
}

/* Header */
.header{grid-area:header; display:flex; align-items:center; gap:12px; padding:0 16px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50;}
.header .burger{width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer;}
.header .brand{display:flex; align-items:center; gap:10px; font-weight:700;}
.header .brand img{height:28px; width:auto;}
.header .spacer{flex:1;}
.header .actions{display:flex; align-items:center; gap:8px;}
.header .avatar{width:32px; height:32px; border-radius:50%; background:#dbeafe; display:inline-block;}

/* Sidebar */
.sidebar{grid-area:sidebar; background: radial-gradient(1100px 600px at -30% -10%, #60a5fa 0%, #2563eb 40%, #1e40af 100%); color:#e8eefc; padding:16px 12px; overflow:auto;}
.sidebar .title{font-weight:700; letter-spacing:.3px; opacity:.95; margin:6px 8px 10px;}
.nav{list-style:none; margin:0; padding:0;}
.nav li{margin:4px 0;}
.nav a{display:flex; align-items:center; gap:10px; padding:10px 12px; color:#e8eefc; text-decoration:none; border-radius:10px;}
.nav a:hover{background:rgba(255,255,255,.08);} 
.nav .active{background:rgba(255,255,255,.12);} 

/* Main */
.main{grid-area:main; padding:16px;}
.container{max-width:1200px; margin:0 auto;}
.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:16px;}
@media(max-width: 980px){.grid{grid-template-columns: repeat(6, 1fr);} }
@media(max-width: 640px){.grid{grid-template-columns: repeat(4, 1fr);} }

.card{background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 1px 2px rgba(16,24,40,0.04);}
.card .card-h{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border);}
.card .card-b{padding:14px;}

.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--text); cursor:pointer;}
.btn.primary{background:var(--primary); color:#fff; border-color:var(--primary);}
.btn.primary:hover{background:var(--primary-600);} 

.badge{display:inline-block; background:#eef2ff; color:#3730a3; padding:3px 8px; border-radius:999px; font-size:12px;}

/* Utilities */
.text-muted{color:var(--muted);} 
.mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;} .mb-2{margin-bottom:8px;} .mb-3{margin-bottom:12px;} .mb-4{margin-bottom:16px;}
.col-12{grid-column:span 12;} .col-6{grid-column:span 6;} .col-4{grid-column:span 4;} .col-3{grid-column:span 3;}
@media(max-width:980px){.col-6{grid-column:span 6;} .col-4{grid-column:span 6;} .col-3{grid-column:span 6;}}
@media(max-width:640px){.col-6,.col-4,.col-3{grid-column:span 4;}}