:root{
  --bg-base:#0A0E14;
  --bg-surface:#121822;
  --bg-surface-2:#1A222E;
  --border-subtle:#222B38;
  --text-primary:#ECF0F5;
  --text-secondary:#8C96AA;
  --text-tertiary:#8A93A8;
  --success:#2DD7A3;
  --success-dim:rgba(45,215,163,0.14);
  --warning:#FFB454;
  --warning-dim:rgba(255,180,84,0.14);
  --danger:#FF5C72;
  --danger-dim:rgba(255,92,114,0.14);
  --info:#4DA8FF;
  --info-dim:rgba(77,168,255,0.14);
  --identity-omset:#A78BFA;
  --identity-omset-dim:rgba(167,139,250,0.12);
  --identity-client:#22D3EE;
  --identity-client-dim:rgba(34,211,238,0.10);
  --target-line:#AEB7CC;
  --text-readable:#AEB7CC;
  --font-display:'JetBrains Mono', ui-monospace, monospace;
  --font-body:'Plus Jakarta Sans', system-ui, sans-serif;
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow:hidden; background:var(--bg-base); color:var(--text-primary); font-family:var(--font-body); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* Stage: kanvas desain FIXED 1920x1080, di-scale otomatis biar pas di layar
   manapun tanpa ubah satu pun proporsi internal. Semua ukuran di bawah ini
   pakai px literal (bukan vw/vh/clamp), supaya nggak gantung ke fitur CSS
   yang kadang nggak konsisten di WebView TV lawas. */
body{ display:flex; align-items:center; justify-content:center; }
.tv-stage{ width:1920px; height:1080px; flex-shrink:0; transform-origin:center center; }

.dashboard{ position:relative; width:1920px; height:1080px; display:flex; flex-direction:column;
  padding: 22px 40px 22px;
  gap: 15px; }

.dash-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding-bottom:17px; border-bottom:1px solid var(--border-subtle); }
.dash-title-group{ display:flex; align-items:center; gap:18px; }
.dash-logo{ height:46px; width:auto; object-fit:contain; flex-shrink:0; }
.dash-title{ font-size:27px; font-weight:800; letter-spacing:-0.01em; line-height:1.15; }
.dash-meta{ display:flex; align-items:center; gap:24px; }
.meta-divider{ width:1px; height:28px; background:var(--border-subtle); }
.live-badge{ display:inline-flex; align-items:center; gap:10px; font-size:24px; font-weight:700;
  letter-spacing:.06em; background:var(--success-dim); color:var(--success); padding:8px 18px; border-radius:24px; }
.live-pulse{ width:10px; height:10px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success); animation:pulse 1.5s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.clock{ font-family:var(--font-display); font-size:36px; font-weight:600; font-variant-numeric:tabular-nums; }
.last-update{ font-size:22px; color:var(--text-primary); }

.top-row{
  display:grid;
  grid-template-columns: 0.85fr 1fr 0.85fr;
  gap:18px;
  height:440px;
  min-height:320px;
  max-height:480px;
  overflow:hidden;
}
/* min-width:0 WAJIB — stats-col grid item di .top-row, tanpa ini track
   "0.78fr"-nya bisa "overflow" ngikut min-content konten di dalamnya
   (terutama sejak ada ticker produksi yang berisi teks lebar), bikin lebar
   aktualnya nggak deterministik & geser-geser tergantung render timing. */
.stats-col{ display:flex; flex-direction:column; gap:18px; min-height:0; min-width:0; }
.stats-row{ display:flex; flex-direction:row; gap:18px; flex:1; min-height:0; }
.stats-row-panel{ flex:1; min-height:0; min-width:0; }
.stats-row-panel-wide{ flex:1; min-height:0; min-width:0; width:100%; }

.stat-box{ --identity:var(--text-tertiary); --identity-dim:rgba(140,150,170,0.10);
  position:relative; overflow:hidden;
  flex:1; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:18px;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px;
  padding:24px 26px; min-height:0; }
.stat-box::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 90% at 102% 8%, var(--identity-dim), transparent 60%); }
.stat-box .accent{ position:absolute; top:0; left:0; width:4px; height:100%; border-radius:18px 0 0 18px;
  background:var(--identity); box-shadow:0 0 16px var(--identity); }
