/* Sistem desain AKURAT — diporting dari mockup/purwarupa-akurat-kode.html
   supaya seluruh aplikasi (Blade) memakai token warna, tipografi, dan
   komponen visual yang sama persis dengan purwarupa, bukan gaya ad-hoc. */

:root{
  --navy:#132A4C; --navy-dark:#0C1B32;
  --teal:#0E7C74; --teal-dark:#0A5C56;
  --gold:#C8862A; --gold-dark:#8F5F1C;
  --danger:#B4432F; --danger-bg:#FBEAE6;
  --brand-blue:#0342A3; --brand-red:#E11E1A; --brand-green:#2A8C1F;
  --bg:#F7F5F0; --surface:#FFFFFF;
  --ink:#1B2430; --ink-soft:#4B5563;
  --line:#E4E1D8;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(19,42,76,.06), 0 6px 20px rgba(19,42,76,.07);
  --sidebar-w:252px; --sidebar-w-collapsed:64px; --header-h:64px;
}
html[data-theme="dark"]{
  --bg:#0B1424; --surface:#111D33; --ink:#F1F3F6; --ink-soft:#9AA5B1; --line:#233150;
  --danger-bg:rgba(180,67,47,.16);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Source Sans 3', system-ui, sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  transition:background .18s ease, color .18s ease;
}
h1,h2,h3,h4,.font-head{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing:-0.01em; }
h1,h2,h3,h4{ margin:0; color:var(--ink); }
p{ margin:0; }
a{ color:inherit; }
button{ font-family:inherit; }
::selection{ background:rgba(14,124,116,.25); }

/* ---------- layout shell ---------- */
.shell{ display:flex; min-height:100vh; }
.backdrop{ position:fixed; inset:0; background:rgba(12,27,50,.45); z-index:40; }

