/* 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(--navy), var(--navy-dark));
  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:46px; height:46px; border-radius:12px; background:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:6px; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.brand-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.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:var(--brand-blue); 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; }

.navgroup-head{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; color:#C9D6E6; cursor:pointer; font-size:14.5px; font-weight:500; white-space:nowrap; user-select:none; }
.navgroup-head svg{ flex-shrink:0; }
.navgroup-head span.label{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.navgroup-head .chev{ flex-shrink:0; color:#8FA3BC; display:flex; transition:transform .15s ease; }
.navgroup-head:hover{ background:rgba(255,255,255,.07); color:#fff; }
.navgroup.active > .navgroup-head{ color:#fff; font-weight:600; }
.navgroup.expanded > .navgroup-head .chev{ transform:rotate(180deg); }
.navsub{ display:flex; flex-direction:column; gap:1px; max-height:0; overflow:hidden; padding-left:20px; transition:max-height .2s ease; }
.navgroup.expanded .navsub{ max-height:600px; margin-top:2px; }
.navsub-item{ display:block; padding:8px 12px; border-radius:8px; color:#AEC0D6; text-decoration:none; font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.navsub-item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.navsub-item.active{ background:var(--brand-blue); color:#fff; font-weight:600; box-shadow:inset 3px 0 0 var(--gold); }
.navsub-sep{ height:1px; background:rgba(255,255,255,.12); margin:6px 12px; }
.sidebar.collapsed .navgroup-head{ justify-content:center; }
.sidebar.collapsed .navgroup-head span.label,
.sidebar.collapsed .navgroup-head .chev{ display:none; }
.sidebar.collapsed .navsub{ display:none; }
.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; }
.topbar-clock{ font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
@media (max-width:640px){ .topbar-clock{ display:none; } }
.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; overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-lg{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans'; font-weight:700; font-size:22px; color:#fff; background:var(--navy); flex-shrink:0; overflow:hidden; }
.avatar-lg img{ width:100%; height:100%; object-fit:cover; display:block; }
.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; text-decoration:none; }
.dropdown-item:hover{ background:var(--bg); }
.dropdown-item.danger{ color:var(--danger); }
.dropdown-sep{ height:1px; background:var(--line); }
.dropdown-info{ padding:8px 14px 10px; display:flex; flex-direction:column; gap:5px; }
.dropdown-info .kv{ display:flex; flex-direction:column; gap:1px; padding:0; border:none; font-size:11.5px; }
.dropdown-info .k{ color:var(--ink-soft); }
.dropdown-info .v{ font-weight:600; text-align:left; word-break:break-word; }
.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; }
  .sidebar.collapsed .navgroup-head{ justify-content:flex-start; }
  .sidebar.collapsed .navgroup-head span.label, .sidebar.collapsed .navgroup-head .chev{ display:flex; }
  .sidebar.collapsed .navgroup.expanded .navsub{ display:flex; }
  .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-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-danger:hover{ background:#8F3323; border-color:#8F3323; }
.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); }
.badge-solid-teal{ background:var(--teal); color:#fff; }
.badge-solid-danger{ background:var(--danger); color:#fff; }

.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); }
.password-field{ position:relative; display:flex; }
.password-field input{ padding-right:40px; }
.password-toggle{ position:absolute; top:0; right:0; height:100%; width:40px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:var(--ink-soft); cursor:pointer; border-radius:0 9px 9px 0; }
.password-toggle:hover{ color:var(--ink); }
.password-toggle:focus-visible{ outline:2px solid var(--teal); outline-offset:-2px; }

.field-otp{ position:relative; }
.otp-hint-float{
  position:absolute; top:-14px; right:0; display:inline-flex; align-items:center; gap:6px;
  background:var(--teal); color:#fff; font-size:11.5px; font-weight:600; line-height:1;
  padding:6px 11px; border-radius:8px; box-shadow:var(--shadow); white-space:nowrap; z-index:5;
  animation:otpHintBounce 1.6s ease-in-out infinite;
}
.otp-hint-float::after{
  content:""; position:absolute; bottom:-5px; right:18px; width:9px; height:9px;
  background:var(--teal); transform:rotate(45deg);
}
@keyframes otpHintBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.file-input{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; max-width:100%; }
.file-input input[type="file"]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.file-input-btn{ flex-shrink:0; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.file-input:hover .file-input-btn{ background:var(--bg); }
.file-input-name{ font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.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; }

/* Label yang selalu tampil di titik UTTP/hasil pencarian — Geografik (cabang Leaflet). */
.uttp-label{ font-size:10.5px; line-height:1.35; padding:2px 6px; border-radius:5px; box-shadow:0 1px 3px rgba(0,0,0,.25); max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uttp-label b{ display:block; }

.map-toolbar{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.map-toolbar-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; width:100%; }
.map-toolbar-row input[type="text"],
.map-toolbar-row select{
  font-family:inherit; font-size:14px; font-weight:500; padding:11px 14px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); height:42px;
}
.map-toolbar-row input[type="text"]{ flex:1 1 auto; min-width:200px; }
.map-toolbar-row input[type="text"]:focus, .map-toolbar-row select:focus{ outline:2px solid var(--teal); outline-offset:0; border-color:var(--teal); }
.map-toolbar-row .btn{ height:42px; flex:0 0 auto; }
.map-toolbar-check{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; cursor:pointer; height:42px; padding:0 4px; flex:0 0 auto; }
.map-toolbar-check input{ width:17px; height:17px; accent-color:var(--teal); cursor:pointer; }
.map-toolbar-filters select{ flex:1 1 0; min-width:0; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.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, #EEF5FF, #D9E8FB); color:var(--navy); 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:1px solid rgba(3,66,163,.10); 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(3,42,102,.10); }
.auth-logo-chip img{ display:block; width:100%; height:auto; }
.auth-side .tagline{ font-family:'Manrope', system-ui, sans-serif; font-size:23px; font-weight:800; line-height:1.35; margin-top:28px; text-align:center; color:var(--navy); }
.auth-side .tagline .accent{ color:var(--brand-green); }
.auth-side .sub{ font-family:'Manrope', system-ui, sans-serif; font-size:13.5px; font-weight:600; color:#4B5F80; margin-top:13px; line-height:1.65; text-align:center; }
.auth-side .sub strong{ font-family:'Manrope', system-ui, sans-serif; font-size:16.5px; font-weight:800; letter-spacing:.2px; }
.auth-side .sub strong .txt-blue{ color:var(--brand-blue); }
.auth-side .sub strong .txt-red{ color:var(--brand-red); }
.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; font-weight:500; line-height:1.5; color:#33455E; }
.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:#5B6B85; margin-top:26px; padding-top:18px; border-top:1px solid rgba(3,42,102,.14); }
.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; }

/* ---------- dashboard statistik ---------- */
.stat-tile-v2{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; display:flex; align-items:center; gap:16px; overflow:hidden;
}
.stat-tile-v2::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent, var(--teal)); }
.stat-tile-v2 .stat-icon{
  width:46px; height:46px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--accent, var(--teal)) 14%, transparent); color:var(--accent, var(--teal));
}
html[data-theme="dark"] .stat-tile-v2 .stat-icon{ background:color-mix(in srgb, var(--accent, var(--teal)) 28%, transparent); }
.stat-tile-v2 .num{ font-family:'Plus Jakarta Sans'; font-size:32px; font-weight:800; color:var(--ink); line-height:1.05; }
.stat-tile-v2 .lbl{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; font-weight:600; }

