:root{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --muted:#f3f4f6;
  --border:#e5e7eb;
  --accent:#4f46e5;
  --accent-2:#16a34a;
  --text:#1f2937;
  --sub:#6b7280;
  --danger:#ef4444;
  --warning:#f59e0b;
  --radius:14px;
  --shadow:0 10px 26px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu;
  color:var(--text); background:var(--bg);
}
a{color:inherit; text-decoration:none}
.app{display:flex; min-height:100vh}

.sidebar{
  width:260px; background:var(--panel); border-right:1px solid var(--border);
  padding:16px; position:sticky; top:0; height:100vh; overflow:auto;
}
.sidebar.collapsed{width:74px}
.sidebar .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; margin-bottom:12px}
.sidebar .brand img{width:28px; height:28px}
.sidebar nav{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.sidebar nav a{display:flex; align-items:center; gap:10px; justify-content:flex-start;
  padding:10px 12px; border-radius:10px; color:var(--sub); border:1px solid transparent;
}
.sidebar nav a:hover, .sidebar nav a.active{background:var(--muted); color:var(--text); border-color:var(--border)}
.sidebar-footer{margin-top:auto; padding-top:12px; border-top:1px dashed var(--border)}

.main{flex:1; display:flex; flex-direction:column; min-width:0}
.topbar{
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  border-bottom:1px solid var(--border); background:rgba(255,255,255,.85); backdrop-filter:saturate(140%) blur(6px);
  position:sticky; top:0; z-index:10;
}
.search{flex:1}
.search input{
  width:100%; background:var(--panel); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:10px; outline:none;
}
.user{display:flex; align-items:center; gap:10px}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--muted); display:grid; place-items:center; font-weight:700}
.role-badge{padding:4px 8px; border-radius:999px; background:#1c2030; border:1px solid var(--border); font-size:12px; color:#c7cce0}
.view{padding:18px; display:flex; flex-direction:column; gap:16px}
.footer{padding:14px 18px; border-top:1px solid var(--border); color:var(--sub); display:flex; gap:12px; justify-content:space-between}

.grid{display:grid; gap:14px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.grid.cols-3,.grid.cols-4{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
  .app{flex-direction:column}
  .sidebar{position:fixed; left:-300px; top:0; height:100%; z-index:20; transition:left .25s}
  .sidebar.open{left:0}
  .topbar{position:sticky}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
}

.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.card .card-body{padding:14px 16px}
.card h3{margin:0 0 8px 0; font-size:18px}
.muted{color:var(--sub)}
.kpi{display:flex; align-items:center; justify-content:space-between}
.kpi .value{font-size:28px; font-weight:800}
.kpi .tag{font-size:12px; color:#c7cce0}

.table{width:100%; border-collapse:separate; border-spacing:0 8px}
.table th{font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:#b9bfd1; text-align:left; padding:8px 10px}
.table td{padding:12px 10px; background:var(--muted); border:1px solid var(--border)}
.table tr td:first-child{border-top-left-radius:10px; border-bottom-left-radius:10px}
.table tr td:last-child{border-top-right-radius:10px; border-bottom-right-radius:10px}

.badge{padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:#1b2130; color:#cbd5e1}
.badge.ok{background:rgba(34,197,94,.12); color:#86efac; border-color:rgba(34,197,94,.35)}
.badge.warn{background:rgba(245,158,11,.12); color:#fde68a; border-color:rgba(245,158,11,.35)}
.badge.danger{background:rgba(239,68,68,.14); color:#fecaca; border-color:rgba(239,68,68,.35)}

.btn{background:var(--accent); color:white; border:none; border-radius:10px; padding:10px 12px; cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent; border:1px solid var(--border); color:#dbe2f1}
.icon-btn{background:transparent; border:1px solid var(--border); color:#dbe2f1; border-radius:10px; padding:8px 10px; cursor:pointer}
.link{color:#a8c5ff; text-decoration:underline; background:none; border:none; cursor:pointer}

.input, select, textarea{
  width:100%; background:var(--muted); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:10px; outline:none
}
.input-row{display:grid; gap:12px; grid-template-columns:1fr 1fr}
@media (max-width:720px){.input-row{grid-template-columns:1fr}}

.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:center}
.modal.hidden{display:none}
.modal-dialog{width:min(680px, 96vw); background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.modal-header,.modal-footer{padding:12px 14px; border-bottom:1px solid var(--border)}
.modal-footer{border-bottom:none; border-top:1px solid var(--border)}
.modal-body{padding:14px}

.empty{padding:24px; border:1px dashed var(--border); border-radius:14px; text-align:center; color:var(--sub)}
.tag-row{display:flex; gap:8px; flex-wrap:wrap}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.space{height:6px}
.small{font-size:12px; color:#a8aec4}

/* Collapsed sidebar improvements (shows only icons) */
.sidebar.collapsed{ width:74px }
.sidebar.collapsed .brand span{ display:none }
.sidebar.collapsed nav a{ position:relative; text-indent:-9999px; overflow:hidden; padding-left:0; padding-right:0; justify-content:center }
.sidebar.collapsed nav a::before{ content: attr(data-ico); text-indent:0; position:static; display:block; text-align:center; font-size:20px }
.sidebar.collapsed .sidebar-footer .link{ font-size:0 }
.sidebar.collapsed .sidebar-footer .link::after{ content:"⇥"; font-size:16px }