/* =====================================================================
   ERP ISP - tema aplikasi (di atas Bootstrap 5)
   Palet: Malam #0E2A47, Kertas #F2F4F7, Tinta #1B2430, Abu #536070
   ===================================================================== */
:root {
  --navy: #0E2A47;
  --ground: #F2F4F7;
  --surface: #FFFFFF;
  --ink: #1B2430;
  --ink-2: #36404D;
  --muted: #536070;
  --line: #D8DEE6;
  --line-soft: #EEF1F4;
  --accent: #1D5FD1;
  --accent-ink: #1E4FA8;
  --bad: #C2410C;
  --bad-ink: #8A2F08;
  --bad-bg: #FFE6D6;
  --warn: #D99A1E;
  --warn-ink: #74470A;
  --warn-bg: #FDF0C8;
  --ok-ink: #173A73;
  --ok-bg: #E3ECFA;

  --bs-body-font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--ground);
  --bs-border-color: var(--line);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 29, 95, 209;
  --bs-link-hover-color: var(--accent-ink);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 29, 95, 209;
}

body { font-size: 15px; line-height: 1.45; min-height: 100vh; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .87em; }
.num { font-variant-numeric: tabular-nums; }
.text-muted-2 { color: var(--muted) !important; }
:focus-visible { outline: 3px solid rgba(29, 95, 209, .45); outline-offset: 2px; }

/* ---------- Header & navigasi ---------- */
.app-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1020; }
.app-header .bar { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px; min-height: 44px; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--navy); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.icon-btn { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.icon-btn:hover { background: var(--ground); }
.user-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; border: 0; background: transparent; border-radius: 8px; color: var(--ink); }
.user-btn:hover { background: var(--ground); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #DCE6F5; color: var(--navy); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.user-meta small { color: var(--muted); font-size: 12px; }
.module-nav { display: flex; gap: 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.module-nav a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; }
.module-nav a:hover { color: var(--ink); }
.module-nav a.active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }

.app-main { padding-top: 28px; padding-bottom: 48px; }
.container-app { max-width: 1376px; margin: 0 auto; padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); }
.stack { display: flex; flex-direction: column; gap: 24px; }