.filter-bar{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; margin-bottom:20px;
}
.filter-bar .field{ margin-bottom:0; min-width:150px; }
.filter-bar .field label{ display:flex; align-items:center; gap:6px; }
.filter-bar-sep{ color:var(--ink-soft); font-size:13px; padding-bottom:11px; }
.filter-bar-reset{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin-bottom:1px; border-radius:8px; color:var(--ink-soft); text-decoration:none; flex-shrink:0; }
.filter-bar-reset:hover{ color:#fff; background:var(--danger); }
.filter-bar-hint{ font-size:11.5px; color:var(--ink-soft); flex-basis:100%; margin-top:-4px; }

.stat-filter-row{ display:flex; align-items:stretch; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.stat-filter-row-tiles{ flex:1 1 480px; margin-bottom:0; }
.filter-bar-inline{ flex:0 0 auto; margin-bottom:0; }
@media (max-width:1100px){ .filter-bar-inline{ flex-basis:100%; } }
.filter-bar-inline .field{ min-width:130px; }

.chart-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 22px 12px; }
.chart-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:6px; flex-wrap:wrap; }
.chart-card-head h3{ font-size:15.5px; font-weight:700; }
.chart-card-head p{ font-size:12px; color:var(--ink-soft); margin-top:3px; }

.chart-toolbar{ display:flex; align-items:center; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:3px; flex-shrink:0; }
.chart-toolbar select.chart-type-select{
  appearance:none; font-family:inherit; font-size:12px; font-weight:600; color:var(--ink); background:transparent;
  border:none; padding:7px 22px 7px 10px; border-radius:7px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.chart-toolbar select.chart-type-select:hover{ background-color:var(--surface); }
.chart-toolbar-divider{ width:1px; height:20px; background:var(--line); margin:0 2px; }
.chart-toolbar-btn{
  appearance:none; border:none; background:transparent; color:var(--ink-soft); width:30px; height:30px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.chart-toolbar-btn:hover{ background:var(--surface); color:var(--teal-dark); }
.chart-toolbar-btn.active{ background:var(--teal); color:#fff; }

.chart-canvas{ width:100%; height:400px; }
@media (max-width:760px){ .chart-canvas{ height:320px; } }

@media print{
  .sidebar, .topbar, .backdrop, .filter-bar, .chart-toolbar{ display:none !important; }
  .main-wrap{ margin:0 !important; }
  .content{ padding:0 !important; }
  .chart-card{ border:none; box-shadow:none; break-inside:avoid; }
}