:root {
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --border: #e1e0d9;
  --blue: #2a78d6;
  --aqua: #1baf7a;
  --yellow: #eda100;
  --blue-tint: #eaf2fc;
  --aqua-tint: #e7f7f1;
  --yellow-tint: #fdf3e0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
  line-height: 1.6;
}

.wrap {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 24px;
}

header.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.hero-wrap { display: flex; align-items: center; gap: 12px; }
.theme-toggle { display: inline-flex; gap: 7px; flex: 0 0 auto; }
.theme-dot {
  width: 18px; height: 18px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease; outline: none;
}
.theme-dot:hover { transform: scale(1.18); }
.theme-dot-light { background: #ffffff; }
.theme-dot-dark { background: #0f1320; }
.theme-dot.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--blue); }
body.theme-dark .theme-dot { border-color: #3a445c; }

.eyebrow {
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

h1 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0;
}

.tagline {
  color: var(--text-secondary);
  font-size: 17px;
  max-width: 640px;
  margin: 0;
}

section {
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}

section:last-of-type { border-bottom: none; }

h2 {
  font-size: 22px;
  margin: 0 0 8px;
}

.section-intro {
  color: var(--text-secondary);
  margin: 0 0 28px;
  max-width: 640px;
}

/* stat tiles */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  border-top: 3px solid var(--accent, var(--blue));
}

.stat-tile.blue   { --accent: var(--blue); }
.stat-tile.aqua   { --accent: var(--aqua); }
.stat-tile.yellow { --accent: var(--yellow); }

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}

.stat-value {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
}

.stat-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 6px 0 0;
}

.filter-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.filter-note code {
  background: var(--blue-tint);
  padding: 1px 6px;
  border-radius: 4px;
}

/* bar chart */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 56px 1fr 44px;
  align-items: center;
  gap: 10px;
}

.bar-branch {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

.bar-track {
  background: var(--border);
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 4px;
}

.bar-value {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chart-caption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

/* code blocks */
pre {
  background: #0d0d0d;
  color: #e9e9e6;
  padding: 18px 20px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.55;
}

pre code { font-family: "SFMono-Regular", Consolas, Menlo, monospace; }

.kw   { color: #6da7ec; font-weight: 600; }
.cmt  { color: #7d7d7a; font-style: italic; }
.str  { color: #eda100; }

.file-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: -1px;
}

.file-tab {
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 6px 12px;
  border-radius: 8px 8px 0 0;
}

/* insight cards */
.insight {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.insight h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.insight p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14.5px;
}

/* downloads */
.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dl-btn {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.dl-btn:hover { border-color: var(--blue); color: var(--blue); }

footer {
  padding: 40px 0 56px;
  color: var(--text-muted);
  font-size: 14px;
}

footer a { color: var(--blue); }

@media (max-width: 600px) {
  .stat-row { grid-template-columns: 1fr; }
  h1 { font-size: 26px; }
}

/* ===== Dashboard banner style (meniru dashboard Excel asli) ===== */

.upload-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 28px;
}

.upload-box h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.upload-box p.hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.upload-field label {
  display: block;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 600;
}

.upload-field input[type="text"] {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-family: inherit;
  width: 220px;
}

.upload-field input[type="file"] {
  font-size: 13px;
}

.upload-field input[type="date"],
.upload-field select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-family: inherit;
  width: 100%;
  background: #fff;
}

/* ---- Tabel "Kelola Data SO" (tambah/edit/hapus) di Monitoring All Cycle 2 ---- */
.so-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.so-table th, .so-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
}
.so-table th {
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.so-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.so-badge-aktif { background: #dcfce7; color: #15803d; }
.so-badge-resign { background: #f1f5f9; color: #64748b; }
.so-badge-unregistered { background: #fef3c7; color: #92400e; }

/* ---- Tabel "Atur Target" (RACE 1/2/3, blok VALID & IN) ---- */
.ac2-target-table input.ac2-target-input {
  width: 64px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12.5px;
  font-family: inherit;
  text-align: center;
}
.ac2-target-recalc-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
  margin-left: 10px;
}
.ac2-del-year-btn { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.ac2-del-year-btn:hover { background: #fee2e2; }
.ac2-ytd-resign { font-size: 12px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 5px; }
body.theme-dark .ac2-del-year-btn { color: #fca5a5; background: #3a1d24; border-color: #5e2a33; }
body.theme-dark .ac2-del-year-btn:hover { background: #4a232c; }
body.theme-dark .ac2-ytd-resign { background: #1a2032; color: #cdd4e3; border-color: #2c3446; }
#ac2-ytd-year-select { font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text-primary); }
body.theme-dark #ac2-ytd-year-select { background: #1a2032; color: #cdd4e3; border-color: #2c3446; }

/* Filter jabatan di tampilan Year-to-Date */
.ac2-ytd-filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ac2-ytd-filterbar label { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.ac2-ytd-jabsel { font-size: 12.5px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-primary); cursor: pointer; }
.ac2-ytd-filternote { font-size: 12px; color: var(--text-muted); }
body.theme-dark .ac2-ytd-jabsel { background: #1a2032; color: #cdd4e3; border-color: #2c3446; }

/* Baris TOTAL (override) di editor */
.ac2-ytd-ovr-row { background: rgba(124,58,237,0.06); }
.ac2-ytd-ovr-row td:first-child { font-weight: 700; color: #6d28d9; }
.ac2-ytd-ovr-row input { width: 46px; }
body.theme-dark .ac2-ytd-ovr-row { background: rgba(124,58,237,0.14); }
body.theme-dark .ac2-ytd-ovr-row td:first-child { color: #c4b5fd; }

/* Grafik garis Total Valid vs Target -- DISATUKAN & nempel di bawah tabel */
.ac2-ct-box { padding: 5px 10px 6px; border-top: 1px solid var(--border); background: transparent; }
.ac2-ct-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 2px; }
.ac2-ct-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.ac2-ct-legend { display: flex; gap: 16px; }
.ac2-ct-key { font-size: 12px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.ac2-ct-sw { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.ac2-ct-sw-total { background: #2a78d6; }
.ac2-ct-sw-target { background: #eda100; }
.ac2-ct-svg { width: 100%; height: auto; display: block; }
.ac2-ct-grid { stroke: var(--border); stroke-width: 1; }
.ac2-ct-axis { fill: var(--text-muted); font-size: 11px; }
.ac2-ct-total { fill: none; stroke: #2a78d6; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ac2-ct-target { fill: none; stroke: #eda100; stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; stroke-linecap: round; }
.ac2-ct-dot-total { fill: #2a78d6; stroke: var(--surface); stroke-width: 2; }
.ac2-ct-dot-target { fill: #eda100; stroke: var(--surface); stroke-width: 2; }
.ac2-ct-cross { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.ac2-ct-hit { fill: transparent; cursor: crosshair; }
body.theme-dark .ac2-ct-total, body.theme-dark .ac2-ct-dot-total { stroke: #3987e5; }
body.theme-dark .ac2-ct-dot-total { fill: #3987e5; }
body.theme-dark .ac2-ct-total { fill: none; }
body.theme-dark .ac2-ct-target, body.theme-dark .ac2-ct-dot-target { stroke: #c98500; }
body.theme-dark .ac2-ct-dot-target { fill: #c98500; }
body.theme-dark .ac2-ct-sw-total { background: #3987e5; }
body.theme-dark .ac2-ct-sw-target { background: #c98500; }

/* Tooltip grafik (fixed, mengikuti kursor) */
.ac2-ct-tip { position: fixed; z-index: 3000; background: #1a2032; color: #e7eaf3; border: 1px solid #2c3446; border-radius: 8px; padding: 8px 10px; font-size: 12px; pointer-events: none; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5); min-width: 140px; }
.ac2-ct-tip-mon { font-weight: 700; margin-bottom: 5px; color: #fff; }
.ac2-ct-tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.7; }
.ac2-ct-tip-row strong { margin-left: auto; }
.ac2-year-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.ac2-year-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--text-primary);
  padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; cursor: pointer; user-select: none; transition: all 0.15s ease;
}
.ac2-year-chip:hover { border-color: #a78bfa; }
.ac2-year-chip input { cursor: pointer; accent-color: #7c3aed; margin: 0; }
.ac2-year-chip:has(input:checked) { background: rgba(124,58,237,0.12); border-color: #7c3aed; color: #6d28d9; }
body.theme-dark .ac2-year-chip { background: #1a2032; color: #cdd4e3; border-color: #2c3446; }
body.theme-dark .ac2-year-chip:has(input:checked) { background: rgba(124,58,237,0.28); border-color: #a78bfa; color: #ddd6fe; }

/* Tombol +/- buka-tutup tabel */
.ac2-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 8px; padding: 0;
  font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 6px;
  background: rgba(255,255,255,0.18); color: inherit; vertical-align: middle;
  transition: background 0.15s ease;
}
.ac2-toggle-btn:hover { background: rgba(255,255,255,0.32); }
.ac2-ytd-year-title .ac2-toggle-btn { border-color: rgba(124,58,237,0.35); background: rgba(124,58,237,0.12); color: #6d28d9; }
.ac2-ytd-year-title .ac2-toggle-btn:hover { background: rgba(124,58,237,0.22); }
body.theme-dark .ac2-ytd-year-title .ac2-toggle-btn { border-color: rgba(167,139,250,0.4); background: rgba(124,58,237,0.25); color: #c4b5fd; }
.ac2-collapsible.collapsed .ac2-collapsible-body { display: none; }
.so-row-actions button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  margin-right: 6px;
}
.so-row-actions button.so-btn-delete {
  color: #b91c1c;
  border-color: #fecaca;
}
.so-row-actions button.so-btn-delete.confirming {
  background: #fee2e2;
  font-weight: 700;
}
.so-row-actions button.so-btn-save {
  color: #0b6b0f;
  border-color: #bbf7d0;
}
.so-edit-input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12.5px;
  width: 100%;
  font-family: inherit;
}

#file-status {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  min-height: 18px;
}

#file-status.ok  { color: #006300; }
#file-status.err { color: #b3261e; }

.period-status {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  min-height: 18px;
}
.period-status.ok  { color: #006300; }
.period-status.err { color: #b3261e; }

.namelist-input {
  width: 150px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

.namelist-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}

.namelist-group {
  border-top: 1px dashed var(--border);
  padding-top: 14px;
}

.namelist-group h4 {
  margin: 0 0 10px;
  font-size: 13.5px;
}

.namelist-subrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 760px) {
  .namelist-input { width: 100%; }
}

.mob3-customer-adder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.mob3-customer-adder .mob3-name-input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13px;
  width: 170px;
}

.mob3-paid-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.mob3-add-btn {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.mob3-add-btn:hover { opacity: 0.9; }

.mob3-customer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mob3-customer-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 6px;
  background: #f4f4f1;
}

.mob3-customer-list li.paid { background: #c6e0b4; }

.mob3-customer-list li span.mob3-name { flex: 1; }

.mob3-customer-list li label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.mob3-remove-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 9px;
  font-size: 11.5px;
  cursor: pointer;
  color: var(--text-secondary);
}

.mob3-remove-btn:hover { border-color: #b3261e; color: #b3261e; }

.mob3-paid-badge {
  background: #c6e0b4;
  padding: 1px 6px;
  border-radius: 3px;
}

.privacy-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}

.dash-block {
  border: 1px solid #b7b7b7;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 18px;
}

.dash-banner {
  padding: 8px 16px;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  color: #ffffff;
  text-transform: uppercase;
}

.dash-banner.blue   { background: #4472c4; }
.dash-banner.purple { background: #7030a0; }
.dash-banner.orange { background: #ed7d31; }

.dash-body {
  display: flex;
  background: #ffffff;
}

.dash-cell {
  flex: 1;
  text-align: center;
  padding: 18px 12px;
  border-right: 1px solid #d9d9d9;
}

.dash-cell:last-child { border-right: none; }

.dash-cell .label {
  font-size: 11.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.dash-cell .value {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.dash-cell .value.placeholder {
  color: var(--text-muted);
  font-size: 22px;
}

/* ===== Tabs ===== */

.tab-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.tab-btn {
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-secondary);
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.tab-btn.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ===== Excel-style dashboard replica ===== */

.xl-wrap {
  overflow-x: auto;
  margin-bottom: 26px;
  border: 1px solid #999;
}

table.xl-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 760px;
  font-size: 12.5px;
  background: #fff;
}

/* Tabel dengan kolom daftar nama (Volume Booking, MOB 3, F9PD) pakai lebar kolom
   TETAP (colgroup + table-layout:fixed) supaya kolomnya tidak gepeng/menyusut
   otomatis saat browser membagi ruang — beda dari tabel 3-kolom biasa (Ticket
   Size, ASR) yang masih boleh menyesuaikan lebar otomatis. */
table.xl-table.xl-table-fixed {
  table-layout: fixed;
  min-width: 0;
}

table.xl-table th, table.xl-table td {
  border: 1px solid #b7b7b7;
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}

.xl-banner td {
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  padding: 8px;
}

.xl-banner.blue   td { background: #4472c4; }
.xl-banner.purple td { background: #7030a0; }
.xl-banner.orange td { background: #ed7d31; }
.xl-banner.green  td { background: #548235; }
.xl-banner.yellow td { background: #bf9000; }

.xl-head td, .xl-head th {
  background: #4472c4;
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
}
.xl-head.purple td, .xl-head.purple th { background: #7030a0; }
.xl-head.orange td, .xl-head.orange th { background: #ed7d31; }
.xl-head.green  td, .xl-head.green  th { background: #548235; }
.xl-head.yellow td, .xl-head.yellow th { background: #bf9000; }

.xl-bignum { font-size: 22px; font-weight: 700; }

.xl-row-reguler td { background: #ffffff; }
.xl-row-haji td    { background: #e2efda; font-weight: 600; color: #375623; }
.xl-row-emas td     { background: #fce4d6; font-weight: 600; color: #833c00; }
.xl-row-haji td.xl-namelist, .xl-row-emas td.xl-namelist { font-weight: 400; }

table.xl-table td.xl-namelist {
  font-size: 11px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.namelist-label {
  font-weight: 700;
  text-align: left;
  margin-bottom: 3px;
}

.xl-row-haji .namelist-label,
.xl-row-emas .namelist-label { font-weight: 600; }

.namelist-ul {
  margin: 0;
  padding: 0;
  text-align: left;
  list-style: none;
  max-width: 100%;
  overflow-x: auto;
  /* nama tidak pernah dipotong tanggung/dibungkus paksa — kalau ada nama yang
     memang lebih panjang dari kolomnya, baru muncul scroll kecil KHUSUS di baris
     nama itu saja (bukan scroll seluruh halaman/tabel). */
}

.namelist-ul li {
  position: relative;
  text-align: left;
  white-space: nowrap;
  margin-bottom: 1px;
  padding-left: 11px;
}

.namelist-ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

.namelist-empty {
  text-align: left;
  color: transparent;
}

.namelist-so {
  color: #898781;
  font-size: 12px;
}

.namelist-nomatch {
  text-align: left;
  color: #898781;
  font-size: 12.5px;
}

.xl-highlight-yellow { background: #ffe699 !important; font-weight: 700; }
.xl-highlight-green  { background: #c6e0b4 !important; font-weight: 700; }

.xl-caption {
  font-size: 12px;
  color: var(--text-muted);
  margin: -14px 0 24px;
}

.placeholder-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.save-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(11,11,11,0.06);
}

.save-btn {
  background: #0ca30c;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.save-btn:hover { opacity: 0.9; }

@media (max-width: 700px) {
  .save-bar { flex-direction: column; align-items: stretch; text-align: left; }
  .save-bar > div:last-child { text-align: left !important; }
}

/* ============================================================
   VALID EOM LM VS MTD TM — tampilan modern/korporat/futuristik.
   Sengaja DIPISAH total dari gaya ".xl-*" replika Excel yang dipakai
   di tab Dashboard (Dashboard tidak disentuh sama sekali). Semua
   override di sini di-scope di bawah #tab-soperf supaya tidak bocor
   ke tab lain, walau memakai class bersama seperti .namelist-ul.
   ============================================================ */

#tab-soperf.soperf-modern {
  font-feature-settings: "tnum" 1;
}

.soperf-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 30px 32px;
  margin-bottom: 28px;
  background: linear-gradient(135deg, #0b1120 0%, #142451 42%, #0e7490 100%);
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(14,116,144,0.55);
}

.soperf-hero-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.35) 0%, rgba(56,189,248,0) 70%);
  pointer-events: none;
}

.soperf-eyebrow {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #67e8f9;
}

.soperf-title {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
}

.soperf-title span {
  display: inline-block;
  margin: 0 8px;
  padding: 2px 12px;
  font-size: 16px;
  font-weight: 700;
  vertical-align: middle;
  border-radius: 999px;
  background: rgba(56,189,248,0.18);
  color: #67e8f9;
  border: 1px solid rgba(103,232,249,0.4);
}

.soperf-sub {
  position: relative;
  margin: 0;
  max-width: 880px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #cbd5f5;
}

.soperf-sub code {
  background: rgba(255,255,255,0.12);
  color: #e0f2fe;
  padding: 1px 5px;
  border-radius: 5px;
}

.soperf-block {
  margin-bottom: 40px;
}

.soperf-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.soperf-block-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.2px;
}

.soperf-block-head .hint {
  max-width: 720px;
  color: var(--text-muted);
}

.soperf-search {
  position: relative;
  flex-shrink: 0;
}

.soperf-search svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.soperf-search input {
  width: 320px;
  max-width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 13.5px;
  font-family: inherit;
  background: #f8fafc;
  color: #0f172a;
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.soperf-search input:focus {
  outline: none;
  background: #fff;
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56,189,248,0.15);
}

/* ---- Kartu ranking Sales Officer ---- */

.so-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e7ebf3;
  box-shadow: 0 10px 30px -18px rgba(15,23,42,0.25);
  margin-bottom: 20px;
}

.so-card-banner {
  padding: 13px 20px;
  background: linear-gradient(90deg, #111c3a 0%, #1d4ed8 55%, #0891b2 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.so-card-banner span {
  font-weight: 500;
  opacity: 0.8;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

/* Baris benchmark rata-rata di bawah banner (pembanding Ticket Size & ASR) */
.so-bench {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 10px 20px; background: var(--blue-tint); border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-secondary);
}
.so-bench:empty { display: none; }
.so-bench-item b { color: var(--text-primary); }
.so-bench-hint { color: var(--text-muted); font-size: 11.5px; margin-left: auto; }
/* Panah pergerakan peringkat */
.so-move { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; vertical-align: middle; }
.so-move.up { color: #1baf7a; }
.so-move.down { color: #d64545; }
.so-move.same { color: var(--text-muted); font-weight: 600; }
.so-move.new { color: var(--blue); background: var(--blue-tint); border-radius: 5px; padding: 1px 5px; font-size: 9.5px; letter-spacing: 0.3px; }
/* Ticket/ASR relatif rata-rata */
.so-above { color: #128a5f; font-weight: 700; }
.so-below { color: #b06a00; }
.so-row-click { cursor: pointer; transition: background 0.12s ease; }
.so-row-click:hover { background: var(--blue-tint); }

/* Modal drill-down SO (rincian customer per sales officer) */
.so-drill-overlay { display: none; position: fixed; inset: 0; z-index: 3500; background: rgba(20,24,34,0.55); padding: 22px; overflow-y: auto; }
.so-drill-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
.so-drill-box { position: relative; width: 100%; max-width: 720px; margin: 24px auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px 24px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.4); }
.so-drill-box h3 { margin: 0 34px 6px 0; font-size: 19px; color: var(--text-primary); }
.so-drill-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.so-drill-period { font-size: 12px; font-weight: 700; color: var(--blue); background: var(--blue-tint); padding: 3px 10px; border-radius: 999px; }
.so-drill-chip { font-size: 12px; color: var(--text-secondary); background: var(--page); border: 1px solid var(--border); padding: 3px 10px; border-radius: 999px; }
.so-drill-sec { margin-top: 14px; }
.so-drill-sec-h { font-size: 13px; font-weight: 800; color: var(--text-primary); padding-left: 10px; border-left: 4px solid var(--blue); margin-bottom: 6px; }
.so-drill-sec-h span { color: var(--text-muted); font-weight: 600; font-size: 12px; }
.so-drill-sec-h.cat-emas { border-left-color: #eda100; }
.so-drill-sec-h.cat-haji { border-left-color: #1baf7a; }
.so-drill-sec-h.cat-multiguna { border-left-color: #2a78d6; }
.so-drill-sec-h.cat-acccash { border-left-color: #8b5cf6; }

.so-modern-table-wrap {
  overflow-x: auto;
}

table.so-modern-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 640px;
}

.so-modern-table thead th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 12px;
  border-bottom: 2px solid #e2e8f0;
}

.so-modern-table tbody td {
  padding: 10px 12px;
  text-align: center;
  color: #1e293b;
  border-bottom: 1px solid #eef1f6;
  font-variant-numeric: tabular-nums;
}

.so-modern-table tbody tr {
  transition: background .12s ease;
}

.so-modern-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.so-modern-table tbody tr:hover {
  background: #eaf6fd;
}

.so-modern-table tbody tr:last-child td {
  border-bottom: none;
}

.so-empty-msg {
  color: var(--text-muted);
  text-align: left !important;
  padding: 16px 12px !important;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  background: #94a3b8;
}

.rank-badge.rank-gold {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.22);
}
.rank-badge.rank-silver {
  background: linear-gradient(135deg, #f8fafc, #94a3b8);
  color: #1e293b;
  box-shadow: 0 0 0 3px rgba(148,163,184,0.28);
}
.rank-badge.rank-bronze {
  background: linear-gradient(135deg, #eab08a, #92400e);
  box-shadow: 0 0 0 3px rgba(146,64,14,0.22);
}
.rank-badge.rank-plain {
  background: #eef2f6;
  color: #64748b;
}

/* ---- Kartu Daftar Customer Valid per Kategori ---- */

.soperf-period-label {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #475569;
}

.soperf-period-label span {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.cust-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

@media (max-width: 1100px) {
  .cust-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cust-card-grid { grid-template-columns: 1fr; }
}

.cust-card {
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e7ebf3;
  box-shadow: 0 10px 26px -18px rgba(15,23,42,0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cust-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: #fff;
}

.cust-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  flex-shrink: 0;
}

.cust-card.cat-emas .cust-card-head     { background: linear-gradient(120deg, #d97706, #f59e0b); }
.cust-card.cat-haji .cust-card-head     { background: linear-gradient(120deg, #0f766e, #14b8a6); }
.cust-card.cat-multiguna .cust-card-head{ background: linear-gradient(120deg, #3730a3, #4f46e5); }
.cust-card.cat-acccash .cust-card-head  { background: linear-gradient(120deg, #6d28d9, #a855f7); }

.cust-card-body {
  padding: 12px 14px;
  max-height: 260px;
  overflow-y: auto;
  flex: 1;
}

/* Override khusus di dalam tab ini saja — class .namelist-ul/.namelist-empty
   dipakai bersama dengan tab Dashboard, jadi styling barunya di-scope supaya
   tidak mengubah tampilan Dashboard sedikit pun. */
#tab-soperf .namelist-ul li {
  padding: 5px 0 5px 14px;
  border-bottom: 1px dashed #eef1f6;
  font-size: 12.5px;
}
#tab-soperf .namelist-ul li:last-child { border-bottom: none; }
#tab-soperf .namelist-ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94a3b8;
  top: 10px;
}
#tab-soperf .namelist-empty { color: transparent; }
.cust-empty-state {
  color: #b0b7c3;
  font-size: 12.5px;
  font-style: italic;
  text-align: center;
  padding: 22px 6px;
}
#tab-soperf .namelist-nomatch {
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 0;
}
#tab-soperf .namelist-so {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 600;
}

/* ---- Baris customer bisa diklik untuk lihat detail (modal) ---- */
#tab-soperf .namelist-ul li.cust-clickable {
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s ease, padding-left .12s ease;
}
#tab-soperf .namelist-ul li.cust-clickable:hover {
  background: #eef2ff;
  padding-left: 18px;
}
#tab-soperf .namelist-ul li.cust-clickable:hover::before {
  background: #4f46e5;
}

/* ---- Modal Detail Baris Customer ---- */
.cust-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,12,24,0.72); /* blur dihapus: bikin scroll popup patah-patah */
  z-index: 1000;
  padding: 4vh 16px;
  overflow-y: auto;
}
.cust-detail-overlay.open { display: block; }

.cust-detail-modal {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
}

.cust-detail-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  background: linear-gradient(120deg, #0b1120 0%, #1d4ed8 60%, #0891b2 100%);
  color: #fff;
}

.cust-detail-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #93c5fd;
}

.cust-detail-modal-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

.cust-detail-close {
  background: rgba(255,255,255,0.14);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.cust-detail-close:hover { background: rgba(255,255,255,0.26); }

.cust-detail-modal-body {
  padding: 20px 24px 26px;
  max-height: 72vh;
  overflow-y: auto;
}

.cust-detail-pii-note {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 12px;
}

.cust-detail-empty {
  color: var(--text-muted);
  font-size: 13.5px;
}

.cust-detail-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  margin-bottom: 20px;
}
@media (max-width: 700px) {
  .cust-detail-highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cust-detail-highlight-item {
  background: #f1f5f9;
  border-radius: 10px;
  padding: 9px 12px;
}
.cust-detail-highlight-item span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 2px;
}
.cust-detail-highlight-item strong {
  font-size: 13.5px;
  color: #0f172a;
  font-weight: 700;
  word-break: break-word;
}

.cust-detail-subhead {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #94a3b8;
  border-top: 1px solid #eef1f6;
  padding-top: 14px;
}

.cust-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
@media (max-width: 700px) {
  .cust-detail-grid { grid-template-columns: 1fr; }
}

.cust-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed #eef1f6;
  font-size: 12.5px;
}
.cust-detail-row span:first-child {
  color: #64748b;
  flex-shrink: 0;
  max-width: 55%;
}
.cust-detail-row span:last-child {
  color: #0f172a;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

/* ---- "Total Valid Bulan Lalu vs Total Valid Bulan Ini" -- kartu ringkasan
   klik + popup rincian per kategori (menggantikan blok "MTD LM" yang dulu ada
   di tengah). Warna: biru = Bulan Lalu, aqua = Bulan Ini (urutan tetap, sudah
   divalidasi lolos cek keamanan warna buta warna/kontras). ---- */

.valid-compare-wrap {
  margin: 0 0 30px;
}

.valid-compare-card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: left;
  font-family: inherit;
  border: none;
  border-radius: 20px;
  padding: 26px 28px 22px;
  cursor: pointer;
  background: linear-gradient(135deg, #0b1120 0%, #142451 45%, #0e7490 100%);
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(14,116,144,0.55);
  transition: transform .18s ease, box-shadow .18s ease;
}

.valid-compare-card:hover,
.valid-compare-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -16px rgba(14,116,144,0.7);
  outline: none;
}

.valid-compare-glow {
  position: absolute;
  top: -70px;
  right: -50px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.32) 0%, rgba(56,189,248,0) 70%);
  pointer-events: none;
}

.valid-compare-head {
  position: relative;
}

.valid-compare-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #67e8f9;
}

.valid-compare-head h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #fff;
}

.valid-compare-head h4 span {
  display: inline-block;
  margin: 0 6px;
  padding: 1px 10px;
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
  border-radius: 999px;
  background: rgba(56,189,248,0.18);
  color: #67e8f9;
  border: 1px solid rgba(103,232,249,0.4);
}

.valid-compare-bars {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.valid-compare-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.valid-compare-row-label {
  flex-shrink: 0;
  width: 168px;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
}

.valid-compare-row-label em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}

.valid-compare-card .valid-compare-row-label { color: rgba(255,255,255,0.88); }
.valid-compare-card .valid-compare-row-label em { color: rgba(255,255,255,0.55); }

.valid-compare-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 7px;
  flex-shrink: 0;
}
.valid-compare-dot.dot-lm { background: var(--blue); }
.valid-compare-dot.dot-tm { background: var(--aqua); }

.valid-compare-track {
  flex: 1;
  height: 14px;
  border-radius: 4px;
  background: rgba(15,23,42,0.08);
  overflow: hidden;
}
.valid-compare-card .valid-compare-track { background: rgba(255,255,255,0.14); }

.valid-compare-fill {
  height: 100%;
  border-radius: 0 4px 4px 0;
  transition: width .6s ease;
}
.valid-compare-fill.fill-lm { background: var(--blue); }
.valid-compare-fill.fill-tm { background: var(--aqua); }

.valid-compare-value {
  flex-shrink: 0;
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 14px;
  color: #0f172a;
}
.valid-compare-card .valid-compare-value { color: #fff; }

.valid-compare-foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
}

.valid-compare-delta {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.valid-compare-delta.up { color: #4ade80; }
.valid-compare-delta.down { color: #f87171; }
.valid-compare-delta.flat { color: rgba(255,255,255,0.75); }

.valid-compare-cta {
  font-size: 12px;
  font-weight: 700;
  color: #67e8f9;
}
.valid-compare-card:hover .valid-compare-cta { text-decoration: underline; }

@media (max-width: 640px) {
  .valid-compare-row-label { width: 128px; font-size: 11.5px; }
  .valid-compare-head h4 { font-size: 17px; }
}

/* ---- Popup rincian per kategori (buka dari klik kartu di atas) ---- */
.valid-compare-modal { max-width: 640px; }

.valid-compare-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0 0 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
}
.valid-compare-legend span {
  display: inline-flex;
  align-items: center;
}

.valid-compare-cat-block {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed #eef1f6;
}
.valid-compare-cat-block:last-of-type {
  margin-bottom: 4px;
  padding-bottom: 0;
  border-bottom: none;
}

.valid-compare-cat-name {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #0f172a;
}
.valid-compare-cat-name span {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-left: 4px;
}

.valid-compare-cat-block .valid-compare-row + .valid-compare-row {
  margin-top: 10px;
}

.valid-compare-note {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
}

/* ---- Gerbang PIN tab "Input Data" ---- */
.input-gate {
  display: flex;
  justify-content: center;
  padding: 60px 16px;
}

.input-gate-box {
  width: 100%;
  max-width: 420px;
  text-align: center;
  background: linear-gradient(135deg, #0b1120 0%, #142451 45%, #0e7490 100%);
  color: #fff;
  border-radius: 20px;
  padding: 34px 30px;
  box-shadow: 0 18px 40px -18px rgba(14,116,144,0.55);
}

.input-gate-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #67e8f9;
}

.input-gate-box h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.input-gate-box .hint {
  color: rgba(255,255,255,0.72);
  font-size: 12.5px;
  margin: 0 0 20px;
}

#input-gate-form {
  display: flex;
  gap: 10px;
  justify-content: center;
}

#input-gate-pin {
  flex: 1;
  max-width: 200px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}
#input-gate-pin::placeholder { color: rgba(255,255,255,0.5); }
#input-gate-pin:focus {
  outline: none;
  border-color: #67e8f9;
  background: rgba(255,255,255,0.16);
}

#input-gate-form .save-btn {
  flex-shrink: 0;
}

#input-gate-error {
  margin: 14px 0 0;
  color: #fca5a5 !important;
}

/* ---- Tab "Monitoring All Cycle 2" -- MANDIRI, sengaja dibuat beda warna
   (ungu/plum) dari tab "Valid EOM LM vs MTD TM" (navy/cyan) supaya kelihatan
   jelas ini modul terpisah, bukan bagian dari menu lain. ---- */

#tab-allcycle2.allcycle2-modern {
  font-feature-settings: "tnum" 1;
}

.allcycle2-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 30px 32px;
  margin-bottom: 28px;
  background: linear-gradient(135deg, #1e1033 0%, #4c1d95 45%, #a21caf 100%);
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(126,34,206,0.5);
}

.allcycle2-hero-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,121,164,0.35) 0%, rgba(232,121,164,0) 70%);
  pointer-events: none;
}

.allcycle2-eyebrow {
  position: relative;
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #f0abfc;
}

.allcycle2-title {
  position: relative;
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
}

.allcycle2-sub {
  position: relative;
  margin: 0;
  max-width: 780px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #e9d5ff;
}

.allcycle2-placeholder {
  text-align: center;
  padding: 60px 24px;
  border: 1.5px dashed #d8b4fe;
  border-radius: 18px;
  background: #faf5ff;
}

.allcycle2-placeholder-icon {
  font-size: 30px;
  margin: 0 0 12px;
}

.allcycle2-placeholder h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: #3b0764;
}

.allcycle2-placeholder .hint {
  max-width: 520px;
  margin: 0 auto;
  color: var(--text-muted);
}

.allcycle2-placeholder-slim {
  padding: 26px 24px;
}
.allcycle2-placeholder-slim .hint {
  max-width: 700px;
}

/* ---- Contoh tampilan "Monitoring per SO" (VALID / IN, per RACE) -- mockup
   dengan data contoh/dummy, dibuat mengikuti persis contoh spreadsheet yang
   diberikan Bapak Ansar. Sengaja pakai tema TERANG (bukan ungu gelap seperti
   hero) supaya persis nuansa Excel aslinya -- gampang dibandingkan langsung
   dengan contoh spreadsheet Bapak. ---- */

.allcycle2-race-section {
  margin-top: 22px;
}

.allcycle2-race-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #3b0764;
  margin: 0 0 10px;
  padding-left: 2px;
}

.allcycle2-race-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  overflow-x: auto;
  margin-bottom: 22px;
  box-shadow: 0 10px 24px -18px rgba(59,7,100,0.35);
}

.allcycle2-race-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  white-space: nowrap;
}

.allcycle2-race-table th,
.allcycle2-race-table td {
  border: 1px solid #e5e2ee;
  padding: 5px 8px;
  text-align: center;
}

.allcycle2-race-table th.ac2-name-col,
.allcycle2-race-table td.ac2-name-col {
  text-align: left;
  font-weight: 600;
}

.allcycle2-race-table thead th {
  font-weight: 700;
  color: #3b0764;
}

.allcycle2-race-table thead tr:first-child th {
  font-size: 12px;
  letter-spacing: 0.3px;
}

.allcycle2-race-table thead .ac2-grp-info { background: #f3f1fb; }
.allcycle2-race-table thead .ac2-grp-race1 { background: #cfe2ff; }
.allcycle2-race-table thead .ac2-grp-race2 { background: #ffdcae; }
.allcycle2-race-table thead .ac2-grp-race3 { background: #fff2a8; }
.allcycle2-race-table thead .ac2-grp-total { background: #e3c6f7; }

.allcycle2-race-table td.ac2-achv-good,
.allcycle2-race-table td.ac2-diff-good {
  background: #bdf0c0;
  color: #0b6b0f;
  font-weight: 700;
}

.allcycle2-race-table td.ac2-achv-bad,
.allcycle2-race-table td.ac2-diff-bad {
  background: #ffc9c9;
  color: #8f1414;
  font-weight: 700;
}

.allcycle2-race-table tr.ac2-acccash-row td {
  background: #fef3c7;
  font-weight: 700;
  color: #7c5c05;
}

/* Nama SO yang bisa diklik untuk buka popup rincian kategori */
.ac2-clickable-name {
  color: #6d28d9;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.ac2-clickable-name:hover {
  color: #4c1d95;
  text-decoration-style: solid;
}

/* ===== Popup rincian per kategori (klik nama SO) ===== */
.ac2-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30, 12, 55, 0.55);
  z-index: 1000;
  padding: 24px;
  overflow-y: auto;
}
.ac2-detail-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
.ac2-detail-box {
  background: #fff;
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  margin: auto;
  padding: 24px 26px 28px;
  position: relative;
  box-shadow: 0 24px 60px -20px rgba(30, 12, 55, 0.6);
}
.ac2-detail-box h3 {
  margin: 0 34px 0 0;
  color: #3b0764;
  font-size: 19px;
}
.ac2-detail-close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: #f3f1fb;
  color: #3b0764;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ac2-detail-close:hover { background: #e3dcf7; }
.ac2-detail-block { margin-top: 18px; }
.ac2-detail-block h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #3b0764;
}
.ac2-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ac2-detail-table th,
.ac2-detail-table td {
  border: 1px solid #e5e2ee;
  padding: 6px 10px;
  text-align: center;
}
.ac2-detail-table th {
  background: #f3f1fb;
  color: #3b0764;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ac2-detail-table td.ac2-detail-cat { text-align: left; font-weight: 600; }
.ac2-detail-table td.ac2-detail-strong { font-weight: 800; color: #0b3d0c; background: #eef8ee; }
.ac2-detail-table td.ac2-detail-muted { color: var(--text-muted); }
.ac2-detail-table tr.ac2-detail-total td {
  background: #ede7fb;
  font-weight: 800;
  color: #3b0764;
}

.allcycle2-race-table tr.ac2-total-row td {
  background: #cdead0;
  font-weight: 800;
  color: #0b3d0c;
}

.allcycle2-race-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 2px;
}

/* ---- Kotak "Upload & Kelola Data -- Terkunci" di tab Monitoring All Cycle 2.
   Beda dari .input-gate (yang menutup SELURUH tab Input Data): kotak ini cuma
   mengunci AREA upload/simpan saja -- hero & hasil monitoring di atasnya tetap
   terlihat siapa saja (termasuk atasan), sesuai permintaan Bapak Ansar. ---- */

.allcycle2-lockbox {
  border: 1.5px dashed #d8b4fe;
  border-radius: 18px;
  background: #faf5ff;
  padding: 22px 24px;
  margin-top: 26px;
}

.allcycle2-lockbox-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 640px;
}

.allcycle2-lock-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.allcycle2-lock-text h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 800;
  color: #3b0764;
}

.allcycle2-lock-text .hint {
  margin: 0 0 14px;
  color: var(--text-muted);
}

.allcycle2-lock-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.allcycle2-lock-form input[type="password"] {
  width: 180px;
  padding: 9px 12px;
  border: 1px solid #d8b4fe;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  color: #0f172a;
}

.allcycle2-lock-form input[type="password"]:focus {
  outline: none;
  border-color: #a855f7;
  box-shadow: 0 0 0 4px rgba(168,85,247,0.14);
}

/* ============================================================
   TEMA GELAP (eye-friendly) — untuk SEMUA menu KECUALI Dashboard.
   Diaktifkan lewat class body.theme-dark yang dipasang/dilepas oleh JS
   saat pindah tab (Dashboard tetap terang persis seperti semula; tab lain
   jadi gelap supaya tidak menyilaukan mata). Aman meng-override secara
   luas: selama body.theme-dark aktif, panel Dashboard selalu display:none,
   jadi gaya replika-Excel Dashboard tidak pernah ikut terlihat.
   ============================================================ */
body.theme-dark {
  --page: #0f1320;
  --surface: #1a2032;
  --text-primary: #e7eaf3;
  --text-secondary: #aab3c7;
  --text-muted: #7f8aa0;
  --border: #2c3446;
  background: var(--page);
  color: var(--text-primary);
}

/* Header, navigasi tab, judul umum */
body.theme-dark header.hero { background: #161b2a; border-bottom-color: #2a3145; }
body.theme-dark .tab-nav { border-bottom-color: #2a3145; }
body.theme-dark .tab-btn { color: #98a2b8; }
body.theme-dark .tab-btn.active { color: #7cb0ff; border-bottom-color: #7cb0ff; }
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4 { color: #f1f3f9; }
body.theme-dark .section-intro,
body.theme-dark .tagline { color: #aab3c7; }
body.theme-dark section { border-bottom-color: #2a3145; }
body.theme-dark a { color: #7cb0ff; }

/* Input, select, textarea */
body.theme-dark input[type="text"],
body.theme-dark input[type="password"],
body.theme-dark input[type="date"],
body.theme-dark input[type="number"],
body.theme-dark input[type="search"],
body.theme-dark select,
body.theme-dark textarea {
  background: #232b3e !important;
  color: #e7eaf3 !important;
  border-color: #3a445c !important;
}
body.theme-dark input[type="file"] { color: #cdd4e3; }
body.theme-dark ::placeholder { color: #6b7488; }

/* Kotak upload / hint */
body.theme-dark .upload-box { box-shadow: 0 8px 24px -18px rgba(0,0,0,0.7); }
body.theme-dark .hint,
body.theme-dark .upload-box p.hint,
body.theme-dark .upload-field label { color: #9aa3b8; }
body.theme-dark .hint code,
body.theme-dark .upload-box code {
  background: #232b3e; color: #cdd4e3; padding: 1px 5px; border-radius: 4px;
}

/* ---- Tabel "Monitoring per SO" (VALID / IN) ---- */
body.theme-dark .allcycle2-race-card {
  background: #161b2a;
  border-color: #2c3446;
  box-shadow: 0 12px 28px -20px rgba(0,0,0,0.8);
}
body.theme-dark .allcycle2-race-title { color: #cbb6f5; }
body.theme-dark .allcycle2-race-table td { color: #dfe4ef; }
body.theme-dark .allcycle2-race-table th,
body.theme-dark .allcycle2-race-table td { border-color: #2f3648; }
body.theme-dark .allcycle2-race-table thead th { color: #e7eaf3; }
body.theme-dark .allcycle2-race-table thead .ac2-grp-info  { background: #262c3d; }
body.theme-dark .allcycle2-race-table thead .ac2-grp-race1 { background: #24344f; }
body.theme-dark .allcycle2-race-table thead .ac2-grp-race2 { background: #46351f; }
body.theme-dark .allcycle2-race-table thead .ac2-grp-race3 { background: #45411d; }
body.theme-dark .allcycle2-race-table thead .ac2-grp-total { background: #392a4f; }
body.theme-dark .allcycle2-race-table td.ac2-achv-good,
body.theme-dark .allcycle2-race-table td.ac2-diff-good {
  background: #16351d; color: #74e08a;
}
body.theme-dark .allcycle2-race-table td.ac2-achv-bad,
body.theme-dark .allcycle2-race-table td.ac2-diff-bad {
  background: #3a1d1d; color: #ff9d9d;
}
body.theme-dark .allcycle2-race-table tr.ac2-acccash-row td {
  background: #3a3320; color: #f3d581;
}
body.theme-dark .allcycle2-race-table tr.ac2-total-row td {
  background: #1e3a26; color: #b5edbf;
}
body.theme-dark .ac2-clickable-name { color: #b79cf5; }
body.theme-dark .ac2-clickable-name:hover { color: #d3c2fb; }
body.theme-dark .allcycle2-race-note { color: #8b93a7; }
body.theme-dark .allcycle2-race-note strong { color: #cdd4e3; }
body.theme-dark #allcycle2-race-filter-info { color: #9aa3b8; }

/* Placeholder / empty state di area gelap */
body.theme-dark .cust-empty-state,
body.theme-dark .allcycle2-placeholder {
  background: #191426;
  border-color: #4a2f6b;
}
body.theme-dark .allcycle2-placeholder h3 { color: #cbb6f5; }
body.theme-dark .allcycle2-placeholder .hint { color: #9aa3b8; }
body.theme-dark .allcycle2-placeholder-slim { border-color: #4a2f6b; }

/* ---- Kelola Data SO + Atur Target (so-table) ---- */
body.theme-dark .so-table th { color: #9aa3b8; }
body.theme-dark .so-table th,
body.theme-dark .so-table td { border-bottom-color: #2c3446; }
body.theme-dark .so-badge-aktif { background: #14351f; color: #74e08a; }
body.theme-dark .so-badge-resign { background: #2a3040; color: #aab3c7; }
body.theme-dark .so-badge-unregistered { background: #3a3320; color: #f3d581; }
body.theme-dark .so-row-actions button {
  background: #232b3e; color: #cdd4e3; border-color: #3a445c;
}
body.theme-dark .so-row-actions button.so-btn-delete { color: #ff9d9d; border-color: #5a2b2b; }
body.theme-dark .so-row-actions button.so-btn-delete.confirming { background: #4a1f1f; }
body.theme-dark .so-row-actions button.so-btn-save { color: #74e08a; border-color: #2b5a35; }
body.theme-dark .ac2-target-recalc-btn { background: #232b3e; color: #cdd4e3; border-color: #3a445c; }

/* ---- Popup rincian per kategori ---- */
body.theme-dark .ac2-detail-box {
  background: #1a2032;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.85);
}
body.theme-dark .ac2-detail-box h3 { color: #e7eaf3; }
body.theme-dark .ac2-detail-close { background: #262c3d; color: #cdd4e3; }
body.theme-dark .ac2-detail-close:hover { background: #333b50; }
body.theme-dark .ac2-detail-block h4 { color: #cbb6f5; }
body.theme-dark .ac2-detail-table th,
body.theme-dark .ac2-detail-table td { border-color: #2f3648; }
body.theme-dark .ac2-detail-table th { background: #262c3d; color: #e7eaf3; }
body.theme-dark .ac2-detail-table td.ac2-detail-strong { background: #16311c; color: #b5edbf; }
body.theme-dark .ac2-detail-table td.ac2-detail-muted { color: #8b93a7; }
body.theme-dark .ac2-detail-table tr.ac2-detail-total td { background: #2b2747; color: #cbb6f5; }

/* ---- Status pesan ---- */
body.theme-dark .period-status { color: #9aa3b8; }
body.theme-dark .period-status.ok { color: #74e08a; }
body.theme-dark .period-status.err { color: #ff9d9d; }

/* ---- Gerbang PIN allcycle2 ---- */
body.theme-dark .allcycle2-lockbox { background: #161b2a; border-color: #2c3446; }

/* ---- Tab "Valid EOM LM vs MTD TM" (soperf) ---- */
body.theme-dark .so-card { background: #161b2a; border-color: #2c3446; box-shadow: 0 12px 30px -20px rgba(0,0,0,0.8); }
body.theme-dark .soperf-search input { background: #232b3e; color: #e7eaf3; border-color: #3a445c; }
body.theme-dark .soperf-search input:focus { background: #29324a; }
body.theme-dark .soperf-block-head h3 { color: #f1f3f9; }
body.theme-dark .soperf-block-head .hint { color: #9aa3b8; }
/* Gradasi dibuat KALEM (bukan biru-cyan menyala) supaya adem di mata & serasi
   dengan tema gelap. Banner "BULAN LALU/BULAN INI" & hero disamakan nuansanya. */
body.theme-dark .soperf-hero {
  background: linear-gradient(135deg, #151b2b 0%, #1d2740 55%, #1b3242 100%);
  border: 1px solid #2c3446;
}
body.theme-dark .soperf-hero-glow { opacity: 0.35; }
body.theme-dark .so-card-banner {
  background: linear-gradient(90deg, #1b2236 0%, #263250 100%);
  color: #d6deef;
  border-bottom: 1px solid #2c3446;
}
body.theme-dark .so-card-banner span { opacity: 0.7; }
/* Baris tabel ranking & angka -- pastikan latar & teks gelap-terbaca */
body.theme-dark .so-modern-table th { background: #1c2334; color: #9aa3b8; border-color: #2c3446; }
body.theme-dark .so-modern-table td { border-color: #232b3c; color: #dfe4ef; }
body.theme-dark .so-modern-table tbody tr:nth-child(even) td { background: #141a28; }
body.theme-dark .so-modern-table tbody tr:hover td { background: #1e2740; }

/* ---- Kartu daftar customer per kategori ---- */
body.theme-dark .cust-card { background: #161b2a; border-color: #2c3446; box-shadow: 0 12px 28px -20px rgba(0,0,0,0.8); }
body.theme-dark .cust-card-body { color: #dfe4ef; }
body.theme-dark .namelist-so { color: #8b93a7; }
body.theme-dark .namelist-nomatch,
body.theme-dark #tab-soperf .namelist-empty { color: #8b93a7; }
body.theme-dark .cust-clickable:hover { color: #7cb0ff; }

/* ---- Modal detail customer (soperf) ---- */
body.theme-dark .cust-detail-modal { background: #1a2032; }
body.theme-dark .cust-detail-modal-body { color: #dfe4ef; }
body.theme-dark .cust-detail-row span,
body.theme-dark .cust-detail-highlight-item span { color: #9aa3b8; }
body.theme-dark .cust-detail-row,
body.theme-dark .cust-detail-highlight-item { border-color: #2c3446; }

/* ---- "Total Valid Bulan Lalu vs Bulan Ini" (kartu + modal) ---- */
body.theme-dark .valid-compare-card,
body.theme-dark .valid-compare-modal { background: #161b2a; border-color: #2c3446; }
body.theme-dark .valid-compare-track { background: #2a3040; }

/* ---- Tab "Tentang Project" ---- */
body.theme-dark #tab-tentang p,
body.theme-dark #tab-tentang li { color: #c4ccdb; }

/* ============================================================
   Monitoring All Cycle 2 -- Year-to-Date + 3 menu (By Source/Cabang/PE)
   ============================================================ */
.ac2-section-title {
  font-size: 17px; font-weight: 800; color: #3b0764; margin: 26px 0 6px; letter-spacing: 0.3px;
}
.ac2-section-title span { font-weight: 600; font-size: 13px; color: var(--text-muted); }

/* ---- Year-to-Date ---- */
.ac2-ytd-section { margin-top: 6px; }
.ac2-ytd-year-title { font-weight: 800; font-size: 14px; color: #3b0764; margin: 18px 0 8px; }
.ac2-ytd-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.ac2-ytd-inner { display: inline-block; min-width: 100%; vertical-align: top; }
.ac2-ytd-table { border-collapse: collapse; width: 100%; font-size: 12px; white-space: nowrap; min-width: 900px; }
.ac2-ytd-table th, .ac2-ytd-table td { border: 1px solid #e5e2ee; padding: 5px 8px; text-align: center; }
.ac2-ytd-table thead th { background: #f3f1fb; color: #3b0764; font-weight: 700; font-size: 11px; }
.ac2-ytd-table td.ac2-ytd-name, .ac2-ytd-table th.ac2-ytd-name { text-align: left; font-weight: 600; position: sticky; left: 0; background: #fff; z-index: 1; }
.ac2-ytd-table thead th.ac2-ytd-name { background: #f3f1fb; z-index: 2; }
.ac2-ytd-black { background: #111 !important; }
.ac2-ytd-strong { font-weight: 800; }
.ac2-ytd-total-row td { background: #e8f5e9; font-weight: 800; color: #14532d; }
.ac2-ytd-target-row td { background: #fff7e6; font-weight: 700; color: #7c5c05; }
.ac2-ytd-ach-row td { background: #eef2ff; font-weight: 700; }
.ac2-ach-good { color: #0b6b0f; }
.ac2-ach-bad { color: #b3261e; }
.ac2-ytd-input, .ac2-ytd-tinput { width: 52px; border: 1px solid var(--border); border-radius: 5px; padding: 3px 4px; font-size: 12px; text-align: center; font-family: inherit; }
.ac2-ytd-editable td.ac2-ytd-name { min-width: 150px; }

/* ---- 3 menu ---- */
.ac2-menu-section { margin-top: 26px; }
.ac2-menu-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ac2-menu-btn {
  border: 1px solid var(--border); background: #fff; color: var(--text-secondary);
  border-radius: 999px; padding: 9px 20px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: all .15s ease;
}
.ac2-menu-btn.active { background: linear-gradient(90deg, #4c1d95, #7c3aed); color: #fff; border-color: transparent; }
.ac2-mn-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: 0 10px 24px -18px rgba(59,7,100,0.35); }
.ac2-mn-title { font-weight: 800; font-size: 13.5px; color: #3b0764; margin-bottom: 10px; letter-spacing: 0.4px; }
.ac2-mn-wrap { overflow-x: auto; }
.ac2-mn-table { border-collapse: collapse; width: 100%; font-size: 12.5px; white-space: nowrap; }
.ac2-mn-table th, .ac2-mn-table td { border: 1px solid #e5e2ee; padding: 6px 12px; text-align: center; }
.ac2-mn-first { text-align: left !important; font-weight: 600; }
.ac2-mn-table thead th { font-weight: 700; font-size: 11px; color: #3b0764; }
.ac2-mn-lm { background: #eef2ff; }
.ac2-mn-tm { background: #e7f7f1; }
.ac2-mn-diff { background: #f5f0ff; }
.ac2-mn-join { color: var(--text-muted); font-weight: 400; font-size: 11px; }
.ac2-diff-pos { color: #0b6b0f; font-weight: 700; }
.ac2-diff-neg { color: #b3261e; font-weight: 700; }
.ac2-mn-total td { background: #ede7fb; font-weight: 800; color: #3b0764; }

/* ---- Dark theme untuk komponen di atas ---- */
body.theme-dark .ac2-section-title { color: #cbb6f5; }
body.theme-dark .ac2-ytd-year-title { color: #cbb6f5; }
body.theme-dark .ac2-ytd-wrap { border-color: #2c3446; }
body.theme-dark .ac2-ytd-table th, body.theme-dark .ac2-ytd-table td { border-color: #2f3648; color: #dfe4ef; }
body.theme-dark .ac2-ytd-table thead th { background: #262c3d; color: #e7eaf3; }
body.theme-dark .ac2-ytd-table td.ac2-ytd-name { background: #161b2a; }
body.theme-dark .ac2-ytd-table thead th.ac2-ytd-name { background: #262c3d; }
body.theme-dark .ac2-ytd-black { background: #05070c !important; }
body.theme-dark .ac2-ytd-total-row td { background: #16311c; color: #b5edbf; }
body.theme-dark .ac2-ytd-target-row td { background: #3a3320; color: #f3d581; }
body.theme-dark .ac2-ytd-ach-row td { background: #232744; }
body.theme-dark .ac2-ach-good { color: #74e08a; }
body.theme-dark .ac2-ach-bad { color: #ff9d9d; }
body.theme-dark .ac2-ytd-input, body.theme-dark .ac2-ytd-tinput { background: #232b3e; color: #e7eaf3; border-color: #3a445c; }
body.theme-dark .ac2-menu-btn { background: #1a2032; color: #aab3c7; border-color: #2c3446; }
body.theme-dark .ac2-menu-btn.active { background: linear-gradient(90deg, #5b3aa6, #7c3aed); color: #fff; border-color: transparent; }
body.theme-dark .ac2-mn-card { background: #161b2a; border-color: #2c3446; box-shadow: 0 12px 28px -20px rgba(0,0,0,0.8); }
body.theme-dark .ac2-mn-title { color: #cbb6f5; }
body.theme-dark .ac2-mn-table th, body.theme-dark .ac2-mn-table td { border-color: #2f3648; color: #dfe4ef; }
body.theme-dark .ac2-mn-table thead th { color: #e7eaf3; }
body.theme-dark .ac2-mn-lm { background: #24344f; }
body.theme-dark .ac2-mn-tm { background: #16332a; }
body.theme-dark .ac2-mn-diff { background: #2b2545; }
body.theme-dark .ac2-mn-total td { background: #2b2747; color: #cbb6f5; }
body.theme-dark .ac2-diff-pos { color: #74e08a; }
body.theme-dark .ac2-diff-neg { color: #ff9d9d; }
body.theme-dark .ac2-mn-join { color: #8b93a7; }

/* ============================================================
   TAB ANALITIK — Command Center (futuristik, self-contained)
   ============================================================ */
.analitik-panel {
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(34,211,238,0.10), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(167,139,250,0.12), transparent 55%),
    linear-gradient(180deg, #0a0e1a 0%, #0b1020 100%);
  color: #e6edf7; border-radius: 18px; padding: 26px 24px 34px !important;
  border: 1px solid rgba(120,150,220,0.14);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.04);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.anlt-hero { position: relative; margin-bottom: 22px; overflow: hidden; }
.anlt-hero-glow { position: absolute; top: -60px; left: -40px; width: 380px; height: 180px;
  background: radial-gradient(closest-side, rgba(34,211,238,0.30), transparent); filter: blur(20px); pointer-events: none; }
.anlt-eyebrow { position: relative; font-size: 12px; letter-spacing: 0.32em; color: #5eead4; font-weight: 700; }
.anlt-title { position: relative; font-size: 34px; font-weight: 900; letter-spacing: 1px; margin: 4px 0 4px;
  background: linear-gradient(90deg, #22d3ee, #a78bfa 60%, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent;
  /* text-fill-color menang atas override warna h2 tema gelap -> gradasi tetap tampil di kedua tema */
  -webkit-text-fill-color: transparent; }
.anlt-sub { position: relative; color: #93a4c3; font-size: 13.5px; margin: 0; }

.anlt-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 1100px){ .anlt-kpi-row{ grid-template-columns: repeat(2,1fr);} }
.anlt-kpi { position: relative; padding: 15px 16px 14px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border: 1px solid rgba(140,170,230,0.16); box-shadow: 0 10px 30px -18px rgba(0,0,0,0.7); }
.anlt-kpi::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; }
.anlt-kpi.k-cyan::before{ background:linear-gradient(90deg,#22d3ee,#0ea5b7); box-shadow:0 0 18px #22d3ee; }
.anlt-kpi.k-violet::before{ background:linear-gradient(90deg,#a78bfa,#7c3aed); box-shadow:0 0 18px #a78bfa; }
.anlt-kpi.k-green::before{ background:linear-gradient(90deg,#34d399,#059669); box-shadow:0 0 18px #34d399; }
.anlt-kpi.k-amber::before{ background:linear-gradient(90deg,#fbbf24,#d97706); box-shadow:0 0 18px #fbbf24; }
.anlt-kpi.k-pink::before{ background:linear-gradient(90deg,#f472b6,#db2777); box-shadow:0 0 18px #f472b6; }
.anlt-kpi-lab { font-size: 11.5px; color: #93a4c3; font-weight: 600; margin-bottom: 6px; }
.anlt-kpi-val { font-size: 30px; font-weight: 800; line-height: 1; color: #f4f8ff; }
.anlt-delta { display: inline-block; margin-top: 8px; font-size: 11px; color: #93a4c3; }
.anlt-delta.up { color: #34d399; } .anlt-delta.down { color: #fb7185; }

.anlt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 1000px){ .anlt-grid2{ grid-template-columns: 1fr; } }
.anlt-card { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(140,170,230,0.16); border-radius: 16px; padding: 16px 18px;
  /* backdrop-filter dihapus: bikin scroll patah-patah & tidak terlihat di atas panel gelap */
  box-shadow: 0 16px 40px -26px rgba(0,0,0,0.8); }
.anlt-card.anlt-wide { margin-bottom: 16px; }
.anlt-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.anlt-card-title { font-size: 14px; font-weight: 800; color: #dbe6f7; letter-spacing: 0.3px; }
.anlt-select { background: #131a2e; color: #dbe6f7; border: 1px solid rgba(140,170,230,0.25); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; cursor: pointer; }

/* Forecast ring */
.anlt-fc { display: flex; align-items: center; gap: 18px; }
.anlt-ring { width: 140px; height: 140px; flex: 0 0 auto; }
.anlt-ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 12; }
.anlt-ring-proj { fill: none; stroke: #fbbf24; stroke-width: 12; stroke-linecap: round; opacity: 0.45; }
.anlt-ring-act { fill: none; stroke: #22d3ee; stroke-width: 12; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(34,211,238,0.7)); transition: stroke-dasharray .6s ease; }
.anlt-ring-big { fill: #f4f8ff; font-size: 26px; font-weight: 800; text-anchor: middle; }
.anlt-ring-small { fill: #93a4c3; font-size: 10px; text-anchor: middle; letter-spacing: 0.5px; }
.anlt-fc-side { flex: 1; min-width: 0; }
.anlt-fc-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c6d2e8; padding: 3px 0; }
.anlt-fc-row b { margin-left: auto; color: #f4f8ff; font-size: 15px; }
.anlt-fc-row .dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-act { background: #22d3ee; box-shadow: 0 0 8px #22d3ee; }
.dot-proj { background: #fbbf24; } .dot-tgt { background: #93a4c3; }
.anlt-status { margin-top: 10px; font-size: 12.5px; line-height: 1.5; padding: 9px 11px; border-radius: 10px; border-left: 3px solid; }
.anlt-status.good { background: rgba(52,211,153,0.10); border-color: #34d399; color: #a7f3d0; }
.anlt-status.bad { background: rgba(251,113,133,0.10); border-color: #fb7185; color: #fecdd3; }
.anlt-status.warn { background: rgba(251,191,36,0.10); border-color: #fbbf24; color: #fde68a; }

/* Alerts */
.anlt-alerts { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.anlt-alert { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; padding: 9px 11px; border-radius: 10px; border-left: 3px solid; color: #d7e0f0; }
.anlt-alert .anlt-alert-ic { font-size: 11px; margin-top: 1px; }
.anlt-alert.bad { background: rgba(251,113,133,0.09); border-color: #fb7185; }
.anlt-alert.bad .anlt-alert-ic { color: #fb7185; }
.anlt-alert.warn { background: rgba(251,191,36,0.09); border-color: #fbbf24; }
.anlt-alert.warn .anlt-alert-ic { color: #fbbf24; }
.anlt-alert.good { background: rgba(52,211,153,0.08); border-color: #34d399; }
.anlt-alert.good .anlt-alert-ic { color: #34d399; }

/* Funnel */
.anlt-fn-row { display: grid; grid-template-columns: 190px 1fr 64px 64px 84px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.anlt-fn-head { font-size: 10.5px; letter-spacing: 0.5px; color: #7f8fb0; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.12); }
.anlt-fn-name { font-size: 12.5px; color: #e6edf7; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anlt-fn-bar { position: relative; height: 16px; background: rgba(255,255,255,0.05); border-radius: 6px; overflow: hidden; }
.anlt-bar-in { position: absolute; inset: 0 auto 0 0; height: 100%; background: linear-gradient(90deg, rgba(167,139,250,0.55), rgba(167,139,250,0.30)); border-radius: 6px; }
.anlt-bar-v { position: absolute; inset: 0 auto 0 0; height: 100%; background: linear-gradient(90deg, #22d3ee, #0ea5b7); border-radius: 6px; box-shadow: 0 0 10px rgba(34,211,238,0.5); }
.anlt-fn-num { text-align: right; font-size: 12.5px; color: #c6d2e8; font-variant-numeric: tabular-nums; }
.anlt-fn-num.strong { color: #67e8f9; font-weight: 700; }
.anlt-fn-conv { text-align: right; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.anlt-fn-conv.c-good { color: #34d399; } .anlt-fn-conv.c-mid { color: #fbbf24; } .anlt-fn-conv.c-bad { color: #fb7185; }
.anlt-flag { font-size: 10px; background: rgba(251,113,133,0.2); color: #fda4af; padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.anlt-flag.good { background: rgba(52,211,153,0.18); color: #6ee7b7; }

/* Aging */
.anlt-aging-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.anlt-aging-big { font-size: 30px; font-weight: 800; color: #67e8f9; }
.anlt-aging-big span { font-size: 14px; color: #93a4c3; font-weight: 600; }
.anlt-aging-cap { font-size: 12px; color: #93a4c3; }
.anlt-aging-list { display: flex; flex-direction: column; gap: 6px; }
.anlt-ag-row { display: grid; grid-template-columns: 180px 1fr 60px; gap: 10px; align-items: center; }
.anlt-ag-name { font-size: 12.5px; color: #dbe6f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anlt-ag-bar { height: 12px; background: rgba(255,255,255,0.05); border-radius: 5px; overflow: hidden; }
.anlt-ag-fill { height: 100%; background: linear-gradient(90deg, #22d3ee, #60a5fa); border-radius: 5px; }
.anlt-ag-fill.slow { background: linear-gradient(90deg, #fb7185, #f43f5e); }
.anlt-ag-fill.fast { background: linear-gradient(90deg, #34d399, #10b981); }
.anlt-ag-val { text-align: right; font-size: 12px; color: #c6d2e8; font-variant-numeric: tabular-nums; }
.anlt-note2 { font-size: 11.5px; color: #7f8fb0; margin: 10px 0 0; }

.anlt-empty { color: #93a4c3; font-size: 13px; padding: 14px; text-align: center; }
.anlt-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.anlt-btn { background: linear-gradient(90deg, #22d3ee, #7c3aed); color: #05121f; font-weight: 800; border: none; border-radius: 10px; padding: 11px 18px; font-size: 13px; cursor: pointer; box-shadow: 0 8px 24px -8px rgba(34,211,238,0.6); }
.anlt-btn:hover { filter: brightness(1.08); }
.anlt-note { font-size: 11.5px; color: #7f8fb0; }
.anlt-btn-ghost { background: rgba(120,160,220,0.10); color: #cfe0f7; box-shadow: none; border: 1px solid rgba(140,170,230,0.32); }
.anlt-btn-ghost:hover { background: rgba(120,160,220,0.18); filter: none; }
.anlt-tool-status { font-size: 12.5px; color: #93a4c3; margin: 8px 2px 0; min-height: 16px; }
.anlt-tool-status.ok { color: #5eead4; }
.anlt-tool-status.err { color: #fca5a5; }

/* ---- Panel Kualitas Data ---- */
.anlt-q-top { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.anlt-q-score { flex: 0 0 132px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 14px; padding: 14px 10px; border: 1px solid rgba(140,170,230,0.22); background: rgba(255,255,255,0.03); }
.anlt-q-score-num { font-size: 40px; font-weight: 800; line-height: 1; }
.anlt-q-score-lab { font-size: 11.5px; color: #93a4c3; margin-top: 6px; letter-spacing: 0.3px; }
.anlt-q-score.good .anlt-q-score-num { color: #34d399; }
.anlt-q-score.warn .anlt-q-score-num { color: #fbbf24; }
.anlt-q-score.bad .anlt-q-score-num { color: #f87171; }
.anlt-q-tiles { flex: 1 1 340px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.anlt-q-tile { border-radius: 12px; padding: 12px 12px; border: 1px solid rgba(140,170,230,0.18); background: rgba(255,255,255,0.025); }
.anlt-q-tile-v { font-size: 22px; font-weight: 800; color: #dbe6f7; }
.anlt-q-tile-l { font-size: 12.5px; color: #cbd6ea; font-weight: 700; margin-top: 2px; }
.anlt-q-tile-h { font-size: 11px; color: #7f8fb0; margin-top: 3px; }
.anlt-q-tile.ok { border-color: rgba(52,211,153,0.30); }
.anlt-q-tile.ok .anlt-q-tile-v { color: #34d399; }
.anlt-q-tile.warn { border-color: rgba(251,191,36,0.38); background: rgba(251,191,36,0.06); }
.anlt-q-tile.warn .anlt-q-tile-v { color: #fbbf24; }
.anlt-q-tile.bad { border-color: rgba(248,113,113,0.42); background: rgba(248,113,113,0.07); }
.anlt-q-tile.bad .anlt-q-tile-v { color: #f87171; }
.anlt-q-codes { margin-top: 14px; font-size: 12.5px; color: #cbd6ea; line-height: 1.9; }
.anlt-q-code { display: inline-block; background: rgba(251,191,36,0.12); color: #fcd34d; border: 1px solid rgba(251,191,36,0.3);
  padding: 2px 8px; border-radius: 999px; font-size: 12px; margin: 0 2px; }
.anlt-q-codehint { font-size: 11.5px; color: #7f8fb0; margin-top: 6px; line-height: 1.5; }
.anlt-q-detail { margin-top: 14px; overflow-x: auto; }
.anlt-q-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.anlt-q-table th, .anlt-q-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid rgba(140,170,230,0.14); color: #cbd6ea; }
.anlt-q-table th { color: #93a4c3; font-weight: 700; font-size: 11.5px; letter-spacing: 0.3px; }
.anlt-q-table th:first-child, .anlt-q-table td:first-child { text-align: left; color: #dbe6f7; }

/* ---- Pengaturan Ambang Alarm ---- */
.anlt-set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.anlt-set-field { display: flex; flex-direction: column; gap: 5px; }
.anlt-set-lab { font-size: 12.5px; color: #cbd6ea; font-weight: 700; }
.anlt-set-inp { background: #131a2e; color: #eaf1fb; border: 1px solid rgba(140,170,230,0.28); border-radius: 9px;
  padding: 9px 11px; font-size: 14px; font-weight: 700; width: 100%; box-sizing: border-box; }
.anlt-set-inp:focus { outline: none; border-color: #22d3ee; box-shadow: 0 0 0 2px rgba(34,211,238,0.18); }
.anlt-set-hint { font-size: 11px; color: #7f8fb0; line-height: 1.4; }
.anlt-set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.anlt-set-pin { background: #131a2e; color: #eaf1fb; border: 1px solid rgba(140,170,230,0.28); border-radius: 9px;
  padding: 9px 12px; font-size: 13px; width: 170px; box-sizing: border-box; }
.anlt-set-pin:focus { outline: none; border-color: #22d3ee; box-shadow: 0 0 0 2px rgba(34,211,238,0.18); }
.anlt-set-status { font-size: 12.5px; color: #93a4c3; }
.anlt-set-status.ok { color: #5eead4; }
.anlt-set-status.err { color: #fca5a5; }

/* ---- Ritme Harian (grafik garis) ---- */
.anlt-rt-wrap { position: relative; width: 100%; }
.anlt-rt-svg { width: 100%; height: auto; display: block; overflow: visible; }
.anlt-rt-grid { stroke: rgba(140,170,230,0.12); stroke-width: 1; }
.anlt-rt-axis { stroke: rgba(140,170,230,0.35); stroke-width: 1; }
.anlt-rt-ylab { fill: #7f8fb0; font-size: 12px; text-anchor: end; }
.anlt-rt-xlab { fill: #7f8fb0; font-size: 12px; text-anchor: middle; }
.anlt-rt-valid { fill: none; stroke: #22d3ee; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.anlt-rt-in { fill: none; stroke: #a78bfa; stroke-width: 2.4; stroke-dasharray: 6 4; stroke-linejoin: round; stroke-linecap: round; }
.anlt-rt-dot-valid { fill: #22d3ee; stroke: #0e1424; stroke-width: 1; }
.anlt-rt-dot-in { fill: #a78bfa; stroke: #0e1424; stroke-width: 1; }
.anlt-rt-cross { stroke: rgba(255,255,255,0.35); stroke-width: 1; stroke-dasharray: 3 3; }
.anlt-rt-tip { position: absolute; z-index: 5; pointer-events: none; background: rgba(14,20,36,0.97);
  border: 1px solid rgba(34,211,238,0.4); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; color: #e6edf7;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.8); min-width: 96px; }
.anlt-rt-tip b { color: #7fe9f5; }
.anlt-rt-tip .anlt-rt-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.anlt-rt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 10px; font-size: 12.5px; color: #cbd6ea; }
.anlt-rt-lg { display: inline-flex; align-items: center; gap: 6px; }
.anlt-rt-lg-note { color: #7f8fb0; font-size: 11.5px; }
.anlt-rt-sw { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.anlt-rt-sw.v { background: #22d3ee; }
.anlt-rt-sw.i { background: #a78bfa; }
.anlt-rt-tip .anlt-rt-sw.v, .anlt-rt-tip .anlt-rt-sw.i { width: 10px; height: 10px; }

/* ---- Drill-down rincian customer ---- */
.anlt-fn-hint { font-size: 10.5px; color: #7f8fb0; font-weight: 500; letter-spacing: 0; }
.anlt-fn-click { cursor: pointer; border-radius: 8px; transition: background 0.12s ease; }
.anlt-fn-click:hover { background: rgba(34,211,238,0.08); }
.anlt-fn-mag { opacity: 0; font-size: 11px; margin-left: 4px; transition: opacity 0.12s ease; }
.anlt-fn-click:hover .anlt-fn-mag { opacity: 0.8; }
.anlt-drill-overlay { display: none; position: fixed; inset: 0; z-index: 4100;
  background: rgba(6,10,22,0.82); /* blur dihapus (jank) */ padding: 20px; overflow-y: auto; }
.anlt-drill-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
.anlt-drill-box { position: relative; width: 100%; max-width: 1000px; margin: 24px auto;
  background: linear-gradient(180deg, #141b2e, #0e1424); color: #e6edf7;
  border: 1px solid rgba(34,211,238,0.28); border-radius: 16px; padding: 22px 22px 24px;
  box-shadow: 0 30px 80px -24px rgba(0,0,0,0.85); }
.anlt-drill-box h3 { margin: 0 34px 12px 0; font-size: 18px; font-weight: 800;
  background: linear-gradient(90deg,#22d3ee,#a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.anlt-drill-lead { font-size: 13px; color: #cbd6ea; margin: 6px 0 14px; line-height: 1.5; }
.anlt-drill-pinrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.anlt-drill-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 8px; }
.anlt-drill-count { font-size: 13px; font-weight: 700; color: #dbe6f7; }
.anlt-drill-toggle { font-size: 12px; color: #a9b6d0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.anlt-btn-sm { padding: 6px 12px; font-size: 12px; }
.anlt-drill-warn { font-size: 11.5px; color: #fcd34d; background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.22); border-radius: 8px; padding: 7px 10px; margin: 0 0 14px; }
.anlt-drill-sec { margin-top: 16px; }
.anlt-drill-sec-h { font-size: 13px; font-weight: 800; margin-bottom: 8px; padding-left: 10px; border-left: 3px solid #22d3ee; }
.anlt-drill-sec-h.i { border-left-color: #a78bfa; }
.anlt-drill-sec-h span { color: #93a4c3; font-weight: 600; font-size: 12px; }
.anlt-drill-tablewrap { overflow-x: auto; border: 1px solid rgba(140,170,230,0.14); border-radius: 10px; }
.anlt-drill-table { border-collapse: collapse; font-size: 12px; width: 100%; white-space: nowrap; }
.anlt-drill-table th, .anlt-drill-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid rgba(140,170,230,0.1); }
.anlt-drill-table th { color: #7fd8e6; font-weight: 700; font-size: 11px; background: rgba(255,255,255,0.03);
  position: sticky; top: 0; letter-spacing: 0.3px; }
.anlt-drill-table td { color: #cbd6ea; }
.anlt-drill-table tr:hover td { background: rgba(255,255,255,0.02); }

/* ---- Tren & Riwayat + YoY ---- */
.anlt-arsip-pinrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.anlt-yoy { margin-top: 16px; }
.anlt-yoy-h { font-size: 13px; font-weight: 800; color: #dbe6f7; margin-bottom: 8px; }
.anlt-yoy-table { border-collapse: collapse; font-size: 13px; min-width: 320px; }
.anlt-yoy-table th, .anlt-yoy-table td { padding: 7px 14px 7px 0; text-align: left; border-bottom: 1px solid rgba(140,170,230,0.12); }
.anlt-yoy-table th { color: #93a4c3; font-weight: 700; font-size: 11.5px; }
.anlt-yoy-table td { color: #cbd6ea; }
.anlt-yoy-d.up { color: #34d399; }
.anlt-yoy-d.down { color: #f87171; }

@media print {
  .tab-nav, header.hero, footer, .anlt-actions, .theme-toggle, #anlt-settings, #anlt-tool-status { display: none !important; }
  .analitik-panel { background: #fff !important; color: #111 !important; box-shadow: none !important; border: none !important; }
  .anlt-title { color: #111 !important; -webkit-text-fill-color: #111; }
  .anlt-card, .anlt-kpi { break-inside: avoid; }
}

/* Info button (i) + popup penjelasan di tab Analitik */
.anlt-kpi[data-info], .anlt-card [data-info] { cursor: pointer; }
.anlt-kpi[data-info] { position: relative; }
.anlt-info-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; padding: 0; margin-left: 6px;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 12px; line-height: 1;
  color: #a9c7e6; background: rgba(120,160,220,0.16); border: 1px solid rgba(140,170,230,0.4);
  cursor: pointer; vertical-align: middle; transition: all 0.15s ease; flex: 0 0 auto;
}
.anlt-info-ic:hover { background: #22d3ee; color: #05121f; border-color: #22d3ee; box-shadow: 0 0 10px rgba(34,211,238,0.6); }
.anlt-kpi .anlt-info-ic { position: absolute; top: 11px; right: 12px; margin: 0; }
.anlt-kpi[data-info]:hover { border-color: rgba(34,211,238,0.5); box-shadow: 0 10px 30px -14px rgba(34,211,238,0.45); }

.anlt-info-overlay {
  display: none; position: fixed; inset: 0; z-index: 4000;
  background: rgba(6,10,22,0.78); /* blur dihapus (jank) */ padding: 24px; overflow-y: auto;
}
.anlt-info-overlay.open { display: flex; align-items: center; justify-content: center; }
.anlt-info-box {
  position: relative; width: 100%; max-width: 520px; margin: auto;
  background: linear-gradient(180deg, #141b2e, #0e1424); color: #e6edf7;
  border: 1px solid rgba(34,211,238,0.28); border-radius: 16px; padding: 22px 24px 24px;
  box-shadow: 0 30px 80px -24px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.anlt-info-box h3 { margin: 0 30px 14px 0; font-size: 19px; font-weight: 800;
  background: linear-gradient(90deg,#22d3ee,#a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.anlt-info-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #cdd8ea; font-size: 20px; line-height: 1; cursor: pointer; }
.anlt-info-close:hover { background: rgba(255,255,255,0.14); }
.anlt-info-sec { margin-top: 12px; }
.anlt-info-h { font-size: 12px; letter-spacing: 0.4px; color: #5eead4; font-weight: 700; margin-bottom: 5px; }
.anlt-info-sec > div:last-child { font-size: 13.5px; line-height: 1.65; color: #cbd6ea; }
.anlt-info-sec .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
  background: rgba(34,211,238,0.10); color: #7fe9f5; padding: 2px 7px; border-radius: 6px; display: inline-block; margin: 2px 0; }
@media print { .anlt-info-overlay { display: none !important; } .anlt-info-ic { display: none !important; } }

/* ============================================================
   TAMPILAN MOBILE (Paket D) — supaya nyaman dibuka dari HP.
   Fokus: navigasi tab bisa digeser, KPI menumpuk, kartu Analitik
   & tabel tidak melebar keluar layar, modal drill-down pas layar.
   ============================================================ */
@media (max-width: 720px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  /* Navigasi tab: geser horizontal daripada mepet/terpotong */
  .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 0; scrollbar-width: thin; }
  .tab-nav::-webkit-scrollbar { height: 4px; }
  .tab-btn { padding: 11px 13px; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
  /* Analitik */
  .analitik-panel { padding-left: 2px; padding-right: 2px; }
  .anlt-title { font-size: 30px; }
  .anlt-kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .anlt-kpi { padding: 12px 12px; }
  .anlt-kpi-val { font-size: 26px; }
  .anlt-card { padding: 14px 12px; }
  .anlt-grid2 { grid-template-columns: 1fr; }
  .anlt-q-top { flex-direction: column; }
  .anlt-q-score { flex-basis: auto; width: 100%; flex-direction: row; gap: 14px; justify-content: flex-start; align-items: center; padding: 12px 14px; }
  .anlt-q-tiles { grid-template-columns: 1fr 1fr; }
  .anlt-set-grid { grid-template-columns: 1fr 1fr; }
  .anlt-actions { flex-direction: column; align-items: stretch; }
  .anlt-actions .anlt-btn { width: 100%; }
  .anlt-set-actions { flex-direction: column; align-items: stretch; }
  .anlt-set-pin, .anlt-set-actions .anlt-btn { width: 100%; box-sizing: border-box; }
  .anlt-fn-hint { display: none; }
  /* Funnel: rapatkan kolom biar muat di layar HP (tidak melebar keluar) */
  .anlt-fn-row { grid-template-columns: 92px 1fr 34px 40px 46px; gap: 6px; }
  .anlt-fn-name { font-size: 11px; }
  .anlt-fn-num, .anlt-fn-conv { font-size: 11px; }
  .anlt-fn-mag { display: none; }
  .anlt-drill-box { padding: 16px 12px; margin: 10px auto; max-width: 100%; }
  .anlt-info-box { padding: 18px 16px 20px; }
  /* modal popup penjelasan & drill: beri ruang scroll di layar pendek */
  .anlt-info-overlay, .anlt-drill-overlay { padding: 12px; }
}
@media (max-width: 430px) {
  .anlt-kpi-row { grid-template-columns: 1fr; }
  .anlt-q-tiles { grid-template-columns: 1fr; }
  .anlt-set-grid { grid-template-columns: 1fr; }
  .anlt-title { font-size: 25px; }
  .anlt-rt-legend { gap: 10px; }
}

/* ============================================================
   TAB ANALITIK PE — komponen khusus (mewarisi tema .analitik-panel)
   ============================================================ */
/* Pakai background-IMAGE (longhand), bukan shorthand !important — shorthand me-reset
   background-clip ke border-box sehingga gradasi menutup kotak & teksnya hilang. */
.pe-title { background-image: linear-gradient(90deg, #34d399, #22d3ee 55%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pe-hero .anlt-hero-glow { background: radial-gradient(closest-side, rgba(52,211,153,0.20), transparent 70%); }

/* Tabel pencapaian per anggota */
.pe-mtable { display: flex; flex-direction: column; }
.pe-mrow { display: grid; grid-template-columns: 1.6fr 66px 66px 1.5fr 60px 60px; gap: 10px; align-items: center; padding: 9px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pe-mhead { font-size: 11px; letter-spacing: 0.4px; color: #93a4c3; font-weight: 700; border-bottom: 1px solid rgba(140,170,230,0.25); }
.pe-mname { font-size: 13px; color: #e6edf7; font-weight: 600; }
.pe-mnum { text-align: right; font-size: 13px; color: #c6d2e8; font-variant-numeric: tabular-nums; }
.pe-mnum.strong { color: #67e8f9; font-weight: 800; }
.pe-mmove { text-align: right; }
.pe-mbar { min-width: 0; }
.pe-achv-bar { position: relative; height: 18px; background: rgba(255,255,255,0.06); border-radius: 6px; overflow: hidden; }
.pe-achv-fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 6px; }
.pe-achv-fill.ok { background: linear-gradient(90deg,#059669,#34d399); }
.pe-achv-fill.mid { background: linear-gradient(90deg,#d97706,#fbbf24); }
.pe-achv-fill.low { background: linear-gradient(90deg,#dc2626,#f87171); }
.pe-achv-lab { position: absolute; right: 8px; top: 0; line-height: 18px; font-size: 11px; font-weight: 800; color: #eaf1fb; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.pe-achv-na { font-size: 11px; color: #7f8fb0; }
.pe-mrow.pe-below { background: rgba(248,113,113,0.06); }
.pe-mrow.pe-below .pe-mname { color: #fca5a5; }
.pe-mrow.pe-resign { opacity: 0.62; }

/* Pola setoran (race) */
.pe-race-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; font-size: 12px; color: #cbd6ea; }
.pe-race-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pe-race-sw, .pe-race-seg { display: inline-block; }
.pe-race-sw { width: 12px; height: 12px; border-radius: 3px; }
.pe-race-sw.s1, .pe-race-seg.s1 { background: #22d3ee; }
.pe-race-sw.s2, .pe-race-seg.s2 { background: #a78bfa; }
.pe-race-sw.s3, .pe-race-seg.s3 { background: #fbbf24; }
.pe-race-row { display: grid; grid-template-columns: 1.4fr 3fr 90px; gap: 12px; align-items: center; padding: 6px 0; }
.pe-race-name { font-size: 12.5px; color: #dbe6f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-race-bar { display: flex; height: 16px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,0.05); }
.pe-race-seg { height: 100%; }
.pe-race-seg.s1 { border-radius: 6px 0 0 6px; }
.pe-race-seg.s3 { border-radius: 0 6px 6px 0; }
.pe-race-nums { text-align: right; font-size: 11.5px; color: #93a4c3; font-variant-numeric: tabular-nums; }
.pe-race-team { border-bottom: 1px dashed rgba(140,170,230,0.3); padding-bottom: 10px; margin-bottom: 6px; }
.pe-race-team .pe-race-name { color: #67e8f9; font-weight: 800; }

/* Kontribusi per produk */
.pe-prod-list { display: flex; flex-direction: column; gap: 9px; }
.pe-prod-row { display: grid; grid-template-columns: 1fr 2.2fr auto; gap: 12px; align-items: center; }
.pe-prod-name { font-size: 12.5px; color: #dbe6f7; font-weight: 600; }
.pe-prod-track { height: 14px; background: rgba(255,255,255,0.05); border-radius: 6px; overflow: hidden; }
.pe-prod-fill { height: 100%; background: linear-gradient(90deg,#22d3ee,#34d399); border-radius: 6px; }
.pe-prod-val { font-size: 12.5px; color: #c6d2e8; font-variant-numeric: tabular-nums; }
.pe-prod-val span { color: #7f8fb0; font-size: 11px; }

.pe-fu-period{ font-size:11px; font-weight:700; color:#9fb0d0; background:rgba(255,255,255,.06); padding:2px 9px; border-radius:20px; }
.pe-fu-table{ display:flex; flex-direction:column; }
.pe-fu-row{ display:grid; grid-template-columns:1.6fr repeat(auto-fit,minmax(70px,1fr)); gap:10px; align-items:center; padding:9px 6px; border-bottom:1px solid rgba(255,255,255,.05); }
.pe-fu-head{ font-size:11px; letter-spacing:.4px; color:#93a4c3; font-weight:700; border-bottom:1px solid rgba(140,170,230,.25); }
.pe-fu-name{ font-size:12.5px; color:#dbe6f7; font-weight:600; }
.pe-fu-num{ text-align:right; font-size:12.5px; color:#c6d2e8; font-variant-numeric:tabular-nums; }
.pe-fu-num.strong{ color:#67e8f9; font-weight:800; }
.pe-fu-team{ background:rgba(103,232,249,.05); border-top:1px dashed rgba(103,232,249,.25); }
.pe-fu-team .pe-fu-name{ color:#67e8f9; font-weight:800; }

.pe-ratio-list{ display:flex; flex-direction:column; gap:10px; }
.pe-ratio-row{ display:grid; grid-template-columns:1fr 2fr auto auto; gap:12px; align-items:center; }
.pe-ratio-name{ font-size:12.5px; color:#dbe6f7; font-weight:600; }
.pe-ratio-bar{ position:relative; height:18px; background:rgba(255,255,255,.05); border-radius:6px; overflow:hidden; }
.pe-ratio-fill{ position:absolute; inset:0 auto 0 0; height:100%; border-radius:6px; background:linear-gradient(90deg,#5aa0ff,#8fc2ff); }
.pe-ratio-fill.ok{ background:linear-gradient(90deg,#059669,#34d399); }
.pe-ratio-fill.mid{ background:linear-gradient(90deg,#d97706,#fbbf24); }
.pe-ratio-fill.low{ background:linear-gradient(90deg,#dc2626,#f87171); }
.pe-ratio-lab{ position:absolute; right:8px; top:0; line-height:18px; font-size:10.5px; font-weight:700; color:#eaf1fb; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.pe-ratio-valid{ font-size:12px; color:#9ee6b8; font-weight:700; white-space:nowrap; }
.pe-ratio-rasio{ font-size:11.5px; color:#93a4c3; white-space:nowrap; }

@media (max-width: 720px) {
  /* HP: sembunyikan kolom TARGET (nth-3) & GERAK (nth-6); sisakan Nama, VALID, Achievement, Konv */
  .pe-mrow { grid-template-columns: 1.3fr 48px 1.5fr 46px; }
  .pe-mrow > :nth-child(3), .pe-mrow > :nth-child(6) { display: none; }
  .pe-race-row { grid-template-columns: 1fr 2fr; }
  .pe-race-nums { display: none; }
  .pe-prod-row { grid-template-columns: 1fr 1.6fr auto; }
  .pe-ratio-row{ grid-template-columns:1fr; gap:4px; }
  .pe-ratio-valid,.pe-ratio-rasio{ white-space:normal; }
}

/* ---- Root Cause (kenapa naik/turun) ---- */
.anlt-rc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.anlt-rc-big { font-size: 26px; font-weight: 800; }
.anlt-rc-big.up { color: #34d399; }
.anlt-rc-big.down { color: #f87171; }
.anlt-rc-big.flat { color: #93a4c3; }
.anlt-rc-cap { font-size: 13px; color: #93a4c3; }
.anlt-rc-cap b { color: #dbe6f7; }
.anlt-rc-narr { font-size: 13.5px; color: #e6edf7; line-height: 1.6; background: rgba(255,255,255,0.03);
  border-left: 3px solid #22d3ee; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.anlt-rc-list { display: flex; flex-direction: column; gap: 7px; }
.anlt-rc-row { display: grid; grid-template-columns: 1.4fr 2.4fr 62px 78px; gap: 10px; align-items: center; }
.anlt-rc-name { font-size: 12.5px; color: #dbe6f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anlt-rc-track { height: 14px; background: rgba(255,255,255,0.05); border-radius: 6px; position: relative; overflow: hidden; }
.anlt-rc-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; }
.anlt-rc-fill.up { background: linear-gradient(90deg,#059669,#34d399); }
.anlt-rc-fill.down { background: linear-gradient(90deg,#dc2626,#f87171); }
.anlt-rc-fill.flat { background: #475569; }
.anlt-rc-delta { text-align: right; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.anlt-rc-delta.up { color: #34d399; }
.anlt-rc-delta.down { color: #f87171; }
.anlt-rc-delta.flat { color: #93a4c3; }
.anlt-rc-sub { text-align: right; font-size: 11px; color: #7f8fb0; font-variant-numeric: tabular-nums; }

/* ---- Kalkulator Target (pacing) ---- */
.anlt-pace-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.anlt-pace-lab { font-size: 13px; color: #cbd6ea; font-weight: 700; }
.anlt-pace-inp { background: #131a2e; color: #eaf1fb; border: 1px solid rgba(140,170,230,0.28); border-radius: 9px;
  padding: 9px 12px; font-size: 15px; font-weight: 800; width: 130px; }
.anlt-pace-inp:focus { outline: none; border-color: #22d3ee; box-shadow: 0 0 0 2px rgba(34,211,238,0.18); }
.anlt-pace-note { font-size: 11.5px; color: #7f8fb0; }
.anlt-pace-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.anlt-pace-tile { border: 1px solid rgba(140,170,230,0.18); border-top: 3px solid #22d3ee; border-radius: 12px; padding: 12px; background: rgba(255,255,255,0.025); }
.anlt-pace-tile.k-amber { border-top-color: #fbbf24; }
.anlt-pace-tile.k-pink { border-top-color: #f472b6; }
.anlt-pace-tile.k-green { border-top-color: #34d399; }
.anlt-pace-tile.k-cyan { border-top-color: #22d3ee; }
.anlt-pace-v { font-size: 24px; font-weight: 800; color: #eaf1fb; }
.anlt-pace-l { font-size: 12px; color: #cbd6ea; margin-top: 2px; }
.anlt-pace-s { font-size: 11px; color: #7f8fb0; margin-top: 2px; }
.anlt-pace-barwrap { margin: 4px 0 16px; }
.anlt-pace-bar { position: relative; height: 22px; background: rgba(255,255,255,0.06); border-radius: 7px; overflow: hidden; }
.anlt-pace-fill { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg,#22d3ee,#34d399); border-radius: 7px; }
.anlt-pace-ideal { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,0.8); transform: translateX(-1px); }
.anlt-pace-baxis { position: relative; height: 16px; margin-top: 5px; font-size: 11px; color: #7f8fb0; }
.anlt-pace-baxis > span:first-child { position: absolute; left: 0; }
.anlt-pace-baxis > span:last-child { position: absolute; right: 0; color: #cbd6ea; }
.anlt-pace-idlab { position: absolute; transform: translateX(-50%); color: #fcd34d; white-space: nowrap; }
@media (max-width: 720px) {
  .anlt-rc-row { grid-template-columns: 1.2fr 1.6fr 52px; }
  .anlt-rc-sub { display: none; }
  .anlt-pace-idlab { font-size: 10px; }
}

/* Catatan kode tak dikenal di popup By Source */
.ac2-mn-note { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary);
  background: var(--yellow-tint); border: 1px solid #f0d48a; border-radius: 8px; padding: 10px 12px; }
.ac2-mn-code { display: inline-block; background: #fff; border: 1px solid #e6c877; color: #92400e;
  border-radius: 999px; padding: 1px 8px; font-size: 11.5px; margin: 0 2px; white-space: nowrap; }
body.theme-dark .ac2-mn-note { background: #3a3320; border-color: #6b5a2a; color: #e8dcc0; }
body.theme-dark .ac2-mn-code { background: #241f14; border-color: #6b5a2a; color: #f3d581; }

/* ============================================================
   PERBAIKAN TEMA (audit 2 background) — ditaruh PALING BAWAH supaya
   menang dari aturan tema di atasnya.
   ============================================================ */
/* Judul gradasi Analitik/PE: jangan sampai warna h2 tema gelap menimpanya */
body.theme-dark .anlt-title, body.theme-dark .pe-title { color: transparent; -webkit-text-fill-color: transparent; }

/* Baris benchmark rata-rata (menu Valid EOM LM vs MTD TM) — versi gelap */
body.theme-dark .so-bench { background: #1c2740; border-bottom-color: #2c3446; color: #aab3c7; }
body.theme-dark .so-bench-item b { color: #e7eaf3; }
body.theme-dark .so-bench-hint { color: #7f8aa0; }

/* Ticket Size & ASR relatif rata-rata — warna khusus gelap (aturan td tema
   menimpa warna terangnya, jadi ditegaskan ulang di sini) */
body.theme-dark .so-modern-table td.so-above { color: #4ade80; font-weight: 700; }
body.theme-dark .so-modern-table td.so-below { color: #f3b458; }

/* Hover baris ranking: jangan pakai biru muda terang di tema gelap */
body.theme-dark .so-modern-table tbody tr.so-row-click:hover { background: transparent; }
body.theme-dark .so-modern-table tbody tr.so-row-click:hover td { background: #1e2740; }

/* Badge "BARU" pergerakan peringkat — versi gelap */
body.theme-dark .so-move.new { background: rgba(59,130,246,0.22); color: #93c5fd; }

/* Chip periode di modal rincian SO — versi gelap */
body.theme-dark .so-drill-period { background: rgba(59,130,246,0.2); color: #93c5fd; }

/* Tombol +/- buka-tutup tabel VALID/IN — versi gelap */
body.theme-dark .ac2-toggle-btn { background: #232b3e; color: #cdd4e3; border-color: #3a445c; }
body.theme-dark .ac2-toggle-btn:hover { background: #2c3650; }

/* ------------------------------------------------------------
   PERBAIKAN TEMA GELAP — baris customer di tab "Input Data"
   (MOB 3 Ex-Booking & F9PD). Di tema terang latarnya #f4f4f1 (abu muda)
   dan hijau #c6e0b4 untuk yang "Lunas". Tanpa override ini, di tema gelap
   kotaknya tetap putih sementara tulisannya jadi terang -> nama customer
   nyaris tak terlihat (persis keluhan Bapak). Di sini kita gelapkan kotak
   & terangkan tulisannya.
   ------------------------------------------------------------ */
body.theme-dark .mob3-customer-list li { background: #1e2740; color: #e7eaf3; }
body.theme-dark .mob3-customer-list li span.mob3-name { color: #e7eaf3; }
body.theme-dark .mob3-customer-list li.paid { background: #24422b; }
body.theme-dark .mob3-customer-list li.paid span.mob3-name { color: #b7f7c4; }
body.theme-dark .mob3-customer-list li label { color: #aab3c7; }
body.theme-dark .mob3-remove-btn { color: #cdd4e3; border-color: #3a445c; }
body.theme-dark .mob3-remove-btn:hover { border-color: #f87171; color: #f87171; }
/* Badge "Lunas" (dipakai juga di ringkasan) — versi gelap */
body.theme-dark .mob3-paid-badge { background: #24422b; color: #b7f7c4; }

/* ------------------------------------------------------------
   SCROLLBAR versi gelap — supaya track scrollbar tidak tampil putih
   terang (yang bikin kartu daftar customer "Bulan Lalu" terlihat aneh
   ada strip putih di tema gelap). Berlaku untuk semua area yang bisa
   di-scroll saat tema gelap aktif.
   ------------------------------------------------------------ */
body.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
body.theme-dark ::-webkit-scrollbar-track { background: #131a28; }
body.theme-dark ::-webkit-scrollbar-thumb { background: #2c3446; border-radius: 6px; border: 2px solid #131a28; }
body.theme-dark ::-webkit-scrollbar-thumb:hover { background: #3a445c; }
body.theme-dark * { scrollbar-color: #2c3446 #131a28; }

/* ===================================================================
   MENU "STRATEGI & KENDALI" — Ruang Komando Supervisor (tema MATAHARI)
   Ditulis ulang total agar rapi, modern, dan lapang (v2).
   =================================================================== */
.sk-panel{ --sk-gold:#ffb347; --sk-gold2:#ff9330; --sk-ink:#eaf1ff; --sk-ink2:#a7b6d4;
  --sk-line:rgba(150,178,232,.14); --sk-card:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); }

/* ---------- Kartu dasar khusus menu ini (lebih modern, tak "kotak jadul") ---------- */
.sk-panel .anlt-card{ background:var(--sk-card); border:1px solid var(--sk-line); border-radius:18px;
  padding:18px 20px; margin-bottom:16px; box-shadow:0 22px 55px -34px rgba(0,0,0,.9); }
.sk-panel .anlt-wide{ margin-bottom:16px; }
.sk-panel .anlt-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.sk-panel .anlt-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(150,178,232,.10); }
.sk-panel .anlt-card-title{ font-size:14.5px; font-weight:800; color:#eef4ff; letter-spacing:.2px; display:flex; align-items:center; gap:8px; }
.sk-panel .anlt-note2{ font-size:11.5px; color:#8296b6; margin:12px 0 0; line-height:1.55; }
.sk-panel .anlt-empty{ color:#9fb0d0; font-size:13px; padding:22px; text-align:center; }

/* ---------- KPI cards (dirapikan, rata, aksen atas tipis) ---------- */
.sk-panel .anlt-kpi-row{ display:grid; gap:14px; margin-bottom:18px; }
#sk-pipe-kpis{ grid-template-columns:repeat(5,1fr); }
#sk-team-kpis{ grid-template-columns:repeat(4,1fr); }
.sk-panel .anlt-kpi{ position:relative; padding:16px 16px 15px; border-radius:15px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--sk-line);
  box-shadow:0 16px 40px -30px rgba(0,0,0,.8); }
.sk-panel .anlt-kpi::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px; opacity:.95; }
.sk-panel .anlt-kpi-lab{ font-size:11px; color:#93a4c3; font-weight:700; margin-bottom:8px; letter-spacing:.02em; line-height:1.3; }
.sk-panel .anlt-kpi-val{ font-size:29px; font-weight:800; line-height:1; color:#f6f9ff; }
.sk-panel .anlt-delta{ display:inline-block; margin-top:9px; font-size:11px; color:#8ea2c4; font-weight:600; }
.sk-panel .anlt-delta.up{ color:#6ee7b7; } .sk-panel .anlt-delta.down{ color:#fca5a5; }

/* ---------- Ring proyeksi (samakan proporsi) ---------- */
.sk-panel .anlt-fc{ display:flex; gap:18px; align-items:center; }
.sk-panel .anlt-ring{ width:150px; height:150px; flex:none; }
.sk-panel .anlt-fc-side{ flex:1; min-width:0; }
.sk-panel .anlt-fc-row{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:#c4d1ec; padding:4px 0; }
.sk-panel .anlt-fc-row b{ margin-left:auto; color:#fff; font-weight:800; font-size:14px; }
.sk-panel .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.sk-panel .dot-act{ background:#22d3ee; } .sk-panel .dot-proj{ background:#fbbf24; } .sk-panel .dot-tgt{ background:#94a3c7; }
.sk-panel .anlt-status{ margin-top:11px; font-size:12.5px; line-height:1.55; padding:10px 12px; border-radius:11px; border-left:3px solid; }
.sk-panel .anlt-status.good{ background:rgba(52,211,153,.10); border-color:#34d399; color:#b6f2d8; }
.sk-panel .anlt-status.bad{ background:rgba(248,113,113,.10); border-color:#f87171; color:#fecdd3; }
.sk-panel .anlt-status.warn{ background:rgba(251,191,36,.10); border-color:#fbbf24; color:#fde9b0; }

/* =========================== GERBANG PIN =========================== */
.sk-gate{ display:flex; align-items:center; justify-content:center; min-height:66vh; padding:34px 16px; }
.sk-gate-box{ position:relative; max-width:460px; width:100%; text-align:center; padding:34px 30px 30px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,150,50,.10), rgba(20,26,42,.55) 60%);
  border:1px solid rgba(255,175,90,.28); border-radius:26px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 70px -26px rgba(255,160,60,.5); }
.sk-gate-planet{ width:132px; height:132px; margin:0 auto 14px; }
.sk-gate-planet img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 26px rgba(255,150,50,.6)); animation:skSun 7s ease-in-out infinite alternate; }
@keyframes skSun{ from{ transform:translateY(-5px) scale(.99);} to{ transform:translateY(5px) scale(1.02);} }
.sk-gate-kicker{ font-size:11px; letter-spacing:.3em; color:#ffc061; font-weight:800; }
.sk-gate-title{ font-size:29px; font-weight:900; margin:5px 0 10px; letter-spacing:.01em;
  background:linear-gradient(90deg,#ffe0a3,#ff9d3c); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sk-gate-lead{ font-size:13px; line-height:1.65; color:#aab8d6; margin:0 auto 20px; max-width:380px; }
.sk-gate-row{ display:flex; gap:9px; max-width:400px; margin:0 auto; }
.sk-pin{ flex:1; min-width:0; background:rgba(8,13,26,.75); border:1px solid rgba(255,180,90,.3); border-radius:12px;
  padding:13px 14px; color:#eaf1ff; font-size:17px; letter-spacing:.25em; text-align:center; }
.sk-pin:focus{ outline:none; border-color:#ffb347; box-shadow:0 0 0 3px rgba(255,179,71,.22); }
.sk-gate-msg{ min-height:18px; font-size:12.5px; margin:14px 0 0; color:#9fb0d0; }
.sk-gate-msg.err{ color:#fda4af; }

/* ============================= TOMBOL ============================== */
.sk-btn{ background:linear-gradient(90deg,#ffb347,#ff8f2e); color:#3a1e00; font-weight:800; border:none; border-radius:11px;
  padding:12px 17px; font-size:13px; cursor:pointer; box-shadow:0 10px 26px -10px rgba(255,150,50,.7); transition:transform .15s, filter .2s; white-space:nowrap; }
.sk-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); } .sk-btn:active{ transform:translateY(0) scale(.97); }
.sk-btn-primary{ background:linear-gradient(90deg,#ffc061,#ff9330); color:#3a1e00; }
.sk-btn-ghost{ background:rgba(255,255,255,.055); color:#d3e0f6; border:1px solid rgba(150,178,232,.22); box-shadow:none; }
.sk-btn-ghost:hover{ border-color:rgba(255,179,71,.5); color:#fff; }
.sk-btn-sm{ padding:8px 12px; font-size:12px; border-radius:9px; }

/* =========================== HERO + SUBNAV ========================= */
.sk-hero{ position:relative; padding:6px 0 4px; }
.sk-hero .anlt-hero-glow{ background:radial-gradient(60% 130% at 50% 0%, rgba(255,160,60,.24), transparent 70%); }
.sk-panel .anlt-eyebrow{ color:#ffc061; letter-spacing:.28em; font-size:11px; font-weight:800; }
.sk-title{ background:linear-gradient(90deg,#ffe0a3,#ff9d3c 55%,#ffd27a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:.02em; }
.sk-panel .anlt-sub{ color:#93a6c6; }
.sk-subnav{ display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 20px; }
.sk-subtab{ background:rgba(255,255,255,.045); border:1px solid rgba(150,178,232,.16); color:#aebcd8; font-weight:700;
  font-size:12.5px; padding:10px 15px; border-radius:12px; cursor:pointer; transition:all .18s; white-space:nowrap; }
.sk-subtab:hover{ color:#f3f7ff; border-color:rgba(255,179,71,.45); transform:translateY(-1px); }
.sk-subtab.active{ background:linear-gradient(90deg,#ffb347,#ff8f2e); color:#3a1e00; border-color:transparent; box-shadow:0 10px 24px -12px rgba(255,150,50,.8); }
.sk-sec{ display:none; animation:skIn .38s ease both; }
.sk-sec.active{ display:block; }
@keyframes skIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.sk-info-ic{ margin-left:auto; width:21px; height:21px; border-radius:50%; border:1px solid rgba(255,179,71,.35);
  background:rgba(255,179,71,.10); color:#ffcf8f; font-size:11px; font-style:italic; font-weight:800; cursor:pointer; line-height:1; flex:none; }
.sk-info-ic:hover{ background:rgba(255,179,71,.28); color:#fff; }

/* ===================== 1) PIPELINE & FORECAST ===================== */
.sk-prod-list{ display:flex; flex-direction:column; gap:11px; }
.sk-prod-row{ display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:14px; }
.sk-prod-name{ font-size:12.5px; color:#cbd8f0; font-weight:700; }
.sk-prod-track{ position:relative; height:17px; background:rgba(255,255,255,.05); border-radius:9px; overflow:hidden; }
.sk-prod-proj{ position:absolute; left:0; top:0; height:100%; background:repeating-linear-gradient(45deg,rgba(255,179,71,.30),rgba(255,179,71,.30) 6px,rgba(255,179,71,.13) 6px,rgba(255,179,71,.13) 12px); }
.sk-prod-now{ position:absolute; left:0; top:0; height:100%; background:linear-gradient(90deg,#22d3ee,#ff9330); border-radius:9px; z-index:2; }
.sk-prod-val{ font-size:12.5px; color:#eaf1ff; font-weight:800; white-space:nowrap; }
.sk-prod-val span{ color:#8ea6cf; font-weight:600; }

/* funnel (pakai kelas anlt tapi selaraskan warna) */
.sk-panel .anlt-bar-in{ background:linear-gradient(90deg,#8b5cf6,#a78bfa); }
.sk-panel .anlt-bar-v{ background:linear-gradient(90deg,#22d3ee,#0ea5b7); }

/* ======================= 2) EARLY WARNING ========================= */
.sk-warn-tiles{ display:grid; grid-template-columns:repeat(3,auto) 1fr; gap:12px; align-items:stretch; margin-bottom:18px; }
.sk-warn-tile{ text-align:center; padding:14px 20px; border-radius:15px; border:1px solid; min-width:84px; display:flex; flex-direction:column; justify-content:center; }
.sk-warn-tile.kritis{ background:rgba(239,68,68,.13); border-color:rgba(248,113,113,.5); }
.sk-warn-tile.waspada{ background:rgba(251,191,36,.13); border-color:rgba(251,191,36,.5); }
.sk-warn-tile.pantau{ background:rgba(56,189,248,.13); border-color:rgba(56,189,248,.45); }
.sk-wt-n{ font-size:30px; font-weight:900; line-height:1; }
.sk-warn-tile.kritis .sk-wt-n{ color:#fca5a5; } .sk-warn-tile.waspada .sk-wt-n{ color:#fcd34d; } .sk-warn-tile.pantau .sk-wt-n{ color:#bae6fd; }
.sk-wt-l{ font-size:11px; color:#aebbd6; margin-top:5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.sk-warn-status{ font-size:13.5px; font-weight:700; padding:0 18px; border-radius:14px; line-height:1.45; display:flex; align-items:center; }
.sk-warn-status.bad{ background:rgba(239,68,68,.12); color:#fecaca; border:1px solid rgba(248,113,113,.4); }
.sk-warn-status.warn{ background:rgba(251,191,36,.12); color:#fde9b0; border:1px solid rgba(251,191,36,.4); }
.sk-warn-status.good{ background:rgba(52,211,153,.12); color:#b6f2d8; border:1px solid rgba(52,211,153,.4); }
.sk-risk{ border-left:3px solid; border-radius:12px; padding:13px 16px; margin-bottom:11px; background:rgba(255,255,255,.028); }
.sk-risk.kritis{ border-color:#f87171; background:linear-gradient(90deg,rgba(239,68,68,.10),rgba(239,68,68,.02)); }
.sk-risk.waspada{ border-color:#fbbf24; background:linear-gradient(90deg,rgba(251,191,36,.08),rgba(251,191,36,.02)); }
.sk-risk.pantau{ border-color:#38bdf8; background:linear-gradient(90deg,rgba(56,189,248,.07),rgba(56,189,248,.02)); }
.sk-risk-head{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.sk-risk-ic{ font-size:11px; } .sk-risk.kritis .sk-risk-ic{ color:#f87171; } .sk-risk.waspada .sk-risk-ic{ color:#fbbf24; } .sk-risk.pantau .sk-risk-ic{ color:#38bdf8; }
.sk-risk-cat{ font-size:11px; font-weight:800; letter-spacing:.07em; color:#c9d6ef; text-transform:uppercase; }
.sk-risk-sev{ margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.09em; padding:3px 9px; border-radius:20px; background:rgba(255,255,255,.09); color:#e6edfb; }
.sk-risk-t{ font-size:14px; color:#f2f6fd; font-weight:700; line-height:1.5; margin-bottom:7px; }
.sk-risk-akar,.sk-risk-aksi{ font-size:12.5px; color:#adbcda; line-height:1.55; padding-left:2px; }
.sk-risk-akar b,.sk-risk-aksi b{ color:#e2ebf9; }
.sk-risk-aksi{ margin-top:3px; color:#bfe6d6; } .sk-risk-aksi b{ color:#a7f3d0; }

/* ====================== 3) KINERJA TIM: MATRIX ==================== */
.sk-mx-wrap{ width:100%; overflow-x:auto; }
.sk-mx-svg{ width:100%; min-width:600px; height:auto; max-height:460px; display:block; }
.sk-mx-z.star{ fill:rgba(52,211,153,.10); } .sk-mx-z.pot{ fill:rgba(251,191,36,.09); }
.sk-mx-z.stab{ fill:rgba(96,165,250,.09); } .sk-mx-z.need{ fill:rgba(248,113,113,.10); }
.sk-mx-div{ stroke:rgba(185,205,240,.30); stroke-dasharray:6 6; stroke-width:1.4; }
.sk-mx-q{ font-size:11.5px; font-weight:800; letter-spacing:.06em; opacity:.9; }
.sk-mx-q.star{ fill:#6ee7b7; } .sk-mx-q.pot{ fill:#fcd34d; } .sk-mx-q.stab{ fill:#93c5fd; } .sk-mx-q.need{ fill:#fca5a5; }
.sk-mx-ax{ fill:#9fb0d0; font-size:11.5px; font-weight:800; letter-spacing:.05em; }
.sk-mx-tick{ fill:#8296b6; font-size:10.5px; font-weight:600; }
.sk-mx-dot circle{ stroke:#0b1020; stroke-width:2.5; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.sk-mx-dot.star circle{ fill:#34d399; } .sk-mx-dot.pot circle{ fill:#fbbf24; } .sk-mx-dot.stab circle{ fill:#60a5fa; } .sk-mx-dot.need circle{ fill:#f87171; }
.sk-mx-in{ fill:#0b1020; font-size:11px; font-weight:800; }
.sk-mx-nm{ fill:#cdd9f0; font-size:10.5px; font-weight:600; }
.sk-mx-legend{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; justify-content:center; }
.sk-mx-chip{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#cbd8ef; background:rgba(255,255,255,.045);
  border:1px solid rgba(150,178,232,.16); padding:6px 12px; border-radius:20px; }
.sk-mx-chip i{ width:9px; height:9px; border-radius:50%; }
.sk-mx-chip.star i{ background:#34d399; } .sk-mx-chip.pot i{ background:#fbbf24; } .sk-mx-chip.stab i{ background:#60a5fa; } .sk-mx-chip.need i{ background:#f87171; }
.sk-mx-chip b{ color:#fff; margin-left:1px; }

/* ================ 3) KINERJA TIM: PAPAN SKOR & DLL ================ */
.sk-sc-table{ display:flex; flex-direction:column; }
.sk-sc-row{ display:grid; grid-template-columns:1.7fr .7fr .8fr 1fr .9fr 1.1fr; align-items:center; gap:10px; padding:11px 8px; border-bottom:1px solid rgba(150,178,232,.09); }
.sk-sc-row:hover:not(.sk-sc-head){ background:rgba(255,255,255,.02); }
.sk-sc-head{ font-size:10.5px; letter-spacing:.06em; color:#8ea0c2; font-weight:800; text-transform:uppercase; border-bottom:1px solid rgba(150,178,232,.2); }
.sk-sc-nm{ font-size:13px; color:#e9f0fb; font-weight:700; }
.sk-sc-n{ font-size:13px; color:#cdd9f0; text-align:center; } .sk-sc-n.strong{ font-weight:800; color:#fff; }
.sk-sc-sp{ display:flex; justify-content:center; } .sk-sc-cs,.sk-sc-st{ text-align:center; }
.sk-cons{ font-size:11px; font-weight:800; padding:3px 10px; border-radius:20px; }
.sk-cons.hi{ background:rgba(52,211,153,.15); color:#6ee7b7; } .sk-cons.mid{ background:rgba(251,191,36,.15); color:#fcd34d; } .sk-cons.lo{ background:rgba(248,113,113,.15); color:#fca5a5; }
.sk-panel .coach-st{ font-size:11px; font-weight:800; padding:3px 10px; border-radius:20px; }
.sk-panel .coach-st.good{ background:rgba(52,211,153,.15); color:#6ee7b7; } .sk-panel .coach-st.ok{ background:rgba(148,163,199,.18); color:#c7d2e8; } .sk-panel .coach-st.bad{ background:rgba(248,113,113,.15); color:#fca5a5; }
.sk-panel .coach-jab{ font-size:10px; color:#8ea0c2; font-weight:600; }
.sk-panel .coach-spark-line{ fill:none; stroke:#22d3ee; stroke-width:2; }
.sk-panel .coach-spark-dot{ fill:#22d3ee; }

.sk-split{ padding:8px 0; }
.sk-split-bar{ display:flex; height:24px; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.05); }
.sk-split-pe{ background:linear-gradient(90deg,#22d3ee,#0ea5b7); } .sk-split-br{ background:linear-gradient(90deg,#ffb347,#ff8f2e); }
.sk-split-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; font-size:12.5px; color:#bccbe6; }
.sk-split-legend b{ color:#fff; }
.sk-sw{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:middle; }
.sk-sw.pe{ background:#22d3ee; } .sk-sw.br{ background:#ffb347; }
.sk-att-h{ font-size:12px; font-weight:800; margin:14px 0 7px; letter-spacing:.03em; }
.sk-att-h.bad{ color:#fca5a5; } .sk-att-h.good{ color:#6ee7b7; }
.sk-att-row{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid rgba(150,178,232,.08); }
.sk-att-nm{ font-size:13px; color:#e9f0fb; font-weight:700; flex:1; }
.sk-att-tag{ font-size:11px; color:#fcd34d; }
.sk-att-v{ font-size:13px; font-weight:800; color:#fff; }
.sk-att-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.sk-panel .coach-reco-pill{ font-size:12px; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); color:#b6f2d8; padding:5px 11px; border-radius:20px; }
.sk-panel .coach-reco-pill b{ color:#fff; }
.sk-panel .coach-allgood{ color:#b6f2d8; font-size:13px; background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.25); padding:12px 14px; border-radius:12px; }

/* ===================== 4) SOP & KNOWLEDGE ======================== */
.sk-sop-tools{ margin-left:auto; display:flex; gap:8px; }
.sk-sop-lead{ font-size:12.5px; color:#9fb0d0; line-height:1.65; margin:0 0 16px; }
.sk-sop-item{ border:1px solid rgba(150,178,232,.13); border-radius:14px; padding:14px 16px; margin-bottom:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)); }
.sk-sop-item-head{ display:flex; align-items:center; gap:11px; margin-bottom:9px; flex-wrap:wrap; }
.sk-sop-cat{ font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#3a1e00;
  background:linear-gradient(90deg,#ffcf8f,#ff9d3c); padding:4px 10px; border-radius:20px; }
.sk-sop-title{ font-size:14.5px; font-weight:800; color:#f1f5fd; }
.sk-sop-actions{ margin-left:auto; display:flex; gap:6px; }
.sk-mini{ background:rgba(255,255,255,.06); border:1px solid rgba(150,178,232,.2); color:#d3e0f6; font-size:11.5px; padding:6px 11px; border-radius:9px; cursor:pointer; }
.sk-mini:hover{ background:rgba(255,179,71,.22); } .sk-mini.danger:hover{ background:rgba(248,113,113,.25); color:#fecaca; }
.sk-sop-body{ font-size:12.5px; color:#c4d2ea; line-height:1.7; }
.sk-sop-editor{ border:1px dashed rgba(255,179,71,.5); border-radius:14px; padding:16px; margin:8px 0 14px; background:rgba(255,179,71,.05); }
.sk-ed-grid{ display:grid; grid-template-columns:1fr 2fr; gap:12px; }
.sk-sop-editor label{ display:block; font-size:12px; color:#aebbd6; font-weight:700; margin-bottom:12px; }
.sk-sop-editor input,.sk-sop-editor textarea{ width:100%; margin-top:6px; background:rgba(8,13,26,.7); border:1px solid rgba(150,178,232,.28);
  border-radius:10px; padding:10px 12px; color:#eaf1ff; font-size:13px; font-family:inherit; box-sizing:border-box; }
.sk-sop-editor textarea{ resize:vertical; line-height:1.65; }
.sk-sop-editor input:focus,.sk-sop-editor textarea:focus{ outline:none; border-color:#ffb347; box-shadow:0 0 0 3px rgba(255,179,71,.2); }
.sk-ed-btns{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sk-ed-hint{ font-size:11.5px; color:#8ea0c2; }
.sk-sop-status{ font-size:12.5px; color:#9fb0d0; margin:14px 0 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:12px; border-top:1px solid rgba(150,178,232,.1); }
.sk-sop-status.dirty{ color:#fcd34d; } .sk-sop-status.ok{ color:#6ee7b7; } .sk-sop-status.err{ color:#fca5a5; }

/* ========================= 5) LAPORAN ============================ */
.sk-report-out{ margin-top:4px; }
.sk-rep-doc{ background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006)); border:1px solid rgba(150,178,232,.13); border-radius:14px; padding:24px 26px; }
.sk-rep-title{ font-size:18px; font-weight:900; color:#f6f9ff; letter-spacing:.01em; }
.sk-rep-by{ font-size:11.5px; color:#8ea0c2; margin:3px 0 18px; }
.sk-rep-sec{ margin-bottom:17px; }
.sk-rep-h{ font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#ffc061; margin-bottom:6px; padding-left:9px; border-left:3px solid #ff9d3c; }
.sk-rep-b{ font-size:13.5px; color:#d8e2f5; line-height:1.75; padding-left:12px; }
.sk-kv{ width:100%; border-collapse:collapse; margin-top:4px; }
.sk-kv td{ padding:8px 12px; font-size:13px; border-bottom:1px solid rgba(150,178,232,.1); color:#cdd9f0; }
.sk-kv tr:hover td{ background:rgba(255,255,255,.02); }
.sk-kv td:last-child{ text-align:right; font-weight:800; color:#fff; width:36%; }

/* ====================== KEADAAN KOSONG (rapi) ==================== */
.sk-empty{ text-align:center; padding:44px 24px; }
.sk-empty-ic{ font-size:42px; line-height:1; }
.sk-empty-t{ font-size:16px; font-weight:800; color:#e7eefb; margin:12px 0 7px; }
.sk-empty-d{ font-size:13px; color:#9fb0d0; line-height:1.65; max-width:560px; margin:0 auto; }

/* =========================== RESPONSIF ========================== */
@media (max-width:900px){
  #sk-pipe-kpis{ grid-template-columns:repeat(2,1fr); }
  #sk-team-kpis{ grid-template-columns:repeat(2,1fr); }
  .sk-panel .anlt-grid2{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .sk-subnav{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; margin:12px 0 16px; }
  #sk-pipe-kpis,#sk-team-kpis{ grid-template-columns:1fr 1fr; }
  .sk-warn-tiles{ grid-template-columns:repeat(3,1fr); }
  .sk-warn-status{ grid-column:1 / -1; padding:12px 14px; }
  .sk-prod-row{ grid-template-columns:92px 1fr auto; gap:9px; }
  .sk-sc-row{ grid-template-columns:1.5fr .7fr .8fr 1fr; }
  .sk-sc-row > .sk-sc-cs, .sk-sc-head > .sk-sc-cs{ display:none; }
  .sk-ed-grid{ grid-template-columns:1fr; }
  .sk-panel .anlt-fc{ flex-direction:column; align-items:stretch; }
  .sk-panel .anlt-ring{ margin:0 auto; }
  .sk-gate-title{ font-size:24px; } .sk-rep-doc{ padding:16px; }
}
@media (max-width:420px){ #sk-pipe-kpis,#sk-team-kpis{ grid-template-columns:1fr; } }
@media print{
  #sk-gate,.sk-subnav,.sk-sop-tools,.anlt-actions,.fx-fab,.tab-nav{ display:none !important; }
  .sk-sec{ display:block !important; }
}

/* ---- v3: kurangi tumpukan ke bawah — pindahkan ke samping (2 kolom) ---- */
.sk-kv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px; }
.sk-kv-tile{ background:rgba(255,255,255,.03); border:1px solid rgba(150,178,232,.12); border-radius:11px; padding:11px 13px; display:flex; flex-direction:column; gap:5px; }
.sk-kv-l{ font-size:11px; color:#93a4c3; font-weight:600; line-height:1.25; }
.sk-kv-v{ font-size:18px; font-weight:800; color:#fff; }
@media (min-width:920px){
  /* daftar risiko & SOP mengalir 2 kolom -> tidak memanjang ke bawah */
  #sk-warn-list{ column-count:2; column-gap:14px; }
  #sk-warn-list .sk-risk{ break-inside:avoid; -webkit-column-break-inside:avoid; }
  #sk-sop-list{ column-count:2; column-gap:14px; }
  #sk-sop-list .sk-sop-item{ break-inside:avoid; -webkit-column-break-inside:avoid; }
}
@media (max-width:640px){ .sk-kv-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .sk-kv-grid{ grid-template-columns:1fr; } }
/* ===================================================================
   MENU "PROSPEK & FOLLOW-UP PE" (Google Form + input manual, tema emerald)
   =================================================================== */
/* tema hijau khusus menu ini (override dari sk-*) */
.pk-panel .sk-gate-box{ border-color:rgba(52,211,153,.30); box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 70px -26px rgba(52,211,153,.45); background:radial-gradient(120% 90% at 50% 0%, rgba(40,200,140,.10), rgba(20,30,28,.55) 60%); }
.pk-panel .sk-gate-planet img{ filter:drop-shadow(0 0 24px rgba(52,211,153,.55)); }
.pk-panel .sk-gate-kicker{ color:#6ee7b7; }
.pk-panel .sk-gate-title{ background:linear-gradient(90deg,#b8f5d8,#34d399); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pk-panel .sk-pin:focus{ border-color:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.22); }
.pk-panel .sk-btn-primary{ background:linear-gradient(90deg,#34d399,#0ea5b7); color:#04231b; }
.pk-panel .anlt-eyebrow{ color:#6ee7b7; }
.pk-title{ background:linear-gradient(90deg,#b8f5d8,#34d399 55%,#7fe6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pk-panel .sk-subtab.active{ background:linear-gradient(90deg,#34d399,#0ea5b7); color:#04231b; box-shadow:0 10px 24px -12px rgba(52,211,153,.8); }
.pk-panel .sk-subtab:hover{ border-color:rgba(52,211,153,.45); }
.pk-panel .sk-hero .anlt-hero-glow{ background:radial-gradient(60% 130% at 50% 0%, rgba(52,211,153,.22), transparent 70%); }

/* toolbar input */
.pk-search{ background:rgba(8,20,16,.6); border:1px solid rgba(120,180,150,.28); border-radius:9px; padding:8px 12px; color:#eafff5; font-size:12.5px; min-width:220px; }
.pk-search:focus{ outline:none; border-color:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.18); }
.pk-month{ background:rgba(8,20,16,.6); border:1px solid rgba(120,180,150,.28); border-radius:9px; padding:7px 10px; color:#eafff5; font-size:12.5px; }
.pk-month:focus{ outline:none; border-color:#34d399; }

/* ringkasan prospek */
.pk-sum{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.pk-sum-tile{ background:rgba(255,255,255,.04); border:1px solid rgba(150,178,232,.14); border-radius:11px; padding:9px 14px; font-size:12.5px; color:#cdd9f0; }
.pk-sum-tile b{ font-size:17px; color:#fff; font-weight:800; margin-right:5px; }
.pk-sum-tile.good{ background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.35); color:#b6f2d8; }
.pk-sum-tile.good b{ color:#6ee7b7; }
.pk-sum-sales{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.pk-sales-chip{ font-size:11.5px; color:#bccbe6; background:rgba(255,255,255,.035); border:1px solid rgba(150,178,232,.14); padding:4px 10px; border-radius:20px; }
.pk-sales-chip b{ color:#fff; margin-left:2px; }

/* tabel prospek (lengkap apa adanya) */
.pk-tblwrap{ width:100%; overflow:auto; max-height:64vh; border:1px solid rgba(150,178,232,.12); border-radius:12px; }
.pk-tbl{ border-collapse:collapse; width:100%; font-size:12px; white-space:nowrap; }
.pk-tbl th{ position:sticky; top:0; z-index:2; background:#141d2b; color:#9fdcc4; font-weight:800; font-size:11px; letter-spacing:.03em; text-transform:uppercase; padding:9px 11px; text-align:left; border-bottom:2px solid rgba(52,211,153,.3); }
.pk-tbl td{ padding:8px 11px; color:#d4e0f2; border-bottom:1px solid rgba(150,178,232,.08); }
.pk-tbl tbody tr:nth-child(even){ background:rgba(255,255,255,.015); }
.pk-tbl tbody tr:hover{ background:rgba(52,211,153,.06); }

/* keadaan setup / error */
.pk-setup{ border:1px dashed rgba(52,211,153,.4); background:rgba(52,211,153,.05); border-radius:14px; padding:16px 18px; }
.pk-setup-h{ font-size:14.5px; font-weight:800; color:#b6f2d8; margin-bottom:8px; }
.pk-setup-d{ font-size:12.5px; color:#aeccbf; line-height:1.6; margin:6px 0; }
.pk-setup-ol{ margin:8px 0 4px; padding-left:20px; }
.pk-setup-ol li{ font-size:12.5px; color:#c9e6d9; line-height:1.7; margin-bottom:8px; }
.pk-setup .mono, .pk-panel .mono{ font-family:ui-monospace,Menlo,Consolas,monospace; background:rgba(255,255,255,.08); padding:1px 6px; border-radius:5px; font-size:11.5px; color:#eafff5; }
.pk-err{ background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.4); color:#fecaca; border-radius:12px; padding:12px 14px; font-size:12.5px; margin-bottom:12px; line-height:1.55; }

/* grid follow-up harian */
.pk-empty2{ font-size:13px; color:#9fb0d0; line-height:1.6; padding:22px; text-align:center; background:rgba(255,255,255,.02); border:1px dashed rgba(150,178,232,.18); border-radius:12px; }
.pk-fu-cap{ font-size:12.5px; color:#9fb0d0; margin-bottom:10px; } .pk-fu-cap b{ color:#eafff5; }
.pk-fu-wrap{ width:100%; overflow:auto; max-height:66vh; border:1px solid rgba(150,178,232,.12); border-radius:12px; }
.pk-fu-tbl{ border-collapse:collapse; width:100%; font-size:12.5px; }
.pk-fu-tbl th{ position:sticky; top:0; z-index:2; background:#141d2b; color:#9fdcc4; font-weight:800; padding:8px 8px; border-bottom:2px solid rgba(52,211,153,.3); font-size:11.5px; }
.pk-fu-day{ position:sticky; left:0; z-index:1; background:#141d2b; color:#cdd9f0; font-weight:700; text-align:center; width:52px; padding:7px 6px; border-right:1px solid rgba(150,178,232,.12); }
.pk-fu-tbl thead .pk-fu-day{ z-index:3; }
.pk-fu-nm{ text-align:center; min-width:88px; position:relative; }
.pk-fu-del{ position:absolute; top:3px; right:4px; width:15px; height:15px; line-height:12px; border-radius:50%; border:none; background:rgba(248,113,113,.25); color:#fecaca; font-size:11px; cursor:pointer; padding:0; }
.pk-fu-del:hover{ background:rgba(248,113,113,.55); color:#fff; }
.pk-fu-tbl td{ padding:3px 5px; text-align:center; border-bottom:1px solid rgba(150,178,232,.07); }
.pk-fu-in{ width:52px; background:rgba(8,20,16,.5); border:1px solid rgba(120,180,150,.2); border-radius:7px; padding:6px 4px; color:#eafff5; font-size:12.5px; text-align:center; }
.pk-fu-in:focus{ outline:none; border-color:#34d399; box-shadow:0 0 0 2px rgba(52,211,153,.25); background:rgba(8,30,22,.7); }
.pk-fu-in::-webkit-outer-spin-button,.pk-fu-in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pk-fu-tot{ font-weight:800; color:#7fe6ff; background:rgba(56,189,248,.06); text-align:center; width:70px; }
.pk-fu-foot td{ position:sticky; bottom:0; background:#101826; border-top:2px solid rgba(52,211,153,.35); font-weight:800; color:#6ee7b7; padding:9px 6px; }
.pk-fu-foot .pk-fu-day{ background:#101826; color:#eafff5; }
.pk-fu-mtot{ color:#6ee7b7; } .pk-fu-grand{ color:#fff; background:rgba(52,211,153,.14); }

@media (max-width:640px){
  .pk-search{ min-width:130px; }
  .sk-sop-tools{ flex-wrap:wrap; }
}

/* ---- prospek: sentuhan biru (cocok LOGO LEADS call-center) ---- */
.pk-panel .sk-gate-box{ border-color:rgba(74,158,255,.30); box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 70px -26px rgba(74,158,255,.45); background:radial-gradient(120% 90% at 50% 0%, rgba(74,158,255,.10), rgba(20,26,42,.55) 60%); }
.pk-panel .sk-gate-planet img{ filter:drop-shadow(0 0 24px rgba(74,158,255,.55)); }
.pk-panel .sk-gate-kicker{ color:#8fc2ff; }
.pk-panel .sk-gate-title{ background:linear-gradient(90deg,#d6e9ff,#4a9eff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pk-panel .sk-btn-primary{ background:linear-gradient(90deg,#4a9eff,#2f74d6); color:#04142b; }
.pk-panel .anlt-eyebrow{ color:#8fc2ff; }
.pk-title{ background:linear-gradient(90deg,#d6e9ff,#4a9eff 55%,#7fe6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pk-panel .sk-subtab.active{ background:linear-gradient(90deg,#4a9eff,#2f74d6); color:#04142b; box-shadow:0 10px 24px -12px rgba(74,158,255,.8); }
.pk-panel .sk-subtab:hover{ border-color:rgba(74,158,255,.45); }
.pk-panel .sk-hero .anlt-hero-glow{ background:radial-gradient(60% 130% at 50% 0%, rgba(74,158,255,.22), transparent 70%); }

/* ---- Follow-up harian v2: kartu per sales + kotak total ---- */
.pk-fc-actbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:2px 0 16px; }
.pk-fc-actlbl{ font-size:12px; color:#9fb0d0; font-weight:700; }
.pk-fc-actchip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; letter-spacing:.04em; color:#04142b; background:linear-gradient(90deg,#8fc2ff,#4a9eff); padding:4px 6px 4px 11px; border-radius:20px; }
.pk-fc-actx{ width:16px; height:16px; line-height:13px; border-radius:50%; border:none; background:rgba(4,20,43,.35); color:#eaf1ff; font-size:12px; cursor:pointer; padding:0; }
.pk-fc-actx:hover{ background:rgba(4,20,43,.6); }
.pk-fc-actempty{ font-size:11.5px; color:#8ea0c2; }
.pk-fc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.pk-fc-card{ background:linear-gradient(180deg,rgba(74,158,255,.06),rgba(255,255,255,.012)); border:1px solid rgba(120,170,240,.2); border-radius:14px; padding:12px 14px 10px; }
.pk-fc-name{ position:relative; text-align:center; font-size:14px; font-weight:800; color:#eaf3ff; padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid rgba(120,170,240,.2); letter-spacing:.02em; }
.pk-fc-del{ position:absolute; top:-2px; right:0; width:18px; height:18px; line-height:15px; border-radius:50%; border:none; background:rgba(248,113,113,.22); color:#fecaca; font-size:13px; cursor:pointer; padding:0; }
.pk-fc-del:hover{ background:rgba(248,113,113,.55); color:#fff; }
.pk-fc-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.pk-fc-actname{ font-size:12.5px; font-weight:700; color:#c9d8f0; letter-spacing:.02em; }
.pk-fc-in{ width:66px; background:rgba(6,16,32,.6); border:1px solid rgba(120,170,240,.28); border-radius:8px; padding:6px 8px; color:#eaf1ff; font-size:13.5px; text-align:center; font-weight:700; }
.pk-fc-in:focus{ outline:none; border-color:#4a9eff; box-shadow:0 0 0 2px rgba(74,158,255,.25); background:rgba(10,26,52,.7); }
.pk-fc-in::-webkit-outer-spin-button,.pk-fc-in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pk-fc-sub{ text-align:right; font-size:12px; color:#9fb0d0; margin-top:8px; padding-top:7px; border-top:1px dashed rgba(120,170,240,.2); }
.pk-fc-sub b{ color:#8fc2ff; font-size:14px; }
.pk-fc-noact{ font-size:12px; color:#8ea0c2; padding:6px 0; }
/* kotak total */
.pk-tot-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.pk-tot-box{ border-radius:16px; padding:16px 20px; border:1px solid; }
.pk-tot-box.day{ background:linear-gradient(180deg,rgba(74,158,255,.14),rgba(74,158,255,.04)); border-color:rgba(74,158,255,.4); }
.pk-tot-box.month{ background:linear-gradient(180deg,rgba(52,211,153,.13),rgba(52,211,153,.04)); border-color:rgba(52,211,153,.4); }
.pk-tot-h{ font-size:12px; font-weight:800; letter-spacing:.05em; color:#cfe0f7; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pk-tot-when{ font-size:11px; font-weight:700; color:#9fb0d0; background:rgba(255,255,255,.06); padding:2px 9px; border-radius:20px; }
.pk-tot-num{ font-size:38px; font-weight:900; line-height:1.05; margin:8px 0 6px; }
.pk-tot-box.day .pk-tot-num{ color:#bcdcff; } .pk-tot-box.month .pk-tot-num{ color:#a7f3d0; }
.pk-tot-break{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:#aebbd6; }
.pk-tot-break b{ color:#fff; }
.pk-btn-danger{ border-color:rgba(248,113,113,.35); color:#fecaca; }
.pk-btn-danger:hover{ background:rgba(248,113,113,.18); border-color:rgba(248,113,113,.6); color:#fff; }

.pk-hist-wrap{ margin-top:20px; padding-top:16px; border-top:1px dashed rgba(120,170,240,.18); }
.pk-hist-h{ font-size:12px; font-weight:800; letter-spacing:.04em; color:#cfe0f7; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.pk-hist-count{ font-size:11px; font-weight:700; color:#9fb0d0; background:rgba(255,255,255,.06); padding:2px 9px; border-radius:20px; }
.pk-hist-list{ display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; }
.pk-hist-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:9px 12px; border-radius:11px; background:rgba(255,255,255,.02); border:1px solid rgba(120,170,240,.14); }
.pk-hist-row.active{ border-color:rgba(74,158,255,.5); background:rgba(74,158,255,.07); }
.pk-hist-date{ font-size:12.5px; font-weight:800; color:#eaf3ff; min-width:120px; }
.pk-hist-total{ font-size:12px; color:#aebbd6; flex:1; min-width:160px; }
.pk-hist-total b{ color:#8fc2ff; }
.pk-hist-sub{ color:#8ea0c2; }
.pk-hist-actions{ display:flex; gap:6px; margin-left:auto; }
.pk-recap{ margin-top:18px; }
.pk-recap-h{ font-size:12px; font-weight:800; letter-spacing:.03em; color:#cfe0f7; margin-bottom:10px; }
.pk-recap-h span#pk-recap-date{ color:#8fc2ff; }
.pk-recap-note{ font-size:11px; font-weight:600; color:#8ea0c2; letter-spacing:0; text-transform:none; }
.pk-recap-tbl{ max-height:none; }

@media (max-width:640px){ .pk-tot-wrap{ grid-template-columns:1fr; } .pk-fc-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); } .pk-hist-actions{ margin-left:0; } }

/* ---- Sub-menu gabungan (Strategi & Kendali / Analitik / Analitik PE) ---- */
.mega-subnav{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; width:min(94%,720px); margin:4px auto 22px; padding:5px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 6px 22px -16px rgba(0,0,0,.55); }
.mega-subnav .msub{ flex:1 1 150px; min-width:120px; text-align:center; background:transparent; border:none; color:var(--text-secondary); font-weight:700; font-size:13px; padding:11px 14px; border-radius:10px; cursor:pointer; transition:background .16s ease, color .16s ease; letter-spacing:.01em; }
.mega-subnav .msub:hover{ color:var(--text-primary); background:rgba(127,140,180,.12); }
.mega-subnav .msub.active{ background:linear-gradient(90deg,#4a7ee0,#7c5bd6); color:#fff; box-shadow:0 8px 20px -12px rgba(90,120,230,.8); cursor:default; }
body.theme-dark .mega-subnav{ background:rgba(20,28,48,.7); border-color:rgba(150,178,232,.18); }
@media (max-width:560px){ .mega-subnav{ gap:5px; padding:5px; } .mega-subnav .msub{ flex:1 1 auto; min-width:0; font-size:11.5px; padding:10px 6px; } }