/* SITERIMA-PK — gaya SIMKA-Kuningan (navy/biru, kartu lembut, mobile-first) */
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 500; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2'); }

:root {
  --navy-900: #0b1f3a; --navy-800: #12305a; --blue-600: #1f5fbf; --blue-500: #2f7de1;
  --sky-100: #eaf2fc; --bg: #f4f7fb; --card: #ffffff; --text: #1b2a41;
  --muted: #6b7a90; --line: #e3e9f2;
  --st-belum: #94a3b8; --st-kumpul: #f59e0b; --st-ambil: #16a34a; --danger: #dc2626;
  --radius: 14px; --shadow: 0 6px 24px rgba(11, 31, 58, .08);
  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-primary: #1f5fbf; --bs-primary-rgb: 31, 95, 191;
  --bs-link-color: #1f5fbf; --bs-link-color-rgb: 31, 95, 191;
  --bs-border-radius: 10px;
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--bs-body-font-family); background: var(--bg); color: var(--text); overflow-x: hidden; }
a { color: var(--blue-600); }
.text-muted, .text-secondary { color: var(--muted) !important; }
.fw-800 { font-weight: 800; }
.small-xs { font-size: .75rem; }

/* Buttons */
.btn { border-radius: 10px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { min-height: 34px; }
.btn-primary { --bs-btn-bg: var(--blue-600); --bs-btn-border-color: var(--blue-600); --bs-btn-hover-bg: var(--navy-800); --bs-btn-hover-border-color: var(--navy-800); --bs-btn-active-bg: var(--navy-900); --bs-btn-disabled-bg: #9db6dc; --bs-btn-disabled-border-color: #9db6dc; }
.btn-outline-primary { --bs-btn-color: var(--blue-600); --bs-btn-border-color: var(--blue-600); --bs-btn-hover-bg: var(--blue-600); --bs-btn-hover-border-color: var(--blue-600); }
.btn-navy { background: var(--navy-800); color: #fff; border: 0; }
.btn-navy:hover { background: var(--navy-900); color: #fff; }

/* Forms: ≥16px agar iOS tidak auto-zoom */
.form-control, .form-select, .ts-control, .ts-control input { font-size: 16px !important; }
.form-control, .form-select { min-height: 46px; border-color: #d3dceb; border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: var(--blue-500); box-shadow: 0 0 0 .2rem rgba(47, 125, 225, .18); }
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.req { color: var(--danger); }

/* Cards */
.card-s { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(227, 233, 242, .7); }
.card-s-head { padding: 1rem 1.15rem .25rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.card-s-body { padding: 1rem 1.15rem 1.15rem; }
.fade-in { animation: fadeIn .25s ease-out both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Status badge */
.badge-st { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 700; padding: .28rem .6rem; border-radius: 999px; white-space: nowrap; }
.badge-st.st-belum { background: #eef2f7; color: #475569; }
.badge-st.st-kumpul { background: #fef3c7; color: #92400e; }
.badge-st.st-ambil { background: #dcfce7; color: #166534; }
.dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; flex: none; }
.dot.st-belum { background: #fff; border: 2px solid var(--st-belum); }
.dot.st-kumpul { background: var(--st-kumpul); }
.dot.st-ambil { background: var(--st-ambil); }

/* ---------- Public layout ---------- */
.pub-header { background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 45%, var(--blue-600) 100%); color: #fff; padding: 1rem 0 3.25rem; position: relative; }
.pub-header .brand { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
.pub-header .brand img { width: 44px; height: 44px; object-fit: contain; background: rgba(255, 255, 255, .95); border-radius: 12px; padding: 4px; }
.pub-header .brand .t1 { font-weight: 800; font-size: 1rem; letter-spacing: .02em; line-height: 1.15; }
.pub-header .brand .t2 { font-size: .75rem; opacity: .8; }
.pub-header h1 { font-size: 1.3rem; font-weight: 800; margin: 1.1rem 0 .25rem; line-height: 1.3; }
.pub-header p { opacity: .8; margin: 0; font-size: .9rem; }
.pub-main { margin-top: -2.25rem; position: relative; padding-bottom: 6rem; }
.wrap-form { max-width: 560px; margin: 0 auto; }
.pub-footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 1.5rem 1rem 2rem; }
.pub-footer a { color: var(--muted); }

.menu-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.15rem; text-decoration: none; color: var(--text); transition: transform .15s ease, box-shadow .15s ease; }
.menu-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(11, 31, 58, .12); color: var(--text); }
.menu-card .ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; flex: none; }
.menu-card .ic.kumpul { background: #e0ecfc; color: var(--blue-600); }
.menu-card .ic.ambil { background: #dcfce7; color: var(--st-ambil); }
.menu-card .tt { font-weight: 800; font-size: 1.1rem; }
.menu-card .ds { color: var(--muted); font-size: .85rem; }
.menu-card .chev { margin-left: auto; color: var(--muted); font-size: 1.25rem; }
.ring-mini .bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; display: flex; }
.ring-mini .bar span { display: block; height: 100%; }

/* Form serah */
.step-no { width: 26px; height: 26px; border-radius: 50%; background: var(--sky-100); color: var(--blue-600); display: inline-grid; place-items: center; font-size: .8rem; font-weight: 800; flex: none; }
.slide-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease, opacity .25s ease; opacity: 0; }
.slide-wrap.open { grid-template-rows: 1fr; opacity: 1; }
.slide-wrap > div { overflow: hidden; }
.ts-wrapper.single .ts-control { min-height: 46px; border-radius: 10px; border-color: #d3dceb; padding: .55rem .75rem; }
.ts-dropdown { border-radius: 10px; box-shadow: var(--shadow); font-size: .95rem; }
.ts-dropdown .optgroup-header { font-weight: 800; color: var(--navy-800); background: var(--sky-100); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.ts-dropdown .option { padding: .55rem .75rem; }
.opt-row { display: flex; align-items: center; gap: .55rem; }
.opt-row .opt-t { flex: 1; min-width: 0; }
.opt-row .opt-sub { display: block; font-size: .75rem; color: var(--muted); white-space: normal; }
.opt-row .opt-n { font-size: .75rem; color: var(--muted); white-space: nowrap; }

.info-card { background: linear-gradient(135deg, #f7faff, var(--sky-100)); border: 1px solid #d6e4f7; border-radius: var(--radius); padding: 1rem 1.1rem; }
.info-card .big { font-size: 2.6rem; font-weight: 800; color: var(--navy-800); line-height: 1; }
.info-card .big small { font-size: 1rem; font-weight: 600; color: var(--muted); }
.info-card .sub { color: var(--muted); font-size: .85rem; }
.info-lock { border-radius: 12px; padding: .85rem 1rem; font-size: .92rem; display: flex; gap: .6rem; align-items: flex-start; }
.info-lock.ok { background: #dcfce7; color: #14532d; }
.info-lock.kumpul { background: #fef3c7; color: #78350f; }
.info-lock.warn { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.info-lock.err { background: #fee2e2; color: #7f1d1d; }
.peg-list { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.peg-list table { font-size: .82rem; margin: 0; }
.peg-list th { position: sticky; top: 0; background: #f8fafc; z-index: 1; }

/* Pad TTD */
.ttd-box { position: relative; border: 2px dashed #c7d4e8; border-radius: 12px; background: #fff; overflow: hidden; }
.ttd-box canvas { display: block; width: 100%; height: 200px; touch-action: none; -ms-touch-action: none; cursor: crosshair; }
@media (min-width: 768px) { .ttd-box canvas { height: 240px; } }
.ttd-box .baseline { position: absolute; left: 8%; right: 8%; bottom: 28%; border-bottom: 2px dashed #d7e0ee; pointer-events: none; }
.ttd-box .ghost { position: absolute; inset: 0; display: grid; place-items: center; color: #b8c5d9; font-size: 1.05rem; font-weight: 600; pointer-events: none; transition: opacity .2s; }
.ttd-box.has-ink .ghost { opacity: 0; }
.ttd-box.invalid { border-color: var(--danger); }
.ttd-full .modal-body { display: flex; flex-direction: column; padding: .75rem; background: var(--bg); }
.ttd-full .ttd-box { flex: 1; }
.ttd-full .ttd-box canvas { height: 100%; }
.rotate-hint { display: none; }
@media (orientation: portrait) { .rotate-hint { display: flex; } }

/* Sticky save bar (HP) */
.save-bar { position: sticky; bottom: 0; z-index: 20; background: linear-gradient(180deg, rgba(244, 247, 251, 0), var(--bg) 30%); padding: 1rem 0 calc(.75rem + env(safe-area-inset-bottom)); margin-top: .5rem; }
.save-bar .btn { width: 100%; min-height: 52px; font-size: 1.05rem; box-shadow: 0 8px 20px rgba(31, 95, 191, .25); }

/* Sukses */
.sukses-ic { width: 88px; height: 88px; margin: 0 auto; }
.sukses-ic circle { stroke: var(--st-ambil); stroke-width: 4; fill: #dcfce7; stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw .5s ease-out forwards; }
.sukses-ic path { stroke: var(--st-ambil); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .3s .45s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: .35rem .75rem; font-size: .92rem; }
.kv dt { color: var(--muted); font-weight: 500; }
.kv dd { margin: 0; font-weight: 600; word-break: break-word; }

/* ---------- Admin layout ---------- */
.adm-side { position: fixed; top: 0; bottom: 0; left: 0; width: 256px; background: linear-gradient(180deg, var(--navy-900), var(--navy-800)); color: #cfe0f7; z-index: 1030; display: flex; flex-direction: column; }
.adm-side .brand { display: flex; align-items: center; gap: .65rem; padding: 1.1rem 1.1rem 1rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.adm-side .brand img { width: 38px; height: 38px; background: #fff; border-radius: 10px; padding: 3px; object-fit: contain; }
.adm-side .brand b { display: block; font-size: .95rem; letter-spacing: .02em; }
.adm-side .brand small { font-size: .7rem; opacity: .7; }
.adm-nav { padding: .75rem .6rem; overflow-y: auto; flex: 1; }
.adm-nav .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .55; padding: .9rem .75rem .35rem; font-weight: 700; }
.adm-nav a { display: flex; align-items: center; gap: .7rem; padding: .62rem .75rem; border-radius: 10px; color: #cfe0f7; text-decoration: none; font-weight: 500; font-size: .92rem; margin-bottom: 2px; }
.adm-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.adm-nav a.active { background: var(--blue-600); color: #fff; box-shadow: 0 6px 16px rgba(31, 95, 191, .35); }
.adm-nav a i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.adm-main { margin-left: 256px; min-height: 100vh; }
.adm-top { background: #fff; border-bottom: 1px solid var(--line); padding: .75rem 1.5rem; display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 1020; }
.adm-top h1 { font-size: 1.1rem; font-weight: 800; margin: 0; }
.adm-content { padding: 1.5rem; }
.adm-bottom { display: none; }
@media (max-width: 991.98px) {
  .adm-side { transform: translateX(-100%); transition: transform .25s ease; }
  .adm-side.show { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
  .adm-backdrop.show { position: fixed; inset: 0; background: rgba(11, 31, 58, .45); z-index: 1025; }
  .adm-main { margin-left: 0; padding-bottom: 72px; }
  .adm-top { padding: .65rem 1rem; }
  .adm-content { padding: 1rem; }
  .adm-bottom { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 20px rgba(11, 31, 58, .06); }
  .adm-bottom a, .adm-bottom button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem 0 .45rem; font-size: .7rem; font-weight: 600; color: var(--muted); text-decoration: none; background: none; border: 0; min-height: 56px; }
  .adm-bottom a.active { color: var(--blue-600); }
  .adm-bottom i { font-size: 1.25rem; }
}

/* KPI */
.kpi { padding: 1rem 1.1rem; cursor: pointer; transition: transform .15s, box-shadow .15s, outline-color .15s; outline: 2px solid transparent; height: 100%; }
.kpi:hover { transform: translateY(-2px); }
.kpi.active { outline-color: var(--blue-500); }
.kpi .k-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; }
.kpi .k-val { font-size: 1.85rem; font-weight: 800; line-height: 1.1; margin-top: .6rem; color: var(--navy-900); }
.kpi .k-lbl { color: var(--muted); font-size: .82rem; font-weight: 600; }
.kpi .k-sub { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.k-total .k-ic { background: var(--sky-100); color: var(--blue-600); }
.k-kumpul .k-ic { background: #fef3c7; color: #b45309; }
.k-ambil .k-ic { background: #dcfce7; color: var(--st-ambil); }
.k-belum .k-ic { background: #eef2f7; color: #64748b; }
.prog { height: 10px; background: #eef2f7; border-radius: 99px; overflow: hidden; }
.prog > div { height: 100%; border-radius: 99px; transition: width .6s ease; }
.chart-box { position: relative; height: 280px; }
.chart-box.tall { height: 460px; }

/* Feed */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; align-items: flex-start; }
.feed li:last-child { border-bottom: 0; }
.feed li .dot { margin-top: .35rem; }
.feed li .tm { margin-left: auto; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.feed li.flash { animation: flash 1.6s ease 2; border-radius: 8px; }
@keyframes flash { 0%, 100% { background: transparent; } 50% { background: #fff7d6; } }

/* Tables */
.table-s { font-size: .88rem; }
.table-s thead th { background: #f6f8fc; color: var(--muted); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table-s td { vertical-align: middle; border-color: var(--line); }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { font-size: .85rem; padding-top: .75rem; }
.filter-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--sky-100); color: var(--blue-600); border-radius: 99px; padding: .2rem .65rem; font-size: .78rem; font-weight: 600; }
.filter-chip button { border: 0; background: none; color: inherit; padding: 0; line-height: 1; }

/* Mobile cards (pengganti tabel di HP) */
@media (max-width: 767.98px) { .tbl-desktop { display: none; } }
@media (min-width: 768px) { .m-cards { display: none; } }
.m-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .85rem .95rem; margin-bottom: .6rem; }
.m-card .mc-t { font-weight: 700; font-size: .95rem; }
.m-card .mc-s { color: var(--muted); font-size: .8rem; }
.m-card .mc-meta { font-size: .8rem; margin-top: .45rem; display: grid; gap: .15rem; }

/* Modal & misc */
.modal-content { border-radius: var(--radius); border: 0; }
.ttd-img { max-width: 100%; height: 120px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.panel-trx { border: 1px solid var(--line); border-radius: 12px; padding: .9rem; height: 100%; }
.panel-trx h6 { font-weight: 800; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.toast-wrap { position: fixed; top: 1rem; right: 1rem; left: 1rem; z-index: 2000; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; pointer-events: none; }
.toast-wrap .toast { pointer-events: auto; }
.switch-row { display: flex; align-items: flex-start; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.switch-row:last-child { border-bottom: 0; }
.switch-row .form-check-input { width: 2.8em; height: 1.5em; margin: 0; flex: none; cursor: pointer; }
.switch-row .t { font-weight: 700; }
.switch-row .d { color: var(--muted); font-size: .85rem; }

/* Login */
.login-bg { min-height: 100vh; background: radial-gradient(1200px 600px at 10% -10%, rgba(47, 125, 225, .45), transparent), linear-gradient(135deg, var(--navy-900), var(--navy-800) 50%, var(--blue-600)); display: grid; place-items: center; padding: 1rem; }
.login-card { width: 100%; max-width: 400px; padding: 2rem 1.6rem; }

@media (max-width: 575.98px) {
  .pub-header h1 { font-size: 1.15rem; }
  .kv { grid-template-columns: 105px 1fr; }
  .kpi .k-val { font-size: 1.5rem; }
  .chart-box { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* DataTables: tabel di desktop, kartu di HP */
.dt-cards { display: none; }
@media (max-width: 767.98px) {
  .tbl-scroll { display: none; }
  .dt-cards { display: block; }
}
.dt-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.dt-foot .pagination { margin: 0; flex-wrap: wrap; }
.dropdown-menu { border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .9rem; }
.dropdown-item { padding: .5rem 1rem; }

/* Tom Select: unit terpilih tetap satu baris */
.ts-wrapper.single .ts-control { flex-wrap: nowrap; align-items: center; }
.ts-wrapper.single.has-items:not(.dropdown-active) .ts-control > input { position: absolute; left: -10000px; }
.ts-wrapper.single.has-items.dropdown-active .ts-control > .item { display: none; }
.ts-wrapper.single.dropdown-active .ts-control > input { flex: 1 1 auto; }
.ts-control .opt-row { min-width: 0; overflow: hidden; }
.ts-control .opt-row > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-wrapper.single .ts-control { padding-right: 2.25rem !important; }

/* Dropdown unit/wilayah selalu di atas tombol SIMPAN yang sticky */
.kartu-pilih { position: relative; z-index: 30; }
.kartu-pilih .ts-dropdown { z-index: 40; }
#formSerah .save-bar { transition: opacity .15s ease; }
#formSerah.pilih-open .save-bar { opacity: 0; visibility: hidden; pointer-events: none; }
.slide-wrap.open.done > div { overflow: visible; }