.stat-icon{ position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:84px; height:84px; color:var(--identity); opacity:0.08; pointer-events:none; }
#card-omset{ --identity:var(--identity-omset); --identity-dim:var(--identity-omset-dim); }
#card-client{ --identity:var(--identity-client); --identity-dim:var(--identity-client-dim); }
.kpi-label{ font-size:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--identity); position:relative; z-index:1; white-space:nowrap; }
.kpi-value{ font-family:var(--font-display); font-size:42px; font-weight:600; color:var(--text-primary); margin-top:4px; position:relative; z-index:1; white-space:nowrap; }
.kpi-mom{ font-family:var(--font-display); font-size:15px; font-weight:600; margin-top:3px; position:relative; z-index:1; white-space:nowrap; opacity:0.92; }
.kpi-mom .mom-label{ color:var(--text-readable); font-weight:500; }
.kpi-mom .mom-up{ color:#2DD7A3; }
.kpi-mom .mom-down{ color:#FF5C72; }
.kpi-mom .mom-flat{ color:#8A93A8; }

.stat-box-clickable{ cursor:pointer; transition:border-color 160ms ease-out, background 160ms ease-out; }
.stat-box-clickable:hover, .stat-box-clickable:focus-visible{ border-color:var(--identity); background:var(--bg-surface-2); outline:none; }
.stat-chevron{ width:26px; height:26px; color:var(--identity); opacity:0.75; position:relative; z-index:1; flex-shrink:0;
  transition:transform 160ms ease-out, opacity 160ms ease-out; }
.stat-box-clickable:hover .stat-chevron, .stat-box-clickable:focus-visible .stat-chevron{ opacity:1; transform:translateX(3px); }

/* ── Panel "Produksi Proses"/"Produksi Selesai"/"Produksi Deadline" bisa
   diklik (buka modal list) — area .produksi-ticker-wrap di dalamnya
   TETAP free buat scroll manual (lihat bindProduksiPanelClick() di JS,
   klik di area itu diabaikan). */
.panel-clickable{ cursor:pointer; transition:border-color 160ms ease-out, background 160ms ease-out; }
.panel-clickable:hover, .panel-clickable:focus-visible{ border-color:var(--identity-omset); background:var(--bg-surface-2); outline:none; }
.panel-clickable .produksi-ticker-wrap{ cursor:default; }

/* ── Animasi count-up & flash ala trading saham/forex ─────────────────────
   Dipakai di semua angka KPI yang ter-update tiap polling (omset, client,
   SPK, delta target). Transisi warna halus via `transition`, sementara
   glow sekilas dipicu lewat toggle class .flash-up/.flash-down dari JS
   (lihat animateValue() di script). Durasi glow sengaja lebih pendek dari
   durasi count-up, supaya kerasa "kedip notifikasi", bukan menempel lama. */
.kpi-value, .kpi-delta, .today-metric-value{
  transition: text-shadow 220ms ease-out, color 220ms ease-out;
}
.flash-up{ color:var(--success) !important; text-shadow:0 0 18px var(--success); }
.flash-down{ color:var(--danger) !important; text-shadow:0 0 18px var(--danger); }

/* .bottom-row: chart-panel + panel fitur baru di sebelah kanan. Lebar
   chart-panel dipas-in (1160px) supaya batas kanannya segaris dengan batas
   kiri .calendar-panel (sejak today-info-panel/stats-col/calendar-panel
   dipecah jadi 3 card terpisah di .top-row) — diukur live via
   getBoundingClientRect() supaya nilainya presisi & stabil. */
.bottom-row{
  flex:1; min-height:0;
  display:grid;
  grid-template-columns: 1254px 1fr;
  gap:18px;
}
.chart-panel{ min-height:0; }
.new-feature-col{ display:flex; flex-direction:column; gap:18px; min-height:0; min-width:0; }
.new-feature-row{ display:flex; flex-direction:row; gap:18px; flex:1; min-height:0; min-width:0; }
.new-feature-panel{ flex:1; min-height:0; min-width:0; }
.new-feature-panel-wide{ flex:1; min-height:0; }
.panel{ position:relative; overflow:hidden; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:18px;
  padding:22px; display:flex; flex-direction:column; min-height:0; }
.panel-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:11px; position:relative; z-index:1; }
.panel-title{ font-size:24px; font-weight:700; }
/* ── Produksi Proses / Produksi Selesai (ticker list) ── */
/* overflow-y:auto (BUKAN hidden+CSS transform) — supaya scroll manual user
   (wheel/drag/touch) tetap berfungsi normal. Auto-scroll digerakkan lewat
   scrollTop asli di JS (lihat setupAutoScroll() di dashboard.js), bukan
   transform, karena transform akan "fight" dengan native scrolling kalau
   keduanya jalan bareng di elemen yang sama. */
.produksi-ticker-wrap{ position:relative; z-index:1; flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; }
.produksi-ticker-wrap::-webkit-scrollbar{ width:6px; }
.produksi-ticker-wrap::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.12); border-radius:3px; }
.produksi-ticker-list{ display:flex; flex-direction:column; }
.produksi-ticker-row{ display:flex; align-items:center; gap:14px; padding:9px 4px; border-bottom:1px solid rgba(255,255,255,0.05); }
.produksi-ticker-row:last-child{ border-bottom:none; }
.produksi-ticker-no{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text-tertiary); flex-shrink:0; width:122px; }
.produksi-ticker-client{ font-size:17px; font-weight:600; color:var(--text-readable); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; flex:1; min-width:0; }
.produksi-ticker-empty{ font-size:16px; color:var(--text-tertiary); padding:8px 4px; }

