:root{
  --bg:#0f172a;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#111827;
  --primary-hover:#0b1220;
  --ring:#3b82f6;
  --success:#10b981;
  --error:#ef4444;
  --border:#e5e7eb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:linear-gradient(180deg,#f8fafc 0%, #eef2ff 100%);
  color:var(--text);
  margin:0;
}

.container{
  max-width:1100px;
  margin:24px auto;
  padding:20px;
  background:var(--card);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(2,6,23,.06), 0 2px 8px rgba(2,6,23,.08);
}

.menu{
  background:var(--primary);
  padding:12px 16px;
  display:flex;
  gap:16px;
  align-items:center;
}
.menu a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  opacity:.9;
}
.menu a:hover{opacity:1;text-decoration:underline}

.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.login-card{
  width:min(420px, 100%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px;
  box-shadow:0 12px 30px rgba(2,6,23,.08);
}
.brand{
  display:flex;align-items:center;gap:12px;margin-bottom:12px
}
.brand .logo{
  width:40px;height:40px;border-radius:12px;background:#111827;display:grid;place-items:center;color:#fff;font-weight:800
}
.brand h1{font-size:20px;margin:0}
.brand .sub{color:var(--muted);font-size:13px;margin-top:4px}

.form{margin-top:12px}
.input{
  width:100%;
  padding:12px 14px;
  margin:8px 0 2px;
  border:1px solid var(--border);
  border-radius:12px;
  outline:0;
  font-size:15px;
  background:#fff;
}
.input:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}

.btn{
  width:100%;
  padding:12px 14px;
  border:0;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  margin-top:10px;
}
.btn:hover{background:var(--primary-hover)}
.btn:active{transform:translateY(1px)}

.helper{
  display:flex;justify-content:space-between;align-items:center;margin-top:8px;color:var(--muted);font-size:12px
}

.alert{
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  margin:10px 0 6px;
  border:1px solid transparent;
}
.alert-success{background:rgba(16,185,129,.08);color:var(--success);border-color:rgba(16,185,129,.25)}
.alert-error{background:rgba(239,68,68,.08);color:var(--error);border-color:rgba(239,68,68,.25)}

table{border-collapse:collapse;width:100%;background:#fff}
th,td{border:1px solid var(--border);padding:10px;font-size:14px}
th{background:#f3f4f6;text-align:left}

.small{font-size:12px;color:var(--muted)}

@media (max-width:600px){
  .container{margin:12px; padding:14px; border-radius:14px}
  .login-card{padding:22px;border-radius:16px}
}

/* Responsive Navbar */
.nav{
  background:var(--primary);
  color:#fff;
}
.nav-inner{
  max-width:1100px; margin:0 auto; padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand-mini{display:flex; align-items:center; gap:10px; font-weight:800}
.brand-mini .logo{width:28px;height:28px;border-radius:8px;background:#fff;color:#111827;display:grid;place-items:center}
.nav-links{display:flex; gap:12px; align-items:center}
.nav-links a{color:#fff; text-decoration:none; font-weight:600; opacity:.9}
.nav-links a:hover{opacity:1; text-decoration:underline}

.nav-toggle{display:none; background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; padding:6px 10px; border-radius:10px; cursor:pointer}
@media (max-width:720px){
  .nav-inner{flex-wrap:wrap}
  .nav-toggle{display:block}
  .nav-links{display:none; width:100%; flex-direction:column; align-items:flex-start; padding:8px 0}
  .nav-links.show{display:flex}
}

/* Responsive table */
.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:12px; background:#fff}
.table{border-collapse:collapse; width:100%}
.table th, .table td{border-bottom:1px solid var(--border); padding:10px; font-size:14px; white-space:nowrap}
.table th{background:#f8fafc; text-align:left; position:sticky; top:0}


/* Clickability fixes */
.nav, .nav-inner, .nav-links, .nav-links a, .nav-toggle { position: relative; z-index: 10; }
.nav-links a { display:inline-flex; align-items:center; padding:6px 8px; }
.nav { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
/* Prevent potential overlay from first container below nav */
body > .container, .dash-wrap { position: relative; z-index: 1; }


/* Stronger nav link layout to ensure correct click targets */
.nav-links a { display:block; padding:8px 10px; }
.nav-inner { position: relative; z-index: 20; }
.nav { position: sticky; top: 0; z-index: 20; }


/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:0;background:var(--primary);color:#fff;font-weight:700;cursor:pointer}
.btn:hover{background:var(--primary-hover)}
.btn-sm{padding:6px 10px;border-radius:10px;font-weight:600}
.btn-outline{background:#fff;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:#cbd5e1}
.btn-danger{background:#ef4444}
.btn-danger:hover{background:#dc2626}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#f8fafc;font-size:12px}
.badge.success{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3)}
.badge.warning{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3)}
.badge.info{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3)}

/* Toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0;flex-wrap:wrap}
.toolbar .actions{display:flex;gap:8px;align-items:center}

/* Collapsible panel */
.panel{border:1px solid var(--border);border-radius:12px;background:#fff;padding:12px}
.panel[hidden]{display:none}

/* Responsive table small screens: allow horizontal scroll already via .table-wrap */
/* On very small screens, hide less-important columns if needed (opt-in via utility classes) */
@media (max-width:480px){
  .hide-sm{display:none}
}

/* Small Print button style */









/* --- Print button (match small pill like Ubah/Hapus) --- */
.actions .btn-print{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  background:#10b981 !important; /* green like sample */
  color:#fff !important;
  padding:4px 12px !important;
  font-size:13px !important;
  font-weight:700 !important;
  border-radius:9999px !important;
  text-decoration:none !important;
  line-height:1 !important;
  height:28px !important;
}
.actions .btn-print:hover{ background:#0ea371 !important; }
.actions .btn-print .icon-print{ display:inline-flex; line-height:0; }
.actions .btn-print .icon-print svg{ width:14px; height:14px; }

/* branding */
.logo-img{max-height:28px;height:28px;width:auto;border-radius:8px;display:inline-block}
.brand-mini{display:flex;align-items:center;gap:8px}
@media (max-width:600px){.nav .nav-inner{gap:8px}.nav-links a{padding:8px}}

/* enforce small logo in navbar/sidebar */
img.logo-img, .brand-mini img, .nav .brand-mini img {
  height: 24px !important;
  max-height: 24px !important;
  width: auto !important;
  object-fit: contain;
  border-radius: 8px;
}