/* SVO Mobile — light theme (dark Pro Max DNA, low cost) */
:root {
  --bg: #0a0e27;
  --bg2: #0d1230;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --line: rgba(255, 255, 255, 0.1);
  --blue: #3b82f6;
  --blue2: #60a5fa;
  --pad: 16px;
  --radius: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ticker-h: 26px;
  --nav-h: 52px;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* Satu scroller: html. Jangan overflow-x:hidden di body — spek CSS mengubah
   overflow-y:visible menjadi auto, sehingga html+body sama-sama mengunci gulir (web normal).
   overflow-x:clip tidak memicu jebakan itu. */
html {
  scroll-behavior: auto;
  height: auto;
  min-height: 100%;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}
body {
  margin: 0;
  height: auto;
  max-height: none;
  min-height: 100%;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  color: var(--text);
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  /* Nav ikut gulir bersama halaman (bukan menempel di atas) */
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Install / Add to Home Screen / native WebView — tetap satu scroller (html). */
@media (display-mode: fullscreen),
       (display-mode: standalone),
       (display-mode: minimal-ui) {
  html {
    height: auto !important;
    max-height: none !important;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.panel0111 {
    /* Notch + home indicator: konten tidak terpotong di tepi layar */
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-bottom: 0;
  }
  main,
  #pMain {
    /* Biarkan dokumen (html) yang scroll — jangan kunci main ke viewport */
    height: auto;
    max-height: none;
    overflow-y: visible;
  }
}
button,
a,
label,
summary,
[role="button"],
[role="tab"],
[role="menuitem"],
.m-btn,
.m-dock-item,
.m-card,
.m-stat,
.hm-kpi-card,
.sale-sub-btn,
.sf-field,
.sf-field input,
.sf-field select,
.sf-field textarea,
input,
select,
textarea {
  touch-action: manipulation;
}

/* Soft glow without heavy blur animations.
   Mode gelap: lapisan fixed ini mahal bila digabung backdrop-filter dock. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 15% 20%, rgba(37, 99, 235, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 35% at 90% 70%, rgba(234, 88, 12, 0.16), transparent 50%),
    linear-gradient(180deg, #0a0e27, #070b1c);
}

/* Saat jari menggulir: lepas GPU mahal (blur/animasi/angkat kartu) di dark+light. */
body.is-scrolling .m-dock-scrim,
body.is-scrolling .m-dock-item.is-center,
body.is-scrolling .m-dock .liquidGlass-effect,
body.is-scrolling .act-type-sticky,
body.is-scrolling .p-load {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.is-scrolling [class*="hm-ico-"],
body.is-scrolling .hm-kpi-skel-blob,
body.is-scrolling .hm-kpi-skel-line,
body.is-scrolling .hm-kpi-skel-value,
body.is-scrolling .m-nav-refresh.is-syncing {
  animation-play-state: paused !important;
}
body.is-scrolling .hm-kpi-card,
body.is-scrolling .se-soft-card {
  transform: none !important;
  transition: none !important;
}

/* Native WebView: blur kaca hampir tak terlihat di atas tint pekat, tapi merampas gulir. */
body.is-native-app .m-dock-scrim,
body.is-native-app .m-dock .liquidGlass-effect,
body.is-native-app .m-dock-item.is-center,
body.is-native-app .act-type-sticky {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

a { color: var(--blue2); text-decoration: none; }
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
}

.svo-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  /* Square mark → full circle = sama kelengkungan ujung pill nav */
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--blue);
}

/* —— Top bar: kontainer rounded, center, jarak aman ke konten —— */
.m-nav {
  position: sticky;
  top: calc(6px + env(safe-area-inset-top, 0px));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: calc(100% - 20px);
  max-width: 560px;
  margin: 0 auto 16px;
  padding: 8px 12px;
  border-radius: 22px;
  background: rgba(15, 20, 40, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.theme-light .m-nav {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}
.m-nav-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.m-nav-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.m-nav-actions .m-btn,
.m-nav-actions .m-btn-ghost {
  padding: 0 12px;
  min-height: 34px;
  height: 34px;
  font-size: 12px;
  border-radius: 999px;
}
.m-brand-pair {
  gap: 6px;
}
.m-brand-sep {
  margin: 0 2px;
}
.m-nav-refresh {
  width: 36px;
  height: 36px;
  min-height: 36px;
  flex: 0 0 36px;
  font-size: 16px;
  color: var(--blue2);
}
.m-nav-refresh.is-syncing {
  animation: m-nav-sync-spin 0.85s linear infinite;
  opacity: 0.85;
  pointer-events: none;
}
/* Hitung mundur detik di tombol segarkan */
.m-nav-refresh.has-count {
  position: relative;
  overflow: visible;
}
.m-nav-refresh.has-count::after {
  content: attr(data-count);
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: #1d4ed8;
  border: 1px solid rgba(255, 255, 255, 0.55);
  animation: none;
}
@keyframes m-nav-sync-spin {
  to { transform: rotate(360deg); }
}
.m-nav-actions .m-nav-refresh {
  order: 2;
}
.m-nav-actions #pMenuBtn2 {
  order: 3;
}
.m-nav-actions #pUserBtn {
  order: 1;
  max-width: min(42vw, 132px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}

.m-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  border-radius: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 700;
  font-size: 14px;
}
.m-brand-pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.m-brand-goda {
  display: none;
  height: 28px;
  width: auto;
  max-width: min(118px, 36vw);
  object-fit: contain;
  background: transparent !important;
  border: 0;
  flex-shrink: 0;
}
/* Dark (default): wordmark putih. Light: wordmark hitam. */
body:not(.theme-light) .m-brand-goda-dark,
html[data-theme="dark"] body:not(.theme-light) .m-brand-goda-dark {
  display: block;
}
body.theme-light .m-brand-goda-light,
html[data-theme="light"] .m-brand-goda-light {
  display: block;
}
body.theme-light .m-brand-goda-dark {
  display: none !important;
}
.m-brand-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}
body.theme-light .m-brand-sep {
  background: rgba(15, 23, 42, 0.18);
}
.m-brand-logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: min(200px, 48vw);
  object-fit: contain;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}
.m-brand-text {
  display: inline-flex;
  align-items: center;
  height: 14px; /* 50% dari tinggi lama (28px) */
  font-family: inherit;
  font-weight: 800;
  font-size: 12px; /* 50% dari 24px */
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(90deg, #3b82f6, #a855f7 48%, #ea580c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: none;
  white-space: nowrap;
}

.m-nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
}

.m-btn-ghost {
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.m-btn-primary {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}

.m-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  font-size: 18px;
  line-height: 1;
  box-sizing: border-box;
  flex: 0 0 40px;
}
.m-nav-actions .m-btn {
  min-height: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  box-sizing: border-box;
}
.m-nav-actions .m-btn-icon {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 999px;
}

/* —— Drawer menu —— */
.m-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
}
.m-drawer.open { display: block; }
.m-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.m-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(86vw, 320px);
  height: 100%;
  padding: 18px 14px 28px;
  background: #10162e;
  border-left: 1px solid var(--line);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
  overflow: auto;
}
.m-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.m-drawer-head strong { font-size: 15px; }
.m-drawer-list {
  display: grid;
  gap: 6px;
}
.m-drawer-list button,
.m-drawer-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  color: var(--text);
  font-weight: 650;
  font-size: 14px;
  text-align: left;
}
.m-drawer-list button.is-active,
.m-drawer-list button.is-active:hover {
  background: rgba(59, 130, 246, 0.22);
  color: #fff;
}

.m-dock .m-btn.is-active,
.m-dock-item.is-active {
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35);
}

#mMain.is-loading {
  opacity: 0.72;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.m-drawer-sep {
  height: 1px;
  margin: 10px 0;
  background: var(--line);
}
.m-drawer-theme {
  display: block;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 28, 0.45);
}
.m-drawer-theme .svo-theme-liquid {
  max-width: none;
  width: 100%;
  margin: 0;
}
.m-drawer-theme .pf-theme-btn {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--muted);
  font-weight: 700;
  background: transparent;
  justify-content: center;
  text-align: center;
  padding: 8px;
}
.m-drawer-theme .pf-theme-btn.is-on {
  color: #fff;
  background: linear-gradient(160deg, #3b82f6, #1d4ed8);
  border-color: rgba(147, 197, 253, 0.4);
}
body.theme-light .m-drawer-theme {
  background: #f1f5f9;
}
.m-drawer-note {
  display: none !important;
}

/* —— Hero —— */
.m-hero {
  padding: 28px var(--pad) 20px;
  text-align: center;
}
.m-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}
.m-badge {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(15, 20, 40, 0.7);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 650;
}
.m-title {
  margin: 0;
  font-size: clamp(1.7rem, 7.2vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.m-title .grad {
  display: block;
  background: linear-gradient(90deg, #3b82f6, #a855f7 48%, #ea580c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.m-title .plain {
  display: block;
  margin-top: 0.12em;
  color: #fff;
  font-size: 0.82em;
}
.m-sub {
  margin: 12px auto 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: 14px;
}
.m-cli {
  display: inline-flex;
  align-items: center;
  margin: 16px auto 0;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(10, 14, 32, 0.85);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}
.m-cli-cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  background: #fff;
  vertical-align: -2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.m-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.m-actions .m-btn { width: 100%; min-height: 44px; }

.m-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.m-stat {
  padding: 14px 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(18, 24, 48, 0.65);
  text-align: center;
}
.m-stat strong {
  display: block;
  color: var(--blue2);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.m-stat span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

/* —— Sections —— */
.m-section {
  padding: 8px var(--pad) 8px;
}
/* Di dalam PageBundle / beranda: padding diganti container box (lihat section-engine.css) */
.pb-page > .m-section,
.pb-page-skeleton > .m-section,
.hm-page > .m-section,
.pb-page > .pb-section.m-section {
  padding: 12px 14px 14px;
}
.hm-cal-sec.m-section,
.hm-kpi-sec.m-section {
  padding-top: 12px;
  padding-bottom: 14px;
}
.m-section-head {
  margin-bottom: 10px;
}
.m-section-head span {
  display: block;
  margin: 0 0 2px;
  color: var(--blue2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.m-section-head h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.m-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.m-section-head:has(> span) h2 {
  margin-top: 0;
}
/* Satu judul saja — hindari eyebrow + h2 berhimpitan */
.hm-kpi-sec .m-section-head,
.hm-summary .m-section-head,
.hm-cal-sec .m-section-head {
  margin-bottom: 4px;
}
.hm-kpi-sec .m-section-head h2,
.hm-summary .m-section-head h2 {
  font-size: 1.15rem;
}

/* PageBundle table (getRangeTableData / renderHomeTable) */
.pb-table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.pb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  min-width: 280px;
}
.pb-table th,
.pb-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #12183a;
  color: var(--blue2);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pb-table th.pb-freeze,
.pb-table td.pb-freeze {
  position: sticky;
  left: var(--pb-freeze-left, 0px);
  z-index: 3;
  background: #12183a;
  box-shadow: 2px 0 0 rgba(148, 163, 184, 0.18);
}
.pb-table td.pb-freeze {
  z-index: 1;
  background: color-mix(in srgb, var(--bg2, #0f172a) 92%, #12183a 8%);
}
.pb-table th.pb-freeze {
  z-index: 4;
  top: 0;
}
.pb-table tbody tr:last-child td { border-bottom: 0; }
.pb-table-meta {
  margin: 6px 8px 8px;
  color: var(--muted);
  font-size: 10px;
}
.pb-table-err { color: #fca5a5; font-size: 11px; }
.pb-table-loading { padding: 8px; font-size: 11px; }
.pb-table-skel {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.pb-table-skel th,
.pb-table-skel td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.pb-table-skel .pb-skel-cell {
  display: block;
  height: 9px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--line) 70%, transparent),
    color-mix(in srgb, var(--bg2) 80%, var(--line)),
    color-mix(in srgb, var(--line) 70%, transparent));
  background-size: 200% 100%;
  animation: pb-skel 1.2s ease-in-out infinite;
}
.pb-table-sec.se-section-box,
.pb-page > .pb-table-sec.m-section,
.hm-page > .pb-table-sec.m-section {
  margin: 0 1px 6px;
  padding: 8px 10px 10px;
}
.pb-page-skeleton > .m-section {
  margin: 0 1px 6px;
  padding: 8px 10px 10px;
}
.pb-page-skeleton .pb-lazy-skel {
  gap: .28rem;
  padding: .4rem 0 .2rem;
}
.pb-page-skeleton .pb-skel-line {
  height: 9px;
}

.m-cards {
  display: grid;
  gap: 8px;
}
.m-card {
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(18, 24, 48, 0.55);
}
.m-card h3 {
  margin: 0 0 6px;
  font-size: 0.98rem;
}
.m-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.m-cta {
  margin: 8px var(--pad) 0;
  padding: 22px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(16, 22, 46, 0.8);
  text-align: center;
}
.m-cta h2 {
  margin: 8px 0 14px;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.m-cta > span {
  color: var(--blue2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.m-cta .row {
  display: grid;
  gap: 8px;
}

.m-footer {
  padding: 28px var(--pad) 28px;
  color: var(--muted);
  font-size: 13px;
}
.m-footer strong { color: #fff; }
.m-footer .row {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}
.m-footer .label {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-weight: 700;
}

/* Bottom dock — liquid glass shell; Activity (center) menonjol ke atas (gaya center tidak diubah) */
.m-dock {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  display: block;
  gap: 0;
  height: 56px;
  padding: 3px 2px 4px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  box-shadow:
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 0, 0, 0.12),
    0 12px 32px rgba(0, 0, 0, 0.28);
  overflow: visible;
  isolation: isolate;
}
/* Tutupi konten di belakang / bawah navbar — blur + veil (hanya area bawah) */
.m-dock-scrim {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 34;
  height: calc(72px + env(safe-area-inset-bottom, 0px) + 10px);
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg) 96%, transparent) 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 48%,
    color-mix(in srgb, var(--bg) 35%, transparent) 78%,
    transparent 100%
  );
  /* Gradient sudah cukup; blur di sini membuat gulir dark mode tersendat. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
  mask-image: linear-gradient(to top, #000 55%, transparent 100%);
}
/* Hemat saat menggulir: lapisan blur + animasi tanpa henti dijeda sementara. */
body.is-scrolling .m-dock-scrim,
body.is-scrolling .m-dock-item.is-center {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.is-scrolling .m-dock-item.is-center,
body.is-scrolling .m-dock-center-glow,
body.is-scrolling .m-dock-center-sheen,
body.is-scrolling .svo-page-ticker-track {
  animation-play-state: paused;
}
body.theme-light .m-dock-scrim {
  background: linear-gradient(
    to top,
    rgba(248, 250, 252, 0.97) 0%,
    rgba(248, 250, 252, 0.82) 50%,
    rgba(248, 250, 252, 0.28) 80%,
    transparent 100%
  );
}
.m-dock-7 {
  /* kolom 7 di .m-dock-rail */
}
.m-dock-7 .m-dock-rail {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.m-dock-raised { /* marker: Activity raised */ }
.m-dock-center-slot {
  min-width: 0;
  height: 1px;
  pointer-events: none;
}
.m-dock .m-btn {
  min-height: 42px;
  font-size: 12px;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 48px;
  padding: 3px 1px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  font-weight: 650;
}
.m-dock-item.is-active {
  color: #fff;
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.45);
}
/* Tombol tengah (Activity) — squircle liquid glass, bukan lingkaran penuh */
.m-dock-item.is-center {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
  overflow: hidden;
  isolation: isolate;
  width: clamp(52px, 14.5vw, 60px);
  height: 54px;
  min-height: 54px;
  margin: 0;
  padding: 6px 4px 5px;
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0.1)),
    linear-gradient(160deg, #16233f 0%, #0d1730 46%, #070d1d 100%);
  border: 1px solid rgba(96, 165, 250, 0.42);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 10px 24px rgba(37, 99, 235, 0.42),
    0 2px 6px rgba(2, 6, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -8px 16px rgba(2, 6, 23, 0.22);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
  animation: mDockCenterFloat 4.6s ease-in-out infinite;
}
/* Halo lembut di belakang label */
.m-dock-center-glow {
  position: absolute;
  inset: -30% -20% 40%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  opacity: 0.55;
  pointer-events: none;
  animation: mDockCenterGlow 4.6s ease-in-out infinite;
}
/* Kilau kaca menyapu */
.m-dock-center-sheen {
  position: absolute;
  top: -60%;
  left: -60%;
  width: 60%;
  height: 220%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
  animation: mDockCenterSheen 5.2s ease-in-out infinite;
}
.m-dock-center-mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}
.m-dock-center-brand {
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.4);
}
/* Logo SVO: SV biru pekat, O oranye */
.m-dock-brand-sv {
  color: #3b82f6;
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.55);
}
.m-dock-brand-o {
  color: #f97316;
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.55);
}
.m-dock-center-sub {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}
.m-dock-item.is-center:active {
  transform: translateX(-50%) scale(0.94);
}
.m-dock-item.is-center.is-active {
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 12px 28px rgba(37, 99, 235, 0.52),
    0 2px 8px rgba(2, 6, 23, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -8px 16px rgba(2, 6, 23, 0.2);
}
@keyframes mDockCenterFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}
@keyframes mDockCenterGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.75; }
}
@keyframes mDockCenterSheen {
  0%, 62% { left: -60%; }
  92%, 100% { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
  .m-dock-item.is-center,
  .m-dock-center-glow,
  .m-dock-center-sheen {
    animation: none;
  }
  .m-dock-center-sheen { opacity: 0; }
}
.m-dock-ico {
  font-size: 14px;
  line-height: 1;
  opacity: 0.95;
}
.m-dock-lbl {
  font-size: 8px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-dock-landing {
  grid-template-columns: 1fr !important;
}
.m-dock-landing .m-dock-rail {
  grid-template-columns: 1fr !important;
}
.m-dock-landing .m-btn {
  width: 100%;
  min-height: 46px;
}
/* Konten tidak tertutup navbar bawah — kolom mobile penuh */
main,
#pMain {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* visible: overflow-x:clip di sini membuat overflow-y ikut clip → halaman tidak bisa digulir */
  overflow: visible;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
.m-footer {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
.sf-wrap {
  padding-bottom: 28px;
}

.m-we {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 10px 8px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(15, 20, 40, 0.7);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}
.m-we em {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
  margin-right: 3px;
}
.m-we .svo-mark {
  width: 26px;
  height: 26px;
  font-size: 9px;
  border-radius: 50%;
}

@media (min-width: 720px) {
  /* Frame “HP” di layar lebar — #pMain jadi kolom tunggal agar PageBundle tidak nempel kiri */
  main,
  #pMain {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .m-hero,
  .m-section,
  .m-footer,
  .m-cta,
  .pb-page {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .m-nav {
    max-width: 560px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 20px);
  }
  .m-dock { max-width: 560px; left: 50%; right: auto; transform: translateX(-50%); width: calc(100% - 20px); }
}

/* —— Panel load: badge center-atas (ringkas, tidak blokir klik) —— */
.p-load {
  position: fixed;
  inset: 0;
  z-index: 120; /* di atas nav/dock agar terlihat jelas di tengah layar */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
  background: rgba(2, 6, 23, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.p-load.is-on { display: flex; }
.p-load-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: min(92vw, 340px);
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 30, 0.94);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  position: relative;
  pointer-events: none;
}
.p-load-card::after {
  content: none;
}
body.theme-light .p-load-card {
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
}
.p-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--blue2);
  animation: pspin 0.85s linear infinite;
}
@keyframes pspin { to { transform: rotate(360deg); } }

/* Baris pesanan PO — catatan ketersediaan stok per baris */
.po-stock-hint {
  color: var(--muted);
  line-height: 1.35;
}
.po-stock-hint:empty { display: none; }

/* Konten boleh sedikit redup, tapi tetap bisa discroll / diklik; shell tidak dikunci */
#pMain.is-loading {
  opacity: 0.88;
  pointer-events: auto;
  transition: opacity 0.2s var(--ease);
}

/* Splash Layer 1+2 — ikut light/dark mode */
.p-welcome,
.p-onboard {
  position: fixed;
  inset: 0;
  z-index: 130000; /* di atas login/FAB/Assist agar Tutup bisa diklik */
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(var(--ticker-h, 26px) + env(safe-area-inset-top, 0px) + 12px) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
.p-welcome { z-index: 130010; }
.p-welcome.is-on,
.p-onboard.is-on {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  animation: pSplashOverlayIn 0.38s ease-out both;
}
.p-welcome.is-leaving,
.p-onboard.is-leaving {
  display: flex;
  opacity: 0;
  pointer-events: none;
  animation: pSplashOverlayOut 0.28s ease-in both;
}
@keyframes pSplashOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pSplashOverlayOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
body.has-onboard .p-load,
body.has-welcome .p-load { z-index: 70; }
body.has-onboard,
body.has-welcome { overflow: hidden; }

.p-welcome-card,
.p-onboard-card {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 420px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.p-ag-field {
  position: absolute;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}
.p-ag-field-soft { opacity: 0.9; }
.p-ag-dot {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--s);
  height: calc(var(--s) * 2.2);
  border-radius: 999px;
  background: var(--c);
  opacity: 0.55;
  filter: blur(0.2px);
  animation: pAgFloat var(--dur) ease-in-out var(--d) infinite alternate;
  transform: translateZ(0);
}
@keyframes pAgFloat {
  from { transform: translate3d(0, 8px, 0) scale(0.92); opacity: 0.35; }
  to { transform: translate3d(0, -18px, 0) scale(1.08); opacity: 0.75; }
}

.p-ag-glass {
  position: relative;
  z-index: 2;
  width: min(100%, 300px);
  padding: 16px 14px 12px;
  border-radius: 20px;
  text-align: center;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 14px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  animation: pAgIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  color: var(--text);
  transform-origin: center bottom;
}
body.theme-light .p-ag-glass {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 14px 32px rgba(15, 23, 42, 0.08);
}
.p-ag-glass-compact { padding: 14px 12px 10px; }
.p-welcome.is-leaving .p-ag-glass,
.p-onboard.is-leaving .p-ag-glass {
  animation: pAgOut 0.28s ease-in both;
}
@keyframes pAgIn {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pAgOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(0.96); }
}

.p-ag-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 4px;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.p-ag-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  object-fit: cover;
}
.p-ag-kicker {
  margin: 0 0 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.p-welcome-greet {
  margin: 0 0 2px;
  font-size: clamp(0.92rem, 3.4vw, 1.05rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
}
.p-welcome-name {
  margin: 0 0 8px;
  font-size: clamp(0.98rem, 3.6vw, 1.12rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.p-welcome-clock {
  margin: 0 0 2px;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}
.p-welcome-date {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 550;
  color: var(--muted);
}
.p-ag-actions { display: grid; gap: 8px; margin-bottom: 10px; }
.p-ag-btn {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.28);
  cursor: pointer;
  width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: transform 0.12s ease, background 0.12s ease;
  background: rgba(30, 41, 59, 0.9);
  color: #e2e8f0;
}
.p-ag-btn:active { transform: scale(0.98); }
.p-ag-btn-primary {
  background: linear-gradient(135deg, #059669 0%, #2563eb 100%);
  border-color: transparent;
  color: #fff;
}
.p-ag-btn-primary:active { filter: brightness(0.92); }
.p-ag-btn-ghost {
  background: rgba(51, 65, 85, 0.65);
  color: #e2e8f0;
}
body.theme-light .p-ag-btn {
  background: #f1f5f9;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.1);
}
body.theme-light .p-ag-btn-primary {
  background: linear-gradient(135deg, #059669 0%, #2563eb 100%);
  color: #fff;
}
body.theme-light .p-ag-btn-ghost {
  background: #f1f3f4;
  color: #202124;
}

.p-splash-timer,
.p-ag-timer {
  height: 3px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}
.p-splash-timer i,
.p-ag-timer i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #4285f4, #a142f4, #ea4335, #fbbc04);
  animation: pSplashTimer linear forwards;
}
@keyframes pSplashTimer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.p-onboard { background: var(--bg); }
.p-splash-l2 {
  max-width: 520px;
  height: auto;
  max-height: 100%;
}
.p-splash-l2-head { position: relative; z-index: 1; margin-bottom: 4px; }
.p-onboard-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 8px;
}
body.theme-light .p-onboard-kicker { color: #4285f4; }
.p-splash-l2-head h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.02em;
}
.p-onboard-lead {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.p-splash-l2-grid {
  display: grid;
  gap: 8px;
  text-align: left;
  margin-bottom: 12px;
}
.p-splash-tile {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.45);
}
body.theme-light .p-splash-tile {
  border-color: rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.72);
}
.p-splash-ico {
  grid-row: 1 / span 2;
  align-self: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(66, 133, 244, 0.12);
  font-size: 15px;
}
.p-splash-tile strong { font-size: 13px; color: var(--text); }
.p-splash-tile p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.p-splash-prog {
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
  margin: 0 0 6px;
}
.p-onboard-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4285f4, #a142f4);
  transition: width 0.35s ease;
}
.p-onboard-progress {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.p-splash-l2-foot { display: grid; gap: 10px; }

/* GPS: HP/app kunci penuh; desktop boleh Abaikan (tombol close) */
.svo-gps-lock {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  background: rgba(6, 10, 28, 0.92);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}
.svo-gps-lock.is-on {
  display: flex;
  opacity: 1;
}
.svo-gps-lock-card {
  position: relative;
  width: min(420px, 100%);
  border-radius: 20px;
  padding: 28px 22px 22px;
  text-align: center;
  background: linear-gradient(165deg, rgba(30, 41, 72, 0.98), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  color: #e2e8f0;
}
.svo-gps-lock-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #94a3b8;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}
.svo-gps-lock.is-desktop-dismissable .svo-gps-lock-close {
  display: grid !important;
  place-items: center;
}
.svo-gps-lock.is-desktop-dismissable .svo-gps-lock-dismiss {
  display: block !important;
}
.svo-gps-lock-close:hover {
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.16);
}
.svo-gps-lock-dismiss {
  background: transparent !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}
.svo-gps-lock-dismiss:hover {
  background: rgba(148, 163, 184, 0.12) !important;
}
.svo-gps-lock-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  background: #dc2626;
}
.svo-gps-lock-eyebrow {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f87171;
  font-weight: 700;
}
.svo-gps-lock-card h2 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  line-height: 1.3;
  color: #f8fafc;
}
.svo-gps-lock-msg,
.svo-gps-lock-hint {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #94a3b8;
}
.svo-gps-lock-actions {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.svo-gps-lock-actions .p-ag-btn {
  width: 100%;
  min-height: 46px;
}
/* Pengingat lokasi tidak boleh membekukan halaman — gulir & navigasi tetap hidup. */
html.svo-gps-locked,
body.svo-gps-locked {
  overflow: visible;
}
body.svo-gps-locked #app,
body.svo-gps-locked .app-shell,
body.svo-gps-locked .drawer,
body.svo-gps-locked .dock {
  pointer-events: auto;
}
body.theme-light .svo-gps-lock {
  background: rgba(15, 23, 42, 0.78);
}
body.theme-light .svo-gps-lock-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}
body.theme-light .svo-gps-lock-card h2 { color: #0f172a; }
body.theme-light .svo-gps-lock-msg,
body.theme-light .svo-gps-lock-hint { color: #64748b; }
body.theme-light .svo-gps-lock-close { color: #64748b; }
body.theme-light .svo-gps-lock-close:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
}
body.theme-light .svo-gps-lock-dismiss {
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #475569 !important;
}

/* Success popup absensi — overlay blur saja (tanpa dim solid) */
.p-att-ok {
  position: fixed;
  inset: 0;
  /* Konfirmasi aksi (proses/berhasil/gagal) wajib paling atas — jangan tertutup
     kunci GPS (10050), pembaruan (100050), atau layar sambutan (130010). */
  z-index: 200180;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: transparent;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.p-att-ok.is-on {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.p-att-ok.is-leaving {
  display: flex;
  opacity: 0;
}
.p-att-ok-card {
  width: min(100%, 320px);
  padding: 24px 20px 18px;
  border-radius: 22px;
  text-align: center;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  animation: pAttOkIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  color: #e2e8f0;
}
@keyframes pAttOkIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
body.theme-light .p-att-ok {
  background: transparent;
}
body.theme-light .p-att-ok-card {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
  color: #0f172a;
}
.p-att-ok-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #e6f4ea;
  color: #137333;
  font-size: 24px;
  font-weight: 800;
}
.p-att-ok-card.is-err .p-att-ok-icon {
  background: #fce8e6;
  color: #c5221f;
}
.lg-rute-pin-num.is-driver-lit {
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.95), 0 0 16px rgba(56, 189, 248, 0.65);
  transform: scale(1.08);
  /* Tanpa animasi infinite — hemat GPU / panas HP */
}
.lg-rute-pin-num.is-stop-lit {
  box-shadow: 0 0 0 4px #fbbf24, 0 0 18px rgba(251, 191, 36, 0.85);
  transform: scale(1.2);
  z-index: 5;
  background: #fbbf24 !important;
}
.lg-rute-pin-num.is-stop-lit.is-done,
.lg-rute-pin-num.is-stop-lit.is-fail {
  background: #fbbf24 !important;
}
@keyframes lg-rute-pin-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.85), 0 0 10px rgba(56, 189, 248, 0.45);
    transform: scale(1.05);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.95), 0 0 22px rgba(56, 189, 248, 0.75);
    transform: scale(1.18);
  }
}
@keyframes lg-rute-pin-pulse-strong {
  0%, 100% {
    box-shadow: 0 0 0 3px #fbbf24, 0 0 12px rgba(251, 191, 36, 0.7);
    transform: scale(1.12);
  }
  50% {
    box-shadow: 0 0 0 6px #fde68a, 0 0 26px rgba(251, 191, 36, 0.95);
    transform: scale(1.32);
  }
}
.lg-stop-row.is-map-focus {
  outline: 2px solid #38bdf8;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.08);
}
.lg-stop-row {
  cursor: pointer;
}
.act-sale-sec {
  margin: 8px 0 4px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: 0.9;
}
.act-sale-agree .act-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  margin-top: 6px;
}
.act-banner--penjualan {
  border-color: rgba(34, 197, 94, 0.45);
}