/* ── Activity SPK / Activity Administrasi (notifikasi, beda bentuk konten
   dari .produksi-ticker-row — judul+pesan+waktu, bukan no-spk+client) ── */
.activity-ticker-list .produksi-ticker-row{ flex-direction:column; align-items:stretch; gap:3px; padding:10px 4px; }
.activity-ticker-title{ font-family:var(--font-body); font-size:15px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.activity-ticker-message{ font-family:var(--font-body); font-size:13px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.activity-ticker-user{ font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--identity-omset); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Panel "Kunjungan Sales" (t_visits — histori check-in aktual, beda dari
   .produksi-ticker-row biasa: ada 5 kolom + badge status validasi CRM) ── */
.kunjungan-visit-row{ gap:18px; }
.kunjungan-visit-sales{ font-size:16px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; width:150px; }
.kunjungan-visit-client{ font-size:16px; font-weight:600; color:var(--text-readable); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.kunjungan-visit-jenis{ font-size:14px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; width:120px; }
.kunjungan-visit-jam{ font-family:var(--font-display); font-size:14px; color:var(--text-tertiary); flex-shrink:0; width:100px; }
.kunjungan-visit-badge{ font-size:12px; font-weight:700; letter-spacing:.02em; padding:4px 10px; border-radius:7px; flex-shrink:0; white-space:nowrap; }
.kunjungan-visit-badge.is-valid{ background:rgba(45,215,163,0.12); border:1px solid rgba(45,215,163,0.4); color:#2DD7A3; }
.kunjungan-visit-badge.is-pending{ background:rgba(255,180,84,0.12); border:1px solid rgba(255,180,84,0.4); color:#FFB454; }

/* Kunjungan Sales di slot SETENGAH lebar (.new-feature-panel, bukan -wide)
   — 5 kolom sejajar nggak muat, jadi di sini ditumpuk vertikal per baris
   (pola sama seperti .activity-ticker-list), bukan sejajar horizontal. */
.new-feature-panel:not(.new-feature-panel-wide) .kunjungan-visit-row{
  flex-direction:column; align-items:flex-start; gap:3px; padding:10px 4px;
}
.new-feature-panel:not(.new-feature-panel-wide) .kunjungan-visit-sales,
.new-feature-panel:not(.new-feature-panel-wide) .kunjungan-visit-jenis,
.new-feature-panel:not(.new-feature-panel-wide) .kunjungan-visit-jam{
  width:auto; font-size:13px;
}
.new-feature-panel:not(.new-feature-panel-wide) .kunjungan-visit-client{ font-size:14px; }
.activity-ticker-time{ font-family:var(--font-display); font-size:12px; color:var(--text-tertiary); margin-top:1px; }

.chart-view-toggle{ display:flex; gap:6px; background:rgba(140,150,170,0.08); border-radius:10px; padding:4px; }
.chart-view-btn{ font-family:inherit; font-size:19px; font-weight:600; color:var(--text-readable); background:transparent;
  border:none; border-radius:7px; padding:7px 16px; cursor:pointer; transition:background 0.15s, color 0.15s; }
.chart-view-btn.is-active{ background:#A78BFA; color:#0A0E14; }
.chart-legend{ display:flex; gap:16px; flex-wrap:wrap; }
.leg-line{ display:flex; align-items:center; gap:10px; font-size:25px; font-weight:600; color:var(--text-readable); }
.leg-sq{ width:24px; height:6px; border-radius:3px; }
.chart-wrap{ position:relative; z-index:1; flex:1; min-height:0; }

.cal-legend{ display:flex; gap:18px; flex-wrap:wrap; }
.leg-item-cal{ display:flex; align-items:center; gap:7px; font-size:18px; font-weight:700; color:var(--text-readable); white-space:nowrap; }
.leg-dot{ width:13px; height:13px; border-radius:4px; flex-shrink:0; }
.cal-weekday-row{ display:grid; grid-template-columns:repeat(7, 1fr); column-gap:10px; }
.cal-grid-wrap{ flex:1; min-height:0; display:flex; overflow:hidden; padding:3px;}
.cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); column-gap:10px; row-gap:10px; width:100%; height:100%; }
.cal-day-name{ font-size:15px; font-weight:700; letter-spacing:.05em; color:var(--text-tertiary); text-align:center; padding-bottom:8px; }
.cal-day, .cal-filler{ width:100%; height:100%; min-width:0; min-height:0; }
.cal-day{ border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 4px; overflow:hidden; }
.cal-day[data-state="good"]{ background:var(--success-dim); color:var(--success); }
.cal-day[data-state="ok"]{ background:var(--warning-dim); color:var(--warning); }
.cal-day[data-state="none"]{ background:var(--danger-dim); color:var(--danger); }
.cal-day[data-state="pending"]{ background:transparent; color:var(--text-tertiary); border:1px dashed var(--border-subtle); }
.cal-day.is-today{ box-shadow:0 0 0 2px var(--info); }
.day-num{ font-family:var(--font-display); font-size:22px; font-weight:700; }
.spk-count{ font-size:13px; font-weight:700; opacity:.9; }

/* ── "Tanggal + SPK/Client/Omset" jadi card sendiri ──
   Sebelumnya digabung 1 card sama kalender (.today-cal-panel) — dipisah
   supaya posisinya bisa ditukar dengan .stats-col (kalender tetap di kanan,
   lihat .calendar-panel) tanpa harus mecah ulang grid internal tiap kali. */
.today-info-panel{
  position:relative;
  display:grid;
  /* Kolom date-block dikecilin (130px, sebelumnya 185px) — diminta owner
     biar nggak makan tempat berlebih, sisanya buat today-metrics. */
  grid-template-columns: 130px 1px 1fr;
  align-items:stretch;
  gap:24px;
  height:100%;
  min-height:0;
  max-height:100%;
  min-width:0;
  background:#121822;
  border:1px solid #222B38;
  border-radius:18px;
  padding:22px 26px;
  overflow:hidden;
}

/* ── Kalender, sekarang card sendiri (lihat .today-info-panel) ── */
.calendar-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:100%;
  min-width:0;
  background:#121822;
  border:1px solid #222B38;
  border-radius:18px;
  padding:22px 26px;
  overflow:hidden;
}
.calendar-panel .cal-panel{ flex:1; }

/* ── Calendar Panel (sub-section, tanpa border sendiri) ── */
.cal-panel{
  height:100%;
  min-height:0;
  max-height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:1;
}

.cal-divider-v{
  height:100%;
  background:linear-gradient(to bottom, transparent, #222B38 15%, #222B38 85%, transparent);
}

.glass-blob{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(38px);
  opacity:0.22;
  z-index:0;
}
.glass-blob-1{
  width:160px; height:160px;
  top:-35px; left:-35px;
  background:#A78BFA;
}
.glass-blob-2{
  width:130px; height:130px;
  bottom:-30px; right:-30px;
  background:#22D3EE;
}
.chart-panel .glass-blob-1{
  width:280px; height:280px;
  top:auto; left:-60px;
  bottom:-80px;
}
.chart-panel .glass-blob-2{
  width:220px; height:220px;
  bottom:auto; right:-50px;
  top:-60px;
}

.today-date-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  gap:2px;
  text-align:center;
  position:relative;
  z-index:1;
  padding:0 8px;
}

.today-day-name{
  font-size:23px;
  font-weight:600;
  color:#22D3EE;
  opacity:.9;
}

.today-date-num{
  font-family:var(--font-display);
  font-size:72px;
  font-weight:700;
  line-height:1;
  color:#ECF0F5;
  text-shadow:0 0 30px rgba(167,139,250,0.3);
}

.today-month-year{
  font-size:18px;
  font-weight:500;
  color:#8C96AA;
  letter-spacing:.04em;
  white-space:nowrap;
}

.today-divider{
  height:100%;
  background:linear-gradient(to bottom, transparent, rgba(34,43,56,0.45) 25%, rgba(34,43,56,0.45) 75%, transparent);
  position:relative;
  z-index:1;
}

.today-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:18px 18px;
  min-width:0;
  height:100%;
  position:relative;
  z-index:1;
}

.today-metric-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 16px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
}

.today-metric-item-full{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  grid-column:1 / -1;
  padding:18px 16px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
}

.today-metric-label{
  font-size:18px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#ECF0F5;
  white-space:nowrap;
}

/* nowrap WAJIB — tanpa ini "Rp 117 jt ▲" bisa pecah ke 2 baris dan bikin
   .today-metric-item-full lebih tinggi dari .today-info-panel (overflow:
   hidden lalu motong kontennya, sekaligus bikin .today-date-block keliatan
   nggak center karena ikut "stretch" ke tinggi row yang ke-inflate itu). */
.today-metric-value-row{ display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; }

.today-metric-value{
  font-family:var(--font-display);
  font-weight:700;
  font-size:58px;
  color:#ECF0F5;
  white-space:nowrap;
}
.today-metric-value[data-state="good"]{ color:#2DD7A3; }
.today-metric-value[data-state="ok"]{ color:#FFB454; }
.today-metric-value[data-state="none"]{ color:#FF5C72; }

.today-metric-trend{
  font-size:27px;
  font-weight:700;
  margin-left:4px;
}

.today-metric-trend.up{ color:#2DD7A3; }
.today-metric-trend.down{ color:#FF5C72; }
.today-metric-trend.flat{ color:#8A93A8; }

.today-metric-delta{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  margin-top:-4px;
  opacity:0.85;
}
.today-metric-delta.up{ color:#2DD7A3; }
.today-metric-delta.down{ color:#FF5C72; }
.today-metric-delta.flat{ color:#8A93A8; }

/* ── Right Calendar Panel ── */
.cal-panel-right{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.cal-content-wrapper{
  display:flex;
  gap:28px;
  flex:1;
  min-height:0;
  overflow:hidden;
}

.cal-month-vertical{
  writing-mode:vertical-lr;
  text-orientation:mixed;
  font-size:27px;
  font-weight:800;
  letter-spacing:.08em;
  color:#8A93A8;
  text-transform:uppercase;
  opacity:0.75;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 0;
  min-height:108px;
  height:100%;
}

.cal-grid-container{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.cal-header-top{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-shrink:0;
  margin-bottom:16px;
}

@media (prefers-reduced-motion: reduce){
  .live-pulse{ animation:none; }
}

.detail-modal-overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(5,7,11,0.72);
  display:none;
  align-items:center; justify-content:center;
}
.detail-modal-overlay.is-open{ display:flex; }
.detail-modal{
  width:880px; max-height:760px;
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:18px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.detail-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 26px; border-bottom:1px solid var(--border-subtle);
}
.detail-modal-title{ font-size:24px; font-weight:700; color:var(--text-primary); }
.detail-modal-close{
  background:none; border:none; color:var(--text-secondary); font-size:32px; line-height:1;
  cursor:pointer; padding:0 4px;
}
.detail-modal-close:hover{ color:var(--text-primary); }
.detail-modal-body{ padding:18px 26px 26px; overflow-y:auto; flex:1; min-height:0; }
.detail-modal-table{ width:100%; border-collapse:collapse; font-size:18px; }
.detail-modal-table th{
  text-align:left; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-tertiary); padding:10px 12px; border-bottom:1px solid var(--border-subtle);
}
.detail-modal-table th.num, .detail-modal-table td.num{ text-align:right; }
.detail-modal-table td{ padding:12px; border-bottom:1px solid var(--border-subtle); color:var(--text-primary); font-family:var(--font-display); }
/* PENTING: display:flex ditaruh di .cust-inner (span di dalam td), BUKAN
   langsung di <td> — td dengan display:flex berhenti berperilaku sebagai
   table-cell normal, bikin border-collapse gagal collapse rapi di kolom
   itu (border-bottom-nya kelihatan "patah"/nggak segaris sama kolom lain
   di baris yang sama). */
.detail-modal-table td.cust{ font-family:var(--font-body); font-weight:600; }
.cust-inner{ display:flex; align-items:center; gap:8px; }
.seg-badge{ display:inline-flex; align-items:center; gap:6px; width:38px; flex-shrink:0; }
.seg-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.seg-label{ font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--text-tertiary); flex-shrink:0; }
.detail-modal-empty{ padding:40px 0; text-align:center; color:var(--text-secondary); font-size:18px; }

.detail-modal-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px; border-top:1px solid var(--border-subtle); flex-shrink:0;
}
.detail-modal-pageinfo{ font-size:16px; color:var(--text-secondary); font-family:var(--font-display); }
.detail-modal-pagebtns{ display:flex; gap:8px; }
.detail-modal-pagebtn{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--border-subtle);
  background:var(--bg-surface-2); color:var(--text-primary); font-size:20px; line-height:1;
  cursor:pointer; transition:border-color 140ms ease-out, background 140ms ease-out;
}
.detail-modal-pagebtn:hover:not(:disabled){ border-color:var(--text-secondary); }
.detail-modal-pagebtn:disabled{ opacity:0.35; cursor:not-allowed; }

/* ── Tombol "Detail" buka popup SPK/Pelanggaran/Activity/Kunjungan (tabel modal & ticker) ── */
.spk-detail-btn, .pelanggaran-detail-btn, .activity-detail-btn, .kunjungan-detail-btn{
  background:rgba(167,139,250,0.12); border:1px solid rgba(167,139,250,0.4); color:var(--identity-omset);
  font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.02em;
  padding:5px 12px; border-radius:7px; cursor:pointer; white-space:nowrap;
  transition:background 140ms ease-out, border-color 140ms ease-out;
}
.spk-detail-btn:hover, .pelanggaran-detail-btn:hover, .activity-detail-btn:hover, .kunjungan-detail-btn:hover{ background:rgba(167,139,250,0.22); border-color:var(--identity-omset); }
.produksi-ticker-row .spk-detail-btn{ font-size:12px; padding:4px 9px; flex-shrink:0; }

/* ── Popup "Detail SPK" (item, foto, qty, harga, total) ──────────────── */
.spk-modal-overlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(5,7,11,0.78);
  display:none;
  align-items:center; justify-content:center;
}
.spk-modal-overlay.is-open{ display:flex; }
.spk-modal{
  width:920px; max-height:820px;
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:18px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.pelanggaran-modal{ width:560px; max-height:none; }
.pelanggaran-modal-meta{ flex-direction:column; gap:18px; margin-bottom:0; }
.pelanggaran-modal-meta-wide .spk-modal-meta-value{ white-space:pre-line; }
.spk-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 26px; border-bottom:1px solid var(--border-subtle);
}
.spk-modal-title{ font-size:24px; font-weight:700; color:var(--text-primary); }
.spk-modal-body{ padding:22px 26px 26px; overflow-y:auto; flex:1; min-height:0; }
.spk-modal-meta{ display:flex; gap:28px; margin-bottom:20px; flex-wrap:wrap; }
.spk-modal-meta-item{ display:flex; flex-direction:column; gap:4px; }
.spk-modal-meta-label{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-tertiary); }
.spk-modal-meta-value{ font-size:18px; font-weight:600; color:var(--text-primary); }
.spk-modal-table{ width:100%; border-collapse:collapse; font-size:17px; }
.spk-modal-table th{
  text-align:left; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-tertiary); padding:10px 12px; border-bottom:1px solid var(--border-subtle);
}
.spk-modal-table th.num, .spk-modal-table td.num{ text-align:right; }
.spk-modal-table td{ padding:12px; border-bottom:1px solid var(--border-subtle); color:var(--text-primary); vertical-align:middle; }
.spk-item-spec{ display:flex; align-items:center; gap:12px; }
.spk-item-photo{
  width:48px; height:48px; border-radius:8px; object-fit:cover; flex-shrink:0;
  background:var(--bg-surface-2); border:1px solid var(--border-subtle);
}
.spk-item-spec-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.spk-item-spec-code{ font-family:var(--font-display); font-weight:700; font-size:15px; }
.spk-item-spec-note{ font-size:14px; color:var(--text-secondary); white-space:pre-line; }
.spk-modal-total-label{ text-align:right; font-weight:700; padding:14px 12px; color:var(--text-secondary); }
#spk-modal-grandtotal{ font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--success); padding:14px 12px; }
.spk-modal-empty{ padding:40px 0; text-align:center; color:var(--text-secondary); font-size:18px; }
.spk-modal-logos{ display:flex; gap:18px; margin-top:22px; flex-wrap:wrap; }
.spk-modal-logo-item{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.spk-modal-logo-label{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-tertiary); }
.spk-modal-logo-img{ width:120px; height:120px; object-fit:contain; border-radius:10px; background:#fff; border:1px solid var(--border-subtle); }
.spk-modal-logo-empty{ width:120px; height:120px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--bg-surface-2); border:1px dashed var(--border-subtle); color:var(--text-tertiary); font-size:13px; text-align:center; padding:8px; }

/* ── Klik gambar item/logo -> preview zoom (lightbox sederhana) ──────── */
.spk-zoomable{ cursor:zoom-in; transition:opacity 140ms ease-out; }
.spk-zoomable:hover{ opacity:0.85; }
.img-zoom-overlay{
  position:fixed; inset:0; z-index:80;
  background:rgba(5,7,11,0.92);
  display:none;
  align-items:center; justify-content:center;
  cursor:zoom-out;
}
.img-zoom-overlay.is-open{ display:flex; }
.img-zoom-img{ max-width:88vw; max-height:88vh; object-fit:contain; border-radius:8px; box-shadow:0 24px 60px rgba(0,0,0,0.6); background:#fff; }
.img-zoom-close{
  position:absolute; top:24px; right:28px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:var(--text-primary);
  font-size:28px; line-height:1; width:44px; height:44px; border-radius:50%;
  cursor:pointer;
}
.img-zoom-close:hover{ background:rgba(255,255,255,0.16); }

/* ── Marquee pelanggaran karyawan (kpi_pelanggaran via HrController) ──────
   Ticker horizontal merah di paling bawah dashboard. Pakai CSS @keyframes
   (animation-iteration-count:infinite) — bukan ada interaksi manual yang
   perlu dijaga di sini (beda dari .produksi-ticker-wrap yang scrollTop asli
   biar tetap bisa di-scroll manual), jadi animasi CSS murni paling robust:
   jalan terus di browser sendiri, nggak gantung kalkulasi per-frame. */
.violation-marquee{
  flex-shrink:0;
  height:46px;
  border-radius:10px;
  background:linear-gradient(90deg, rgba(255,92,114,0.16), rgba(255,92,114,0.06));
  border:1px solid rgba(255,92,114,0.4);
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
}
.violation-marquee::before{
  content:'⚠ PELANGGARAN KARYAWAN';
  flex-shrink:0;
  background:var(--danger);
  color:#0A0E14;
  font-weight:800;
  font-size:15px;
  letter-spacing:.05em;
  padding:0 18px;
  height:100%;
  display:flex;
  align-items:center;
  white-space:nowrap;
  position:relative;
  z-index:2;
  box-shadow:4px 0 12px rgba(5,7,11,0.4);
}
.violation-marquee-track{
  display:flex;
  align-items:center;
  white-space:nowrap;
  will-change:transform;
  padding-left:20px;
}
.violation-marquee-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 30px;
  font-size:17px;
  font-weight:600;
  color:var(--danger);
  white-space:nowrap;
  border-right:1px solid rgba(255,92,114,0.25);
}
.violation-marquee-item .vm-sep{ opacity:0.5; font-weight:400; }
.violation-marquee-empty{
  padding-left:20px; font-size:16px; font-weight:600; color:var(--text-tertiary);
  display:flex; align-items:center; height:100%;
}
@keyframes violationMarqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }