:root{
  --bg:#f3f6fb;
  --panel:#ffffff;
  --panel2:#f8fafc;
  --muted:#6b7280;
  --text:#0f172a;
  --border:#e5e7eb;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --success:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;
  --shadow:0 10px 28px rgba(15,23,42,.08);
  --radius:14px;
  --radius-sm:10px;
  --gap:16px;
  --font:"IBM Plex Sans","Source Sans 3","Work Sans","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);color:var(--text);background:
radial-gradient(1200px 700px at -10% -20%, rgba(37,99,235,.10), transparent 60%),
radial-gradient(900px 600px at 110% -10%, rgba(15,118,110,.08), transparent 60%),
linear-gradient(180deg, #f8fafc 0%, #f3f6fb 60%, #eef2f7 100%)}
a{color:inherit;text-decoration:none}

.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:22px 18px;border-right:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92))}
.brand{padding:16px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel2);box-shadow:var(--shadow)}
.brand-title{font-weight:750;letter-spacing:.2px;font-size:18px}
.brand-subtitle{margin-top:4px;color:var(--muted);font-size:12px}
.nav{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.nav-link{padding:10px 12px;border-radius:12px;border:1px solid var(--border);color:#0f172a;background:var(--panel2);font-weight:650;box-shadow:0 6px 16px rgba(15,23,42,.06)}
.nav-link:hover{border-color:rgba(37,99,235,.35);background:#eef2f7}
.nav-link-danger{border-color:#fecaca;background:#fef2f2;color:#b91c1c}
.nav-link-danger:hover{border-color:#fca5a5;background:#fee2e2}
.sidebar-section{margin-top:16px}
.sidebar-title{color:var(--muted);font-size:12px;margin:0 4px 8px 4px}
.sidebar-subtitle{color:#334155;font-size:12px;font-weight:700;margin:8px 4px 6px 4px;text-transform:uppercase;letter-spacing:.08em;text-decoration:underline;text-underline-offset:3px}
.sidebar-group + .sidebar-group{margin-top:10px}
.sidebar-list{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #cbd5f5;border-radius:999px;background:#eff6ff;color:#1e3a8a;font-size:12px;font-weight:700}
.chip:hover{border-color:#93c5fd;background:#dbeafe}

.main{padding:22px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}
.page-title{font-weight:750;font-size:18px}
.content{margin-top:18px;display:flex;flex-direction:column;gap:var(--gap)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.card{grid-column:span 12;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.card-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-title{font-weight:700}
.card-subtitle{color:var(--muted);font-size:12px;margin-top:4px}
.card-body{padding:16px}

.kpis{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.kpi{grid-column:span 3;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel2);padding:14px 14px}
.kpi-label{color:var(--muted);font-size:12px}
.kpi-value{margin-top:8px;font-weight:800;font-size:22px}

.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:12px;padding:10px 12px;font-weight:650;cursor:pointer}
.btn:hover{border-color:rgba(37,99,235,.35);background:#f8fafc}
.btn-primary{border-color:var(--primary2);background:linear-gradient(180deg, #2563eb, #1d4ed8);color:#ffffff}
.btn-primary:hover{background:linear-gradient(180deg, #1d4ed8, #1e40af)}

.alert{border:1px solid #bfdbfe;background:#eff6ff;padding:12px 14px;border-radius:var(--radius);color:#1e3a8a}

.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius)}
.table th,.table td{padding:12px 12px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left}
.table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:#f8fafc}
.table tbody tr:nth-child(odd){background:#ffffff}
.table tbody tr:nth-child(even){background:#f2f2f2}
.table tbody td{background:inherit}
.table tbody tr:hover{background:#e5e7eb}
.table tbody tr:last-child td{border-bottom:none}
.table-scroll{width:100%;overflow-x:auto}
.table-scroll .table{min-width:100%}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:min(420px, 100%)}
.stats-day{margin-bottom:18px}
.stats-day-title{font-weight:700;margin-bottom:10px}
.stats-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.stats-branch{grid-column:span 6;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel2);padding:12px}
.stats-branch-title{font-weight:700;margin-bottom:8px}
.stats-empty{padding:10px 12px;border-radius:10px;border:1px dashed var(--border);background:#ffffff;color:var(--muted);font-size:12px}

@media (max-width: 980px){
  .stats-branch{grid-column:span 12}
}

.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;color:#475569;background:#f8fafc}
.badge-success{border-color:#bbf7d0;background:#ecfdf3;color:#166534}
.badge-warn{border-color:#fde68a;background:#fffbeb;color:#92400e}
.badge-danger{border-color:#fecaca;background:#fef2f2;color:#b91c1c}
.badge-info{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}

.form{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.field{grid-column:span 6;display:flex;flex-direction:column;gap:8px}
.field label{font-size:12px;color:var(--muted)}
.input,select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#ffffff;color:var(--text);outline:none;color-scheme:light}
.input:focus,select:focus{border-color:rgba(37,99,235,.65);box-shadow:0 0 0 3px rgba(37,99,235,.12)}

select option{background:#ffffff;color:#0f172a}

.content > *{animation:rise .35s ease both}

@keyframes rise{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width: 980px){
  .app{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .kpi{grid-column:span 6}
}
@media (max-width: 560px){
  .kpi{grid-column:span 12}
}