.p-att-ok-card h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  color: #f8fafc;
  letter-spacing: -0.02em;
}
body.theme-light .p-att-ok-card h3 { color: #0f172a; }
.p-att-ok-msg {
  margin: 0 0 6px;
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.45;
  white-space: pre-line;
}
body.theme-light .p-att-ok-msg { color: #64748b; }
.p-att-ok-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #34d399;
}
body.theme-light .p-att-ok-eyebrow { color: #0f766e; }
.p-att-ok-card--confirm .p-att-ok-icon {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}
body.theme-light .p-att-ok-card--confirm .p-att-ok-icon {
  background: #e6f4ea;
  color: #137333;
}
.p-att-ok-when {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
}

.lg-target-line {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.p-offline-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background: rgba(234, 179, 8, 0.15);
  color: #fde68a;
  border-bottom: 1px solid rgba(234, 179, 8, 0.25);
}
.p-offline-bar.is-offline {
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
  border-bottom-color: rgba(239, 68, 68, 0.25);
}
.p-offline-bar.is-queue {
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
  border-bottom-color: rgba(59, 130, 246, 0.25);
}
body.has-offline-bar .m-nav { top: 0; }
body.theme-light .p-offline-bar.is-offline {
  color: #b91c1c;
  background: rgba(254, 226, 226, 0.95);
}

.p-toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  /* Sejajar popup konfirmasi — pesan singkat harus tetap terbaca di atas overlay. */
  z-index: 130060;
  transform: translateX(-50%) translateY(12px);
  max-width: min(92vw, 420px);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  border: 1px solid var(--line);
  background: rgba(16, 22, 46, 0.96);
  color: #fff;
}
.p-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.p-toast.is-ok { border-color: rgba(34, 197, 94, 0.45); }
.p-toast.is-err { border-color: rgba(248, 113, 113, 0.55); }

/* —— Sales / settings forms —— */
:root {
  --form-gutter-w: 10%;
  --sf-field-h: 36px;
  --sf-field-pad-y: 7px;
  --sf-field-pad-x: 10px;
  --sf-field-fs: 14px;
  --sf-label-fs: 11px;
}

/* Gutter kiri 10% — jari menggulir tanpa nyasar ke field */
.sf-form,
#profileForm,
#pwdForm,
#salesForm,
.form-scroll-layout {
  padding-left: var(--form-gutter-w);
  box-sizing: border-box;
}

.sf-form { display: grid; gap: 10px; }
.sf-field {
  display: grid;
  gap: 6px;
  text-align: left;
}
.sf-field > span {
  color: var(--muted);
  font-size: var(--sf-label-fs, 11px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.sf-field input,
.sf-field select,
.sf-field textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  width: 100%;
  min-height: var(--sf-field-h);
  padding: var(--sf-field-pad-y) var(--sf-field-pad-x);
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(10, 14, 32, 0.85);
  color: #f8fafc;
  caret-color: #93c5fd;
  color-scheme: dark;
  font-family: inherit;
  /* 14px: viewport maximum-scale=1 mencegah autozoom iOS */
  font-size: var(--sf-field-fs, 14px) !important;
  line-height: 1.35;
  -webkit-appearance: none;
  appearance: none;
  transform: none;
  box-sizing: border-box;
}
/* Hasil ketikan formulir → huruf kapital (nilai disimpan uppercase via JS) */
.sf-field input:not([type="email"]):not([type="password"]):not([type="url"]):not([type="tel"]):not([type="number"]):not([type="date"]):not([type="time"]):not([type="file"]):not([type="hidden"]):not(.sf-uuid):not([id*="Npwp" i]):not([id*="npwp" i]):not([id*="Phone" i]):not([id*="Maps" i]):not([id*="Email" i]):not([id*="Qty" i]):not([id*="Price" i]):not([id*="Disc" i]):not([id*="PayNom" i]):not([id*="Barcode" i]):not([id*="Serial" i]),
.sf-field textarea:not([id*="Maps" i]) {
  text-transform: uppercase;
}
.sf-field input[id*="Npwp" i],
.sf-field input[id*="npwp" i],
input.is-npwp {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-transform: none;
}
.sf-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.sf-field select,
.sf-field .sf-readonly,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select:not([multiple]) {
  height: var(--sf-field-h);
}
.sf-field input::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(248, 250, 252, 0.45);
}
.sf-field input:-webkit-autofill,
.sf-field input:-webkit-autofill:hover,
.sf-field input:-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #93c5fd;
  transition: background-color 99999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px rgba(10, 14, 32, 0.95) inset;
}
.sf-field textarea,
textarea {
  min-height: 71px;
  height: auto;
  resize: vertical;
}
.sf-field input:focus,
.sf-field select:focus,
.sf-field textarea:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.65);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.sf-field input:disabled,
input:disabled {
  opacity: 0.65;
}
.sf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.att-geo .m-btn {
  width: 100%;
}
.att-cam-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
}
.att-cam-block .m-btn {
  width: min(100%, 280px);
}
/* Buka Kamera + Foto ulang bersebelahan di kartu jenis absensi */
.att-cam-block.att-cam-pair {
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  margin: 10px 0 0;
}
.att-cam-block.att-cam-pair .m-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.att-cam-block.att-cam-pair .m-btn[hidden] {
  display: none;
}
/* Notice lokasi — center + menyala saat belum diambil */
.att-geo-note {
  margin: 8px 0 0;
  text-align: center;
}
.att-geo-flag {
  display: inline-block;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  color: #fed7aa;
  background: rgba(249, 115, 22, 0.16);
  border: 1px solid rgba(249, 115, 22, 0.45);
  box-shadow: 0 0 0 rgba(249, 115, 22, 0.5);
  animation: attGeoPulse 1.8s ease-in-out infinite;
}
.att-geo-flag.is-ready {
  color: var(--text);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  animation: none;
  font-weight: 600;
  padding: 0;
}
@keyframes attGeoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.42); }
  50% { box-shadow: 0 0 14px 3px rgba(249, 115, 22, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
  .att-geo-flag { animation: none; }
}
body.theme-light .att-geo-flag {
  color: #9a3412;
  background: rgba(249, 115, 22, 0.14);
  border-color: rgba(234, 88, 12, 0.42);
}
body.theme-light .att-geo-flag.is-ready {
  color: var(--text);
  background: transparent;
  border-color: transparent;
}
.sf-line {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(18, 24, 48, 0.55);
  margin-bottom: 8px;
}
.sf-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sf-mini {
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}
.sf-line-total {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.sf-summary {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(18, 24, 48, 0.7);
}
.sf-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.sf-summary span { color: var(--muted); }
.sf-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.sf-sale-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.sf-sale-amt {
  margin: 6px 0;
  color: var(--blue2);
  font-weight: 800;
}
.sf-sale-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.sf-detail-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}

/* —— Absensi —— */
.att-purpose-block {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(59, 130, 246, 0.28);
  background: rgba(37, 99, 235, 0.1);
  position: relative;
  z-index: 100101; /* di atas G-Tools FAB agar Absen Masuk/Pulang bisa diklik */
}
.att-purpose-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #93c5fd;
}
.att-purpose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  position: relative;
  z-index: 1;
}
.att-purpose-btn {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(18, 24, 48, 0.75);
  color: #e2e8f0;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(96, 165, 250, 0.35);
}
.att-purpose-btn.is-on {
  color: #fff;
  border-color: rgba(96, 165, 250, 0.75);
  background: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}
body.theme-light .att-purpose-block {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.22);
}
body.theme-light .att-purpose-label { color: #1d4ed8; }
body.theme-light .att-purpose-btn {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
}
body.theme-light .att-purpose-btn.is-on {
  background: #2563eb;
  color: #fff;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
}
.att-shell #attSubmit,
.att-shell #attGeoBtn,
.att-shell #attOpenCam,
.att-shell #attRetakeCam {
  position: relative;
  z-index: 100101;
  pointer-events: auto;
}

.att-status { margin-bottom: 12px; }
.att-geo { margin: 10px 0 12px; }

/* Preview peta Google Maps (embed) */
.att-map-card {
  margin: 10px 0 8px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.28);
  background: rgba(10, 14, 32, 0.85);
}
.att-map-card.svo-map-sticky,
.trk-map-card.svo-map-sticky,
.trk-shell > .trk-map-card:not(.trk-route-card),
.lg-rute-wrap > .trk-map-card.svo-map-sticky,
.lg-rute-wrap > .lg-rute-sticky-block.svo-map-sticky,
.trk-map-card.is-pin-frozen {
  /* Di-disable untuk beralih ke split-screen (Opsi 2) */
  /* position: -webkit-sticky; */
  /* position: sticky; */
  /* top: calc(var(--ticker-h, 26px) + env(safe-area-inset-top, 0px) + 8px + var(--nav-h, 52px) + 8px); */
  /* z-index: 34; */
  /* box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); */
}
/* Fallback JS: peta fixed di viewport saat scroll daftar (Di-disable Opsi 2) */
/*
.trk-map-card.is-map-docked,
.att-map-card.is-map-docked,
.lg-rute-sticky-block.is-map-docked {
  position: fixed !important;
  z-index: 34;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}
*/
.svo-map-sticky-ph {
  width: 100%;
  margin: 12px 0;
  visibility: hidden;
  pointer-events: none;
}
.svo-map-sticky-ph[hidden] {
  display: none !important;
}
.svo-map-sticky-ph.is-rute-sticky-ph {
  width: auto;
  margin: 0 var(--pad, 16px) 10px;
}
.att-map-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #e5e7eb;
  /* Bekukan geser iframe agar scroll halaman tidak tertahan */
  pointer-events: none;
}
.svo-map-unlock-bar {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 500;
  pointer-events: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100% - 16px);
}
.svo-map-zoom-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  touch-action: manipulation;
}
body.theme-light .svo-map-zoom-btn {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}
.svo-map-unlock,
.svo-map-max {
  font-size: 11px !important;
  padding: 6px 10px !important;
  min-height: 0 !important;
  background: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.svo-map-max-exit {
  display: none;
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 2600;
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.svo-map-max-exit:not([hidden]) { display: inline-flex; align-items: center; }
body.theme-light .svo-map-max-exit {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(15, 23, 42, 0.12);
}
.trk-map-card.is-maximized,
.ds-map-card.is-maximized,
.lg-rute-map-card.is-maximized {
  overflow: visible !important;
}
.trk-map-card.is-maximized,
.ds-map-card.is-maximized {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  z-index: 10050 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  height: -webkit-fill-available !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: #0b1220 !important;
  transform: none !important;
  -webkit-transform: none !important;
}
.trk-map-card.is-maximized .trk-map,
.trk-map-card.is-maximized .lg-rute-map {
  height: 100% !important;
  min-height: 100% !important;
  border-radius: 0 !important;
}
/* Split Track/Rute pakai selector lebih spesifik — wajib dikalahkan saat maximize */
body.is-map-split .trk-map-card.is-maximized .trk-map.lg-rute-map,
body.is-map-split #trkMapCard.is-maximized .trk-map.lg-rute-map,
body.is-map-split #ruteMapCard.is-maximized .trk-map.lg-rute-map,
body.svo-map-max-open.is-map-split .trk-map-card.is-maximized .trk-map.lg-rute-map {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
}
body.svo-map-max-open.is-map-split .trk-map-card.is-maximized {
  display: flex !important;
  flex-direction: column !important;
}
body.svo-map-max-open .lg-rute-scroll-area {
  visibility: hidden;
  pointer-events: none;
}
/* Peta layar penuh tidak boleh terpotong wadah halaman */
body.svo-map-max-open #pMain,
body.svo-map-max-open main,
body.svo-map-max-open .lg-rute-wrap,
body.svo-map-max-open .lg-rute-panes,
body.svo-map-max-open .lg-rute-sticky-block {
  overflow: visible !important;
  overflow-x: visible !important;
}
.trk-map-card.is-maximized .svo-map-unlock-bar,
.ds-map-card.is-maximized .svo-map-unlock-bar {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 2500;
}
.svo-cluster {
  background: transparent !important;
  border: 0 !important;
}
.svo-cluster-count {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #059669 100%);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.85);
}
body.svo-map-max-open {
  overflow: hidden;
}
body.svo-map-max-open .m-nav,
body.svo-map-max-open .m-dock {
  visibility: hidden;
  pointer-events: none;
}
.leaflet-container.svo-map-frozen {
  cursor: default;
}
.leaflet-container.svo-map-frozen .leaflet-control-zoom {
  pointer-events: auto;
}
.trk-pin-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50% !important;
  border: 2.5px solid #fff;
  box-shadow:
    0 0 0 1.5px rgba(15, 23, 42, 0.75),
    0 4px 12px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
.trk-pin-dot.is-2 {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50% !important;
}
.trk-pin-dot em {
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 -1px 1px rgba(0, 0, 0, 0.55);
}
.trk-pin-dot.is-2 em {
  font-size: 11px;
}
.trk-dot.trk-dot-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  vertical-align: middle;
}
.hm-home-bundle {
  margin-top: 2px;
  padding-bottom: 24px;
}
.pb-page--below-core {
  margin-top: 4px;
}
.att-map-frame {
  position: relative;
  width: 100%;
  height: 100px;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(59, 130, 246, 0.18), transparent 55%),
    linear-gradient(160deg, #0f172a 0%, #111827 45%, #0b1220 100%);
}
.att-map-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  z-index: 1;
}
.att-map-fake {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  pointer-events: none;
}
.att-map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
}
.att-map-roads {
  position: absolute;
  inset: 18% 8% 22% 12%;
  border-radius: 40% 20% 35% 25%;
  border: 2px solid rgba(96, 165, 250, 0.35);
  box-shadow: 0 0 0 10px rgba(37, 99, 235, 0.08);
}
.att-map-pin {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 16px;
  height: 16px;
  margin: -18px 0 0 -8px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.45);
}
.att-map-pin::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
.att-map-hint {
  position: relative;
  z-index: 2;
  margin: 34px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: #93c5fd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.att-map-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #e5e7eb;
  pointer-events: none;
}
.att-map-iframe[hidden],
.att-map-placeholder[hidden] {
  display: none !important;
}
.att-map-chip {
  display: none;
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.att-map-frame.has-gps .att-map-chip {
  display: inline-flex;
  gap: 2px;
}
.att-map-actions {
  padding: 8px 10px 10px;
}
.att-map-open[hidden] {
  display: none !important;
}
.att-map-open {
  width: 100%;
  text-align: center;
  text-decoration: none;
}
.att-slot.is-loading {
  color: #93c5fd;
  font-style: italic;
}

/* —— Tracking driver —— */
.trk-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.trk-switch {
  position: relative;
  display: inline-flex;
  width: 52px;
  height: 30px;
  flex-shrink: 0;
  cursor: pointer;
}
.trk-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.trk-switch-ui {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(71, 85, 105, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.35);
  transition: 0.2s ease;
}
.trk-switch-ui::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s ease;
}
.trk-switch input:checked + .trk-switch-ui {
  background: rgba(37, 99, 235, 0.85);
  border-color: rgba(96, 165, 250, 0.7);
}
.trk-switch input:checked + .trk-switch-ui::after {
  transform: translateX(22px);
}
.trk-toggle-row.is-locked .trk-switch {
  opacity: 0.55;
  cursor: not-allowed;
}
.trk-bg-status {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.35;
}
.trk-bg-status.is-on {
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}
.trk-bg-status.is-native {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.4);
}

/* Absensi alerts */
.att-alert-box {
  color: var(--text);
  display: grid;
  gap: 8px;
  margin: 0 var(--pad) 12px;
}
.hm-notif-stack {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0;
}
.hm-notif-stack[hidden] { display: none !important; }
.hm-company-interactions {
  margin: 0 0 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.hm-company-interactions .m-section-head {
  display: none;
}
.hm-book-compact .hm-book-head-compact {
  margin: 0 0 8px;
  padding: 0;
}
.hm-book-compact .hm-book-head-compact h2 {
  font-size: 16px;
  margin: 0;
}
.hm-kpi-sec--bare > .m-section-head {
  display: none;
}
.hm-interaction-skeleton .hm-kpi-skel-line {
  margin: 5px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148, 163, 184, .16), rgba(148, 163, 184, .34), rgba(148, 163, 184, .16));
  background-size: 200% 100%;
  animation: hmKpiShimmer 1.45s linear infinite;
}
.hm-notif-box {
  margin: 0 !important;
  padding: 0;
}
/* Tinggi kartu info ≈ −10% vs compact absensi */
.hm-notif-item.att-alert-compact {
  animation: none;
  box-shadow: none;
  padding: 8px 11px;
  gap: 7px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.22;
}
.hm-notif-item.is-swap .att-alert-text {
  animation: attAlertSwap 320ms ease;
}
.hm-notif-slide[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .hm-notif-item { animation: none; }
}
.att-alert {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  border: 1px solid transparent;
}
.att-alert-warn {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
}
.att-alert-alert {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.4);
}

body.is-native-app {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.is-native-app .m-nav {
  top: auto;
  margin-top: 0;
}
body.is-native-app .m-drawer-panel {
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
}
.trk-map-card {
  position: relative;
  margin: 12px 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.3);
  background: #0b1220;
  min-height: 168px;
}
/* Peta pin aktif: sticky sudah di .svo-map-sticky / .is-pin-frozen di atas */
.trk-map {
  width: 100%;
  height: 200px;
  z-index: 1;
}
.trk-list-placeholder {
  opacity: 0.85;
}
body.is-map-split-track .lg-rute-scroll-area {
  content-visibility: auto;
  contain: layout paint;
}
.trk-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  color: #93c5fd;
  font-size: 13px;
  font-weight: 600;
  background: rgba(7, 10, 22, 0.55);
  pointer-events: none;
}
.trk-map-overlay[hidden] {
  display: none !important;
}
.trk-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}
.trk-route-card {
  margin-top: 4px;
}
.trk-pin {
  background: transparent !important;
  border: 0 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
.trk-pin .trk-pin-dot {
  pointer-events: none;
}
.leaflet-marker-icon.trk-pin,
.leaflet-marker-pane .trk-pin,
.leaflet-marker-icon.leaflet-div-icon.trk-pin {
  background: transparent !important;
  border: 0 !important;
  z-index: 650 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
.leaflet-interactive.trk-pin-radius,
.leaflet-interactive.trk-acc-circle,
.leaflet-interactive.trk-geofence {
  pointer-events: none !important;
}
.pb-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-items: stretch;
  padding: 0 0 8px;
  overflow-x: hidden;
}
.pb-section,
.pb-page > .m-hero,
.pb-page > .m-section,
.pb-page > footer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}
.pb-page .m-hero {
  text-align: left;
  padding: 16px var(--pad) 12px;
}
.pb-page .m-title {
  font-size: clamp(1.35rem, 6.2vw, 1.75rem);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.pb-page .m-title .grad {
  display: inline;
}
.pb-page .m-sub {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}
.pb-page .m-cards,
.pb-page .m-stats {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.pb-page .m-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pb-page .m-card,
.pb-page .m-stat {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pb-page .m-btn {
  max-width: 100%;
}
.pb-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: rgba(15, 23, 42, 0.4);
}
.pb-iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 14px;
}
.pb-chart-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: 13px;
  color: var(--text);
}
.pb-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.pb-table th,
.pb-table td {
  white-space: normal;
  word-break: break-word;
  max-width: none;
}
@media (max-width: 380px) {
  .pb-page .m-stats {
    grid-template-columns: 1fr;
  }
}
.trk-driver-card.is-focused {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25);
}
.trk-driver-card.is-nogps {
  opacity: 0.78;
}
.trk-driver-card {
  cursor: pointer;
  padding: 12px 12px 11px;
}
.trk-driver-card .sf-sale-top {
  align-items: flex-start;
  gap: 8px;
}
.trk-driver-card .sf-sale-top strong {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
}
.trk-driver-card .trk-card-badge {
  flex: 0 1 auto;
  max-width: 52%;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  text-align: right;
  white-space: normal;
}
.trk-driver-card .trk-card-id {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.3;
}
.trk-driver-card .trk-card-acc {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
  line-height: 1.3;
}
.trk-driver-card .trk-addr {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text);
}
.trk-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.trk-card-actions .m-btn {
  min-width: 0;
  width: 100%;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.leaflet-popup-content .trk-popup-focus,
.leaflet-popup-content .trk-popup-route {
  border: 0;
  background: transparent;
  color: #2563eb;
  font: inherit;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.att-preview-wrap {
  margin: 8px 0 12px;
  border-radius: 16px;
  border: 1px dashed var(--line);
  overflow: hidden;
  background: rgba(10, 14, 32, 0.7);
  min-height: 160px;
  display: grid;
  place-items: center;
}
/* Preview foto menyatu di kartu jenis absensi */
.att-purpose-block .att-preview-wrap {
  margin: 10px 0 0;
  min-height: 120px;
}
.att-purpose-block .att-preview {
  max-height: 240px;
}
.att-purpose-block .att-preview-empty {
  padding: 20px 14px;
}
.att-preview {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}
.att-preview-empty {
  padding: 28px 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.att-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
}

/* Live camera capture modal — di atas G-Tools/Assist/tombol Absen (z 100100+) */
.att-cam-modal {
  position: fixed;
  inset: 0;
  z-index: 200150;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #000;
}
.att-cam-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  background: #000;
  display: flex;
  flex-direction: column;
}
.att-cam-frame video {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  background: #111;
}
.att-cam-guide:not(.att-cam-guide--ktp) {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(56vw, 220px);
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  box-shadow: none;
  pointer-events: none;
}
.att-cam-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(12, 16, 36, 0.96);
  position: relative;
  z-index: 2;
}
.att-cam-actions-3 {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.att-cam-actions-3 #attCamClose {
  justify-self: start;
}
.att-cam-actions-3 #attCamSnap {
  justify-self: center;
  min-width: 132px;
  font-weight: 800;
}
.att-cam-actions-3 #attCamFlip {
  justify-self: end;
}
.att-preview-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.att-view-photo {
  width: 100%;
  margin-top: 8px;
}
.att-photo-modal {
  position: fixed;
  inset: 0;
  z-index: 200160;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.82);
}
.att-photo-frame {
  width: min(100%, 520px);
  max-height: 92vh;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(12, 16, 36, 0.98);
}
.att-photo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: #fff;
}
.att-photo-body {
  padding: 10px;
}
.att-photo-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #000;
}