/* ---------- Judul halaman ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head .lead-block { flex: 1 1 280px; min-width: 0; }
.page-head h1 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.015em; }
.page-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.page-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #E3E7ED; color: var(--ink-2); vertical-align: middle; }

/* ---------- Tombol & form ---------- */
.btn { min-height: 44px; font-weight: 600; font-size: 14px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-sm { min-height: 36px; font-size: 13px; }
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-ink); --bs-btn-hover-border-color: var(--accent-ink); --bs-btn-active-bg: var(--accent-ink); --bs-btn-disabled-bg: #9FB6DE; --bs-btn-disabled-border-color: #9FB6DE; }
.btn-outline { background: var(--surface); border: 1px solid #C5CDD8; color: var(--ink); }
.btn-outline:hover { background: var(--ground); border-color: #AEB8C5; color: var(--ink); }
.btn-light-on-dark { background: #fff; color: var(--navy); border: 0; }
.btn-light-on-dark:hover { background: #E6EEF8; color: var(--navy); }
.form-control, .form-select { min-height: 44px; border-color: #C5CDD8; font-size: 15px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.form-check-input { width: 22px; height: 22px; margin-top: 0; }
.segmented { display: inline-flex; padding: 3px; background: #E3E7ED; border-radius: 10px; }
.segmented a { min-height: 38px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #4A5666; text-decoration: none; display: inline-flex; align-items: center; }
.segmented a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(14, 42, 71, .2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid #C5CDD8; background: #fff; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
.chip:hover { border-color: #AEB8C5; color: var(--ink); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- Kartu ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: clamp(16px, 2vw, 22px); min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.panel-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.panel-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--ink-2); }
.row-flex { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.grow-2 { flex: 2 1 560px; min-width: 0; }
.grow-1 { flex: 1 1 320px; min-width: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi .label { font-size: 13px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.kpi .value { font-size: clamp(21px, 2vw, 26px); font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .note { font-size: 13px; font-weight: 500; color: var(--muted); }
.kpi .note.good { color: var(--accent-ink); }
.kpi .note.bad { color: #A2380B; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- Pita status jaringan (hero) ---------- */
.hero-net { background: var(--navy); color: #fff; border-radius: 16px; padding: clamp(18px, 2.6vw, 28px); display: flex; flex-wrap: wrap; gap: 24px; }
.hero-net .summary { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hero-net .eyebrow { margin: 0; font-size: 14px; font-weight: 500; color: #B9C9DD; }
.hero-net .big { margin: 0; font-size: clamp(34px, 4.4vw, 52px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hero-net .big span { font-size: .42em; font-weight: 500; letter-spacing: 0; color: #B9C9DD; }
.hero-net .alert-line { margin: 0; font-size: 14px; color: #FFD2B5; }
.hero-net .ok-line { margin: 0; font-size: 14px; color: #BFE2FF; }
.hero-net .btn { margin-top: auto; align-self: flex-start; }
.pop-tiles { flex: 2 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-content: start; }
.pop-tile { padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pop-tile .name { font-size: 14px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pop-tile .sub { font-size: 13px; color: #B9C9DD; font-variant-numeric: tabular-nums; }
.pop-tile .st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #8FCBFF; }
.pop-tile .st::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pop-tile.warning { background: rgba(251, 191, 36, .10); border-color: rgba(251, 191, 36, .55); }
.pop-tile.warning .st { color: #FCD34D; }
.pop-tile.down { background: rgba(251, 146, 60, .16); border-color: #FB923C; }
.pop-tile.down .st { color: #FDBA8C; }

/* ---------- Grafik batang ---------- */
.chart { display: flex; gap: 10px; }
.chart .axis { display: flex; flex-direction: column; justify-content: space-between; height: 220px; margin-top: -8px; font-size: 12px; color: #5B6878; text-align: right; min-width: 36px; font-variant-numeric: tabular-nums; }
.chart .axis span:last-child { margin-bottom: -8px; }
.chart .plot-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.chart .plot { height: 220px; display: flex; align-items: flex-end; gap: clamp(3px, .9vw, 12px); border-bottom: 1px solid #AEB8C5; background-image: linear-gradient(#E6EAEF 1px, transparent 1px); background-size: 100% 50%; }
.chart .bar { flex: 1 1 0; min-width: 0; background: var(--accent); opacity: .38; border-radius: 4px 4px 0 0; }
.chart .bar.current { opacity: 1; }
.chart .labels { display: flex; gap: clamp(3px, .9vw, 12px); }
.chart .labels span { flex: 1 1 0; min-width: 0; text-align: center; font-size: clamp(9px, 1.3vw, 12px); color: #5B6878; white-space: nowrap; overflow: hidden; }

/* ---------- Bar horizontal ---------- */
.hbar-list { display: flex; flex-direction: column; gap: 14px; }
.hbar-row { display: flex; flex-direction: column; gap: 6px; }
.hbar-row .top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.hbar-track { height: 8px; border-radius: 4px; background: #E9EDF2; overflow: hidden; }
.hbar-fill { height: 8px; border-radius: 4px; background: var(--accent); }
.hbar-fill.warn { background: #B7791F; }
.hbar-fill.bad { background: var(--bad); }

/* ---------- Pill status ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill-warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill-bad { background: var(--bad-bg); color: var(--bad-ink); }
.pill-muted { background: #E9EDF2; color: var(--ink-2); }

/* ---------- Tabel ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-app { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
.table-app th { text-align: left; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table-app td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table-app tr:last-child td { border-bottom: 0; }
.table-app .r { text-align: right; }
.table-app a.row-link { color: var(--ink); font-weight: 500; text-decoration: none; }
.table-app a.row-link:hover { color: var(--accent); text-decoration: underline; }
.min-760 { min-width: 760px; }
.min-900 { min-width: 900px; }

/* ---------- Daftar ---------- */
.list-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.list-row:last-child { border-bottom: 0; }
.list-row .body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row .meta { font-size: 13px; color: var(--muted); }
.callout-dark { padding: 12px 14px; border-radius: 10px; background: var(--navy); color: #fff; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.callout-dark .sub { font-size: 13px; color: #B9C9DD; }
.callout-dark a { color: #BFE2FF; }

/* ---------- Work order ---------- */
.wo-narrow { max-width: 760px; margin: 0 auto; }
.wo-hero { background: var(--navy); color: #fff; border-radius: 16px; padding: clamp(16px, 3vw, 24px); display: flex; flex-direction: column; gap: 14px; }
.wo-hero .no { font-size: 13px; color: #B9C9DD; }
.wo-hero h1 { margin: 0; font-size: clamp(20px, 3vw, 26px); font-weight: 600; }
.wo-hero .addr { margin: 6px 0 0; font-size: 14px; color: #D3DFEC; }
.wo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.wo-facts > div { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .07); display: flex; flex-direction: column; gap: 2px; }
.wo-facts .k { font-size: 12px; color: #B9C9DD; }
.wo-hero .pill-ok { background: rgba(143, 203, 255, .16); color: #BFE2FF; border: 1px solid rgba(143, 203, 255, .4); }
.wo-hero .pill-warn { background: rgba(252, 211, 77, .16); color: #FDE68A; }
.wo-hero .pill-bad { background: rgba(253, 186, 140, .18); color: #FDBA8C; }
.wo-hero .pill-muted { background: rgba(255, 255, 255, .12); color: #E2E8F0; }
.progress-track { height: 8px; border-radius: 4px; background: #E9EDF2; overflow: hidden; }
.progress-fill { height: 8px; border-radius: 4px; background: var(--accent); }
.check-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.check-row:last-child { border-bottom: 0; }
.check-row form { margin: 0; }
.check-btn { width: 30px; height: 30px; border-radius: 7px; border: 2px solid #AEB8C5; background: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; }
.check-btn.done { background: var(--accent); border-color: var(--accent); }
.check-row .done-label { color: var(--muted); text-decoration: line-through; text-decoration-color: #AEB8C5; }
.wo-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; flex-wrap: wrap; }
.wo-card:hover { border-color: #AEB8C5; color: var(--ink); }
.wo-card .t { font-size: 16px; font-weight: 600; }
.test-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.test-grid > div { padding: 12px 14px; border-radius: 10px; background: var(--ground); display: flex; flex-direction: column; gap: 2px; }
.test-grid .v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.test-grid .v.empty { color: #8A95A3; font-size: 18px; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; flex-wrap: wrap; }
.login-side { flex: 1 1 380px; background: var(--navy); color: #fff; padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.login-side h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 0; max-width: 14em; }
.login-side p { color: #B9C9DD; max-width: 32em; margin: 12px 0 0; }
.login-form { flex: 1 1 380px; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 64px); }
.login-form form { width: 100%; max-width: 380px; }

/* ---------- Pagination ---------- */
.pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 14px; color: var(--muted); }

/* ---------- Error ---------- */
.error-box { max-width: 520px; margin: 12vh auto; padding: 0 20px; }
.error-box .code { font-size: 64px; font-weight: 600; color: var(--navy); line-height: 1; }

@media print {
  .app-header, .page-actions, .no-print { display: none !important; }
  body { background: #fff; }
  .panel { border: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Tambahan tanpa style inline (CSP) */
.login-brand, .login-brand:hover { color: #fff; }
.login-mark { background: #fff; }
.module-card { text-decoration: none; }
.module-card .value { font-size: 17px; color: var(--ink); white-space: normal; }
.module-card:hover { border-color: #AEB8C5; }

/* v2: sub navigasi, badge, lampiran, form baris dinamis */
.subnav-wrap { border-top: 1px solid var(--line-soft); background: #FAFBFC; }
.subnav { display: flex; gap: 2px; overflow-x: auto; white-space: nowrap; }
.subnav a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 12px; font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; border-radius: 6px; }
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--accent-ink); font-weight: 600; background: var(--ok-bg); }
.badge-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.menu-account { min-width: 240px; }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.att { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.att img, .att-pdf { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #DCE3EC; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink-2); }
.line-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.4fr) 44px; gap: 8px; align-items: end; margin-bottom: 8px; }
.line-row .btn-remove { min-height: 44px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 20px; margin: 0; }
.dl-grid dt { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dl-grid dd { margin: 2px 0 0; }
.tree ul { list-style: none; padding-left: 20px; border-left: 1px dashed #C5CDD8; margin: 4px 0 4px 8px; }
.tree > ul { padding-left: 0; border-left: 0; margin-left: 0; }
.tree li { padding: 4px 0; }
.tree summary { cursor: pointer; font-weight: 500; }
.stage-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.stage-col { background: #EBEEF2; border-radius: 10px; padding: 10px; min-width: 0; }
.stage-col h3 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 2px 4px 8px; }
.lead-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; color: var(--ink); text-decoration: none; }
.lead-card:hover { border-color: #AEB8C5; color: var(--ink); }
.qr-box { width: 160px; height: 160px; }
.label-print { border: 1px dashed #AEB8C5; border-radius: 8px; padding: 12px; display: inline-flex; gap: 14px; align-items: center; }
.text-pre { white-space: pre-wrap; word-break: break-word; }
.public-wrap { max-width: 560px; margin: 6vh auto; padding: 0 16px; }
@media (max-width: 575px) { .line-row { grid-template-columns: 1fr 1fr; } .line-row > :first-child { grid-column: 1 / -1; } }
.jl-row { grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 44px; }
.jl-row .jl-memo { grid-column: 1 / -2; }
@media (max-width: 575px) { .jl-row .jl-memo { grid-column: 1 / -1; } }
@media print { .label-print { border: 0; } }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 36px; margin-top: 4px; }
.spark span { flex: 1 1 0; min-width: 2px; background: var(--accent); opacity: .55; border-radius: 2px 2px 0 0; }
.spark span.bad { background: var(--bad); opacity: .9; }
.sales-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 3fr) minmax(0, .8fr) minmax(0, 1.5fr) 44px; }
@media (max-width: 575px) { .sales-row { grid-template-columns: 1fr 1fr; } .sales-row > :nth-child(2) { grid-column: 1 / -1; } }
.code-block { background: var(--ground, #F2F4F7); border: 1px solid var(--line, #DDE2EA); border-radius: 8px; padding: 12px; font-size: 12.5px; overflow-x: auto; white-space: pre; }
.live-bar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted, #5B6B7F); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #1A7F45; box-shadow: 0 0 0 0 rgba(26,127,69,.5); animation: livepulse 2s infinite; }
.live-bar.paused .live-dot { background: #8A96A6; animation: none; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(26,127,69,.5); } 70% { box-shadow: 0 0 0 8px rgba(26,127,69,0); } 100% { box-shadow: 0 0 0 0 rgba(26,127,69,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.stepper { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0; overflow-x: auto; }
.stepper li { flex: 1 1 0; min-width: 96px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; position: relative; padding-top: 2px; }
.stepper li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--line, #DDE2EA); z-index: 0; }
.stepper li:first-child::before { display: none; }
.stepper .dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: #fff; border: 2px solid var(--line, #DDE2EA); color: var(--muted, #5B6B7F); z-index: 1; }
.stepper .lbl { font-size: 11.5px; line-height: 1.3; color: var(--muted, #5B6B7F); }
.stepper li.done .dot { background: #1A7F45; border-color: #1A7F45; color: #fff; }
.stepper li.done::before, .stepper li.current::before { background: #1A7F45; }
.stepper li.current .dot { border-color: var(--accent, #1D5FD1); color: var(--accent, #1D5FD1); box-shadow: 0 0 0 4px rgba(29,95,209,.15); }
.stepper li.current .lbl { color: inherit; font-weight: 600; }
.stepper li.stopped .dot { border-color: #C2410C; color: #C2410C; }
.chart-svg { display: block; max-width: 100%; height: auto; }
.funnel-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) 3fr 48px; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; }
.funnel-bar { height: 18px; background: var(--accent, #1D5FD1); border-radius: 4px; opacity: .85; }
.funnel-row.win .funnel-bar { background: #1A7F45; }
.person-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) 3fr minmax(90px, .8fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line, #DDE2EA); }
.person-row:last-child { border-bottom: 0; }
.person-row .who, .person-row .rate { display: flex; flex-direction: column; }
.person-row .rate { text-align: right; }
.person-row .bar { position: relative; display: flex; height: 22px; background: var(--ground, #F2F4F7); border-radius: 4px; overflow: hidden; }
.person-row .seg.won { background: #1A7F45; }
.person-row .seg.lost { background: #C2410C; }
.person-row .cnt { position: absolute; right: 6px; top: 2px; font-size: 12px; font-weight: 600; }
@media (max-width: 575px) { .person-row { grid-template-columns: 1fr auto; } .person-row .bar { grid-column: 1 / -1; grid-row: 2; } }
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-scroll .chart-svg { min-width: 600px; }
.stepper { padding: 0 6px 6px; scroll-padding: 0 24px; }
.stepper li { min-width: 108px; padding-left: 4px; padding-right: 4px; }
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.sm-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface, #fff); border: 1px solid var(--line, #DDE2EA); border-left: 4px solid #8A96A6; border-radius: 10px; padding: 14px; color: inherit; text-decoration: none; }
.sm-card:hover, .sm-card:focus-visible { box-shadow: 0 2px 10px rgba(14,42,71,.08); }
.sm-card.st-up { border-left-color: #1A7F45; } .sm-card.st-warning { border-left-color: #B7791F; } .sm-card.st-down { border-left-color: #C2410C; background: #FFF7F3; }
.sm-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.sm-reason { line-height: 1.35; }
.sm-bar { display: grid; grid-template-columns: 34px 1fr 40px; gap: 8px; align-items: center; font-size: 12.5px; }
.sm-bar .track { height: 8px; background: var(--ground, #F2F4F7); border-radius: 4px; overflow: hidden; display: block; }
.sm-bar .fill { display: block; height: 100%; background: #1D5FD1; border-radius: 4px; }
.sm-bar .fill.warn { background: #B7791F; } .sm-bar .fill.bad { background: #C2410C; }
.sm-bar .v { text-align: right; }
.sm-spark { width: 100%; height: 30px; }
.sm-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--muted, #5B6B7F); margin-top: 2px; }
.sm-foot .srcs { margin-left: auto; display: flex; gap: 4px; }
.src { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: 11px; font-weight: 700; color: #fff; }
.src.ok { background: #1A7F45; } .src.bad { background: #C2410C; }
/* Logo & kop surat */
.brand-logo { display: block; height: auto; max-height: 40px; width: auto; max-width: 200px; object-fit: contain; }
@media (max-width: 575px) { .brand-logo { max-height: 32px; max-width: 150px; } }
.login-logo-plate { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; padding: 10px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.login-logo-plate img { display: block; height: auto; max-height: 64px; width: auto; max-width: 240px; object-fit: contain; }
.pay-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pay-brand img { height: auto; max-height: 56px; width: auto; max-width: 220px; object-fit: contain; }
.dash-identity { display: flex; align-items: center; gap: 14px; padding-bottom: 4px; }
.dash-identity img { height: auto; max-height: 44px; width: auto; max-width: 180px; object-fit: contain; }
.letterhead { display: flex; align-items: center; gap: 16px; padding: 0 0 12px; border-bottom: 2px solid var(--navy, #0E2A47); margin-bottom: 4px; font-size: 12.5px; line-height: 1.4; }
.letterhead-logo { flex: 0 0 auto; height: auto; max-height: 56px; width: auto; max-width: 200px; object-fit: contain; }
.letterhead-id { flex: 1 1 auto; min-width: 0; }
.letterhead-name { font-size: 16px; font-weight: 700; color: var(--navy, #0E2A47); }
.letterhead-doc { flex: 0 1 auto; text-align: right; }
.letterhead-title { font-size: 15px; font-weight: 700; }
.letterhead-printed { color: var(--muted, #5B6B7F); font-size: 11px; }
.letterhead-print { display: none; }
.letterhead-preview { border-bottom-width: 1px; }
@media (max-width: 575px) { .letterhead { flex-wrap: wrap; } .letterhead-doc { text-align: left; flex-basis: 100%; } }
.logo-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.logo-previews figure { margin: 0; }
.logo-previews figcaption { font-size: 12px; color: var(--muted, #5B6B7F); margin-top: 4px; }
.lp { border: 1px solid var(--line, #DDE2EA); border-radius: 8px; padding: 12px; min-height: 76px; display: flex; align-items: center; background: #fff; overflow: hidden; }
.lp-header { gap: 8px; font-weight: 600; }
.lp-dark { background: #0E2A47; justify-content: center; }
.lp-icon { justify-content: center; }
.lp .letterhead { padding: 0; border: 0; margin: 0; width: 100%; font-size: 11px; }
.lp .letterhead-logo { max-height: 40px; max-width: 120px; }
.lp .letterhead-name { font-size: 13px; }
.lp .letterhead-doc { display: none; }
@media print {
  .letterhead-print { display: flex; }
  .letterhead { break-inside: avoid; }
  .letterhead-logo { max-height: 60px; }
  .dash-identity { display: none; }
}
.logo-previews .lp-wide { grid-column: 1 / -1; }
.lp-icon { gap: 16px; }
.lp .letterhead-doc { display: block; }