:root {
  --primary:       #0EA5E9;
  --primary-dark:  #0284C7;
  --primary-light: rgba(14,165,233,.10);
  --sidebar-w:     245px;
  --topbar-h:      60px;
  --font:          'Poppins', sans-serif;
}
* { font-family: var(--font); }
body { background: #f0f4f8; font-size: .875rem; color: #1e293b; }

/* ── Topbar ── */
.topbar {
  position:fixed; top:0; right:0; left:0; z-index:1040;
  height:var(--topbar-h); background:#fff; border-bottom:1px solid #e2e8f0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.25rem; margin-left:var(--sidebar-w); transition:margin-left .3s;
}
.topbar.full { margin-left:60px; }
.topbar-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:#f1f5f9; color:#475569; text-decoration:none; transition:background .15s;
}
.topbar-icon:hover { background:#e2e8f0; color:#1e293b; }
.notif-badge {
  position:absolute; top:-2px; right:-2px; background:#ef4444; color:#fff;
  font-size:.58rem; font-weight:700; padding:2px 4px; border-radius:10px; line-height:1;
}
.topbar-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.sidebar-toggle {
  width:36px; height:36px; border-radius:8px; border:1px solid #e2e8f0;
  background:#f8fafc; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#475569; font-size:1.1rem; transition:background .15s;
}
.sidebar-toggle:hover { background:#e2e8f0; }

/* ── Sidebar ── */
.sidebar {
  position:fixed; top:0; left:0; z-index:1045;
  width:var(--sidebar-w); height:100vh;
  background:#0f172a; /* dark navy */
  display:flex; flex-direction:column;
  transition:width .3s, left .3s; overflow:hidden;
}
.sidebar.collapsed { width:60px; }
.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-section,
.sidebar.collapsed .nav-link span:not(.badge),
.sidebar.collapsed .badge { display:none; }
.sidebar.collapsed .nav-link { padding:10px 19px; margin:1px 0; border-radius:0; justify-content:center; }
.sidebar-logo {
  height:var(--topbar-h); padding:0 16px;
  display:flex; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0;
}
.logo-text { font-size:.9rem; color:#f8fafc; white-space:nowrap; font-weight:600; }
.sidebar-nav { padding:8px 0; overflow-y:auto; flex:1; }
.sidebar-nav::-webkit-scrollbar { width:4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:2px; }
.nav-section {
  font-size:.62rem; color:rgba(255,255,255,.35); font-weight:600;
  padding:14px 16px 4px; letter-spacing:.08em; white-space:nowrap;
}
.nav-link {
  color:rgba(255,255,255,.65); font-size:.84rem; font-weight:400;
  padding:8px 12px; margin:1px 8px; border-radius:8px;
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  text-decoration:none; transition:background .15s, color .15s;
}
.nav-link i { font-size:17px; flex-shrink:0; width:20px; text-align:center; }
.nav-link:hover  { color:#fff; background:rgba(255,255,255,.08); }
.nav-link.active { color:#fff; background:var(--primary); font-weight:500; }
.nav-link.danger { color:rgba(248,113,113,.8); }
.nav-link.danger:hover { color:#fca5a5; background:rgba(239,68,68,.15); }

/* ── Content ── */
.content {
  margin-left:var(--sidebar-w); padding-top:calc(var(--topbar-h) + 24px);
  padding-bottom:40px; min-height:100vh; transition:margin-left .3s;
}
.content.full { margin-left:60px; }

/* ── Overlay ── */
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1040; }
.overlay.show { display:block; }
@media(max-width:991px) {
  .sidebar { left:-260px; } .sidebar.mobile-show { left:0; }
  .topbar { margin-left:0!important; } .content { margin-left:0!important; }
}

/* ── Cards ── */
.card { border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.04); background:#fff; }
.card-header { background:transparent; border-bottom:1px solid #f1f5f9; }
.stat-card { padding:1.25rem; border-radius:12px; }
.icon-shape { display:inline-flex; align-items:center; justify-content:center; border-radius:10px; }
.icon-sm { width:2rem; height:2rem; font-size:.9rem; }
.icon-md { width:2.5rem; height:2.5rem; font-size:1.1rem; }

/* ── Buttons ── */
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover,.btn-primary:focus { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn-outline-primary { color:var(--primary); border-color:var(--primary); }
.btn-outline-primary:hover { background:var(--primary); color:#fff; }
.text-primary { color:var(--primary)!important; }
.bg-primary   { background:var(--primary)!important; }

/* ── Tables ── */
.table { font-size:.84rem; }
.table th { font-weight:500; color:#64748b; background:#f8fafc; white-space:nowrap; }
.table-hover tbody tr:hover { background:#f8fafc; }
.table-actions { display:flex; gap:4px; }
.table-actions .btn-sm { width:30px; height:30px; padding:0; display:flex; align-items:center; justify-content:center; }

/* ── Badges ── */
.badge { font-weight:500; font-size:.72rem; padding:.3em .65em; }
.status-normal   { background:rgba(16,185,129,.12);color:#065f46;border:1px solid rgba(16,185,129,.25); }
.status-low      { background:rgba(245,158,11,.12); color:#92400e;border:1px solid rgba(245,158,11,.3); }
.status-out      { background:rgba(239,68,68,.1);   color:#991b1b;border:1px solid rgba(239,68,68,.2); }
.role-admin      { background:rgba(14,165,233,.12); color:#075985;border:1px solid rgba(14,165,233,.25); }
.role-gudang     { background:rgba(99,102,241,.12); color:#3730a3;border:1px solid rgba(99,102,241,.25); }
.role-teknisi    { background:rgba(16,185,129,.12); color:#065f46;border:1px solid rgba(16,185,129,.25); }
.asg-active      { background:rgba(14,165,233,.12); color:#075985;border:1px solid rgba(14,165,233,.25); }
.asg-returned    { background:rgba(16,185,129,.12); color:#065f46;border:1px solid rgba(16,185,129,.25); }
.asg-pending     { background:rgba(245,158,11,.12); color:#92400e;border:1px solid rgba(245,158,11,.3); }
.asg-cancelled   { background:#f1f5f9;color:#94a3b8;border:1px solid #e2e8f0; }
.sn-available    { background:rgba(16,185,129,.12); color:#065f46;border:1px solid rgba(16,185,129,.25); }
.sn-assigned     { background:rgba(14,165,233,.12); color:#075985;border:1px solid rgba(14,165,233,.25); }
.sn-returned     { background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0; }
.sn-damaged      { background:rgba(245,158,11,.12); color:#92400e;border:1px solid rgba(245,158,11,.3); }
.sn-lost         { background:rgba(239,68,68,.1);   color:#991b1b;border:1px solid rgba(239,68,68,.2); }

/* ── Page header ── */
.page-header { margin-bottom:1.5rem; }
.page-header h1 { font-size:1.3rem; font-weight:600; margin-bottom:.2rem; }

/* ── Login ── */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%); }
.login-card { width:100%; max-width:430px; border-radius:16px; padding:2.5rem; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.login-logo-icon { width:56px; height:56px; border-radius:14px; background:var(--primary); display:flex; align-items:center; justify-content:center; }

/* ── Barcode ── */
.barcode-canvas { max-width:100%; }

@media print {
  .sidebar,.topbar,.no-print { display:none!important; }
  .content { margin:0!important; padding:0!important; }
}