/* Skeleton loading */
.sf-badge.is-pending {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
}
.att-log-card.is-pending {
  border-color: rgba(245, 158, 11, 0.35);
}
.att-pending-hint {
  color: #fbbf24 !important;
  font-weight: 600;
}
.sk-line {
  height: 12px;
  border-radius: 999px;
  margin: 8px 0;
  background: linear-gradient(90deg, rgba(148,163,184,0.12), rgba(148,163,184,0.28), rgba(148,163,184,0.12));
  background-size: 200% 100%;
  animation: skPulse 1.2s ease-in-out infinite;
}
.sk-w30 { width: 30%; }
.sk-w40 { width: 40%; }
.sk-w50 { width: 50%; }
.sk-w60 { width: 60%; }
.sk-w70 { width: 70%; }
.sk-w80 { width: 80%; }
.sk-w90 { width: 90%; }
@keyframes skPulse {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
body.att-cam-open,
body.att-popup-open {
  /* Overlay sudah position:fixed — jangan kunci gulir APK/WebView. */
  overflow: visible;
}
body.att-cam-open .svo-fab-host,
body.att-cam-open .svo-fab-sheet,
body.att-cam-open .svo-fab-panel,
body.att-cam-open .svo-assist-root,
body.att-cam-open .svo-assist-fab,
body.att-cam-open .m-dock,
body.att-cam-open .m-nav,
body.att-cam-open .m-drawer,
body.att-cam-open .p-load,
body.att-popup-open .svo-fab-host,
body.att-popup-open .svo-fab-sheet,
body.att-popup-open .svo-fab-panel,
body.att-popup-open .svo-assist-root,
body.att-popup-open .svo-assist-fab,
body.att-popup-open .m-dock,
body.att-popup-open .m-nav,
body.att-popup-open .m-drawer,
body.att-popup-open .p-load {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
.att-shell .m-actions {
  grid-template-columns: 1fr;
  margin: 12px 0 8px;
}
.att-submit-ph {
  min-height: 52px;
}
.att-submit-dock {
  position: fixed;
  left: 10px;
  right: 10px;
  /* Di atas pill navbar (56px + jarak), bukan menempel di dasar layar. */
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 32;
  padding: 8px 4px 0;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 11, 28, 0.88) 55%);
  pointer-events: none;
}
.att-submit-dock #attSubmit {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 52px;
  font-weight: 800;
}
.att-submit-dock #actSubmit,
.act-submit-dock #actSubmit {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 52px;
  font-weight: 800;
}
body.is-act-form-page #actShell .lg-rute-scroll-area {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
body.is-act-form-page .sale-form-actions .act-submit-ph {
  min-height: 52px;
}
body.is-act-form-page .act-submit-dock,
body.is-act-form-page .att-submit-dock.act-submit-dock {
  z-index: 40;
}
body.theme-light .att-submit-dock {
  background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.92) 55%);
}
body.is-att-page:not(.att-popup-open):not(.att-cam-open) .m-dock {
  z-index: 200150 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
body.is-att-page:not(.att-popup-open):not(.att-cam-open) .m-dock-scrim {
  z-index: 200149 !important;
  visibility: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
}
body.att-cam-open .att-submit-dock,
body.att-popup-open .att-submit-dock {
  display: none !important;
}
body.is-att-page .svo-assist-root,
body.is-att-page .svo-assist-fab {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* —— Aktifitas Harian —— */
.act-hub-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.act-hub-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 2px;
}
.act-hub-search {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.1);
  color: inherit;
  padding: 10px 12px;
  font-size: 15px;
}
body.theme-light .act-hub-search {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.14);
  color: #0f172a;
}
.act-hub-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 16px;
}
.act-hub-empty { padding: 12px 4px; }
.act-form-back-row { margin: 0 0 10px; }
.act-type-block {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(16, 185, 129, 0.28);
  background: rgba(6, 95, 70, 0.18);
}
.act-type-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6ee7b7;
}
.act-type-sticky {
  /* Di-disable untuk beralih ke split-screen (Opsi 2) */
  /* position: -webkit-sticky; */
  /* position: sticky; */
  /* top: calc(var(--ticker-h, 26px) + env(safe-area-inset-top, 0px) + 8px + var(--nav-h, 52px) + 8px); */
  /* z-index: 35; */
  margin: 0 0 8px;
  padding: 8px 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.22);
  background: rgba(6, 18, 28, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  flex: 0 0 auto;
}
.act-type-sticky.is-frozen {
  /* Di-disable */
}
.act-type-sticky-ph {
  margin: 0 0 8px;
}
.act-type-sticky-ph[hidden] { display: none !important; }
#actFormHost {
  padding-top: 0;
  clear: both;
}
.act-form--penjualan .act-form-banner {
  margin-top: 0;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
body.theme-light .act-type-sticky {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
body.theme-light .act-type-label { color: #0f766e; }
body.theme-light .act-type-nav {
  background: rgba(248, 250, 252, 0.95);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.14);
}
body.theme-light .act-type-chip {
  background: rgba(241, 245, 249, 0.95);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.12);
}
body.theme-light .act-type-chip.is-on {
  color: #0f766e;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(15, 118, 110, 0.4);
  text-shadow: none;
}
.act-type-rail {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  gap: 4px;
  align-items: center;
}
.act-type-nav {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.75);
  color: #e2e8f0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.act-type-scroller {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 2px 1px 4px;
  scrollbar-width: none;
}
.act-type-scroller::-webkit-scrollbar { display: none; }
.act-type-chip {
  flex: 0 0 auto;
  scroll-snap-align: center;
  min-height: 32px;
  min-width: 72px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.72);
  color: #cbd5e1;
  font-weight: 650;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.act-type-chip.is-on {
  color: #ffffff;
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(16, 185, 129, 0.28);
  box-shadow: none;
  text-shadow: none;
  font-weight: 750;
  transform: none;
}
.sale-scan-host { display: grid; gap: 10px; margin-bottom: 8px; }
.sale-att-host { gap: 12px; }
.sale-att-unit {
  display: grid;
  gap: 8px;
}
.sale-att-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 12px;
  margin: 0 -2px;
  scrollbar-width: thin;
}
.sale-att-rail::-webkit-scrollbar { height: 3px; }
.sale-att-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px 12px 10px;
  border-radius: 16px;
  /* Dark default: permukaan solid agar label/input kontras */
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}
.sale-att-card--compact {
  width: min(72vw, 168px);
}
.sale-att-card--wide {
  width: min(92vw, 300px);
  min-width: 268px;
}
body.theme-light .sale-att-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.1);
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.05);
}
.sale-att-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f1f5f9 !important;
}
body.theme-light .sale-att-label {
  color: #0f172a !important;
}
.sale-att-card > input {
  width: 100%;
  min-height: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(2, 6, 23, 0.55) !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #93c5fd !important;
  padding: 9px 12px;
  font-size: var(--sf-field-fs, 14px) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color-scheme: dark;
}
.sale-att-card--wide > input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.02em;
}
body.theme-light .sale-att-card > input {
  background: #f8fafc !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #2563eb !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color-scheme: light;
}
.sale-att-card > input::placeholder {
  color: rgba(226, 232, 240, 0.55) !important;
  opacity: 1;
  -webkit-text-fill-color: rgba(226, 232, 240, 0.55) !important;
}
body.theme-light .sale-att-card > input::placeholder {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
.sale-att-card > input:focus {
  outline: none;
  border-color: rgba(52, 211, 153, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.sale-att-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #94a3b8 !important;
}
body.theme-light .sale-att-hint {
  color: #64748b !important;
}
.sale-att-actions {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  width: 100%;
}
.sale-att-card--actions2 .sale-att-actions {
  grid-template-columns: 1fr 1fr;
}
.sale-att-card--actions3 .sale-att-actions {
  grid-template-columns: 1fr 1fr 1fr;
}
.sale-att-btn {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.28);
  cursor: pointer;
  min-height: 34px;
  min-width: 0;
  padding: 6px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  background: rgba(51, 65, 85, 0.95);
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.theme-light .sale-att-btn {
  background: #e2e8f0;
  border-color: rgba(15, 23, 42, 0.1);
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.sale-att-btn--scan {
  background: linear-gradient(135deg, #6d28d9 0%, #db2777 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(219, 39, 119, 0.22);
}
body.theme-light .sale-att-btn--scan {
  background: linear-gradient(135deg, #6d28d9 0%, #db2777 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: transparent !important;
}
.sale-att-btn:active { transform: scale(0.98); }
body.theme-light .sale-att-card > input:-webkit-autofill,
body.theme-light .sale-att-card > input:-webkit-autofill:hover,
body.theme-light .sale-att-card > input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a !important;
  box-shadow: 0 0 0 1000px #f8fafc inset !important;
}
.sale-att-card > input:-webkit-autofill,
.sale-att-card > input:-webkit-autofill:hover,
.sale-att-card > input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8fafc !important;
  box-shadow: 0 0 0 1000px rgba(2, 6, 23, 0.85) inset !important;
}
.sale-scan-unit {
  display: grid;
  gap: 6px;
  padding: 0;
}
.sale-scan-rm {
  justify-self: end;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.sale-scan-col {
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sale-scan-col > input {
  margin: 0 0 2px;
  box-sizing: border-box;
}
body.theme-light .sale-scan-col {
  background: #f8fafc;
}
.sale-scan-col-title {
  margin: 0;
  font-size: 12px;
  font-weight: 750;
  color: var(--text);
}
.sale-scan-card.sale-bc-row,
.sale-bc-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}
.sale-bc-row input {
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.55);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  margin: 0;
}
body.theme-light .sale-bc-row input {
  background: #fff;
  color: #0f172a;
}
.sale-scan-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.sale-scan-btn {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 0;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.sale-scan-btn.is-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  min-width: 64px;
}
.sale-scan-add {
  width: 100%;
  margin-top: 4px;
  min-height: 36px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.trk-day-meta-only {
  display: flex;
  justify-content: center;
  padding: 8px 10px;
}
.sale-latlng-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.sale-geo-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 8px 0;
}
.sale-bc-scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(2, 6, 23, 0.92);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: calc(env(safe-area-inset-top, 0px) + 2px) 10px calc(env(safe-area-inset-bottom, 0px) + 4px);
  gap: 6px;
}
.sale-bc-scan-overlay[hidden] { display: none !important; }
.sale-bc-scan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
  color: #f8fafc;
  font-weight: 700;
}
.sale-bc-scan-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 88px;
  overflow: auto;
  margin: 0;
}
.sale-bc-scan-pick[hidden] { display: none !important; }
.sale-bc-chip {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.75);
  color: #e2e8f0;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.sale-bc-chip.is-on {
  border-color: rgba(59, 130, 246, 0.7);
  background: rgba(37, 99, 235, 0.35);
}
.sale-bc-scan-manual-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.sale-bc-scan-manual-row input {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
  padding: 8px 10px;
  font: inherit;
  box-sizing: border-box;
}
.sale-bc-scan-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 4px;
  align-items: center;
}
.sale-bc-scan-actions[hidden],
.sale-bc-scan-overlay.is-live-scan .sale-bc-scan-actions {
  display: none !important;
}
.sale-bc-scan-actions .m-btn-primary {
  min-height: 44px;
}
.sale-bc-scan-video-wrap {
  position: relative;
  flex: 1;
  min-height: 240px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.sale-bc-scan-video-wrap video,
.sale-bc-scan-video-wrap canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sale-bc-scan-aim {
  position: absolute;
  inset: 18% 10%;
  border: 2px solid rgba(52, 211, 153, 0.85);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.sale-bc-scan-aim.is-line {
  inset: auto 6%;
  top: 50%;
  height: 52px;
  margin-top: -26px;
  border-radius: 10px;
  border-width: 2px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
}
.sale-bc-scan-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  color: #e2e8f0;
  font-weight: 700;
}
.sale-bc-scan-video-wrap video {
  transform-origin: center center;
  transition: transform 0.15s ease;
}
@media (orientation: landscape) {
  .sale-bc-scan-overlay {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
  }
  .sale-bc-scan-head { width: 100%; }
  .sale-bc-scan-video-wrap {
    flex: 1 1 62%;
    min-height: 180px;
    max-height: calc(100vh - 120px);
  }
  .sale-bc-scan-hint,
  .sale-bc-scan-actions,
  .sale-bc-scan-zoom {
    flex: 1 1 30%;
    align-self: center;
  }
  .sale-bc-scan-aim.is-line {
    height: 40px;
    margin-top: -20px;
  }
}
.sale-bc-scan-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 4px;
  align-items: center;
}
.pf-form-field-edit {
  margin: 0 0 12px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(148, 163, 184, 0.06);
}
.pf-form-group-edit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}
.pf-form-group-edit .pf-field { margin: 0; }
.act-type-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.act-form-banner {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  min-height: var(--sf-field-h);
  align-content: center;
}
.act-form-banner strong { font-size: 14px; color: #f8fafc; letter-spacing: 0.06em; }
.act-form-banner span { font-size: 12px; color: var(--muted); }
body.theme-light .act-form-banner strong { color: #0f172a; }
body.theme-light .act-banner--penjualan {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(37, 99, 235, 0.14));
  border-color: rgba(15, 118, 110, 0.35);
}
.act-banner--pengiriman { border-color: rgba(59,130,246,0.45); background: rgba(37,99,235,0.16); }
.act-banner--penerimaan { border-color: rgba(245,158,11,0.45); background: rgba(180,83,9,0.18); }
.act-banner--kunjungan { border-color: rgba(168,85,247,0.4); background: rgba(126,34,206,0.16); }
.act-banner--gudang { border-color: rgba(20,184,166,0.45); background: rgba(13,148,136,0.16); }
.act-banner--umum { border-color: rgba(148,163,184,0.35); background: rgba(51,65,85,0.25); }
.act-banner--penjualan { border-color: rgba(16,185,129,0.45); background: rgba(6,95,70,0.22); }
.sf-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.act-sale-sec {
  margin: 8px 0 4px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #86efac;
}
.act-sale-foot { margin-top: 10px; font-size: 12px; }
.req { color: #f87171; font-style: normal; font-weight: 800; }

/* Field wajib — teks nilai harus terbaca (hindari background-clip:text yang bikin putih di atas putih) */
.sf-field.is-required input:not([type='checkbox']):not([type='radio']):not([type='file']),
.sf-field.is-required textarea,
.sf-field:has(> span .req) input:not([type='checkbox']):not([type='radio']):not([type='file']),
.sf-field:has(> span .req) textarea {
  background-image: none !important;
  background: rgba(10, 14, 32, 0.85) !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #93c5fd;
  font-weight: 600;
  filter: none;
  text-shadow: none;
}
.sf-field.is-required input::placeholder,
.sf-field.is-required textarea::placeholder,
.sf-field:has(> span .req) input::placeholder,
.sf-field:has(> span .req) textarea::placeholder {
  color: rgba(248, 250, 252, 0.5) !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.5) !important;
  opacity: 1;
  font-weight: 500;
  text-shadow: none;
}
/* Select native: warna solid terbaca */
.sf-field.is-required select,
.sf-field:has(> span .req) select {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  font-weight: 600;
  text-shadow: none;
}
body.theme-light .sf-field.is-required input:not([type='checkbox']):not([type='radio']):not([type='file']),
body.theme-light .sf-field.is-required textarea,
body.theme-light .sf-field:has(> span .req) input:not([type='checkbox']):not([type='radio']):not([type='file']),
body.theme-light .sf-field:has(> span .req) textarea {
  background-image: none !important;
  background: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #2563eb;
  filter: none;
}
body.theme-light .sf-field.is-required input::placeholder,
body.theme-light .sf-field.is-required textarea::placeholder,
body.theme-light .sf-field:has(> span .req) input::placeholder,
body.theme-light .sf-field:has(> span .req) textarea::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  text-shadow: none;
}
body.theme-light .sf-field.is-required select,
body.theme-light .sf-field:has(> span .req) select {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none;
}
/* Formulir penjualan (#actForm) — kontras terbaca di light theme */
body.theme-light #actForm .sf-field input,
body.theme-light #actForm .sf-field select,
body.theme-light #actForm .sf-field textarea,
body.theme-light #actForm .sale-kel-multi {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(15, 23, 42, 0.2) !important;
}
body.theme-light #actForm .sf-field input::placeholder,
body.theme-light #actForm .sf-field textarea::placeholder {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
body.theme-light #actForm .sf-field > span {
  color: #475569;
}

/* Tabel stok program TX/NE — formulir penjualan */
.sale-stock-table-wrap {
  margin: 8px 0 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sale-stock-prod-name {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 13px;
  text-align: left;
}
.sale-stock-posting {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--m-muted, #8b949e);
  text-align: left;
}
.sale-stock-table {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.sale-stock-table th,
.sale-stock-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  text-align: right;
}
.sale-stock-table th:first-child,
.sale-stock-table td:first-child,
.sale-stock-table .sale-stock-wh {
  text-align: left;
}
.sale-stock-table th {
  font-weight: 700;
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sale-stock-tot td {
  font-weight: 800;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}
.sale-kel-multi-wrap { margin-top: 8px; }
.sale-kel-qty-row {
  margin-top: 10px;
  align-items: flex-start;
}
.sale-kel-qty-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.85;
}
.sale-kel-multi-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(10, 14, 32, 0.55);
}
.sale-kel-multi-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #e2e8f0;
  line-height: 1.35;
}
body.theme-light .sale-kel-multi-list {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.16);
}
body.theme-light .sale-kel-multi-opt { color: #0f172a; }
.sale-kel-mode-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 8px;
}
.sale-kel-mode-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.sale-kel-mode-title {
  margin: 8px 0 4px;
}
body.theme-light .sale-stock-table th,
body.theme-light .sale-stock-table td {
  border-bottom-color: rgba(15, 23, 42, 0.12);
}
body.theme-light .sale-stock-table th {
  color: #64748b;
}

