:root{
  --sidebar-w: 230px;
  --primary: #2f6fed;
  --topbar-h: 56px;
}
body{ background:#f4f6fb; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
.app-topbar{
  background:#fff; border-bottom:1px solid #e6e9f0; height:var(--topbar-h);
  position:sticky; top:0; z-index:1030;
}
.role-badge{ text-transform:capitalize; background:#eef2ff; color:var(--primary); font-weight:500; }
.app-shell{ display:flex; min-height:calc(100vh - var(--topbar-h)); }
.app-sidebar{
  width:var(--sidebar-w); background:#101828; color:#cbd5e1; flex-shrink:0;
  position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); overflow-y:auto;
}
.app-sidebar .nav-link{ color:#cbd5e1; padding:.65rem 1.1rem; border-left:3px solid transparent; font-size:.92rem; }
.app-sidebar .nav-link i{ width:20px; display:inline-block; }
.app-sidebar .nav-link:hover{ background:#1b2436; color:#fff; }
.app-sidebar .nav-link.active{ background:#1b2436; color:#fff; border-left-color:var(--primary); }
.app-content{ flex:1; min-width:0; }
.card{ border:1px solid #eaedf3; border-radius:.6rem; }
.stat-card{ border-radius:.75rem; color:#fff; }
.stat-card .stat-value{ font-size:1.75rem; font-weight:700; }
.stat-card.bg-blue{ background:linear-gradient(135deg,#2f6fed,#5c8bff); }
.stat-card.bg-green{ background:linear-gradient(135deg,#12a454,#3ecf7c); }
.stat-card.bg-orange{ background:linear-gradient(135deg,#e08b1e,#f5ad42); }
.stat-card.bg-red{ background:linear-gradient(135deg,#dd3646,#f16b78); }
.table thead th{ background:#f8f9fc; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:#6b7280; border-bottom-width:1px; }
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#101828,#2f6fed); }
.login-card{ width:100%; max-width:400px; border:none; border-radius:1rem; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.badge-status-paid{ background:#12a454; }
.badge-status-unpaid{ background:#dd3646; }
.badge-status-partial{ background:#e08b1e; }
.badge-status-overdue{ background:#7a1f2b; }
.printable-invoice{ max-width:800px; margin:0 auto; }
@media print{ .app-topbar, .app-sidebar, .no-print{ display:none !important; } .app-content{ width:100%; } }
@media (max-width: 991.98px){
  .app-sidebar{ position:fixed; left:-260px; top:var(--topbar-h); z-index:1040; transition:left .2s ease; box-shadow:0 0 30px rgba(0,0,0,.3); }
  .app-sidebar.show{ left:0; }
}