.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:linear-gradient(180deg, var(--brand-blue), #051B4A);
  color:#EAF0F7; display:flex; flex-direction:column; transition:width .18s ease; overflow:hidden;
  position:relative; z-index:45;
}
.sidebar.collapsed{ width:var(--sidebar-w-collapsed); }
.sidebar-brand{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 16px; min-height:var(--header-h); border-bottom:1px solid rgba(255,255,255,.08); }
.brand-mark{ width:32px; height:32px; border-radius:9px; background:var(--gold); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans'; font-weight:800; color:var(--navy-dark); font-size:14px; }
.brand-text{ width:100%; line-height:1.15; overflow:hidden; white-space:nowrap; text-align:center; }
.brand-text b{ display:block; font-family:'Plus Jakarta Sans'; font-weight:700; font-size:15px; }
.brand-text span{ display:block; font-size:12px; font-weight:700; color:#AEC0D6; margin-top:1px; text-align:center; }
.brand-text span.brand-text-crlf{ margin-top:15px; }
.sidebar.collapsed .brand-text{ display:none; }
.brand-logo-chip{ background:#fff; border-radius:10px; padding:10px 16px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.18); flex-shrink:0; }
.brand-logo-chip img{ display:block; height:34px; width:auto; }
.sidebar:not(.collapsed) .brand-mark{ display:none; }
.sidebar.collapsed .brand-logo-chip{ display:none; }
.hamburger-btn{ appearance:none; border:none; background:rgba(255,255,255,.08); color:#fff; width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.hamburger-btn:hover{ background:rgba(255,255,255,.16); }
.sidebar-nav{ padding:10px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.navitem{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; color:#C9D6E6; text-decoration:none; cursor:pointer; font-size:14.5px; font-weight:500; white-space:nowrap; }
.navitem svg{ flex-shrink:0; }
.navitem span.label{ overflow:hidden; text-overflow:ellipsis; }
.navitem:hover{ background:rgba(255,255,255,.07); color:#fff; }
.navitem.active{ background:rgba(255,255,255,.14); color:#fff; font-weight:600; box-shadow:inset 3px 0 0 var(--gold); }
.sidebar.collapsed .navitem span.label{ display:none; }
.sidebar.collapsed .navitem{ justify-content:center; }
.sidebar-foot{ margin-top:auto; padding:14px 16px; font-size:11.5px; font-weight:700; color:#8FA3BC; border-top:1px solid rgba(255,255,255,.08); white-space:nowrap; overflow:hidden; text-align:center; }
.sidebar.collapsed .sidebar-foot{ display:none; }

.main-wrap{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ height:var(--header-h); flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 22px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.topbar-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.topbar-left h1{ font-size:17px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.icon-btn{ appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.icon-btn:hover{ background:var(--bg); color:var(--ink); }
.mobile-only{ display:none; }
.user-menu{ position:relative; }
.user-chip{ display:flex; align-items:center; gap:9px; padding:5px 8px 5px 5px; border-radius:12px; cursor:pointer; border:1px solid transparent; appearance:none; background:transparent; font:inherit; }
.user-chip:hover{ background:var(--bg); border-color:var(--line); }
.avatar{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans'; font-weight:700; font-size:13px; color:#fff; flex-shrink:0; }
.user-chip-text{ line-height:1.2; text-align:left; }
.user-chip-text b{ display:block; font-size:13.5px; font-weight:600; }
.user-chip-text span{ display:block; font-size:11.5px; color:var(--ink-soft); }
.chev{ color:var(--ink-soft); margin-left:2px; flex-shrink:0; }
.dropdown{ position:absolute; top:calc(100% + 8px); right:0; background:var(--surface); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); min-width:200px; overflow:hidden; z-index:60; }
.dropdown-item{ display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:13.5px; font-weight:500; cursor:pointer; color:var(--ink); width:100%; border:none; background:transparent; text-align:left; }
.dropdown-item:hover{ background:var(--bg); }
.dropdown-item.danger{ color:var(--danger); }
.dropdown-sep{ height:1px; background:var(--line); }
.content{ padding:26px 28px 60px; max-width:1180px; width:100%; }
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--navy-dark); color:#fff; padding:12px 20px; border-radius:10px; font-size:13.5px; font-weight:500; box-shadow:var(--shadow); z-index:80; }

@media (max-width:880px){
  .sidebar{ position:fixed; top:0; bottom:0; left:0; transform:translateX(-100%); width:250px !important; box-shadow:0 0 40px rgba(0,0,0,.3); }
  .sidebar.mobile-open{ transform:translateX(0); }
  .sidebar.collapsed .brand-text, .sidebar.collapsed .navitem span.label, .sidebar.collapsed .sidebar-foot{ display:block; }
  .sidebar.collapsed .navitem{ justify-content:flex-start; }
  .content{ padding:18px 16px 48px; }
  .topbar{ padding:0 14px; }
  .user-chip-text{ display:none; }
  .mobile-only{ display:flex; }
}

/* ---------- generic components ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.grid{ display:grid; gap:16px; }
.cols-2{ grid-template-columns:1fr 1fr; }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:760px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } }

.stat-tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; }
.stat-tile .num{ font-family:'Plus Jakarta Sans'; font-size:28px; font-weight:800; color:var(--navy); }
html[data-theme="dark"] .stat-tile .num{ color:#EAF0F7; }
.stat-tile .lbl{ font-size:13px; color:var(--ink-soft); margin-top:2px; }

.bar-chart{ display:flex; align-items:flex-end; gap:18px; height:180px; padding:10px 4px 0; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bar{ width:100%; max-width:46px; border-radius:6px 6px 0 0; position:relative; }
.bar-val{ font-size:12px; font-weight:700; margin-bottom:6px; }
.bar-lbl{ font-size:11.5px; color:var(--ink-soft); margin-top:8px; font-weight:600; }

.btn{ appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none; }
.btn:hover{ background:var(--bg); }
.btn-primary{ background:var(--teal); border-color:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-dark); border-color:var(--teal-dark); }
.btn-gold{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn-gold:hover{ background:var(--gold-dark); border-color:var(--gold-dark); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-ghost:hover{ background:var(--bg); }
.btn-block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-sm{ padding:7px 12px; font-size:12.5px; }

.badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:999px; }
.badge-warning{ background:#FBF1DE; color:var(--gold-dark); }
html[data-theme="dark"] .badge-warning{ background:rgba(200,134,42,.18); color:#E8B15E; }
.badge-teal{ background:rgba(14,124,116,.1); color:var(--teal-dark); }
html[data-theme="dark"] .badge-teal{ background:rgba(14,124,116,.22); color:#5FCFC4; }
.badge-gray{ background:var(--bg); color:var(--ink-soft); border:1px solid var(--line); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:14px; padding:10px 12px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--teal); outline-offset:0; border-color:var(--teal); }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto; }
.tab{ padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none; }
.tab.active{ color:var(--teal-dark); border-color:var(--teal); }
html[data-theme="dark"] .tab.active{ color:#5FCFC4; }

.chip{ padding:7px 13px; border-radius:999px; border:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; background:var(--surface); }
.chip.active{ background:var(--navy); border-color:var(--navy); color:#fff; }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); padding:0 12px 10px; border-bottom:1px solid var(--line); font-weight:700; }
td{ padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; }

.stepper{ display:flex; align-items:center; gap:0; margin-bottom:22px; }
.step-dot{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; background:var(--line); color:var(--ink-soft); flex-shrink:0; }
.step-dot.done{ background:var(--teal); color:#fff; }
.step-dot.active{ background:var(--navy); color:#fff; }
.step-line{ flex:1; height:2px; background:var(--line); margin:0 6px; min-width:20px; }
.step-line.done{ background:var(--teal); }
.step-label{ font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-top:6px; text-align:center; }
.step-col{ display:flex; flex-direction:column; align-items:center; }

.pipeline{ display:flex; align-items:flex-start; gap:0; margin:18px 0 22px; flex-wrap:wrap; }
.pipe-node{ display:flex; flex-direction:column; align-items:center; min-width:88px; }
.pipe-dot{ width:16px; height:16px; border-radius:50%; background:var(--line); border:2px solid var(--line); }
.pipe-dot.done{ background:var(--teal); border-color:var(--teal); }
.pipe-dot.active{ background:#fff; border-color:var(--navy); box-shadow:0 0 0 4px rgba(19,42,76,.12); }
html[data-theme="dark"] .pipe-dot.active{ background:var(--navy-dark); }
.pipe-lbl{ font-size:11px; font-weight:600; color:var(--ink-soft); text-align:center; margin-top:7px; line-height:1.25; }
.pipe-bar{ flex:1; height:2px; background:var(--line); margin-top:7px; min-width:16px; }
.pipe-bar.done{ background:var(--teal); }

.kv{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.kv:last-child{ border-bottom:none; }
.kv .k{ color:var(--ink-soft); flex-shrink:0; }
.kv .v{ font-weight:600; text-align:right; }

.accordion-head{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:14px 0; }
.accordion-head .chev{ transition:transform .15s; }
.accordion-head.open .chev{ transform:rotate(180deg); }
.accordion-body{ display:none; padding:0 0 16px; font-size:13px; color:var(--ink-soft); }
.accordion-body.open{ display:block; }

.leaflet-target{ height:200px; border-radius:9px; margin-top:12px; border:1px solid var(--line); background:var(--bg); }
.leaflet-target-lg{ height:400px; }
.map-caption{ font-size:11.5px; color:var(--ink-soft); margin-top:6px; }

.upload-box{ border:1.5px dashed var(--line); border-radius:var(--radius-sm); padding:26px; text-align:center; cursor:pointer; transition:border-color .12s, background .12s; }
.upload-box:hover{ border-color:var(--teal); background:rgba(14,124,116,.04); }
.upload-box.done{ border-style:solid; border-color:var(--teal); background:rgba(14,124,116,.06); }
.upload-done-box{ border:1.5px solid var(--teal); border-radius:var(--radius-sm); background:rgba(14,124,116,.06); padding:16px; text-align:left; }

.doc-row{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.doc-row:last-child{ border-bottom:none; }
.doc-icon{ width:38px; height:38px; border-radius:9px; background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink-soft); }

/* ---------- auth screens ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:
  radial-gradient(1200px 600px at 15% -10%, rgba(14,124,116,.12), transparent),
  radial-gradient(1000px 500px at 110% 10%, rgba(200,134,42,.10), transparent), var(--bg); }
.auth-card{ width:100%; max-width:1040px; display:grid; grid-template-columns:1.05fr 1fr; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 60px rgba(3,25,66,.18); overflow:hidden; }
@media (max-width:760px){ .auth-card{ grid-template-columns:1fr; max-width:440px; } .auth-side{ display:none; } }
.auth-side{ background:linear-gradient(160deg, var(--brand-blue), #051B4A); color:#fff; padding:60px 50px; display:flex; flex-direction:column; justify-content:space-between; }
.auth-side-header{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.auth-logo-chip{ background:#fff; border-radius:14px; padding:26px 30px; display:flex; align-items:center; justify-content:center; width:100%; max-width:320px; box-shadow:0 10px 28px rgba(0,0,0,.28); }
.auth-logo-chip img{ display:block; width:100%; height:auto; }
.auth-side .tagline{ font-family:'Plus Jakarta Sans'; font-size:23px; font-weight:800; line-height:1.35; margin-top:28px; text-align:center; }
.auth-side .tagline .accent{ color:#8FE39B; }
.auth-side .sub{ font-size:13.5px; color:#C7D6EE; margin-top:13px; line-height:1.7; text-align:center; }
.auth-side ul{ list-style:none; padding:0; margin:28px 0 0; display:flex; flex-direction:column; gap:15px; }
.auth-side li{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:#DCE5F0; }
.tri-dot{ width:21px; height:21px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; margin-top:1px; }
.auth-side-footer{ font-size:11.5px; color:#B9C7DA; margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.16); }
.auth-form-wrap{ padding:56px 52px; display:flex; flex-direction:column; }
.auth-tab-body{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.auth-tabs{ display:flex; gap:4px; background:var(--bg); border-radius:10px; padding:4px; margin-bottom:32px; }
.auth-tab{ flex:1; text-align:center; padding:10px 0; border-radius:8px; font-size:13.5px; font-weight:700; cursor:pointer; color:var(--ink-soft); text-decoration:none; display:block; }
.auth-tab.active{ background:var(--surface); color:var(--brand-blue); box-shadow:0 1px 3px rgba(0,0,0,.08); }
html[data-theme="dark"] .auth-tab.active{ color:#fff; }
.auth-note{ font-size:11.5px; color:var(--ink-soft); background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:10px 12px; margin-top:16px; line-height:1.5; }
.auth-form-wrap .field{ margin-bottom:19px; }
.auth-form-wrap .field label{ font-size:13px; }
.auth-form-wrap .field input{ padding:13px 15px; font-size:14.5px; }
.auth-form-wrap .btn-block{ padding:13px 18px; font-size:14.5px; margin-top:8px; }
.success-box{ text-align:center; padding:30px 10px; }
.success-icon{ width:56px; height:56px; border-radius:50%; background:rgba(14,124,116,.12); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }

.auth-switch{ text-align:center; margin-top:18px; font-size:13px; color:var(--ink-soft); }
.auth-switch a{ color:var(--brand-blue); font-weight:600; text-decoration:none; }
.auth-switch a:hover{ text-decoration:underline; }

/* Halaman Daftar Akun Baru: kartu tunggal di tengah, tanpa panel biru --
   fokus penuh ke isian pendaftaran, bukan bagian dari layout auth-card. */
.simple-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); }
.simple-card{ width:100%; max-width:480px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:36px 34px; box-shadow:var(--shadow); }
.simple-brand{ text-align:center; margin-bottom:26px; }
.simple-brand img{ display:block; margin:0 auto 10px; }
.simple-brand p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-top:2px; }

.conf-banner{ display:flex; gap:12px; align-items:flex-start; background:#FBF1DE; border:1px solid #EAD3A0; color:var(--gold-dark); border-radius:var(--radius-sm); padding:13px 16px; margin-bottom:18px; font-size:13px; line-height:1.55; }
html[data-theme="dark"] .conf-banner{ background:rgba(200,134,42,.12); border-color:rgba(200,134,42,.35); color:#E8B15E; }

.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-head h2{ font-size:21px; font-weight:700; }
.page-head .desc{ font-size:13.5px; color:var(--ink-soft); margin-top:4px; max-width:560px; }

.func-card{ display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); cursor:pointer; text-align:left; text-decoration:none; }
.func-card:hover{ border-color:var(--teal); box-shadow:var(--shadow); }
.func-icon{ width:40px; height:40px; border-radius:10px; background:rgba(14,124,116,.1); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; }
html[data-theme="dark"] .func-icon{ background:rgba(14,124,116,.22); color:#5FCFC4; }
.func-card h3{ font-size:15px; font-weight:700; color:var(--ink); }
.func-card p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

.master-detail{ display:grid; grid-template-columns:340px 1fr; gap:18px; align-items:flex-start; }
@media (max-width:900px){ .master-detail{ grid-template-columns:1fr; } }
.case-row{ display:block; padding:13px 14px; border-radius:10px; cursor:pointer; border:1px solid transparent; margin-bottom:4px; text-decoration:none; color:inherit; }
.case-row:hover{ background:var(--bg); }
.case-row.active{ background:rgba(14,124,116,.07); border-color:var(--teal); }
.case-row b{ font-size:13.5px; display:block; }
.case-row .meta{ font-size:12px; color:var(--ink-soft); margin-top:3px; }

.empty-hint{ font-size:12.5px; color:var(--ink-soft); text-align:center; padding:30px 10px; }

/* ---------- tambahan (bukan bagian mockup, kebutuhan riil form Laravel) ---------- */
.errors{ background:var(--danger-bg); border:1px solid rgba(180,67,47,.35); color:var(--danger); border-radius:var(--radius-sm); padding:12px 14px; font-size:13px; margin-bottom:16px; }
.errors ul{ margin:0; padding-left:18px; }
.sukses-box{ background:rgba(14,124,116,.08); border:1px solid rgba(14,124,116,.3); color:var(--teal-dark); border-radius:var(--radius-sm); padding:12px 14px; font-size:13px; margin-bottom:16px; }
html[data-theme="dark"] .sukses-box{ color:#5FCFC4; }
.chosen-box{ background:rgba(3,66,163,.06); border:1px solid rgba(3,66,163,.25); border-radius:var(--radius-sm); padding:12px 14px; font-size:13.5px; margin-bottom:14px; }
.row-between{ display:flex; justify-content:space-between; margin-top:18px; }