/* ============================================================
   VMDS — Vista Marketing Data System
   Premium light design system (navy + gold on soft canvas)
   ============================================================ */
:root{
  --ink:#0F172A;
  --ink-soft:#334155;
  --ink-muted:#64748B;
  --line:#E2E8F0;
  --line-soft:#F1F5F9;
  --surface:#FFFFFF;
  --canvas:#F6F8FB;
  --brand:#1E3A5F;
  --brand-deep:#15294A;
  --brand-soft:#EEF2F7;
  --accent:#B8860B;
  --accent-soft:#FBF6E9;
  --ok:#10B981; --ok-bg:#ECFDF5; --ok-ink:#065F46;
  --warn:#F59E0B; --warn-bg:#FEF3C7; --warn-ink:#92400E;
  --bad:#EF4444; --bad-bg:#FEE2E2; --bad-ink:#991B1B;
}

*{box-sizing:border-box;}
html,body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--canvas);margin:0;-webkit-font-smoothing:antialiased;}
.font-mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
.ink{color:var(--ink);} .ink-soft{color:var(--ink-soft);} .ink-muted{color:var(--ink-muted);}
.bg-canvas{background:var(--canvas);}
.bg-surface{background:var(--surface);}
.bg-brand{background:var(--brand);} .bg-brand-deep{background:var(--brand-deep);} .bg-brand-soft{background:var(--brand-soft);}
.text-brand{color:var(--brand);}
.border-line{border-color:var(--line);}
.border-line-soft{border-color:var(--line-soft);}
.bg-line-soft{background:var(--line-soft);}
.accent{color:var(--accent);} .border-accent{border-color:var(--accent);}
h1,h2,h3,h4{line-height:1.15;}
body, p, li, td, th, input, button, a, span, div{line-height:1.55;}
a{color:inherit;text-decoration:none;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;border:1px solid transparent;transition:all .15s ease;cursor:pointer;text-decoration:none;line-height:1.2;}
.btn:active{transform:translateY(1px);}
.btn svg{flex:0 0 auto;}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px -8px rgba(30,58,95,.6);}
.btn-primary:hover{background:var(--brand-deep);box-shadow:0 8px 22px -8px rgba(30,58,95,.7);}
.btn-gold{background:linear-gradient(135deg,#C8961C,#B8860B);color:#fff;box-shadow:0 6px 16px -8px rgba(184,134,11,.6);}
.btn-gold:hover{filter:brightness(1.05);}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line);}
.btn-secondary:hover{background:var(--line-soft);}
.btn-danger{background:#fff;color:#991B1B;border:1px solid #FCA5A5;}
.btn-danger:hover{background:#FEF2F2;}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px;}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}

/* ---------- Inputs ---------- */
.input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--ink);background:#fff;transition:border-color .15s, box-shadow .15s;}
.input::placeholder{color:#94A3B8;}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(30,58,95,.12);}
.input-error{border-color:#EF4444 !important;box-shadow:0 0 0 3px #FEE2E2 !important;}
textarea.input{resize:vertical;}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
.helper{font-size:12px;color:var(--ink-muted);margin-top:6px;}
.helper-error{font-size:12px;color:#B91C1C;margin-top:6px;}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;}
.card-modal{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -12px rgba(15,23,42,.28);}
.hairline{height:1px;background:var(--line);}
.group-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;margin-bottom:14px;}
.icon-box{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;}

/* ---------- Hero (premium gold glow) ---------- */
.hero{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(135deg,var(--brand-deep),var(--brand));color:#fff;padding:28px 30px;box-shadow:0 18px 40px -18px rgba(15,41,74,.7);}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(184,134,11,.45),transparent 65%);pointer-events:none;}
.hero h1{position:relative;z-index:1;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.t{width:100%;border-collapse:separate;border-spacing:0;min-width:560px;}
table.t th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;text-align:left;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);white-space:nowrap;}
table.t td{padding:13px 16px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line-soft);}
table.t tbody tr{transition:background .12s;}
table.t tbody tr:hover td{background:var(--brand-soft);}
table.t tr:last-child td{border-bottom:none;}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:9999px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;white-space:nowrap;}
.badge .dot{width:6px;height:6px;border-radius:9999px;}
.badge-aktif{background:var(--ok-bg);color:var(--ok-ink);} .badge-aktif .dot{background:var(--ok);}
.badge-pending{background:var(--warn-bg);color:var(--warn-ink);} .badge-pending .dot{background:var(--warn);}
.badge-tolak{background:var(--bad-bg);color:var(--bad-ink);} .badge-tolak .dot{background:var(--bad);}
.badge-tidak{background:#F1F5F9;color:#475569;} .badge-tidak .dot{background:#94A3B8;}

.pill-level{display:inline-flex;align-items:center;padding:3px 10px;border-radius:9999px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;background:var(--brand);color:#fff;}
.pill-level-outline{display:inline-flex;align-items:center;padding:2px 9px;border-radius:9999px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;background:#fff;color:var(--brand);border:1px solid var(--brand);}

.avatar{display:flex;align-items:center;justify-content:center;border-radius:9999px;background:var(--brand-soft);color:var(--brand);font-weight:700;flex:0 0 auto;}

/* ---------- Stepper ---------- */
.stepper{display:flex;align-items:flex-start;gap:0;width:100%;}
.step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;text-align:center;}
.step .circle{width:34px;height:34px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;transition:all .2s;}
.step.done .circle{background:var(--brand);color:#fff;}
.step.active .circle{background:#fff;color:var(--brand);border:2px solid var(--brand);box-shadow:0 0 0 4px rgba(30,58,95,.10);}
.step.pending .circle{background:#fff;color:#94A3B8;border:1px solid var(--line);}
.step .step-label{font-size:12px;color:var(--ink-soft);font-weight:500;max-width:90px;}
.step.active .step-label{color:var(--brand);font-weight:700;}
.step-line{flex:1;height:2px;background:var(--line);margin:17px 6px 0;border-radius:2px;}
.step-line.done{background:var(--brand);}

/* ---------- Dropzone ---------- */
.dropzone{border:1.5px dashed var(--line);border-radius:10px;padding:20px;text-align:center;background:#FAFBFC;cursor:pointer;transition:all .15s;width:100%;}
.dropzone:hover{border-color:var(--brand);background:var(--brand-soft);}

/* ---------- App shell ---------- */
.shell{display:flex;min-height:100vh;}
.sidebar{width:248px;flex:0 0 248px;background:var(--brand-deep);color:#fff;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:60;transition:transform .25s ease;}
.sidebar-brand{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.10);display:flex;align-items:center;gap:12px;}
.sidebar-nav{padding:12px;display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;}
.sidebar-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:14px;color:#CBD5E1;font-weight:500;transition:all .12s;}
.sidebar-link:hover{background:rgba(255,255,255,.07);color:#fff;}
.sidebar-link.active{background:rgba(255,255,255,.12);color:#fff;border-left:3px solid var(--accent);padding-left:9px;}
.sidebar-link svg{flex:0 0 auto;}
.sidebar-foot{padding:16px;border-top:1px solid rgba(255,255,255,.10);}
.main{flex:1;min-width:0;margin-left:248px;display:flex;flex-direction:column;background:var(--canvas);}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:40;}
.content{padding:24px;flex:1;}
.app-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 24px;font-size:12px;color:var(--ink-muted);border-top:1px solid var(--line);background:#fff;}
.hamburger{display:none;}
.scrim{display:none;}

@media (max-width:1024px){
  .sidebar{transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.3);}
  body.nav-open .sidebar{transform:translateX(0);}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:55;}
  .main{margin-left:0;}
  .hamburger{display:inline-flex;}
}

/* ---------- Metric cards ---------- */
.metric{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:transform .15s, box-shadow .15s;}
.metric:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(15,23,42,.25);}
.metric .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;}
.metric .v{font-size:30px;font-weight:800;color:var(--ink);margin-top:6px;line-height:1;}
.metric .s{font-size:12px;color:var(--ink-muted);margin-top:6px;}
.metric.tone-amber{border-top:3px solid var(--accent);}
.metric.tone-green{border-top:3px solid var(--ok);}
.metric.tone-blue{border-top:3px solid var(--brand);}
.metric.tone-red{border-top:3px solid var(--bad);}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;}
.tab{padding:12px 16px;font-size:14px;font-weight:600;color:var(--ink-muted);border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--brand);border-bottom-color:var(--brand);}
.tab .count{margin-left:6px;font-size:12px;background:var(--line-soft);color:var(--ink-muted);border-radius:6px;padding:1px 7px;}
.tab.active .count{background:var(--brand-soft);color:var(--brand);}

/* ---------- Flash / toast ---------- */
.flash{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;margin-bottom:18px;font-size:14px;border:1px solid;}
.flash-success{background:var(--ok-bg);border-color:#A7F3D0;color:var(--ok-ink);}
.flash-error{background:var(--bad-bg);border-color:#FCA5A5;color:var(--bad-ink);}
.flash-warning{background:var(--warn-bg);border-color:#FDE68A;color:var(--warn-ink);}
.flash-info{background:var(--brand-soft);border-color:#C7D2E0;color:var(--brand);}

/* ---------- Modal ---------- */
.modal-scrim{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;}
.modal-box{width:100%;max-width:480px;}

/* ---------- Frames (public/mobile) ---------- */
.captcha{display:flex;align-items:center;gap:12px;background:#F9F9F9;border:1px solid #D3D3D3;border-radius:8px;padding:12px 14px;}
.captcha .cb{width:24px;height:24px;border:2px solid #C1C1C1;border-radius:4px;background:#fff;cursor:pointer;flex:0 0 auto;}
.captcha .cb.checked{background:var(--brand);border-color:var(--brand);display:flex;align-items:center;justify-content:center;}

.qr{background:
  radial-gradient(circle at 10% 10%, #0F172A 15%, transparent 16%),
  radial-gradient(circle at 90% 10%, #0F172A 15%, transparent 16%),
  radial-gradient(circle at 10% 90%, #0F172A 15%, transparent 16%),
  repeating-linear-gradient(0deg,#0F172A 0 2px,transparent 2px 5px),
  repeating-linear-gradient(90deg,#0F172A 0 2px,transparent 2px 5px),
  #fff;
  background-size:100% 100%,100% 100%,100% 100%,5px 5px,5px 5px;}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.skel{background:#E2E8F0;border-radius:6px;animation:pulse 1.6s ease-in-out infinite;}
.doc-preview{background:#F1F5F9;border:1px solid var(--line);border-radius:10px;min-height:360px;display:flex;align-items:center;justify-content:center;color:var(--ink-muted);font-size:13px;background-image:repeating-linear-gradient(0deg,rgba(15,23,42,.04) 0 1px,transparent 1px 28px);}

/* ---------- Public top band ---------- */
.gov-band{background:var(--brand-deep);color:#fff;}

/* ---------- ID card ---------- */
.idcard{width:540px;max-width:100%;aspect-ratio:540/340;border:2px solid var(--accent);border-radius:14px;background:#fff;padding:22px;position:relative;box-shadow:0 16px 40px -16px rgba(15,23,42,.35);}
@media (max-width:560px){ .idcard{padding:16px;} }
.qr-box{width:68px;height:68px;border:1px solid var(--line);border-radius:4px;padding:3px;background:#fff;display:block;}
.qr-box svg{display:block;width:100%;height:100%;}

/* ---------- Helpers ---------- */
.container-page{max-width:1180px;margin:0 auto;}
.fade-in{animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
[x-cloak]{display:none !important;}
.link{color:var(--brand);font-weight:600;}
.link:hover{text-decoration:underline;}