/* UUID readonly — muat penuh, terbaca kiri–kanan */
.sf-field.is-uuid .sf-readonly,
input.sf-uuid {
  font-size: 11px !important;
  letter-spacing: -0.015em;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
  height: auto !important;
  min-height: var(--sf-field-h);
  line-height: 1.3;
  padding-top: 7px;
  padding-bottom: 7px;
}
.opt-tag { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: none; letter-spacing: 0; }
.sale-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.sale-sub-btn {
  min-height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  font-weight: 750;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none;
}
.sale-sub-btn.sale-sub-glass {
  /* legacy class — flat theme, no liquid glass */
  background: rgba(15, 23, 42, 0.72);
}
.sale-sub-btn.is-on {
  color: #ffffff;
  border-color: #34d399;
  background: linear-gradient(135deg, #059669 0%, #2563eb 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
body.theme-light .sale-sub-btn {
  color: #0f172a;
  text-shadow: none;
  border-color: rgba(15, 23, 42, 0.14);
  background: #f8fafc;
  box-shadow: none;
}
body.theme-light .sale-sub-btn.is-on {
  color: #ffffff;
  border-color: #0f766e;
  background: linear-gradient(135deg, #047857 0%, #1d4ed8 100%);
  text-shadow: none;
}
.sale-scan-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
  align-items: start;
}
.att-alert-box {
  margin: 0 0 10px;
  padding: 0;
}
/* Notifikasi absensi bergantian — warna ikut tema & nada pesan */
.att-alert-compact {
  --att-alert-fg: #fde68a;
  --att-alert-bg: rgba(245, 158, 11, 0.14);
  --att-alert-line: rgba(245, 158, 11, 0.4);
  --att-alert-dot: #fbbf24;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--att-alert-fg);
  background: var(--att-alert-bg);
  border: 1px solid var(--att-alert-line);
}
.att-alert-compact[data-tone="alert"] {
  --att-alert-fg: #fecaca;
  --att-alert-bg: rgba(239, 68, 68, 0.16);
  --att-alert-line: rgba(239, 68, 68, 0.42);
  --att-alert-dot: #f87171;
}
.att-alert-compact[data-tone="ok"] {
  --att-alert-fg: #bbf7d0;
  --att-alert-bg: rgba(34, 197, 94, 0.14);
  --att-alert-line: rgba(34, 197, 94, 0.38);
  --att-alert-dot: #4ade80;
}
.att-alert-compact[data-tone="info"] {
  --att-alert-fg: #bfdbfe;
  --att-alert-bg: rgba(59, 130, 246, 0.14);
  --att-alert-line: rgba(59, 130, 246, 0.38);
  --att-alert-dot: #60a5fa;
}
.att-alert-text {
  flex: 1 1 auto;
  min-width: 0;
}
.att-alert-count {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  opacity: 0.75;
  letter-spacing: 0.04em;
}
.att-alert-compact.is-swap .att-alert-text {
  animation: attAlertSwap 320ms ease;
}
@keyframes attAlertSwap {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .att-alert-compact.is-swap .att-alert-text { animation: none; }
}
.att-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--att-alert-dot);
  flex: 0 0 auto;
}
body.theme-light .att-alert-compact {
  --att-alert-fg: #7c2d12;
  --att-alert-bg: rgba(251, 191, 36, 0.2);
  --att-alert-line: rgba(217, 119, 6, 0.4);
  --att-alert-dot: #d97706;
}
body.theme-light .att-alert-compact[data-tone="alert"] {
  --att-alert-fg: #991b1b;
  --att-alert-bg: rgba(248, 113, 113, 0.18);
  --att-alert-line: rgba(220, 38, 38, 0.38);
  --att-alert-dot: #dc2626;
}
body.theme-light .att-alert-compact[data-tone="ok"] {
  --att-alert-fg: #14532d;
  --att-alert-bg: rgba(34, 197, 94, 0.16);
  --att-alert-line: rgba(22, 163, 74, 0.36);
  --att-alert-dot: #16a34a;
}
body.theme-light .att-alert-compact[data-tone="info"] {
  --att-alert-fg: #1e3a8a;
  --att-alert-bg: rgba(59, 130, 246, 0.14);
  --att-alert-line: rgba(37, 99, 235, 0.34);
  --att-alert-dot: #2563eb;
}
/* Kartu info beranda: light = teks obsidian (timpa nada warna di atas) */
body.theme-light .hm-notif-item.att-alert-compact,
body.theme-light .hm-notif-item.att-alert-compact[data-tone="warn"],
body.theme-light .hm-notif-item.att-alert-compact[data-tone="alert"],
body.theme-light .hm-notif-item.att-alert-compact[data-tone="ok"],
body.theme-light .hm-notif-item.att-alert-compact[data-tone="info"] {
  --att-alert-fg: #0f172a;
  color: #0f172a;
}
body.theme-light .hm-notif-item .att-alert-text {
  color: #0f172a;
}
.p-att-ok-card.is-process .p-att-ok-icon {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  animation: salePulse 1.1s ease-in-out infinite;
}
@keyframes salePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.75; }
}
.act-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sf-field select.sf-ph,
.sf-field select:invalid {
  color: rgba(148, 163, 184, 0.58);
}
.sf-field.is-required select.sf-ph,
.sf-field.is-required select:invalid,
.sf-field:has(> span .req) select.sf-ph,
.sf-field:has(> span .req) select:invalid {
  color: #7dd3fc;
  -webkit-text-fill-color: #7dd3fc;
  opacity: 0.92;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.45), 0 0 14px rgba(110, 231, 183, 0.25);
}
body.theme-light .sf-field.is-required select.sf-ph,
body.theme-light .sf-field.is-required select:invalid,
body.theme-light .sf-field:has(> span .req) select.sf-ph,
body.theme-light .sf-field:has(> span .req) select:invalid {
  color: #2563eb;
  -webkit-text-fill-color: #2563eb;
}
.sf-field select option {
  color: #0f172a;
  background: #fff;
}
.sf-field input[placeholder*="+62"]::placeholder,
#salePhone1::placeholder,
#salePhone2::placeholder {
  color: rgba(148, 163, 184, 0.42);
}
.sale-maps-card iframe {
  width: 100%;
  height: 180px;
  border: 0;
  display: block;
}
.p-att-ok-card--wide {
  max-width: min(92vw, 420px);
  max-height: 80vh;
  overflow: auto;
}
.p-att-ok-card--scroll {
  width: min(100%, 420px);
  max-width: min(92vw, 420px);
  max-height: min(88vh, 680px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: center;
}
.p-att-ok-scroll-head {
  flex: 0 0 auto;
  padding: 24px 20px 8px;
}
.p-att-ok-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 20px 12px;
  text-align: left;
}
.p-att-ok-scroll-foot {
  flex: 0 0 auto;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  background: inherit;
}
body.theme-light .p-att-ok-scroll-foot {
  border-top-color: rgba(15, 23, 42, 0.08);
}
.p-att-ok-scroll-foot .p-att-ok-actions {
  margin-top: 0;
}
.p-att-ok-msg--hint {
  margin-top: 10px;
  font-size: 11px;
  opacity: 0.82;
  text-align: center;
}
.p-att-ok-html { width: 100%; text-align: left; }
.sale-summary {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.65);
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
body.theme-light .sale-summary {
  background: rgba(241, 245, 249, 0.95);
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Berkas Identitas Pelanggan (KTP frame) */
.sale-id-card {
  margin: 8px 0 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.35);
}
body.theme-light .sale-id-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(15, 23, 42, 0.1);
}
.sale-id-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.sale-id-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586 / 1; /* rasio KTP ~85.6×54 mm */
  border-radius: 12px;
  overflow: hidden;
  border: 1px dashed rgba(52, 211, 153, 0.45);
  background: rgba(2, 6, 23, 0.55);
}
body.theme-light .sale-id-frame {
  background: #f1f5f9;
  border-color: rgba(15, 118, 110, 0.35);
}
.sale-id-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sale-id-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  padding: 12px;
  color: #94a3b8;
  font-size: 12px;
}
.sale-id-empty strong {
  display: block;
  font-size: 13px;
  color: #e2e8f0;
}
body.theme-light .sale-id-empty strong { color: #0f172a; }
.sale-id-guide {
  pointer-events: none;
  position: absolute;
  inset: 8%;
  border: 1.5px solid rgba(52, 211, 153, 0.55);
  border-radius: 8px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.18);
}
.sale-id-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.sale-id-actions .m-btn { width: 100%; min-height: 42px; }
.sale-id-clear {
  margin-top: 8px;
  width: 100%;
}
.sale-attach-block {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.35);
}
body.theme-light .sale-attach-block {
  background: rgba(248, 250, 252, 0.95);
  border-color: rgba(148, 163, 184, 0.45);
}
.sale-attach-hint {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.88);
}
body.theme-light .sale-attach-hint { color: #475569; }
.sale-attach-row {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
}
.sale-attach-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sale-attach-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.sale-attach-kind { font-size: 12px; flex: 1; }
.sale-attach-kind-select {
  display: block;
  width: 100%;
  margin-top: 4px;
  min-height: 38px;
}
.sale-attach-rm {
  border: none;
  background: transparent;
  color: #f87171;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.sale-attach-frame {
  border-radius: 10px;
  overflow: hidden;
  min-height: 120px;
  background: rgba(2, 6, 23, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.25);
}
body.theme-light .sale-attach-frame { background: #fff; }
.sale-attach-preview {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: #0f172a;
}
.sale-attach-empty,
.sale-attach-pdf {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  text-align: center;
  color: rgba(226, 232, 240, 0.85);
  font-size: 12px;
}
.sale-attach-empty strong { font-size: 13px; }
body.theme-light .sale-attach-empty,
body.theme-light .sale-attach-pdf { color: #64748b; }
.sale-attach-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.sale-attach-actions .m-btn { width: 100%; min-height: 42px; }
.sale-attach-add {
  margin-top: 10px;
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
  border: 1px dashed rgba(52, 211, 153, 0.55);
  background: transparent;
  color: #34d399;
  font-weight: 600;
  cursor: pointer;
}
.att-cam-guide--ktp {
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(88%, 420px);
  aspect-ratio: 1.586 / 1;
  transform: translate(-50%, -52%);
  border: 2px solid rgba(52, 211, 153, 0.85);
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.42);
  pointer-events: none;
  z-index: 1;
}
}
.att-cam-guide--ktp::after {
  content: 'Sesuaikan KTP dalam bingkai';
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
  color: #ecfdf5;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.sale-block {
  margin: 10px 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.45);
}
.sale-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.sale-block-head strong { font-size: 13px; color: #e2e8f0; }
/* Form penjualan retail — kontras teks input wajib terbaca (dark + light) */
#salesForm .sf-field input,
#salesForm .sf-field select,
#salesForm .sf-field textarea,
#salesForm .sale-kel-multi {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc;
  background: rgba(10, 14, 32, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.35);
}
#salesForm .sf-field input::placeholder,
#salesForm .sf-field textarea::placeholder {
  color: rgba(248, 250, 252, 0.5) !important;
}
#salesForm .sf-field select option {
  color: #0f172a;
  background: #fff;
}
body.theme-light #salesForm .sale-block {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.12);
}
body.theme-light #salesForm .sale-block-head strong {
  color: #0f172a;
}
body.theme-light #salesForm .sf-field input,
body.theme-light #salesForm .sf-field select,
body.theme-light #salesForm .sf-field textarea,
body.theme-light #salesForm .sale-kel-multi {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.2) !important;
}
body.theme-light #salesForm .sf-field input::placeholder,
body.theme-light #salesForm .sf-field textarea::placeholder {
  color: #64748b !important;
}
body.theme-light #salesForm .sf-field > span {
  color: #475569;
}
.sale-row-rm { min-width: 40px; padding: 6px 10px; }
.sf-field.is-readonly input,
.sf-field.is-readonly .sf-readonly {
  color: #93c5fd !important;
  -webkit-text-fill-color: #93c5fd;
  background: rgba(10, 14, 39, 0.85) !important;
  border-style: solid;
  border-color: rgba(147, 197, 253, 0.35);
  opacity: 1;
}
body.theme-light .sf-field.is-readonly input,
body.theme-light .sf-field.is-readonly .sf-readonly {
  color: #0b3a6e !important;
  -webkit-text-fill-color: #0b3a6e;
  background: #fff !important;
  border-color: rgba(11, 58, 110, 0.25);
}
.sf-field.is-system input,
.sf-field.is-system .sf-readonly {
  color: #93c5fd !important;
  -webkit-text-fill-color: #93c5fd;
  background: rgba(10, 14, 39, 0.85) !important;
  border-style: solid;
  border-color: rgba(147, 197, 253, 0.35);
  opacity: 1;
}
body.theme-light .sf-field.is-system input,
body.theme-light .sf-field.is-system .sf-readonly {
  color: #0b3a6e !important;
  -webkit-text-fill-color: #0b3a6e;
  background: #fff !important;
  border-color: rgba(11, 58, 110, 0.25);
}
.p-att-ok-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
}
.p-att-ok-actions.is-single {
  justify-content: center;
}
.p-att-ok-actions.is-dual {
  justify-content: space-between;
}
.p-att-ok-actions .p-ag-btn {
  width: auto;
  min-width: 112px;
  max-width: 48%;
  flex: 0 1 auto;
  padding: 10px 18px;
}
.p-att-ok-actions.is-single .p-ag-btn {
  min-width: 132px;
  max-width: none;
}
.act-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.act-chip {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: rgba(148,163,184,0.18);
  color: #e2e8f0;
}
.act-card--pengiriman { border-color: rgba(59,130,246,0.4); }
.act-card--pengiriman .act-chip { background: rgba(37,99,235,0.35); }
.act-card--penerimaan { border-color: rgba(245,158,11,0.4); }
.act-card--penerimaan .act-chip { background: rgba(180,83,9,0.4); }
.act-card--kunjungan { border-color: rgba(168,85,247,0.35); }
.act-card--kunjungan .act-chip { background: rgba(126,34,206,0.35); }
.act-card--gudang { border-color: rgba(20,184,166,0.4); }
.act-card--gudang .act-chip { background: rgba(13,148,136,0.35); }
.act-card h3 { margin: 0 0 4px; font-size: 15px; }
.act-meta, .act-by { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.act-card-top time { font-size: 11px; color: var(--muted); }
/* —— Tracking status: name + live clock —— */
.trk-status-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.trk-status-top > p { margin: 0; flex: 1 1 auto; min-width: 0; }
.trk-status-now {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.trk-status-now #trkNowDate {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #93c5fd;
  max-width: min(58vw, 220px);
  line-height: 1.25;
}
.trk-status-now #trkNowTime:empty {
  display: none;
}
.trk-status-now #trkNowTime {
  display: block;
  font-size: 15px;
  font-weight: 850;
  color: #f8fafc;
  letter-spacing: 0.02em;
}
.trk-status #trkMyCoords:empty,
.trk-status #trkMyAddr:empty {
  display: none;
}

/* —— EID0000 calendar (ported) —— */
.svo100-dash-calendar { display: flex; flex-direction: column; gap: 6px; min-height: 145px; }
.svo100-dash-clock {
  text-align: center;
  padding: 7px 8px 6px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.95), rgba(238, 242, 247, 0.92));
  border: 1px solid rgba(226, 232, 240, 0.9);
}
.svo100-dash-clock-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2px 9px;
  border-radius: 12px;
  background: rgba(255,255,255,0.42);
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.1;
  overflow: hidden;
  animation: svoClockLiquidBeat 1s ease-in-out infinite;
  isolation: isolate;
}
.svo100-dash-clock-time::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(56,189,248,0.22), transparent 55%);
  opacity: 0;
  animation: svoClockLiquidGlow 1s ease-in-out infinite;
}
.svo100-dash-clock-time > span { position: relative; z-index: 1; }
@keyframes svoClockLiquidBeat {
  0%, 100% { box-shadow: 0 0 0 rgba(56,189,248,0); transform: scale(1); }
  45% { box-shadow: 0 0 18px rgba(56,189,248,0.28); transform: scale(1.025); }
}
@keyframes svoClockLiquidGlow {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  45% { opacity: 1; transform: scale(1.08); }
}
.svo100-dash-clock-date {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  line-height: 1.35;
}
.svo100-dash-clock-date.is-sat { color: #ea580c; }
.svo100-dash-clock-date.is-sun { color: #dc2626; }
.svo100-dash-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 10px;
  text-align: center;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  padding: 4px;
}
.svo100-dash-cal-head {
  font-weight: 800;
  color: #64748b;
  padding: 1px 0 2px;
  font-size: 9px;
  text-transform: uppercase;
}
.svo100-dash-cal-head.is-sat { color: #ea580c; }
.svo100-dash-cal-head.is-sun { color: #dc2626; }
.svo100-dash-cal-day {
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-weight: 600;
  color: #334155;
  font-size: 11px;
}
.svo100-dash-cal-day.is-empty { visibility: hidden; }
.svo100-dash-cal-day.is-today {
  background: #0f172a;
  color: #fff;
  font-weight: 800;
}
.svo100-dash-cal-day.is-sat:not(.is-today) { color: #ea580c; font-weight: 800; }
.svo100-dash-cal-day.is-sun:not(.is-today) { color: #dc2626; font-weight: 800; }
.svo100-dash-cal-month {
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  text-align: center;
}
.svo100-dash-cal-nav {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 4px;
}
.svo100-dash-cal-picker {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(86px, 0.8fr);
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.svo100-dash-cal-select {
  height: 28px;
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 7px;
  background: rgba(255,255,255,0.92);
  color: #0f172a;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
}
.svo100-dash-cal-nav-btn {
  height: 28px;
  width: 28px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 7px;
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sidebar-calendar-card {
  margin: 0;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* —— Calculator (EID0000 compact) —— */
.svo100-calc-formula-wrap { display: grid; grid-template-columns: 1fr; gap: 8px; }
.svo100-calc-formula-input {
  width: 100%; border: 1px solid #94a3b8; border-radius: 12px; padding: 10px 12px;
  background: #fff; color: #020617; font-size: 16px; font-weight: 600; outline: none;
}
.svo100-calc-display {
  width: 100%; border: 1px solid #1e293b; border-radius: 12px; padding: 10px 12px;
  background: #0b1220; color: #fff; text-align: right; font-size: 18px; font-weight: 700; min-height: 48px;
}
.svo100-calc-display-result { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.svo100-calc-display-terbilang { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.88); text-align: right; }
.svo100-template-calc { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(226,232,240,0.35); }
.svo100-template-title { font-size: 12px; font-weight: 650; color: #e2e8f0; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.svo100-template-row {
  display: grid;
  grid-template-columns: 1fr 1fr 14px 1fr 14px minmax(72px, 1fr) 56px;
  gap: 4px;
  align-items: stretch;
  margin-bottom: 7px;
}
.svo100-template-row input {
  width: 100%; min-width: 0; border: 1px solid #94a3b8; border-radius: 8px;
  padding: 6px 8px; font-size: 13px; font-weight: 560; background: #fff; color: #020617; outline: none; min-height: 34px;
}
.svo100-template-symbol { font-size: 12px; color: #94a3b8; text-align: center; display: flex; align-items: center; justify-content: center; }
.svo100-template-result {
  border-radius: 8px; padding: 6px 8px; background: #fff; font-size: 13px; font-weight: 680; color: #020617;
  text-align: right; border: 1px solid #64748b; min-height: 34px; display: flex; align-items: center; justify-content: flex-end;
}
.svo100-widget-mini-btn {
  border: none; border-radius: 8px; background: #eef2f7; color: #334155; padding: 6px 8px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.svo100-template-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.svo100-widget-mini-btn.is-danger { color: #b91c1c; background: #fee2e2; }
.svo100-widget-mini-btn.is-ghost { opacity: .42; cursor: default; }
.svo100-template-total-card {
  display: grid; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,247,237,0.98), rgba(255,255,255,0.96));
  border: 1px solid #fed7aa; color: #9a3412;
}
.svo100-template-total-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.svo100-template-total-value {
  background: #fff; border: 1px solid #64748b; color: #020617; border-radius: 8px; padding: 6px 10px;
  min-height: 34px; display: flex; align-items: center; justify-content: flex-end; font-size: 15px; font-weight: 700;
}
.svo100-template-terbilang-line { color: #334155; font-size: 11px; line-height: 1.45; }
.svo100-template-terbilang-line strong { color: #0f172a; font-size: 10px; margin-right: 4px; text-transform: uppercase; }

@media (max-width: 420px) {
  .svo100-template-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "label label"
      "a sym1"
      "b sym2"
      "res actions";
  }
  .svo100-template-row input[data-k="label"] { grid-column: 1 / -1; }
  .svo100-template-symbol { display: none; }
  .svo100-template-result { grid-column: 1 / 2; }
  .svo100-template-actions { grid-column: 2 / 3; }
}

/* —— AssistiveTouch FAB —— */
.svo-assist-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95000;
}
.svo-assist-fab {
  pointer-events: auto;
  position: fixed;
  right: 14px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: #1d4ed8;
  box-shadow: 0 10px 28px rgba(29, 78, 216, 0.5);
  cursor: pointer;
  display: grid;
  place-items: center;
  touch-action: none;
  opacity: 1 !important;
  visibility: visible !important;
}
.svo-assist-fab.is-open {
  background: #1e40af;
}
.svo-assist-fab-label {
  color: #fff;
  font-weight: 850;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
.svo-assist-fab-dot { display: none; }
.svo-assist-fan {
  pointer-events: none;
  position: fixed;
  width: 56px;
  height: 56px;
}
.svo-assist-fan:not([hidden]) { pointer-events: auto; }
.svo-assist-sat {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 46px;
  height: 46px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(15, 23, 42, 0.94);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  cursor: pointer;
  transform: translate(0, 0);
  transition: transform .22s ease, opacity .22s ease;
  white-space: nowrap;
}
.svo-assist-sat.is-wide {
  min-width: 96px;
  height: 40px;
  font-size: 11px;
}
.svo-assist-fan:not([hidden]) .svo-assist-sat:nth-child(1) {
  transform: translate(-58px, -62px);
}
.svo-assist-fan:not([hidden]) .svo-assist-sat:nth-child(2) {
  transform: translate(-108px, -18px);
}
.svo-assist-scrim {
  pointer-events: auto;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.45);
}
.svo-assist-panel {
  pointer-events: auto;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  max-height: min(72dvh, 640px);
  overflow: auto;
  z-index: 1;
}
.svo-assist-panel-card {
  border-radius: 18px;
  padding: 12px;
  background: rgba(12, 18, 40, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 18px 48px rgba(0,0,0,0.4);
}
.svo-assist-panel-card.is-calc {
  background: rgba(248, 250, 252, 0.98);
  color: #0f172a;
}
.svo-assist-panel-card.is-calc .svo100-template-title { color: #0f172a; }
.svo-assist-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.svo-assist-panel-head strong { color: #f8fafc; font-size: 14px; }
.svo-assist-panel-card.is-calc .svo-assist-panel-head strong { color: #0f172a; }
.svo-assist-panel-close {
  width: 32px; height: 32px; border-radius: 10px; border: 0;
  background: rgba(148,163,184,0.2); color: inherit; font-size: 18px; cursor: pointer;
}

/* —— Light mode (dark mode TIDAK diubah) — soft light + gradiasi biru/oranye —— */
body.theme-light {
  --bg: #eef3fb;
  --bg2: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --line: rgba(15, 23, 42, 0.1);
  --blue: #2563eb;
  --blue2: #1d4ed8;
  color: var(--text);
  background: var(--bg);
}
body.theme-light::before {
  opacity: 1;
  background:
    radial-gradient(ellipse 80% 42% at 12% 18%, rgba(37, 99, 235, 0.18), transparent 55%),
    radial-gradient(ellipse 70% 38% at 92% 72%, rgba(234, 88, 12, 0.12), transparent 52%),
    linear-gradient(180deg, #f5f8ff 0%, #e8eef8 48%, #eef2f7 100%);
}
body.theme-light .m-nav,
body.theme-light .m-drawer-panel {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
body.theme-light .m-dock {
  border-color: rgba(148, 163, 184, 0.35);
  color: var(--text);
}
body.theme-light .m-brand-text {
  filter: none;
  background: linear-gradient(90deg, #3b82f6, #a855f7 48%, #ea580c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.theme-light .m-dock-item { color: #64748b; }
body.theme-light .m-dock-item.is-active {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.22);
}
body.theme-light .m-dock-item.is-center,
body.theme-light .m-dock-item.is-center.is-active {
  color: #fff;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0.12)),
    linear-gradient(160deg, #1b2c4f 0%, #101d3b 46%, #0a1226 100%);
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow:
    0 12px 24px rgba(15, 23, 42, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -8px 16px rgba(2, 6, 23, 0.4);
}
body.theme-light .m-dock-brand-sv { color: #60a5fa; }
body.theme-light .m-dock-brand-o { color: #fb923c; }
body.theme-light .m-dock-item.is-center .m-dock-center-sub { color: rgba(255, 255, 255, 0.95); }
body.theme-light .m-card,
body.theme-light .pf-card,
body.theme-light .hm-cal,
body.theme-light .hm-chart-card,
body.theme-light .m-stat,
body.theme-light .trk-map-card {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--line);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
body.theme-light .trk-map-card { background: #e8eef8; }
body.theme-light .pf-input,
body.theme-light .pf-value,
body.theme-light .sf-field input,
body.theme-light .sf-field select,
body.theme-light .sf-field textarea,
body.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.theme-light select,
body.theme-light textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  caret-color: #2563eb;
  border-color: rgba(15, 23, 42, 0.18);
  color-scheme: light;
}
body.theme-light .sf-field input::placeholder,
body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
  color: #94a3b8 !important;
}
body.theme-light .sf-field input:-webkit-autofill,
body.theme-light .sf-field input:-webkit-autofill:hover,
body.theme-light .sf-field input:-webkit-autofill:focus,
body.theme-light input:-webkit-autofill,
body.theme-light input:-webkit-autofill:hover,
body.theme-light input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #2563eb;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}
body.theme-light .m-btn-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--line);
}
body.theme-light .m-section-head span { color: var(--blue); }
body.theme-light .m-section-head h2,
body.theme-light .m-section-head p,
body.theme-light .m-sub,
body.theme-light .m-title { color: var(--text); }
body.theme-light .m-section-head p,
body.theme-light .m-sub { color: var(--muted); }
body.theme-light .svo-page-ticker {
  background: rgba(255, 255, 255, 0.94);
  color: #1e40af;
  border-color: var(--line);
}
body.theme-light .pf-theme {
  background: rgba(37, 99, 235, 0.06);
}
body.theme-light .pf-link,
body.theme-light .pf-action-row,
body.theme-light .pf-toggle {
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
}
body.theme-light .hm-xlabel,
body.theme-light .hm-ylabel { fill: #64748b; }
body.theme-light .hm-bar { fill: rgba(37, 99, 235, 0.5); }
body.theme-light .hm-line { stroke: #1d4ed8; }
body.theme-light .hm-dot { fill: #2563eb; }
body.theme-light .hm-grid { stroke: rgba(15, 23, 42, 0.08); }
body.theme-light .svo-upd-card,
.svo-upd-root.is-light .svo-upd-card {
  background: linear-gradient(165deg, #ffffff, #f1f5ff);
  border-color: rgba(37, 99, 235, 0.2);
  color: #0f172a;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}
body.theme-light .svo-upd-title,
.svo-upd-root.is-light .svo-upd-title { color: #0f172a !important; }
body.theme-light .svo-upd-desc,
.svo-upd-root.is-light .svo-upd-desc { color: #475569 !important; }
body.theme-light .svo-upd-progress-txt,
.svo-upd-root.is-light .svo-upd-progress-txt { color: #1d4ed8; }
body.theme-light .svo-upd-later,
.svo-upd-root.is-light .svo-upd-later { color: #64748b; border-color: rgba(15, 23, 42, 0.12); }
body.theme-light .svo-upd-art,
.svo-upd-root.is-light .svo-upd-art {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.22);
}
body.theme-light .pf-legal-card,
.pf-legal-root.is-light .pf-legal-card {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
}
body.theme-light .pf-legal-card p,
.pf-legal-root.is-light .pf-legal-card p { color: #475569; }
body.theme-light .pf-legal-head strong,
.pf-legal-root.is-light .pf-legal-head strong { color: #0f172a; }
body.theme-light .pf-legal-head button,
.pf-legal-root.is-light .pf-legal-head button { color: #64748b; }
body.theme-light .pf-legal-scrim,
.pf-legal-root.is-light .pf-legal-scrim {
  background: rgba(15, 23, 42, 0.45);
}

/* —— Page ticker: fixed paling atas, 1 teks kanan→kiri —— */
.svo-page-ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  overflow: hidden;
  height: var(--ticker-h);
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--ticker-h) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  background: rgba(8, 12, 32, 0.96);
  color: #93c5fd;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.svo-page-ticker-track {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  padding: 5px 0;
  animation: svoTickerRtl 26s linear infinite;
}
.svo-page-ticker-text {
  display: inline-block;
  padding-right: 0;
}
@keyframes svoTickerRtl {
  from { transform: translateX(100vw); }
  to { transform: translateX(-100%); }
}
body.has-page-ticker {
  padding-top: calc(var(--ticker-h) + env(safe-area-inset-top, 0px) + 8px);
}
body.is-native-app.has-page-ticker {
  padding-top: calc(var(--ticker-h) + env(safe-area-inset-top, 0px) + 8px);
}

/* —— Profile cards / fields / buttons —— */
.pf-wrap { display: flex; flex-direction: column; gap: 14px; }
.pf-card {
  margin: 0;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(18, 24, 48, 0.72);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.pf-card-title,
.pf-card > h3 {
  margin: 0 0 12px;
  font-size: 0.98rem;
  font-weight: 750;
  color: var(--text);
}
.pf-stack { display: flex; flex-direction: column; gap: 10px; }
.pf-hero {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pf-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 56px;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(160deg, #3b82f6, #1d4ed8);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(147, 197, 253, 0.35);
}
.pf-hero-meta strong {
  display: block;
  font-size: 1.05rem;
  color: var(--text);
}
.pf-hero-meta p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.pf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.pf-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue2);
}
.pf-value,
.pf-input {
  display: block;
  width: 100%;
  min-height: var(--sf-field-h);
  height: var(--sf-field-h);
  padding: var(--sf-field-pad-y) var(--sf-field-pad-x);
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 28, 0.65);
  color: #f8fafc;
  caret-color: #93c5fd;
  color-scheme: dark;
  font: inherit;
  font-weight: 600;
  box-sizing: border-box;
}
.pf-field.is-readonly .pf-value {
  font-weight: 700;
}
.pf-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.pf-theme {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 28, 0.45);
}
.pf-theme-btn {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--muted);
  font-weight: 700;
  background: transparent;
}
.pf-theme-btn.is-on {
  color: #fff;
  background: linear-gradient(160deg, #3b82f6, #1d4ed8);
  border-color: rgba(147, 197, 253, 0.4);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}
.pf-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 28, 0.45);
}
.pf-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 28, 0.45);
}
.pf-toggle input { width: 20px; height: 20px; accent-color: var(--blue); }
.pf-sub {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.pf-links { display: flex; flex-direction: column; gap: 6px; }
.pf-link {
  display: block;
  width: 100%;
  text-align: left;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 28, 0.45);
  color: var(--text);
  font-weight: 650;
}
.pf-link:active { background: rgba(59, 130, 246, 0.15); }
.pf-btn-block { width: 100%; margin-top: 4px; }
.pf-version { text-align: center; }
.pf-ver-line { margin: 0; font-weight: 800; font-size: 1.05rem; color: var(--text); letter-spacing: -0.02em; line-height: 1.35; }
.pf-ver-now { font-weight: 650; color: #93c5fd; font-size: 0.92em; }
.pf-ver-sub { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.pf-ver-ui { margin: 6px 0 0; }
.pf-justify {
  text-align: justify;
  text-indent: 0;
  text-justify: inter-word;
}
.pf-card > .m-sub.pf-justify {
  text-align: justify;
}
.pf-ver-status {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.45);
}
.pf-ver-status.is-ok {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(22, 163, 74, 0.12);
  color: #86efac;
}
.pf-ver-status.is-outdated {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(245, 158, 11, 0.14);
  color: #fde68a;
}
body.theme-light .pf-ver-status.is-ok {
  background: #ecfdf5;
  color: #047857;
  border-color: #6ee7b7;
}
body.theme-light .pf-ver-status.is-outdated {
  background: #fffbeb;
  color: #b45309;
  border-color: #fcd34d;
}
.pf-auth-actions { margin-top: 4px; }
.pf-bio-enroll { margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.pf-legal-root {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.pf-legal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
}
.pf-legal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: 80dvh;
  overflow: auto;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(12, 16, 36, 0.98);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  color: #f1f5f9;
}
.pf-legal-card p {
  margin: 0 0 14px;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.5;
}
.pf-legal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pf-legal-head strong {
  color: #ffffff;
  font-size: 1.05rem;
}
.pf-legal-head button {
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
}

/* —— Update modal: popup overlay (app + web) —— */
.svo-upd-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100050 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.svo-upd-scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.svo-upd-card {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  padding: 22px 20px 18px;
  border-radius: 22px;
  border: 1px solid rgba(147, 197, 253, 0.28);
  background: linear-gradient(165deg, rgba(18, 28, 58, 0.98), rgba(8, 12, 28, 0.98));
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55);
  text-align: center;
  color: #f1f5f9;
}
.svo-upd-art {
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(147, 197, 253, 0.3);
}
.svo-upd-rocket { font-size: 34px; line-height: 1; }
.svo-upd-title {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
}
.svo-upd-desc {
  margin: 0 0 16px;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.45;
}
.svo-upd-progress { margin: 0 0 14px; }
.svo-upd-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}
.svo-upd-progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width 0.2s ease;
}
.svo-upd-progress-txt {
  margin: 6px 0 0;
  font-size: 11px;
  color: #93c5fd;
}
.svo-upd-primary {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 0 0 8px;
  border-radius: 999px;
  border: 0;
  color: #fff;
  font-weight: 750;
  background: linear-gradient(160deg, #3b82f6, #1d4ed8);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.4);
}
.svo-upd-later {
  display: block;
  width: 100%;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 650;
  background: transparent;
}

/* Banner cek pembaruan — tidak menutupi UI, tetap sampai kepastian */
.svo-upd-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 100040;
  pointer-events: none;
}
.svo-upd-banner-inner {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
}
.svo-upd-banner.is-light .svo-upd-banner-inner {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.svo-upd-banner-text { flex: 1; min-width: 0; }
.svo-upd-banner-title {
  display: block;
  font-size: 13px;
  font-weight: 750;
  color: #e2e8f0;
  margin: 0 0 2px;
}
.svo-upd-banner.is-light .svo-upd-banner-title { color: #0f172a; }
.svo-upd-banner-msg {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #94a3b8;
}
.svo-upd-banner.is-light .svo-upd-banner-msg { color: #475569; }
.svo-upd-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.svo-upd-ban-primary,
.svo-upd-ban-ghost {
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 10px;
  white-space: nowrap;
}
.svo-upd-ban-primary {
  border: 0;
  background: #2563eb;
  color: #fff;
}
.svo-upd-ban-ghost {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: transparent;
  color: #cbd5e1;
}
.svo-upd-banner.is-light .svo-upd-ban-ghost {
  color: #334155;
  border-color: rgba(15, 23, 42, 0.14);
}
.svo-upd-banner[data-state="checking"] .svo-upd-banner-inner {
  border-color: rgba(59, 130, 246, 0.45);
}
.svo-upd-banner[data-state="uptodate"] .svo-upd-banner-inner {
  border-color: rgba(16, 185, 129, 0.45);
}
.svo-upd-banner[data-state="outdated"] .svo-upd-banner-inner {
  border-color: rgba(245, 158, 11, 0.5);
}
.svo-upd-banner[data-state="error"] .svo-upd-banner-inner {
  border-color: rgba(239, 68, 68, 0.5);
}

/* —— Home —— */
.hm-page { padding: 0; }

/* Week strip (1 baris Sun–Sat) di atas notifikasi home */
.hm-week-sec {
  margin: 4px 0 12px;
}
.hm-week {
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 6px 5px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.theme-light .hm-week {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.08);
}
.hm-week:active { transform: scale(0.995); }
.hm-week-caption,
.hm-week-hint { display: none !important; }
.hm-week-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.hm-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 2px 0;
  border-radius: 9px;
  pointer-events: none;
}
.hm-week-day em {
  font-size: 8px;
  font-style: normal;
  font-weight: 650;
  color: var(--muted);
  line-height: 1.1;
}
.hm-week-day strong {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.15;
  color: var(--text);
}
.hm-week-day.is-sun em,
.hm-week-day.is-sun strong { color: #f87171; }
.hm-week-day.is-today {
  background: color-mix(in srgb, #ea580c 18%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #ea580c 55%, transparent);
}
.hm-week-day.is-today em,
.hm-week-day.is-today strong { color: #ea580c; }
body.theme-light .hm-week-day.is-today em,
body.theme-light .hm-week-day.is-today strong { color: #c2410c; }
.hm-week-hint {
  margin: 6px 0 0;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
}

/* Full calendar popup */
.hm-cal-modal {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.hm-cal-modal.is-on {
  display: flex;
  opacity: 1;
  animation: hmCalModalIn 0.28s ease-out both;
}
.hm-cal-modal.is-leaving {
  display: flex;
  opacity: 0;
}
@keyframes hmCalModalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hm-cal-modal-sheet {
  width: min(420px, 100%);
  max-height: min(86dvh, 640px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  padding: 12px 12px 14px;
  transform: translateY(18px);
  animation: hmCalSheetIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hm-cal-modal.is-on .hm-cal-modal-sheet { transform: translateY(0); }
@keyframes hmCalSheetIn {
  from { transform: translateY(28px); opacity: 0.85; }
  to { transform: translateY(0); opacity: 1; }
}
.hm-cal-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.hm-cal-modal-bar strong {
  font-size: 13px;
  font-weight: 750;
  color: var(--text);
}
.hm-cal-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.hm-cal-modal .hm-cal {
  margin: 0;
  box-shadow: none;
}

.hm-cal {
  --hm-goda: #ea580c;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 16px 14px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
body.theme-light .hm-cal {
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
  border-color: rgba(15, 23, 42, 0.08);
}
.hm-cal-body { position: relative; z-index: 1; }
.hm-cal-wm {
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 110px;
  height: 72px;
  opacity: 0.38;
  pointer-events: none;
  color: #64748b;
  z-index: 0;
}
.hm-cal-wm svg { width: 100%; height: 100%; display: block; }
.hm-cal-glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 48%, rgba(234,88,12,0.12) 54%, transparent 72%);
  transform: translate3d(-130%, 0, 0);
  opacity: 0;
}
.hm-cal:active .hm-cal-glass {
  opacity: 1;
  animation: hm-kpi-glass-sweep 0.55s ease both;
}
.hm-cal-today {
  margin: 0 0 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 750;
  color: var(--blue2);
}
.hm-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.hm-cal-jump {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
}
.hm-cal-pick {
  flex: 1 1 0;
  max-width: 48%;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 28, 0.55);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.theme-light .hm-cal-pick {
  background: #fff;
  color: #0f172a;
}
.hm-cal-pick.is-open,
.hm-cal-pick:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
  outline: none;
}
.hm-cal-nav {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(59, 130, 246, 0.12);
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
body.theme-light .hm-cal-nav {
  background: #fff;
}
.hm-cal-pop {
  position: relative;
  z-index: 20;
  width: min(240px, 78%);
  max-height: 260px;
  overflow: auto;
  margin: -4px auto 12px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg2, #fff);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  animation: hm-cal-pop-in .2s ease both;
}
@keyframes hm-cal-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.hm-cal-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.hm-cal-pop-item.is-on {
  background: #2563eb;
  color: #fff;
}
.hm-cal-check,
.hm-cal-check-gap {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.hm-cal-check {
  border-radius: 4px;
  background:
    linear-gradient(45deg, transparent 45%, #fff 46%, #fff 54%, transparent 55%) center/10px 6px no-repeat,
    linear-gradient(-45deg, transparent 40%, #fff 41%, #fff 58%, transparent 59%) 3px 4px / 6px 10px no-repeat;
}
.hm-cal-pop-item.is-on .hm-cal-check {
  background:
    linear-gradient(45deg, transparent 40%, #fff 41%, #fff 58%, transparent 59%) 1px 5px / 9px 3px no-repeat,
    linear-gradient(135deg, transparent 40%, #fff 41%, #fff 58%, transparent 59%) 1px 2px / 4px 9px no-repeat;
}
/* simpler checkmark via content */
.hm-cal-check::before {
  content: '✓';
  display: block;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  color: #fff;
  background: none;
}
.hm-cal-check {
  background: none !important;
}
.hm-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.hm-cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 2px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.hm-cal-day em {
  font-size: 7px;
  font-style: normal;
  color: var(--muted);
  font-weight: 650;
}
.hm-cal-day strong { font-size: 12px; font-weight: 750; }
.hm-cal-day.is-empty { visibility: hidden; pointer-events: none; }
.hm-cal-day.is-sun em,
.hm-cal-day.is-sun strong { color: #f87171; }
.hm-cal-day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hm-goda) 55%, transparent);
}
.hm-cal-day.is-selected {
  background: var(--hm-goda);
  color: #fff;
  box-shadow: 0 6px 14px rgba(234, 88, 12, 0.35);
  animation: hm-cal-select .28s cubic-bezier(.2, .8, .2, 1);
}
.hm-cal-day.is-selected em,
.hm-cal-day.is-selected strong { color: #fff; }
@keyframes hm-cal-select {
  from { transform: scale(0.92); opacity: .7; }
  to { transform: scale(1); opacity: 1; }
}
.hm-cal-day:active { transform: scale(0.96); }
.hm-summary .m-stats { margin-top: 0; gap: 8px; }
.hm-summary--esg .hm-summary-esg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.hm-summary--esg .m-stat {
  min-width: 0;
}
.hm-summary--esg .m-stat strong {
  font-size: clamp(14px, 3.8vw, 18px);
  word-break: break-word;
}

/* Beranda — log aktivitas seluruh user */
.hm-act-log {
  margin: 0 1px 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.4));
}
.hm-act-log .m-section-head span { color: #93c5fd; }
.hm-act-log .m-section-head h2,
.hm-act-log .m-section-head p { color: #e2e8f0; }
.hm-act-list {
  margin: 0;
  padding: 0 12px 12px 28px;
  color: #cbd5e1;
  max-height: 42vh;
  overflow: auto;
}
.hm-act-list li { margin: 0 0 8px; line-height: 1.35; }
.hm-act-when { opacity: 0.75; font-weight: 400; }
body.theme-light .hm-act-log {
  background: linear-gradient(165deg, #f8fafc, #eff6ff);
  border-color: rgba(37, 99, 235, 0.22);
}
body.theme-light .hm-act-log .m-section-head span { color: #1d4ed8; }
body.theme-light .hm-act-log .m-section-head h2,
body.theme-light .hm-act-log .m-section-head p { color: #1e3a5f; }
body.theme-light .hm-act-list { color: #334155; }
.hm-book-sec { margin: 0 1px 12px; }
.hm-subblock { padding: 0 12px 12px; }
.hm-subblock h3 {
  margin: 8px 0 6px;
  font-size: 14px;
  font-weight: 650;
}
.hm-dash-board { margin: 0; }
.hm-board-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hm-board-card em {
  display: block;
  font-style: normal;
  font-size: 11px;
  opacity: 0.82;
  margin-top: 4px;
  font-weight: 500;
}
.hm-book-tabs {
  display: flex;
  gap: 8px;
  margin: 0 1px 10px;
  padding: 0 4px;
}
.hm-book-tab {
  flex: 1;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 650;
  font-size: 13px;
  background: rgba(148, 163, 184, 0.16);
  color: inherit;
}
.hm-book-tab.is-on {
  background: rgba(37, 99, 235, 0.28);
}
.hm-stock-parent { cursor: pointer; }
.hm-stock-parent.is-open td:first-child::after { content: ' ▴'; }
.hm-stock-parent:not(.is-open) td:first-child::after { content: ' ▾'; }
.hm-stock-child td:first-child { padding-left: 18px; opacity: 0.9; }
.hm-kpi-pop-sub { margin: 10px 0 4px; font-weight: 650; font-size: 13px; }
.hm-tx-book .m-stats { margin-top: 6px; }
.hm-stat-line { margin: 0; color: #cbd5e1; }
.hm-mini-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hm-mini-scroll-x { max-width: 100%; }
.hm-mini-scroll-x .hm-mini-table { min-width: 560px; }
.hm-inv-branch { margin: 0 0 8px; border: 1px solid rgba(148,163,184,.28); border-radius: 10px; padding: 6px 10px; }
.hm-inv-branch summary { cursor: pointer; font-weight: 700; color: #e2e8f0; }
body.theme-light .hm-inv-branch summary { color: #0f172a; }
.hm-chart-card.is-loading .hm-chart-svg { opacity: .35; }
.hm-chart-skel {
  display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 12px 8px 0;
}
.hm-chart-skel span {
  flex: 1; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(96,165,250,.55), rgba(96,165,250,.15));
  animation: hmChartPulse 1.2s ease-in-out infinite;
}
.hm-chart-skel span:nth-child(1) { height: 42%; animation-delay: 0s; }
.hm-chart-skel span:nth-child(2) { height: 68%; animation-delay: .1s; }
.hm-chart-skel span:nth-child(3) { height: 55%; animation-delay: .2s; }
.hm-chart-skel span:nth-child(4) { height: 82%; animation-delay: .3s; }
.hm-chart-skel span:nth-child(5) { height: 48%; animation-delay: .4s; }
.hm-chart-skel span:nth-child(6) { height: 74%; animation-delay: .5s; }
@keyframes hmChartPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.hm-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.hm-mini-table th,
.hm-mini-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.hm-chart-title {
  margin: 8px 12px 0;
  font-size: 14px;
}
.hm-tx-sec { margin: 0 1px 12px; }
.pb-page > .hm-kpi-sec.m-section,
.hm-page > .hm-kpi-sec.m-section {
  margin: 0 1px 10px;
}
.hm-kpi-grid {
  display: grid;
  grid-template-columns: var(--hm-kpi-tmpl-m, repeat(var(--hm-kpi-cols-m, 2), minmax(0, 1fr)));
  gap: 10px;
  /* Perkiraan lebar isi satu kartu — dipakai angka KPI untuk menyesuaikan ukuran huruf. */
  --hm-kpi-fit: min(40vw, 200px);
  --hm-kpi-fs-max: 20px;
}
@media (min-width: 640px) {
  .hm-kpi-grid {
    grid-template-columns: var(--hm-kpi-tmpl-t, repeat(var(--hm-kpi-cols-t, 2), minmax(0, 1fr)));
    --hm-kpi-fit: min(30vw, 230px);
    --hm-kpi-fs-max: 24px;
  }
}
@media (min-width: 980px) {
  .hm-kpi-grid {
    grid-template-columns: var(--hm-kpi-tmpl-d, repeat(var(--hm-kpi-cols-d, 2), minmax(0, 1fr)));
    --hm-kpi-fit: min(22vw, 250px);
    --hm-kpi-fs-max: 26px;
  }
}
.hm-kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 76px; /* 95px − 20% */
  padding: 7px 9px 6px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(15, 23, 42, 0.55));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
  animation: hm-kpi-in 0.45s ease both;
  animation-delay: var(--hm-kpi-delay, 0ms);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.hm-kpi-illust {
  position: absolute;
  right: -6px;
  bottom: -2px;
  width: 84px;
  height: 56px;
  /* Latar dekoratif harus kalah kontras dari angka KPI. */
  opacity: 0.26;
  pointer-events: none;
  z-index: 0;
  display: block;
  color: #64748b;
}
.hm-kpi-illust svg {
  width: 100%;
  height: 100%;
  display: block;
}
body.theme-light .hm-kpi-illust {
  opacity: 0.42;
  color: #64748b;
}
.hm-kpi-top,
.hm-kpi-body { position: relative; z-index: 1; }
.hm-kpi-glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg,
    transparent 28%,
    rgba(255,255,255,0.22) 48%,
    rgba(147,197,253,0.28) 52%,
    transparent 72%);
  transform: translate3d(-130%, 0, 0);
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hm-kpi-card.is-press .hm-kpi-glass {
  opacity: 1;
  animation: hm-kpi-glass-sweep 0.55s ease both;
}
.hm-kpi-card::after {
  content: none;
}
@keyframes hm-kpi-glass-sweep {
  0% { transform: translate3d(-130%, 0, 0); opacity: 0.25; }
  35% { opacity: 1; }
  100% { transform: translate3d(130%, 0, 0); opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .hm-kpi-card:hover,
  .hm-kpi-card:focus-within {
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  }
}
.hm-kpi-card.is-press {
  animation: hm-kpi-press 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.hm-main-boot,
.hm-page--boot {
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 0 24px;
}
.hm-boot-msg {
  margin: 8px 16px 0;
  text-align: center;
  color: var(--m-muted, #64748b);
}
.hm-kpi-sec--skel .hm-kpi-card .hm-kpi-glass {
  opacity: 0.55;
  animation: hm-kpi-glass-sweep 1.6s ease-in-out infinite;
}
@keyframes hm-kpi-press {
  0% { transform: scale(1); }
  35% { transform: scale(0.97) translateY(1px); }
  100% { transform: scale(1) translateY(-2px); }
}
@keyframes hm-kpi-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes hm-kpi-shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
.hm-kpi-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.hm-kpi-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #22c55e;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}
.hm-kpi-ico-svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* 18 efek animasi icon KPI (paket lokal APK/web) */
.hm-ico-spin { animation: hm-ico-spin 3.2s linear infinite; }
.hm-ico-blink { animation: hm-ico-blink 1.8s ease-in-out infinite; }
.hm-ico-pulse { animation: hm-ico-pulse 1.6s ease-in-out infinite; }
.hm-ico-shake { animation: hm-ico-shake 2.6s ease-in-out infinite; }
.hm-ico-float { animation: hm-ico-float 2.4s ease-in-out infinite; }
.hm-ico-pop { animation: hm-ico-pop 2.2s ease-in-out infinite; }
.hm-ico-wave { animation: hm-ico-wave 2.8s ease-in-out infinite; }
.hm-ico-rise { animation: hm-ico-rise 2.5s ease-in-out infinite; }
.hm-ico-bounce { animation: hm-ico-bounce 1.5s ease infinite; }
.hm-ico-swing { animation: hm-ico-swing 2.2s ease-in-out infinite; }
.hm-ico-flip { animation: hm-ico-flip 3s ease-in-out infinite; }
.hm-ico-heartbeat { animation: hm-ico-heartbeat 1.3s ease-in-out infinite; }
.hm-ico-wobble { animation: hm-ico-wobble 2.4s ease-in-out infinite; }
.hm-ico-glitter { animation: hm-ico-glitter 2s ease-in-out infinite; }
.hm-ico-orbit { animation: hm-ico-orbit 2.8s linear infinite; }
.hm-ico-rubber { animation: hm-ico-rubber 2.1s ease-in-out infinite; }
.hm-ico-tada { animation: hm-ico-tada 2.6s ease-in-out infinite; }
.hm-ico-jelly { animation: hm-ico-jelly 2.3s ease-in-out infinite; }
.hm-ico-glow { animation: hm-ico-glow 2s ease-in-out infinite; }
.hm-ico-slide { animation: hm-ico-slide 2.4s ease-in-out infinite; }
.hm-ico-tilt { animation: hm-ico-tilt 2.2s ease-in-out infinite; }
.hm-ico-zoom { animation: hm-ico-zoom 1.9s ease-in-out infinite; }
.hm-ico-flash { animation: hm-ico-flash 1.6s ease-in-out infinite; }
.hm-ico-spin2 { animation: hm-ico-spin2 2.8s linear infinite; }
.hm-ico-drift { animation: hm-ico-drift 3s ease-in-out infinite; }
@keyframes hm-ico-spin { to { transform: rotate(360deg); } }
@keyframes hm-ico-blink {
  0%, 100% { opacity: 1; } 50% { opacity: 0.35; }
}
@keyframes hm-ico-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.25); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}
@keyframes hm-ico-shake {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(-10deg); }
  93% { transform: rotate(10deg); }
  96% { transform: rotate(-6deg); }
}
@keyframes hm-ico-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes hm-ico-pop {
  0%, 70%, 100% { transform: scale(1); }
  80% { transform: scale(1.14); }
  90% { transform: scale(0.96); }
}
@keyframes hm-ico-wave {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(2px) rotate(4deg); }
  75% { transform: translateX(-2px) rotate(-4deg); }
}
@keyframes hm-ico-rise {
  0%, 100% { transform: translateY(3px); opacity: 0.75; }
  50% { transform: translateY(-3px); opacity: 1; }
}
@keyframes hm-ico-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
  60% { transform: translateY(-2px); }
}
@keyframes hm-ico-swing {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
@keyframes hm-ico-flip {
  0%, 100% { transform: rotateY(0); }
  50% { transform: rotateY(180deg); }
}
@keyframes hm-ico-heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.12); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}
@keyframes hm-ico-wobble {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-3px) rotate(-4deg); }
  30% { transform: translateX(3px) rotate(3deg); }
  45% { transform: translateX(-2px) rotate(-2deg); }
  60% { transform: translateX(2px) rotate(2deg); }
}
@keyframes hm-ico-glitter {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.35); transform: scale(1.06); }
}
@keyframes hm-ico-orbit {
  0% { transform: rotate(0) translateX(2px) rotate(0); }
  100% { transform: rotate(360deg) translateX(2px) rotate(-360deg); }
}
@keyframes hm-ico-rubber {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  30% { transform: scaleX(1.18) scaleY(0.88); }
  50% { transform: scaleX(0.9) scaleY(1.1); }
}
@keyframes hm-ico-tada {
  0%, 100% { transform: scale(1) rotate(0); }
  10%, 20% { transform: scale(0.94) rotate(-4deg); }
  30%, 50%, 70% { transform: scale(1.08) rotate(4deg); }
  40%, 60% { transform: scale(1.08) rotate(-4deg); }
}
@keyframes hm-ico-jelly {
  0%, 100% { transform: skewX(0); }
  25% { transform: skewX(6deg); }
  50% { transform: skewX(-4deg); }
  75% { transform: skewX(2deg); }
}
@keyframes hm-ico-glow {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { filter: brightness(1.25); box-shadow: 0 0 10px rgba(255,255,255,0.45); }
}
@keyframes hm-ico-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
@keyframes hm-ico-tilt {
  0%, 100% { transform: rotate(0deg); }
  33% { transform: rotate(8deg); }
  66% { transform: rotate(-8deg); }
}
@keyframes hm-ico-zoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}
@keyframes hm-ico-flash {
  0%, 40%, 100% { opacity: 1; }
  20% { opacity: 0.25; }
  60% { opacity: 0.55; }
}
@keyframes hm-ico-spin2 {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes hm-ico-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(2px, -2px); }
  50% { transform: translate(-1px, 2px); }
  75% { transform: translate(-2px, -1px); }
}
@media (prefers-reduced-motion: reduce) {
  .hm-kpi-icon[class*="hm-ico-"],
  .hm-kpi-card { animation: none !important; }
}
/* 25 warna unik per card index (+ alias a–d lama) */
.hm-kpi-card.is-tone-01 .hm-kpi-icon, .hm-kpi-card.is-tone-a .hm-kpi-icon { background: #22c55e; }
.hm-kpi-card.is-tone-02 .hm-kpi-icon, .hm-kpi-card.is-tone-b .hm-kpi-icon { background: #eab308; }
.hm-kpi-card.is-tone-03 .hm-kpi-icon, .hm-kpi-card.is-tone-c .hm-kpi-icon { background: #3b82f6; }
.hm-kpi-card.is-tone-04 .hm-kpi-icon, .hm-kpi-card.is-tone-d .hm-kpi-icon { background: #8b5cf6; }
.hm-kpi-card.is-tone-05 .hm-kpi-icon { background: #ef4444; }
.hm-kpi-card.is-tone-06 .hm-kpi-icon { background: #14b8a6; }
.hm-kpi-card.is-tone-07 .hm-kpi-icon { background: #f97316; }
.hm-kpi-card.is-tone-08 .hm-kpi-icon { background: #ec4899; }
.hm-kpi-card.is-tone-09 .hm-kpi-icon { background: #06b6d4; }
.hm-kpi-card.is-tone-10 .hm-kpi-icon { background: #84cc16; }
.hm-kpi-card.is-tone-11 .hm-kpi-icon { background: #a855f7; }
.hm-kpi-card.is-tone-12 .hm-kpi-icon { background: #f43f5e; }
.hm-kpi-card.is-tone-13 .hm-kpi-icon { background: #0ea5e9; }
.hm-kpi-card.is-tone-14 .hm-kpi-icon { background: #d946ef; }
.hm-kpi-card.is-tone-15 .hm-kpi-icon { background: #10b981; }
.hm-kpi-card.is-tone-16 .hm-kpi-icon { background: #f59e0b; }
.hm-kpi-card.is-tone-17 .hm-kpi-icon { background: #6366f1; }
.hm-kpi-card.is-tone-18 .hm-kpi-icon { background: #e11d48; }
.hm-kpi-card.is-tone-19 .hm-kpi-icon { background: #2dd4bf; }
.hm-kpi-card.is-tone-20 .hm-kpi-icon { background: #fb7185; }
.hm-kpi-card.is-tone-21 .hm-kpi-icon { background: #38bdf8; }
.hm-kpi-card.is-tone-22 .hm-kpi-icon { background: #c084fc; }
.hm-kpi-card.is-tone-23 .hm-kpi-icon { background: #4ade80; }
.hm-kpi-card.is-tone-24 .hm-kpi-icon { background: #fdba74; }
.hm-kpi-card.is-tone-25 .hm-kpi-icon { background: #818cf8; }
.hm-kpi-card.is-tone-01 .hm-kpi-meta, .hm-kpi-card.is-tone-a .hm-kpi-meta { color: #86efac; }
.hm-kpi-card.is-tone-02 .hm-kpi-meta, .hm-kpi-card.is-tone-b .hm-kpi-meta { color: #fde047; }
.hm-kpi-card.is-tone-03 .hm-kpi-meta, .hm-kpi-card.is-tone-c .hm-kpi-meta { color: #93c5fd; }
.hm-kpi-card.is-tone-04 .hm-kpi-meta, .hm-kpi-card.is-tone-d .hm-kpi-meta { color: #c4b5fd; }
.hm-kpi-card.is-tone-05 .hm-kpi-meta { color: #fca5a5; }
.hm-kpi-card.is-tone-06 .hm-kpi-meta { color: #5eead4; }
.hm-kpi-card.is-tone-07 .hm-kpi-meta { color: #fdba74; }
.hm-kpi-card.is-tone-08 .hm-kpi-meta { color: #f9a8d4; }
.hm-kpi-card.is-tone-09 .hm-kpi-meta { color: #67e8f9; }
.hm-kpi-card.is-tone-10 .hm-kpi-meta { color: #bef264; }
.hm-kpi-card.is-tone-11 .hm-kpi-meta { color: #d8b4fe; }
.hm-kpi-card.is-tone-12 .hm-kpi-meta { color: #fda4af; }
.hm-kpi-card.is-tone-13 .hm-kpi-meta { color: #7dd3fc; }
.hm-kpi-card.is-tone-14 .hm-kpi-meta { color: #f0abfc; }
.hm-kpi-card.is-tone-15 .hm-kpi-meta { color: #6ee7b7; }
.hm-kpi-card.is-tone-16 .hm-kpi-meta { color: #fcd34d; }
.hm-kpi-card.is-tone-17 .hm-kpi-meta { color: #a5b4fc; }
.hm-kpi-card.is-tone-18 .hm-kpi-meta { color: #fb7185; }
.hm-kpi-card.is-tone-19 .hm-kpi-meta { color: #99f6e4; }
.hm-kpi-card.is-tone-20 .hm-kpi-meta { color: #fda4af; }
.hm-kpi-card.is-tone-21 .hm-kpi-meta { color: #7dd3fc; }
.hm-kpi-card.is-tone-22 .hm-kpi-meta { color: #e9d5ff; }
.hm-kpi-card.is-tone-23 .hm-kpi-meta { color: #86efac; }
.hm-kpi-card.is-tone-24 .hm-kpi-meta { color: #fed7aa; }
.hm-kpi-card.is-tone-25 .hm-kpi-meta { color: #c7d2fe; }
.hm-kpi-head { min-width: 0; flex: 1; }
.hm-kpi-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.hm-kpi-sub {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: var(--blue2);
}
.hm-kpi-body {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hm-kpi-label {
  display: block;
  font-size: 8px;
  color: var(--muted);
  margin-bottom: 1px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hm-kpi-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px 10px;
  min-width: 0;
}
.hm-kpi-metric {
  flex: 1 1 0;
  min-width: 0;
  --hm-kpi-fit-metric: calc(var(--hm-kpi-fit, 190px) * 0.46);
}
/* Angka panjang (mis. rupiah) memakai satu baris penuh agar tetap terbaca. */
.hm-kpi-metrics.is-stacked .hm-kpi-metric {
  flex: 1 1 100%;
  --hm-kpi-fit-metric: var(--hm-kpi-fit, 190px);
}
/* Kartu lebar sudah cukup luas untuk menampung dua angka berdampingan. */
@media (min-width: 640px) {
  .hm-kpi-metrics.is-stacked .hm-kpi-metric {
    flex: 1 1 42%;
    --hm-kpi-fit-metric: calc(var(--hm-kpi-fit, 190px) * 0.46);
  }
}
.hm-kpi-metric-label {
  display: block;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-kpi-value {
  display: block;
  min-width: 0;
  font-size: clamp(11px, calc(var(--hm-kpi-fit-metric, 88px) * var(--hm-kpi-fs, 0.16) * 1.25), var(--hm-kpi-fs-max, 20px));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Bila peramban mendukung, ukuran huruf mengikuti lebar kolom angka yang sebenarnya. */
@supports (container-type: inline-size) {
  .hm-kpi-metric { container-type: inline-size; }
  .hm-kpi-value {
    font-size: clamp(11px, calc(100cqw * var(--hm-kpi-fs, 0.16) * 1.63), var(--hm-kpi-fs-max, 20px));
  }
}
.hm-kpi-value.is-accent,
.hm-kpi-value em {
  font-style: normal;
  color: #38bdf8;
}
.hm-kpi-slash {
  margin: 0 2px;
  color: var(--muted);
  font-weight: 600;
}
/* Persentase dan waktu perbarui turun baris sendiri bila tidak muat sebaris. */
.hm-kpi-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 6px;
  min-width: 0;
  margin-top: 1px;
}
.hm-kpi-meta {
  max-width: 100%;
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1.3;
  color: #86efac;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-kpi-upd {
  flex: 0 0 auto;
  max-width: 100%;
  font-size: 8px;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-kpi-skel .hm-kpi-skel-blob,
.hm-kpi-skel .hm-kpi-skel-line,
.hm-kpi-skel .hm-kpi-skel-value {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(148,163,184,0.12), rgba(148,163,184,0.28), rgba(148,163,184,0.12));
  background-size: 200% 100%;
  animation: hm-kpi-shimmer-bg 1.2s linear infinite;
}
.hm-kpi-skel-blob { width: 26px; height: 26px; }
.hm-kpi-skel-line { height: 8px; margin: 2px 0; }
.hm-kpi-skel-value { height: 14px; width: 55%; margin-top: 4px; }
@keyframes hm-kpi-shimmer-bg {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
body.theme-light .pb-table th {
  background: #f8fafc;
  color: #0369a1;
}
body.theme-light .pb-table th.pb-freeze {
  background: #f8fafc;
}
body.theme-light .pb-table td.pb-freeze {
  background: #ffffff;
}
/* Light mode KPI — liquid glass putih, tanpa abu */
body.theme-light .hm-kpi-card {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.42) 55%, rgba(255, 255, 255, 0.28) 100%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
body.theme-light .hm-kpi-value { color: #0f172a; }
body.theme-light .hm-kpi-title { color: #0f172a; }
body.theme-light .hm-kpi-sub { color: #1d4ed8; }
body.theme-light .hm-kpi-label { color: #475569; }
body.theme-light .hm-kpi-value.is-accent,
body.theme-light .hm-kpi-value em { color: #0284c7; }
.slip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 14px;
}
.slip-row strong { text-align: right; word-break: break-word; }
.hm-kpi-pop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.hm-kpi-pop-card {
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  border-radius: 16px;
  padding: 16px 18px;
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.hm-kpi-pop-card h3 { margin: 0 0 8px; font-size: 16px; }
.hm-kpi-pop-card p { margin: 0 0 10px; color: #cbd5e1; font-size: 13px; }
.hm-kpi-pop-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.hm-kpi-pop-row strong { text-align: right; word-break: break-word; }
.hm-kpi-pop-card .m-btn { margin-top: 14px; }
body.theme-light .hm-kpi-pop-card {
  background: #fff;
  color: #0f172a;
}
body.theme-light .hm-kpi-pop-card p { color: #475569; }
/* Warna aksen kartu terlalu pucat di atas putih — pakai warna teks yang terbaca. */
body.theme-light .hm-kpi-card .hm-kpi-meta { color: #334155; }
body.theme-light .hm-kpi-card .hm-kpi-upd { color: #64748b; }
body.theme-light .hm-kpi-slash { color: #94a3b8; }
body.theme-light .hm-kpi-upd { color: #64748b; }
body.theme-light .hm-kpi-illust {
  opacity: 0.16;
  color: #94a3b8;
}
@media (hover: hover) and (pointer: fine) {
  body.theme-light .hm-kpi-card:hover {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
      0 14px 32px rgba(15, 23, 42, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }
}
body.theme-light .hm-kpi-skel .hm-kpi-skel-blob,
body.theme-light .hm-kpi-skel .hm-kpi-skel-line,
body.theme-light .hm-kpi-skel .hm-kpi-skel-value {
  background: linear-gradient(90deg,
    rgba(100, 116, 139, 0.18),
    rgba(100, 116, 139, 0.38),
    rgba(100, 116, 139, 0.18));
  background-size: 200% 100%;
}
@media (max-width: 380px) {
  .hm-kpi-grid {
    gap: 8px;
    --hm-kpi-fit: min(41vw, 170px);
  }
  .hm-kpi-meta { font-size: 9px; }
  .hm-kpi-upd { font-size: 7.5px; }
}
.hm-cal-sec { margin: 0 0 1.15rem; }
.hm-cal-sec + .pb-section,
.hm-cal-sec + .se-section,
.hm-cal-sec + .m-section,
.hm-cal-sec + [class*="pb-type-"],
.pb-section.pb-type-calendar,
.pb-section[data-section-key="home_calendar"] {
  margin-bottom: 1.15rem;
}
.pb-section.pb-type-calendar + .pb-section,
.pb-section[data-section-key="home_calendar"] + .pb-section,
.hm-cal-sec + .pb-section .se-head,
.hm-cal-sec + .m-section-head {
  margin-top: 0.15rem;
}
.se-chip-year {
  background: color-mix(in srgb, #ea580c 14%, transparent);
  color: #ea580c;
  border-color: color-mix(in srgb, #ea580c 28%, transparent);
}
.hm-chart-card {
  position: relative;
  margin: 0;
  padding: 12px 10px 8px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}
.hm-chart-card.is-empty .hm-chart-svg { opacity: 0.45; }
.hm-chart-empty {
  position: absolute;
  inset: 12px 10px 36px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
  border-radius: 12px;
  background: rgba(8, 12, 28, 0.35);
}
.hm-chart-empty strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
}
.hm-chart-empty span {
  color: var(--muted);
  font-size: 11px;
  max-width: 28ch;
  line-height: 1.35;
}
body.theme-light .hm-chart-empty {
  background: rgba(255, 255, 255, 0.72);
}
.hm-bar.is-ghost { fill: rgba(148, 163, 184, 0.35); }
.hm-line.is-ghost { stroke: rgba(148, 163, 184, 0.55); }
.hm-dot.is-ghost { fill: rgba(148, 163, 184, 0.7); stroke: rgba(100, 116, 139, 0.5); }
.hm-chart-svg { width: 100%; height: auto; display: block; }
.hm-bar { fill: rgba(59, 130, 246, 0.55); }
.hm-line { stroke: #60a5fa; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.hm-dot { fill: #93c5fd; stroke: #1e40af; stroke-width: 1; }
.hm-grid { stroke: rgba(148, 163, 184, 0.25); stroke-width: 1; }
.hm-xlabel,
.hm-ylabel { fill: #94a3b8; font-size: 8px; }
.hm-chart-meta { margin: 6px 0 0; font-size: 11px; color: var(--muted); }

main,
#pMain {
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  padding-top: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
}
.panel0111 .m-nav {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
}
@media (min-width: 720px) {
  body.panel0111 .m-nav,
  body.panel0111 main,
  body.panel0111 #pMain {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* Absensi alerts — kontras dark/light */
.att-alert {
  color: #f8fafc !important;
}
.att-alert-warn {
  background: rgba(245, 158, 11, 0.22);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fef3c7 !important;
}
.att-alert-alert {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #fee2e2 !important;
}
body.theme-light .att-alert-warn {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412 !important;
}
body.theme-light .att-alert-alert {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b !important;
}

/* Readonly vs editable fields */
.pf-field.is-readonly .pf-value,
.sf-field.is-readonly input,
.sf-readonly {
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
  border-style: dashed;
  pointer-events: none;
  opacity: 0.92;
}
body.theme-light .pf-field.is-readonly .pf-value,
body.theme-light .sf-readonly {
  background: #f1f5f9;
  color: #64748b;
}
.pf-field:not(.is-readonly) .pf-input {
  background: rgba(8, 12, 28, 0.75);
  color: var(--text);
  border-style: solid;
}
body.theme-light .pf-field:not(.is-readonly) .pf-input {
  background: #ffffff;
  color: #0f172a;
}

.trk-bg-status:empty,
#trkScopeLabel:empty,
#trkBgNote:empty,
#trkShareHint:empty {
  display: none !important;
}
.trk-status-who {
  margin: 0 0 6px;
  font-weight: 750;
  color: var(--text);
}
.trk-status-who #trkWhoId { color: var(--muted); font-weight: 600; }


/* Tracking Fase 1: cluster + accuracy */
.trk-cluster {
  background: transparent !important;
  border: 0 !important;
}
.trk-cluster-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
}
.trk-cluster-sm .trk-cluster-count { font-size: 11px; }
.trk-cluster-md .trk-cluster-count { font-size: 13px; }
.trk-cluster-lg .trk-cluster-count { font-size: 14px; }
body.theme-light .trk-cluster-count {
  background: linear-gradient(145deg, #2563eb, #1e40af);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.trk-pin.is-on .trk-pin-dot {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 3px rgba(251, 191, 36, 0.45),
    0 0 0 1.5px rgba(15, 23, 42, 0.75),
    0 4px 14px rgba(0, 0, 0, 0.5);
}
.leaflet-interactive.trk-acc-circle {
  pointer-events: none !important;
}
.leaflet-interactive.trk-pin-radius {
  pointer-events: none !important;
  stroke-dasharray: 4 6;
}


/* Tracking Fase 2: filter role */
.trk-role-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 8px;
  margin: 0 0 4px;
  scrollbar-width: none;
}
.trk-role-filters::-webkit-scrollbar { display: none; }
.trk-role-chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.trk-role-chip.is-on {
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(59, 130, 246, 0.65);
  color: #fff;
}
body.theme-light .trk-role-chip {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}
body.theme-light .trk-role-chip.is-on {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}


/* Tracking Fase 3: ETA pin terdekat */
.trk-nearest {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.trk-nearest-line {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 650;
  color: var(--blue2);
  line-height: 1.35;
}
.trk-nearest-item { display: inline; }
body.theme-light .trk-nearest-line { color: #1d4ed8; }
.trk-team-outside-card {
  margin: 8px 0;
  padding: 10px 12px;
}
.trk-team-outside-list {
  margin: 6px 0 0;
  padding-left: 1.1rem;
  font-size: 12px;
  line-height: 1.4;
}
.trk-team-outside-list li { margin: 0 0 4px; }
.trk-nearest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.trk-nearest-actions .m-btn {
  flex: 1 1 auto;
  min-height: 36px;
  font-size: 12px;
  padding: 6px 10px;
}


/* Tracking Fase 4: geofence */
.trk-geo-alert {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}
.trk-geo-alert[hidden] { display: none !important; }
.trk-geo-alert.att-alert-ok {
  color: #166534;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.4);
}
body.theme-light .trk-geo-alert.att-alert-ok {
  color: #14532d;
  background: rgba(34, 197, 94, 0.12);
}
.trk-geofence-ok { /* zona boleh berada — hijau */ }


/* Tracking Fase 5: playback scrubber */
.trk-playback {
  margin: 8px 0 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}
.trk-playback[hidden] { display: none !important; }
.trk-playback-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trk-play-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.5);
  background: rgba(37, 99, 235, 0.25);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.trk-play-scrub {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: #3b82f6;
  height: 28px;
}
.trk-play-speeds {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.trk-play-speed {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.trk-play-speed.is-on {
  background: rgba(37, 99, 235, 0.3);
  border-color: rgba(59, 130, 246, 0.7);
  color: #fff;
}
.trk-play-label {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}
body.theme-light .trk-playback { background: #f8fafc; }
body.theme-light .trk-play-btn {
  background: #2563eb;
  border-color: #1d4ed8;
}
body.theme-light .trk-play-speed.is-on {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}


/* Tracking Fase 6: offline tile cache */
.trk-offline-bar {
  margin: 8px 0 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}
.trk-offline-bar.is-offline {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.1);
}
.trk-offline-status {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 650;
  color: var(--blue2);
  line-height: 1.35;
}
.trk-offline-bar.is-offline .trk-offline-status { color: #fbbf24; }
.trk-offline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.trk-offline-actions .m-btn {
  flex: 1 1 auto;
  min-height: 36px;
  font-size: 12px;
  padding: 6px 10px;
}
.trk-offline-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}
body.theme-light .trk-offline-bar { background: #f8fafc; }
body.theme-light .trk-offline-bar.is-offline {
  background: #fffbeb;
  border-color: #f59e0b;
}
body.theme-light .trk-offline-status { color: #1d4ed8; }
body.theme-light .trk-offline-bar.is-offline .trk-offline-status { color: #b45309; }


/* Tracking Fase 7: contrast + leaflet chrome */
.trk-route-hint {
  color: var(--muted);
  font-size: 12px;
}
body.theme-light .trk-route-hint { color: #475569; }
body.theme-light .trk-play-label { color: #64748b; }
body.theme-light .trk-play-speed {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}
body.theme-light .trk-nearest-actions .m-btn-ghost,
body.theme-light .trk-offline-actions .m-btn-ghost {
  color: #0f172a;
  border-color: #94a3b8;
  background: #fff;
}
body.theme-light .trk-driver-card.is-focused {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
}
body.theme-light .trk-status-who #trkWhoId { color: #64748b; }

/* Leaflet controls / popup dark+light */
.leaflet-container {
  background: #0b1220;
  font: 12px/1.4 system-ui, sans-serif;
}
body.theme-light .leaflet-container { background: #e2e8f0; }
.leaflet-control-zoom a {
  background: rgba(15, 23, 42, 0.92) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}
body.theme-light .leaflet-control-zoom a {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
.leaflet-popup-content-wrapper {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.leaflet-popup-tip { background: #0f172a; }
body.theme-light .leaflet-popup-content-wrapper {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}
body.theme-light .leaflet-popup-tip { background: #fff; }
.leaflet-popup-content .trk-popup-history {
  border: 0;
  background: transparent;
  color: #60a5fa;
  font: inherit;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
body.theme-light .leaflet-popup-content .trk-popup-focus,
body.theme-light .leaflet-popup-content .trk-popup-history,
body.theme-light .leaflet-popup-content .trk-popup-route {
  color: #1d4ed8;
}
.leaflet-control-attribution {
  background: rgba(15, 23, 42, 0.75) !important;
  color: #94a3b8 !important;
  max-width: 70%;
  font-size: 10px !important;
}
body.theme-light .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #64748b !important;
}


/* Profile: biometric hint rata kiri */
.pf-bio-hint,
#pfBioHint {
  margin: 0;
  padding: 0 2px;
  text-align: left !important;
  width: 100%;
  display: block;
  line-height: 1.45;
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
}
body.theme-light .pf-bio-hint,
body.theme-light #pfBioHint {
  color: #475569;
}

/* ——— Informasi & Rute Pengiriman (core logistics) ——— */
.lg-info-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--pad, 16px) 10px;
  margin: 0;
  scrollbar-width: none;
}
.lg-info-filters::-webkit-scrollbar { display: none; }
.lg-info-card h3 {
  margin: 6px 0 8px;
  font-size: 16px;
  font-weight: 750;
}
.lg-info-list-item {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lg-info-list-item:active {
  opacity: 0.92;
}
.lg-info-reader-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.lg-info-font-tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lg-info-font-val {
  font-size: 12px;
  color: var(--muted);
  min-width: 40px;
  text-align: center;
}
.lg-info-reader-title {
  margin: 6px 0 8px;
  font-size: calc(var(--info-font, 16px) + 2px);
  font-weight: 750;
  line-height: 1.35;
}
.lg-info-reader-body {
  font-size: var(--info-font, 16px);
  line-height: 1.65;
  color: var(--text);
  overflow-wrap: anywhere;
}
.lg-info-reader-body .svo-prose-p,
.lg-info-reader-body p,
.lg-info-reader-body .lg-info-body,
.lg-info-reader-body .gov-app-body {
  font-size: inherit !important;
  line-height: inherit;
}
.lg-info-reader-body img {
  max-width: 100%;
  height: auto;
}

/* Informasi — mode baca: konten scroll di viewport perangkat */
html.is-info-reading {
  overflow: hidden;
  height: 100dvh;
  overscroll-behavior: none;
}
body.is-info-reading {
  overflow: hidden;
  height: 100dvh;
  overscroll-behavior: none;
}
body.is-info-reading #pMain {
  height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 0 !important;
}
body.is-info-reading #infoShell.lg-info-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
}
body.is-info-reading #infoShell.is-reading .m-section-head,
body.is-info-reading #infoShell.is-reading .lg-info-filters {
  display: none;
}
body.is-info-reading #infoList {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0 var(--pad, 16px);
  gap: 0;
}
body.is-info-reading #infoList > .lg-info-reader {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 12px 14px;
}
body.is-info-reading .lg-info-reader-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
}
body.is-info-reading .lg-info-reader-bar {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg, #0a0e27);
  margin-bottom: 8px;
}
body.is-info-reading .lg-info-reader-body,
body.is-info-reading .lg-info-reader-body .gov-app-body {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.is-info-reading .lg-info-reader-body .gov-app-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.is-info-reading .lg-info-reader-body iframe,
body.is-info-reading .lg-info-reader-body object,
body.is-info-reading .lg-info-reader-body embed {
  max-width: 100%;
  height: auto;
}
/* Kunci baca tertinggal tanpa panel → jangan bekukan gulir halaman */
html.is-info-reading:not(:has(#infoShell.is-reading)) {
  overflow-y: auto !important;
  height: auto !important;
  max-height: none !important;
}
body.is-info-reading:not(:has(#infoShell.is-reading)) {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
body.is-info-reading:not(:has(#infoShell.is-reading)) #pMain {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

.ds-pass-gate .m-btn {
  min-height: 44px;
}
.lg-info-card .lg-info-kind {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.lg-info-card .lg-info-body {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  overflow-wrap: anywhere;
}
.lg-info-card .lg-info-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.lg-info-card .svo-prose,
.pb-page .svo-prose,
.m-section .svo-prose,
.m-hero .svo-prose {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 10px;
}
.svo-prose-p {
  margin: 0 0 1em;
  padding: 0 0 0.35em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.svo-prose-p:last-child { margin-bottom: 0; padding-bottom: 0; }
.lg-info-link {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--blue, #60a5fa);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}
.lg-info-link:hover { opacity: 0.85; }
.att-alert-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.att-alert-nav .m-btn {
  padding: 4px 10px;
  font-size: 12px;
  min-height: 0;
}
.att-alert-count { font-size: 12px; opacity: 0.8; }
.att-alert-card1 { margin-bottom: 8px; }
.svo-doc-frame {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.72);
  display: flex; flex-direction: column;
}
.svo-doc-frame header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: #0a0e27; color: #fff;
}
.svo-doc-frame iframe, .svo-doc-frame pre {
  flex: 1; width: 100%; border: 0; background: #111; color: #e2e8f0;
  margin: 0; padding: 12px; overflow: auto;
}
.svo-prose-p:last-child { margin-bottom: 0; }
body.theme-light .svo-prose-p { color: #475569; }

/* Teks konten halaman: justify rata kiri–kanan, tanpa indent baris pertama */
.lg-info-card > p,
.lg-info-body,
.pb-section .m-sub,
.pb-page .m-sub,
.m-hero .m-sub,
.m-section > p,
.att-log-card > p.m-sub,
.hm-page .m-sub {
  text-align: justify;
  text-indent: 0;
  text-justify: inter-word;
}
.lg-info-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
body.theme-light .lg-info-badge {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}
.att-log-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.att-log-photos .m-btn {
  flex: 1 1 auto;
  min-width: 120px;
}
.att-log-daily .sf-sale-top {
  margin-bottom: 6px;
}
.lg-tip-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.lg-rute-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 10px;
  background: rgba(8, 12, 28, 0.92);
  border-top: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 0 0 14px 14px;
}
.lg-rute-sticky-block {
  margin: 0 var(--pad, 16px) 10px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(8, 12, 28, 0.55);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

/* Split-screen Track/Rute — dua panel (peta tetap + daftar scroll), tanpa floating */
.lg-rute-wrap {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: none;
  overflow: visible;
}
.lg-rute-panes {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.lg-rute-scroll-area {
  flex: 1 1 auto;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 32px;
}
.lg-rute-sticky-block.svo-map-sticky {
  position: relative;
  top: auto;
  z-index: 2;
  background: var(--bg, #0a0e27);
  flex: 0 0 auto;
}

/* Aktif hanya di halaman Track / Rute */
body.is-map-split {
  overflow: hidden;
  height: 100dvh;
  overscroll-behavior: none;
}
body.is-map-split #pMain {
  height: var(--map-split-main-h, 70dvh);
  max-height: var(--map-split-main-h, 70dvh);
  overflow: hidden !important;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.is-map-split #pMain > .lg-rute-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding-bottom: 0 !important;
}
body.is-map-split .lg-rute-wrap > .m-section-head {
  flex: 0 0 auto;
  padding: 0 0 6px;
  margin: 0;
}
body.is-map-split .lg-rute-wrap > .m-section-head > p {
  display: none;
}
body.is-map-split .lg-rute-wrap > .m-section-head > h2 {
  font-size: 1.05rem;
  margin: 2px 0 0;
}
body.is-map-split .lg-rute-panes {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  gap: 0;
}
body.is-map-split .lg-rute-sticky-block,
body.is-map-split .lg-rute-sticky-block.svo-map-sticky {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  flex: 0 0 auto;
  z-index: 2;
  box-shadow: none;
}
body.is-map-split .lg-rute-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 20px;
  touch-action: pan-y;
}
body.is-map-split:not(.svo-map-max-open) .lg-rute-wrap .trk-map.lg-rute-map,
body.is-map-split:not(.svo-map-max-open) #trkMapCard.lg-jabo-map-card .trk-map.lg-rute-map {
  height: min(32vh, 220px);
  min-height: 168px;
}
body.is-map-split .sf-wrap {
  padding-bottom: 0;
}

/* WAJIB atas–bawah saja — jangan kiri–kanan */
body.is-map-split .lg-rute-panes {
  flex-direction: column !important;
}
body.is-map-split .lg-rute-sticky-block {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: 100% !important;
  height: auto !important;
}
body.is-map-split:not(.svo-map-max-open) .lg-rute-wrap .trk-map.lg-rute-map,
body.is-map-split:not(.svo-map-max-open) #trkMapCard.lg-jabo-map-card .trk-map.lg-rute-map,
body.is-map-split:not(.svo-map-max-open) #trkMapCard.is-trk-lite .trk-map.lg-rute-map {
  flex: none !important;
  height: min(32vh, 220px) !important;
  min-height: 168px !important;
  max-height: 240px !important;
}
/* Maximize tracking harus menang atas clamp split (lihat #trkMapCard.lg-jabo-map-card di atas) */
body.is-map-split #trkMapCard.is-maximized.lg-jabo-map-card .trk-map.lg-rute-map,
body.svo-map-max-open #trkMapCard.is-maximized .trk-map.lg-rute-map,
body.svo-map-max-open.is-map-split #trkMapCard.is-maximized.lg-jabo-map-card .trk-map.lg-rute-map {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
}
body.svo-map-max-open #pMain {
  overflow: visible !important;
}
body.is-map-split .lg-rute-scroll-area {
  flex: 1 1 auto !important;
  width: 100% !important;
}
/* Split peta tertinggal di beranda/halaman lain → jangan kunci gulir */
body.is-map-split:not(:has(.lg-rute-wrap)) {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
body.is-map-split:not(:has(.lg-rute-wrap)) #pMain {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

/* Di-disable — floating dock lama (jangan aktifkan lagi)
.lg-rute-sticky-block.is-map-docked {
  overflow: visible;
  z-index: 34;
  left: var(--pad, 16px) !important;
  right: var(--pad, 16px) !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
*/
.lg-rute-sticky-block .trk-map-card {
  margin: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: none;
  flex: 0 0 auto;
}
.lg-rute-sticky-block .lg-rute-day {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  pointer-events: auto;
}
.lg-rute-sticky-block .hm-cal-nav {
  flex: 0 0 32px;
  pointer-events: auto;
}
body.theme-light .lg-rute-day {
  background: rgba(248, 250, 252, 0.96);
  border-top-color: rgba(100, 116, 139, 0.2);
}
.lg-rute-day-meta {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.lg-rute-day-meta strong {
  display: block;
  font-size: 15px;
  font-weight: 750;
}
.lg-rute-day-meta .m-sub { margin: 2px 0 0; }
button.lg-rute-day-pick {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 12px;
}
button.lg-rute-day-pick:active {
  background: color-mix(in srgb, var(--blue, #2563eb) 12%, transparent);
}
.lg-rute-day-pick-hint {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

/* iOS-style wheel picker (tanggal + semua select tunggal) — centered modal */
body.svo-wheel-open {
  overflow: hidden;
}
.ios-wheel-search {
  padding: 8px 14px 12px;
  border-top: 1px solid var(--line, rgba(148, 163, 184, 0.25));
  flex: 0 0 auto;
}
.ios-wheel-search input {
  width: 100%;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  padding: 7px 10px;
  background: rgba(15, 23, 42, 0.55);
  color: inherit;
  font: inherit;
  box-sizing: border-box;
}
body.theme-light .ios-wheel-search input { background: #f8fafc; }
.ios-wheel-overlay {
  position: fixed;
  inset: 0;
  z-index: 100200;
  background: rgba(2, 6, 23, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ios-wheel-sheet {
  width: min(92vw, 420px);
  max-height: min(78vh, 520px);
  background: color-mix(in srgb, var(--card, #0f172a) 94%, #1e293b);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--line, #334155) 80%, transparent);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: ios-wheel-in .22s ease-out;
  display: flex;
  flex-direction: column;
}
body.theme-light .ios-wheel-sheet {
  background: rgba(255, 255, 255, 0.98);
}
@keyframes ios-wheel-in {
  from { transform: scale(0.96) translateY(10px); opacity: .55; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.ios-wheel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, rgba(148, 163, 184, 0.25));
}
.ios-wheel-head strong { font-size: 15px; font-weight: 700; }
.ios-wheel-head--tap .ios-wheel-head-spacer {
  display: inline-block;
  min-width: 3.2em;
  visibility: hidden;
}
.ios-wheel-item {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ios-wheel-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--blue, #38bdf8);
  font: inherit;
  font-weight: 650;
  font-size: 15px;
  padding: 6px 8px;
  cursor: pointer;
}
.ios-wheel-btn.is-primary { font-weight: 750; }
.ios-wheel-viewport {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.ios-wheel-highlight {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 40px;
  margin-top: -20px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue, #2563eb) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue, #2563eb) 28%, transparent);
  pointer-events: none;
  z-index: 1;
}
.ios-wheel-list {
  list-style: none;
  margin: 0;
  padding: 90px 0;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  position: relative;
  z-index: 2;
}
.ios-wheel-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  scroll-snap-align: center;
  font-size: 16px;
  font-weight: 550;
  color: var(--muted);
  opacity: .55;
  cursor: pointer;
}
.ios-wheel-item.is-selected {
  color: inherit;
  opacity: 1;
  font-weight: 750;
}
.ios-wheel-item.is-today em {
  font-style: normal;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue, #2563eb) 20%, transparent);
  color: var(--blue, #38bdf8);
  font-weight: 700;
}
.ios-wheel-note {
  text-align: center;
  padding: 0 16px 16px;
  margin: 0;
}

.svo-fab-lookup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.svo-fab-lookup-filters {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line, rgba(148, 163, 184, 0.22));
  background: color-mix(in srgb, var(--panel, #0f172a) 92%, transparent);
  backdrop-filter: blur(8px);
}
.svo-fab-lookup-filters label {
  font-size: 11px;
  gap: 2px !important;
}
.svo-fab-lookup-filters input {
  min-height: 32px !important;
  padding: 5px 8px !important;
  font-size: 13px;
}
body.theme-light .svo-fab-lookup-filters {
  border-top-color: rgba(148, 163, 184, 0.28);
  background: color-mix(in srgb, #ffffff 88%, #e2e8f0);
}
body.theme-light .svo-fab-lookup-filters label {
  color: #334155;
}
body.theme-light .svo-fab-lookup-filters input {
  color: #0f172a;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.45);
}
body.theme-light .svo-fab-lookup-filters input::placeholder {
  color: #94a3b8;
}
.svo-fab-lookup-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(48vh, 360px);
  overflow: auto;
  margin: 0;
  order: 0;
}
.svo-fab-lookup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.22));
  background: color-mix(in srgb, var(--bg, #0b1220) 78%, transparent);
  color: inherit;
}
.svo-fab-lookup-item.is-compact {
  align-items: flex-start;
}
.svo-fab-lookup-item.is-stock {
  display: block;
}
.svo-fab-lookup-item strong,
.svo-fab-lookup-item b {
  color: inherit;
}
.svo-fab-lookup-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.svo-fab-lookup-main strong {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}
.svo-fab-lookup-desc {
  font-style: normal;
  font-weight: 650;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.35;
}
.svo-fab-stock-proj {
  font-weight: 750;
  color: var(--text);
}
.svo-fab-stock-proj b {
  font-weight: 800;
}
.svo-fab-stock-actual {
  font-weight: 400;
  opacity: 0.55;
  color: var(--text);
}
.svo-fab-stock-actual b {
  font-weight: 500;
}
.svo-fab-lookup-qty {
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}
.svo-fab-lookup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.svo-fab-lookup-row.is-sub {
  margin-top: 2px;
}
.svo-fab-lookup-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.svo-fab-lookup-price {
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
}
.svo-fab-lookup-row.is-sub .svo-fab-lookup-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  justify-content: flex-end;
  text-align: right;
}
.svo-fab-lookup-sub {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.9;
}
.svo-fab-lookup-meta {
  text-align: right;
  flex: 0 0 auto;
}
.svo-fab-lookup-meta b {
  display: block;
  font-size: 13px;
  font-weight: 750;
}
.svo-fab-lookup-meta span {
  font-size: 11px;
  color: var(--muted);
}
.svo-fab-calc-terbilang {
  margin: 0;
  text-align: right;
  font-size: 11px;
  line-height: 1.35;
  min-height: 2.7em;
  opacity: 0.88;
  color: var(--muted, #94a3b8);
}
.act-stock-bc-preview {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
.act-stock-bc-preview img {
  max-width: 100%;
  max-height: 140px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(15, 23, 42, 0.06);
}
.lg-rute-wrap .trk-map-card.lg-jabo-map-card {
  min-height: 168px;
}
.lg-rute-wrap .trk-map.lg-rute-map {
  min-height: 168px;
  height: 200px;
}
.lg-jabo-map-card {
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.28);
}
/* Track lite: tanpa frame dekoratif / blur — tetap rapi, lebih ringan */
#trkMapCard.is-trk-lite.lg-jabo-map-card {
  border-color: rgba(100, 116, 139, 0.35);
  box-shadow: 0 6px 16px rgba(2, 6, 23, 0.22);
}
#trkMapCard.is-trk-lite .trk-map.lg-rute-map {
  min-height: 168px;
  height: 200px;
}
.lg-jabo-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.lg-jabo-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e0f2fe;
  background: rgba(2, 6, 23, 0.78);
  border: 1px solid rgba(56, 189, 248, 0.45);
  /* blur mahal saat tile Leaflet load — diganti solid */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lg-jabo-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(56, 189, 248, 0.85);
  border-style: solid;
}
.lg-jabo-tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.lg-jabo-tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.lg-jabo-bl { bottom: 44px; left: 8px; border-width: 0 0 2px 2px; }
.lg-jabo-br { bottom: 44px; right: 8px; border-width: 0 2px 2px 0; }
/* Tracking: frame JABODETABEK sama rute (unlock bar di bawah) */
#trkMapCard.lg-jabo-map-card .lg-jabo-bl { bottom: 44px; }
#trkMapCard.lg-jabo-map-card .lg-jabo-br { bottom: 44px; }
#trkMapCard.lg-jabo-map-card:not(.is-trk-lite) .trk-map.lg-rute-map {
  min-height: 168px;
  height: 200px;
}
/* Geser 1 jari + cubit di semua peta Leaflet.
   Tanpa nilai "pinch-zoom": cubit harus sampai ke Leaflet, bukan diambil browser. */
.leaflet-container {
  touch-action: none;
}
.leaflet-container.svo-map-frozen {
  /* dragging off — 1 jari scroll halaman; cubit tetap zoom peta */
  touch-action: pan-y;
}
.lg-jabo-overlay {
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.82));
}
.lg-jabo-overlay.is-warn .lg-jabo-warn-icon {
  font-size: 22px;
  animation: lg-a-pulse-warn 1.6s ease-in-out infinite;
}
.lg-jabo-warn-icon { display: block; line-height: 1; }
.lg-rute-map-meta {
  padding: 0 var(--pad, 16px);
  margin-top: 4px;
}
.lg-rute-pin-num.is-default {
  opacity: 0.72;
  border-style: dashed;
}
.lg-rute-map { min-height: 238px; }
.lg-rute-pin {
  background: transparent !important;
  border: none !important;
}
.lg-rute-pin-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1d4ed8;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
  border: 2.5px solid #fff;
  box-shadow:
    0 0 0 1.5px rgba(15, 23, 42, 0.75),
    0 4px 12px rgba(0, 0, 0, 0.45);
}
.lg-rute-pin-num em {
  font-style: normal;
  color: #fff;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 -1px 1px rgba(0, 0, 0, 0.55);
  line-height: 1;
}
.lg-rute-pin-num.is-depot {
  border-radius: 8px;
}
.lg-rute-pin-num.is-return {
  border-style: double;
  border-width: 3px;
}
.lg-stop-rank {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d4ed8;
  color: #fff !important;
  font-size: 12px;
  font-weight: 900;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.lg-stop-rank.is-depot {
  border-radius: 8px;
  opacity: 0.95;
}
.lg-stop-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.lg-stop-row:first-of-type { border-top: 0; }
body.theme-light .lg-stop-rank {
  color: #fff !important;
  border-color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.lg-stop-body { flex: 1; min-width: 0; }
.lg-leg-label {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.lg-leg-warn {
  color: #dc2626;
  font-weight: 700;
  margin-left: 4px;
}
.lg-stop-body strong { font-size: 14px; }
.lg-rute-card .m-btn { box-sizing: border-box; }

/* Rute ops — status, POD, analytics */
.lg-analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
  padding: 2px;
}
#ruteAnalyticsHost { margin: 10px var(--pad, 16px) 0; }
#ruteToolbarHost { margin: 10px var(--pad, 16px) 0; }
.lg-rute-actions { padding: 12px 14px 14px; }
.lg-rute-actions-frame {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.lg-rute-act {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.55);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  animation: lg-a-enter 0.45s ease both;
}
.lg-rute-act:nth-child(1) { animation-delay: 0.02s; }
.lg-rute-act:nth-child(2) { animation-delay: 0.06s; }
.lg-rute-act:nth-child(3) { animation-delay: 0.1s; }
.lg-rute-act:nth-child(4) { animation-delay: 0.14s; }
.lg-rute-act:nth-child(5) { animation-delay: 0.18s; }
.lg-rute-act:nth-child(6) { animation-delay: 0.22s; }
.lg-rute-act:hover {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.25);
}
.lg-rute-act-primary {
  border-color: rgba(37, 99, 235, 0.55);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(29, 78, 216, 0.2));
}
.lg-rute-act-icon { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.lg-rute-act-label { font-size: 12px; font-weight: 650; line-height: 1.25; }
.lg-eta-line { color: #93c5fd; }
body.theme-light .lg-rute-act { background: #f8fafc; border-color: rgba(100, 116, 139, 0.22); }
body.theme-light .lg-rute-act-primary {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(29, 78, 216, 0.08));
}
.lg-analytics-grid div {
  text-align: center;
  padding: 8px 4px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
}
.lg-analytics-grid strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
}
.lg-analytics-grid span {
  font-size: 11px;
  color: var(--muted);
}
.lg-a-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 12px 8px 10px;
  text-align: center;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.14);
  animation: lg-a-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--a-i, 0) * 45ms);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.lg-analytics-grid.is-loading .lg-a-card { opacity: 0.72; }
.lg-a-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: lg-a-shine 2.8s ease-in-out infinite;
  animation-delay: calc(var(--a-i, 0) * 120ms);
  pointer-events: none;
}
.lg-analytics-grid:not(.is-loading) .lg-a-card::after { animation: none; opacity: 0; }
.lg-a-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28);
}
.lg-a-icon { display: block; font-size: 16px; line-height: 1; margin-bottom: 6px; }
.lg-a-val { display: block; font-size: 18px; font-weight: 800; line-height: 1.1; }
.lg-a-val.lg-a-bump { animation: lg-a-bump 0.35s ease; }
.lg-a-label {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted, #94a3b8);
  line-height: 1.2;
}
.lg-a-tone-blue { border-color: rgba(59, 130, 246, 0.35); }
.lg-a-tone-indigo { border-color: rgba(99, 102, 241, 0.35); }
.lg-a-tone-cyan { border-color: rgba(6, 182, 212, 0.35); }
.lg-a-tone-violet { border-color: rgba(139, 92, 246, 0.35); }
.lg-a-tone-purple { border-color: rgba(168, 85, 247, 0.35); }
.lg-a-tone-amber { border-color: rgba(245, 158, 11, 0.35); }
.lg-a-tone-orange { border-color: rgba(249, 115, 22, 0.35); }
.lg-a-tone-green { border-color: rgba(34, 197, 94, 0.35); }
.lg-a-tone-slate { border-color: rgba(100, 116, 139, 0.35); }
.lg-a-tone-red { border-color: rgba(239, 68, 68, 0.35); }
.lg-a-tone-rose { border-color: rgba(244, 63, 94, 0.35); }
.lg-a-tone-teal { border-color: rgba(20, 184, 166, 0.35); }
.lg-a-tone-sky { border-color: rgba(14, 165, 233, 0.35); }
.lg-a-tone-lime { border-color: rgba(132, 204, 22, 0.35); }
.lg-a-tone-emerald { border-color: rgba(16, 185, 129, 0.35); }
.lg-a-float .lg-a-icon { animation: lg-a-float 2.4s ease-in-out infinite; }
.lg-a-glow .lg-a-val { animation: lg-a-glow 2.2s ease-in-out infinite; }
.lg-a-shake .lg-a-icon { animation: lg-a-shake 2.8s ease-in-out infinite; }
.lg-a-rise .lg-a-icon { animation: lg-a-rise 2.4s ease-in-out infinite; }
.lg-a-pop .lg-a-icon { animation: lg-a-pop 2.2s ease-in-out infinite; }
.lg-a-card.is-press { animation: hm-kpi-press 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
.lg-a-card.is-touch { transform: translateY(-2px); }
@keyframes lg-a-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lg-a-shine {
  0%, 100% { transform: translateX(-120%); }
  50% { transform: translateX(120%); }
}
@keyframes lg-a-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes lg-a-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes lg-a-glow {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 12px rgba(52, 211, 153, 0.45); }
}
@keyframes lg-a-shake {
  0%, 92%, 100% { transform: rotate(0); }
  94% { transform: rotate(-8deg); }
  96% { transform: rotate(8deg); }
  98% { transform: rotate(-4deg); }
}
@keyframes lg-a-rise {
  0%, 100% { transform: translateY(2px); opacity: 0.8; }
  50% { transform: translateY(-3px); opacity: 1; }
}
@keyframes lg-a-pop {
  0%, 70%, 100% { transform: scale(1); }
  80% { transform: scale(1.16); }
  90% { transform: scale(0.95); }
}
@keyframes lg-a-pulse-warn {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.lg-driver-empty { padding: 0; overflow: hidden; }
.lg-driver-empty-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 148px;
  padding: 24px 18px;
  text-align: center;
  border: 1.5px dashed rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  margin: 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.12));
  animation: lg-a-enter 0.5s ease both;
}
.lg-driver-empty-icon {
  font-size: 28px;
  line-height: 1;
  animation: lg-a-float 2.6s ease-in-out infinite;
}
.lg-driver-empty-title { font-size: 14px; font-weight: 750; }
.lg-driver-empty-msg {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #94a3b8);
}
.lg-rute-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 var(--pad, 16px);
}
.lg-rute-toolbar .m-btn { flex: 1 1 calc(50% - 8px); min-width: 140px; }
.lg-stop-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.lg-status, .lg-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.lg-status-planned { background: rgba(148,163,184,0.2); color: #cbd5e1; }
.lg-status-en_route { background: rgba(59,130,246,0.25); color: #93c5fd; }
.lg-status-arrived { background: rgba(245,158,11,0.25); color: #fcd34d; }
.lg-status-delivered { background: rgba(34,197,94,0.25); color: #86efac; }
.lg-status-failed { background: rgba(239,68,68,0.25); color: #fca5a5; }
.lg-status-rescheduled { background: rgba(168,85,247,0.25); color: #d8b4fe; }
.lg-type-depot, .lg-type-pickup { background: rgba(14,165,233,0.2); color: #7dd3fc; }
.lg-type-delivery { background: rgba(59,130,246,0.15); color: #93c5fd; }
.lg-type-return { background: rgba(249,115,22,0.2); color: #fdba74; }
.lg-late { color: #f87171; font-weight: 700; }
.lg-stop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.lg-stop-actions .m-btn {
  padding: 6px 10px;
  font-size: 12px;
  width: auto;
  min-height: 34px;
}
.lg-rute-pin-num.is-done { background: #15803d !important; }
.lg-rute-pin-num.is-fail { background: #b91c1c !important; }
.lg-rute-pin-live {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0ea5e9;
  color: #fff;
  font-size: 10px;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.35);
}
.lg-pod-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(0,0,0,0.78);
}
.lg-pod-frame {
  width: min(100%, 420px);
  max-height: 92vh;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(12, 16, 36, 0.98);
}
body.theme-light .lg-pod-frame { background: #fff; }
.lg-pod-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.lg-pod-body { padding: 12px 14px 16px; }
.lg-pod-sign {
  width: 100%;
  height: 140px;
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: #fff;
  touch-action: none;
}
body.theme-light .lg-analytics-grid div { background: #f1f5f9; }
body.theme-light .lg-a-card { background: #f8fafc; }
body.theme-light .lg-driver-empty-frame {
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  border-color: rgba(100, 116, 139, 0.28);
}

/* Dock 7-tab + Rute driver accordion */
.lg-analytics-grid-wide {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 420px) {
  .lg-analytics-grid-wide { grid-template-columns: repeat(5, 1fr); }
}
.lg-driver-card { padding: 0; overflow: hidden; }
.lg-driver-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.lg-driver-swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}
.lg-driver-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lg-driver-id {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lg-driver-name,
.lg-driver-meta strong.lg-driver-name {
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
  color: inherit;
}
.lg-driver-meta strong { font-size: 15px; }
.lg-driver-chevron {
  flex: 0 0 auto;
  opacity: 0.7;
  font-size: 16px;
  margin-top: 2px;
}
.lg-driver-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--line);
}
.lg-trip-block {
  margin-top: 12px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}
.lg-trip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.lg-trip-eta-line {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  font-weight: 600;
  color: var(--text-2, #94a3b8);
}
/* Stop titik awal (depot/origin sintetis) */
.lg-stop-origin-row,
.lg-stop-depot-row {
  background: rgba(71, 85, 105, 0.08);
  border-radius: 10px;
  margin-bottom: 2px;
  border-top: 0 !important;
}
.lg-badge-depot {
  background: rgba(71, 85, 105, 0.25);
  color: var(--text-2, #94a3b8);
  font-size: 10px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(71, 85, 105, 0.3);
}
body.theme-light .lg-stop-origin-row,
body.theme-light .lg-stop-depot-row {
  background: rgba(71, 85, 105, 0.06);
}
body.theme-light .lg-trip-block { background: #f8fafc; }
body.theme-light .lg-driver-toggle { color: #0f172a; }

.lg-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin-top: 6px;
}
.lg-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.3;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
}
.lg-check input { margin: 0; flex: 0 0 auto; }
body.theme-light .lg-check { background: #f8fafc; }


/* Kartu absensi harian: Masuk + Pulang 1 ATT_ID */
.att-daily-card .att-daily-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.att-daily-slot {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.att-slot-lbl {
  display: block;
  font-size: 0.72rem;
  opacity: 0.7;
  margin-bottom: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.att-daily-slot strong { font-size: 0.95rem; }
.att-daily-slot .m-sub { margin: 4px 0 0; font-size: 0.78rem; }
.att-daily-slot .m-btn { margin-top: 6px; width: 100%; }

/* Pasangan absensi / overtime — kontras dark + light */
.att-daily-card.att-tone-in-open,
.att-pair-badge.att-tone-in-open {
  background: rgba(234, 88, 12, 0.28);
  border-color: rgba(251, 146, 60, 0.7);
  color: #ffedd5;
}
.att-daily-card.att-tone-in-done,
.att-pair-badge.att-tone-in-done {
  background: rgba(5, 150, 105, 0.28);
  border-color: rgba(52, 211, 153, 0.65);
  color: #d1fae5;
}
.att-daily-card.att-tone-ot-open,
.att-pair-badge.att-tone-ot-open {
  background: rgba(202, 138, 4, 0.30);
  border-color: rgba(250, 204, 21, 0.7);
  color: #fef3c7;
}
.att-daily-card.att-tone-ot-done,
.att-pair-badge.att-tone-ot-done {
  background: rgba(2, 132, 199, 0.30);
  border-color: rgba(125, 211, 252, 0.7);
  color: #e0f2fe;
}
.att-daily-card.att-tone-in-open .m-sub,
.att-daily-card.att-tone-in-done .m-sub,
.att-daily-card.att-tone-ot-open .m-sub,
.att-daily-card.att-tone-ot-done .m-sub,
.att-daily-card.att-tone-in-open .att-slot-lbl,
.att-daily-card.att-tone-in-done .att-slot-lbl,
.att-daily-card.att-tone-ot-open .att-slot-lbl,
.att-daily-card.att-tone-ot-done .att-slot-lbl {
  color: inherit;
  opacity: 0.92;
}
.att-daily-card.att-tone-in-open strong,
.att-daily-card.att-tone-in-done strong,
.att-daily-card.att-tone-ot-open strong,
.att-daily-card.att-tone-ot-done strong {
  color: inherit;
}
.att-pair-badge {
  font-weight: 700;
}
body.theme-light .att-daily-card.att-tone-in-open,
body.theme-light .att-pair-badge.att-tone-in-open {
  background: #ffedd5;
  border-color: #ea580c;
  color: #7c2d12;
}
body.theme-light .att-daily-card.att-tone-in-done,
body.theme-light .att-pair-badge.att-tone-in-done {
  background: #d1fae5;
  border-color: #047857;
  color: #064e3b;
}
body.theme-light .att-daily-card.att-tone-ot-open,
body.theme-light .att-pair-badge.att-tone-ot-open {
  background: #fef3c7;
  border-color: #b45309;
  color: #78350f;
}
body.theme-light .att-daily-card.att-tone-ot-done,
body.theme-light .att-pair-badge.att-tone-ot-done {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0c4a6e;
}
body.theme-light .att-daily-card.att-tone-in-open .att-daily-slot,
body.theme-light .att-daily-card.att-tone-in-done .att-daily-slot,
body.theme-light .att-daily-card.att-tone-ot-open .att-daily-slot,
body.theme-light .att-daily-card.att-tone-ot-done .att-daily-slot {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(15, 23, 42, 0.12);
  color: inherit;
}


/* Laporan aktifitas */
.act-day-nav { margin: 8px 0 10px; }
.act-summary-pre {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.45);
  color: var(--text);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow: auto;
}
body.theme-light .act-summary-pre {
  background: rgba(248, 250, 252, 0.95);
  color: #0f172a;
}
.ds-card h3 { font-size: 15px; margin: 4px 0; }
.ds-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ds-toolbar .m-sub { margin: 0; flex: 1; }
.ds-period {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}
.ds-period-field {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--muted, #94a3b8);
}
.ds-period-field input[type="date"] {
  min-width: 138px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.45);
  color: var(--text);
  font-size: 13px;
}
body.theme-light .ds-period-field input[type="date"] {
  background: #fff;
  color: #0f172a;
}
.ds-export-group {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ds-export-btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 10px;
}
.ds-roadmap-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ds-roadmap-list li {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.ds-roadmap-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ds-roadmap-list strong { font-size: 14px; color: var(--text); }
.ds-roadmap-hero {
  border-color: rgba(52, 211, 153, 0.35);
}
.ds-roadmap-ok .act-chip { background: rgba(16, 185, 129, 0.25); color: #6ee7b7; }
.ds-roadmap-next .act-chip { background: rgba(59, 130, 246, 0.25); color: #93c5fd; }
.ds-roadmap-later .act-chip { background: rgba(148, 163, 184, 0.25); color: #cbd5e1; }
body.theme-light .ds-roadmap-ok .act-chip { color: #047857; background: rgba(16, 185, 129, 0.15); }
body.theme-light .ds-roadmap-next .act-chip { color: #1d4ed8; background: rgba(59, 130, 246, 0.12); }
body.theme-light .ds-roadmap-later .act-chip { color: #475569; background: rgba(148, 163, 184, 0.18); }

/* Dataset Peta — lapisan Work Area / Cabang / Mitra / Potensial / Kompetitor */
.ds-map-card {
  padding: 10px 10px 12px;
  overflow: hidden;
  position: relative;
}
.ds-map-card.is-maximized {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2400 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 12px !important;
  background: var(--bg, #0b1220);
  overflow: visible !important;
}
.ds-map-card.is-maximized .ds-map-frame {
  height: calc(100vh - 110px);
}
.ds-map-card.is-maximized .ds-map-el {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}
.ds-map-frame {
  position: relative;
}
.ds-layer-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.ds-layer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.45);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 650;
  min-height: 34px;
  cursor: pointer;
  opacity: 0.55;
}
.ds-layer-chip.is-on {
  opacity: 1;
  border-color: color-mix(in srgb, var(--ds-layer, #3b82f6) 55%, transparent);
  background: color-mix(in srgb, var(--ds-layer, #3b82f6) 18%, transparent);
}
.ds-layer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-layer, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-layer, #3b82f6) 35%, transparent);
}
.ds-map-legend {
  margin: 0 0 8px;
  font-size: 12px;
}
.ds-map-el {
  width: 100%;
  height: min(62vh, 480px);
  min-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  touch-action: pan-x pan-y pinch-zoom;
  background: #0b1220;
}
.ds-geo-pin-wrap {
  background: transparent !important;
  border: 0 !important;
}
.ds-geo-pin {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ds-geo-pin.is-2 {
  width: 26px;
  height: 26px;
  font-size: 9px;
}
.ds-geo-pin em {
  font-style: normal;
}
.ds-geo-pin--fx {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 5px color-mix(in srgb, var(--pin-c, #3b82f6) 32%, transparent),
    0 2px 8px rgba(0, 0, 0, 0.35);
  animation: ds-geo-pin-pulse 2.4s ease-in-out infinite;
}
.ds-geo-pin--work {
  width: 22px;
  height: 22px;
  font-size: 8px;
}
.ds-geo-pin--work.is-2 {
  width: 24px;
  height: 24px;
  font-size: 9px;
}
@keyframes ds-geo-pin-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.92),
      0 0 0 4px color-mix(in srgb, var(--pin-c, #3b82f6) 28%, transparent),
      0 2px 8px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.95),
      0 0 0 7px color-mix(in srgb, var(--pin-c, #3b82f6) 40%, transparent),
      0 2px 10px rgba(0, 0, 0, 0.4);
  }
}
/* Branch_Areas — pin lampiran (teardrop) + badge SHORT gaya Mitra di pusat putih */
.ds-geo-pin-branch-wrap {
  overflow: visible !important;
}
.ds-geo-pin-branch {
  position: relative;
  display: block;
  width: 32px;
  height: 34px;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  animation: ds-geo-branch-glow 2.4s ease-in-out infinite;
}
@keyframes ds-geo-branch-glow {
  0%, 100% { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 0 rgba(34, 197, 94, 0)); }
  50% { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 6px rgba(34, 197, 94, 0.45)); }
}
.ds-geo-pin-branch-img {
  display: block;
  width: 32px;
  height: 34px;
  object-fit: fill; /* aspek sudah match 128:137 — jangan letterbox */
  user-select: none;
  -webkit-user-drag: none;
}
.ds-geo-pin-branch-abbr {
  position: absolute;
  left: 50%;
  top: 30.2%; /* centroid lingkaran putih di asset */
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ef4444;
  border: 1.5px solid #fff;
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.35);
  font-style: normal;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}
.leaflet-interactive.ds-radius-grad--fx {
  filter: drop-shadow(0 0 2px rgba(34, 197, 94, 0.25));
}
.ds-geo-pop {
  min-width: 160px;
  max-width: 260px;
}
.ds-geo-pop strong {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
}
.ds-geo-pop .m-sub {
  display: block;
  margin-bottom: 8px;
}
.ds-geo-pop-row {
  display: grid;
  gap: 1px;
  margin: 0 0 6px;
  font-size: 12px;
}
.ds-geo-pop-row span {
  opacity: 0.65;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ds-geo-pop-row b {
  font-weight: 650;
}
.ds-geo-pop-note {
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.8;
  line-height: 1.35;
}
body.theme-light .ds-layer-chip {
  background: rgba(255,255,255,.9);
}
body.theme-light .ds-map-el {
  background: #e2e8f0;
}

.svo-map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 8px 0 6px;
  font-size: 12px;
  font-weight: 650;
}
.svo-map-link {
  color: #38bdf8 !important;
  text-decoration: underline;
}
body.theme-light .svo-map-link { color: #0369a1 !important; }
.trk-map-tools,
.ds-map-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
}
.trk-map-search,
.ds-map-search {
  flex: 1 1 180px;
  min-width: 140px;
}
.trk-map-search input,
.ds-map-search input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.55);
  color: var(--text);
  font: inherit;
}
body.theme-light .trk-map-search input,
body.theme-light .ds-map-search input {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.12);
}
#trkHeatToggle.is-on {
  border-color: rgba(239, 68, 68, 0.55) !important;
  color: #fecaca !important;
}
.trk-geo-log-card { margin-top: 10px; }
.trk-geo-log {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
}
.trk-geo-log-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.08);
}
.trk-geo-log-row.is-exit { border-left: 3px solid #ef4444; }
.trk-geo-log-row.is-enter { border-left: 3px solid #22c55e; }
.trk-geo-log-row span { opacity: 0.7; white-space: nowrap; }
.lg-rute-eta-banner {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.12);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.trk-offline-note:not([hidden]) {
  margin: 6px 4px 0;
  color: var(--muted);
}

/* —— Floating Menu (kiri atas dock Home) —— */
.svo-fab-host {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 100100; /* di atas Assist (95000) + dock — wajib agar bisa diklik di WebView */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  pointer-events: auto;
  visibility: visible !important;
  opacity: 1 !important;
}
.svo-fab-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 24px;
  height: 24px;
  min-width: 0;
  width: auto;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.12)),
    linear-gradient(160deg, #1e293b 0%, #0f172a 55%, #020617 100%);
  color: #f8fafc;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.02em;
  box-shadow:
    0 6px 16px rgba(2, 6, 23, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -6px 12px rgba(2, 6, 23, 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
  line-height: 1;
}
.svo-fab-toggle-stack { display: none; }
.svo-fab-toggle-top { display: none; }
.svo-fab-toggle-ico { font-size: 15px; line-height: 1; pointer-events: none; }
.svo-fab-toggle-lbl {
  pointer-events: none;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #f8fafc;
  text-shadow: 0 1px 1px rgba(2, 6, 23, 0.45);
}
.svo-fab-toggle.is-open { filter: brightness(1.08); }
body.theme-light .svo-fab-toggle {
  border-color: rgba(148, 163, 184, 0.45);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.22) 48%, rgba(255, 255, 255, 0.4)),
    linear-gradient(160deg, #334155 0%, #1e293b 55%, #0f172a 100%);
  color: #fff;
}
.svo-fab-sheet {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(124px + env(safe-area-inset-bottom, 0px));
  z-index: 100110;
  width: min(280px, calc(100vw - 28px));
  max-height: min(60vh, 460px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  pointer-events: auto !important;
}
.svo-fab-sheet[hidden] { display: none !important; }
body.theme-light .svo-fab-sheet {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(148, 163, 184, 0.35);
}
.svo-fab-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 2px 4px;
  flex: 0 0 auto;
}
.svo-fab-sheet .svo-fab-search-wrap {
  margin: 0 0 8px;
  padding: 0 2px;
}
.svo-fab-sheet .act-hub-search {
  min-height: 40px;
  font-size: 14px;
}
.svo-fab-sheet-head strong { font-size: 13px; }
.svo-fab-close {
  width: 32px; height: 32px;
  border: 0; border-radius: 10px;
  background: rgba(148, 163, 184, 0.18);
  color: inherit; font-size: 18px; cursor: pointer;
  touch-action: manipulation;
}
.svo-fab-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.svo-fab-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 10px 10px;
  border: 0; border-radius: 12px;
  background: rgba(148, 163, 184, 0.1);
  color: inherit; cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto !important;
}
.svo-fab-item:active { transform: scale(0.98); }
.svo-fab-item-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(37, 99, 235, 0.18); font-size: 16px;
  pointer-events: none;
}
.svo-fab-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; pointer-events: none; }
.svo-fab-item-text strong { font-size: 13px; }
.svo-fab-item-text em { font-style: normal; font-size: 11px; opacity: 0.7; }
.svo-fab-panel {
  position: fixed; inset: 0;
  z-index: 100200;
  display: grid; place-items: end center;
  padding: 16px 12px calc(24px + env(safe-area-inset-bottom));
  background: rgba(2, 6, 23, 0.55);
  pointer-events: auto !important;
}
.svo-fab-panel[hidden] { display: none !important; }
.svo-fab-panel-card {
  width: min(440px, 100%);
  max-height: min(78vh, 640px);
  overflow: auto;
  border-radius: 18px;
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  color: #e2e8f0;
  pointer-events: auto;
}
body.theme-light .svo-fab-panel-card {
  background: #fff; color: #0f172a;
}
.svo-fab-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 14px 14px 8px; position: sticky; top: 0;
  background: inherit; z-index: 1;
}
.svo-fab-panel-body { padding: 4px 14px 16px; }
.svo-fab-form { display: flex; flex-direction: column; gap: 10px; }
.svo-fab-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; opacity: 0.9;
}
.svo-fab-form input,
.svo-fab-form select {
  min-height: 40px; border-radius: 10px; border: 1px solid rgba(148,163,184,.35);
  padding: 8px 10px; background: rgba(15,23,42,.35); color: inherit;
}
body.theme-light .svo-fab-form input,
body.theme-light .svo-fab-form select { background: #f8fafc; }
.svo-fab-result {
  padding: 12px; border-radius: 12px;
  background: rgba(37, 99, 235, 0.14);
  display: flex; flex-direction: column; gap: 4px;
}
.svo-fab-rates { margin-top: 4px; }
.svo-fab-rates summary { cursor: pointer; font-size: 12px; margin-bottom: 8px; }
.svo-fab-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.svo-fab-actions .m-btn { flex: 1; min-width: 120px; }
.act-stock-units {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.act-stock-unit.sale-block {
  margin: 0;
}
.act-form--stock-scan .act-form-banner {
  margin-bottom: 10px;
}
.svo-fab-scan-unit {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svo-fab-scan-unit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.svo-fab-scan-unit-head .m-btn { min-height: 32px; padding: 4px 10px; font-size: 12px; }
.svo-fab-scan-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.svo-fab-scan-row input { flex: 1 1 auto; min-width: 0; }
.svo-fab-scan-row .m-btn { flex: 0 0 auto; min-height: 40px; padding: 0 12px; }
.svo-fab-calc { display: flex; flex-direction: column; gap: 10px; }
.svo-fab-calc-display {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
  padding: 10px 14px 12px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.16);
  text-align: right;
  word-break: break-all;
}
.svo-fab-calc-display-result {
  font-size: 22px;
  font-weight: 750;
  line-height: 1.2;
}
.svo-fab-calc input#fabCalcExpr {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.35);
  padding: 8px 10px;
  background: rgba(15,23,42,.35);
  color: inherit;
  font: inherit;
}
body.theme-light .svo-fab-calc input#fabCalcExpr { background: #f8fafc; }
.svo-fab-calc-pad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.svo-fab-calc-key {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.14);
  color: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.svo-fab-calc-key.is-op { background: rgba(37, 99, 235, 0.22); }
.svo-fab-calc-key.is-eq { background: linear-gradient(135deg, #0f766e, #2563eb); color: #fff; }
.svo-fab-calc-key.is-util { background: rgba(248, 113, 113, 0.18); }
body.svo-map-max-open .svo-fab-host,
body.svo-fab-panel-open .svo-fab-toggle,
body.svo-fab-panel-open .svo-fab-sheet,
body.svo-fab-panel-open .svo-fab-host { visibility: hidden; pointer-events: none; }
body.is-att-page .svo-fab-host,
body.is-att-page .svo-fab-sheet {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* Map-split tidak boleh memotong FAB */
body.is-map-split .svo-fab-host,
body.is-map-split .svo-fab-sheet,
body.is-map-split .svo-fab-panel {
  visibility: visible;
}

.gov-app-page {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0 0 24px;
}
.gov-app-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 var(--pad, 16px) 16px;
}
.gov-app-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  width: 100%;
  border: 0;
  cursor: pointer;
}
.gov-app-item span { font-size: 12px; opacity: 0.72; }
.gov-app-reader {
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--pad, 12px) 28px;
}
.gov-app-reader-bar {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
.gov-app-paper {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  background: #fff;
  color: #111;
  padding: 20px 18px 32px;
  border-radius: 10px;
}
.gov-app-head { border-bottom: 2px solid #0f172a; padding-bottom: 12px; margin-bottom: 16px; }
.gov-app-kind { letter-spacing: 0.08em; font-size: 12px; font-weight: 700; margin: 0 0 8px; }
.gov-app-head h1 { font-size: 20px; margin: 0 0 6px; }
.gov-app-head h2 { font-size: 14px; font-weight: 500; margin: 0 0 10px; }
.gov-app-head dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.gov-app-head dt { color: #64748b; }
.gov-app-head dd { margin: 0; font-weight: 600; }
.gov-app-body { font-size: 15px; line-height: 1.55; }
.gov-app-body table { width: 100%; border-collapse: collapse; }
.gov-app-body td, .gov-app-body th { border: 1px solid #94a3b8; padding: 6px 8px; }
.gov-app-wait { padding: 12px var(--pad, 16px); }
@media print {
  .m-top, .m-dock, .m-drawer, .gov-app-reader-bar { display: none !important; }
  .gov-app-paper { box-shadow: none; padding: 0; }
}

/* —— Light mode contrast sweep (teks putih di kartu terang) —— */
body.theme-light .m-footer strong,
body.theme-light .m-footer .label {
  color: var(--text);
}
body.theme-light .m-drawer-list button.is-active,
body.theme-light .m-drawer-list button.is-active:hover {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
}
body.theme-light .m-drawer-head strong {
  color: var(--text);
}
body.theme-light .m-drawer-note {
  color: var(--muted);
}
body.theme-light .hm-stat-line {
  color: var(--muted);
}
body.theme-light .hm-chart-title {
  color: var(--text);
}
body.theme-light .hm-subblock h3 {
  color: var(--text);
}
body.theme-light .pf-card-title,
body.theme-light .pf-card > h3 {
  color: var(--text);
}
body.theme-light .pf-hero-meta strong {
  color: var(--text);
}
body.theme-light .pf-label {
  color: var(--blue);
}
body.theme-light .pf-value,
body.theme-light .pf-input {
  background: #ffffff !important;
  color: #0f172a !important;
}
body.theme-light .m-section-head span {
  color: var(--blue);
}
body.theme-light .m-section-head h2 {
  color: var(--text);
}
body.theme-light .se-soft-card,
body.theme-light .se-soft-card strong,
body.theme-light .se-soft-card p,
body.theme-light .se-soft-card span {
  color: var(--text);
}
body.theme-light .se-soft-card .muted,
body.theme-light .se-soft-card small {
  color: var(--muted);
}
body.theme-light .m-chip {
  color: var(--text);
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--line);
}
body.theme-light .m-chip.is-on {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.28);
}
body.theme-light .m-btn {
  color: var(--text);
}
body.theme-light .m-btn-primary,
body.theme-light .m-btn.is-primary {
  color: #fff;
}
body.theme-light .sale-scan-col-title {
  color: var(--text);
}
body.theme-light .sale-scan-hint {
  color: var(--muted);
}
body.theme-light .act-form-banner,
body.theme-light .act-form-banner p {
  color: var(--text);
}
body.theme-light .trk-status-bar,
body.theme-light .trk-status-bar strong,
body.theme-light .trk-driver-card,
body.theme-light .trk-driver-card strong {
  color: var(--text);
}
body.theme-light .trk-map-search,
body.theme-light .trk-map-tools {
  color: var(--text);
}
body.theme-light .gov-app-item strong {
  color: var(--text);
}
body.theme-light .svo-assist-panel-head strong {
  color: var(--text);
}
body.theme-light .svo-assist-panel-card:not(.is-calc) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line);
}
body.theme-light .m-empty,
body.theme-light .m-empty p,
body.theme-light .p-load,
body.theme-light .p-load p {
  color: var(--muted);
}
body.theme-light .m-toast {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--line);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
body.theme-light .m-toast.is-err {
  color: #991b1b;
  background: #fef2f2;
  border-color: rgba(220, 38, 38, 0.25);
}
body.theme-light .hm-mini-table th {
  color: var(--muted);
}
body.theme-light .hm-mini-table td {
  color: var(--text);
}
body.theme-light .hm-cal-head strong,
body.theme-light .hm-cal-head button {
  color: var(--text);
}
body.theme-light .hm-cal-day:not(.is-selected) strong,
body.theme-light .hm-cal-day:not(.is-selected) em {
  color: var(--text);
}
body.theme-light .hm-kpi-card [class*="is-tone"] .hm-kpi-meta,
body.theme-light .hm-kpi-card .hm-kpi-meta {
  color: #475569;
}
body.theme-light .hm-kpi-card .hm-kpi-metric-label {
  color: #64748b;
}
body.theme-light .hm-kpi-card .hm-kpi-sub {
  color: #1d4ed8;
}
body.theme-light .hm-kpi-card .hm-kpi-title,
body.theme-light .hm-kpi-card .hm-kpi-value {
  color: #0f172a;
}
body.theme-light .hm-kpi-sec .m-section-head h2,
body.theme-light .hm-kpi-sec .m-section-head span {
  color: var(--text);
}
body.theme-light .hm-kpi-sec .m-section-head span {
  color: var(--blue);
}
body.theme-light .pb-empty,
body.theme-light .pb-empty p {
  color: var(--muted);
}
body.theme-light .att-summary strong,
body.theme-light .att-summary span {
  color: var(--text);
}
body.theme-light .att-card,
body.theme-light .att-card strong,
body.theme-light .att-card p {
  color: var(--text);
}
body.theme-light .att-card .muted {
  color: var(--muted);
}

.po-settle-preview { margin: 10px 0 14px; padding: 12px; border-radius: 12px; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.35); }
body.theme-light .po-settle-preview { background: #f0fdf4; border-color: #86efac; }
.po-settle-amt { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-top: 8px; font-size: 13px; }
.po-settle-amt strong { text-align: right; font-variant-numeric: tabular-nums; }
.po-settle-remain { color: #16a34a; }
body.theme-light .po-settle-remain { color: #15803d; }
.po-settle-empty { padding: 8px 4px 0; color: #94a3b8; text-align: justify; text-justify: inter-word; }
.act-form--pelunasan .po-settle-intro,
.act-form--pelunasan .po-settle-empty {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.po-settle-picked {
  margin: 6px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.35);
  font-weight: 600;
  font-size: 14px;
}
body.theme-light .po-settle-picked { background: #f8fafc; border-color: #cbd5e1; }
.po-settle-list-cap { font-size: 12px; color: #94a3b8; margin: 0 0 8px; text-align: justify; text-justify: inter-word; }
.po-settle-list-scroll {
  overflow: auto;
  max-height: min(280px, 42vh);
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.35);
}
body.theme-light .po-settle-list-scroll { background: #f8fafc; border-color: #e2e8f0; }
.po-settle-list-head,
.po-settle-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  align-items: center;
}
.po-settle-list-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 12px;
  background: rgba(30, 41, 59, 0.96);
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
}
body.theme-light .po-settle-list-head { background: #f1f5f9; color: #334155; }
.po-settle-list-row {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  position: relative;
  z-index: 2;
  transition: background 0.15s ease;
}
.act-form--pelunasan select,
.act-form--pelunasan input,
.act-form--pelunasan textarea {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.po-settle-list-cell { min-width: 0; word-break: break-word; pointer-events: none; }
.po-settle-list-row.is-selected {
  background: rgba(37, 99, 235, 0.42) !important;
  box-shadow: inset 4px 0 0 #93c5fd;
  color: #f8fafc;
}
body.theme-light .po-settle-list-row.is-selected {
  background: #dbeafe !important;
  box-shadow: inset 4px 0 0 #2563eb;
  color: #0f172a;
}
.po-settle-list-row:active { opacity: 0.88; }
.po-settle-list-po { font-weight: 600; font-variant-numeric: tabular-nums; }