/* ============================================================
   STOCK TAKE DASHBOARD - Stylesheet.html
   Redesigned to match mockup: clean, professional, SVG icons
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- CSS VARIABLES ---- */
:root {
  --navy:         #0F2448;
  --navy-mid:     #162d54;
  --navy-light:   #1e3a6e;
  --navy-sidebar: #0F2448;
  --blue:         #2563EB;
  --blue-hover:   #1d4ed8;
  --blue-light:   #EFF6FF;
  --blue-accent:  #3B82F6;
  --green:        #10B981;
  --green-light:  #ECFDF5;
  --orange:       #F59E0B;
  --orange-light: #FFFBEB;
  --red:          #EF4444;
  --red-light:    #FEF2F2;
  --white:        #FFFFFF;
  --bg:           #F1F5F9;
  --gray-50:      #F8FAFC;
  --gray-100:     #F1F5F9;
  --gray-200:     #E2E8F0;
  --gray-300:     #CBD5E1;
  --gray-400:     #94A3B8;
  --gray-500:     #64748B;
  --gray-600:     #475569;
  --gray-700:     #334155;
  --gray-800:     #1E293B;
  --gray-900:     #0F172A;
  --sidebar-w:    220px;
  --topbar-h:     60px;
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    14px;
  --shadow-xs:    0 1px 2px rgba(15,36,72,.05);
  --shadow-sm:    0 1px 3px rgba(15,36,72,.08), 0 1px 2px rgba(15,36,72,.04);
  --shadow:       0 4px 12px rgba(15,36,72,.08), 0 1px 3px rgba(15,36,72,.05);
  --shadow-md:    0 8px 24px rgba(15,36,72,.10), 0 2px 6px rgba(15,36,72,.06);
  --shadow-lg:    0 16px 40px rgba(15,36,72,.14), 0 4px 12px rgba(15,36,72,.08);
  --transition:   all .18s cubic-bezier(.4,0,.2,1);
  --font:         'Inter', sans-serif;
  --mono:         'JetBrains Mono', monospace;
}

/* ---- DARK MODE ---- */
[data-theme="dark"] {
  --bg: #0a0f1e;
  --white: #111827;
  --gray-50: #1a2235;
  --gray-100: #1e2a3d;
  --gray-200: #243047;
  --gray-300: #2d3a52;
  --gray-400: #6b7a99;
  --gray-500: #8899bb;
  --gray-600: #aab8d4;
  --gray-700: #c4cfdf;
  --gray-800: #dde4f0;
  --gray-900: #f0f4ff;
  --navy-sidebar: #060d1f;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 4px 12px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
}

[data-theme="dark"] body {
  background: var(--bg);
  color: var(--gray-800);
}

[data-theme="dark"] .card {
  background: var(--white);
  border-color: var(--gray-200);
}

[data-theme="dark"] .topbar {
  background: var(--white);
  border-color: var(--gray-200);
}

[data-theme="dark"] .data-table th { background: var(--gray-100); }
[data-theme="dark"] .data-table td { border-color: var(--gray-200); }
[data-theme="dark"] .data-table tbody tr:hover { background: var(--gray-100); }
[data-theme="dark"] .form-control { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-800); }
[data-theme="dark"] .search-input { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-800); }
[data-theme="dark"] .modal-box { background: var(--white); border-color: var(--gray-200); }
[data-theme="dark"] .modal-input { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-800); }
[data-theme="dark"] .sum-card { background: var(--white); }
[data-theme="dark"] .counter-detail-card { background: var(--white); }
[data-theme="dark"] .loc-stat-card { background: var(--white); }
[data-theme="dark"] .report-form { background: var(--white); }
[data-theme="dark"] .chip { background: var(--gray-100); border-color: var(--gray-200); }
[data-theme="dark"] .filter-btn { background: var(--gray-100); border-color: var(--gray-200); }
[data-theme="dark"] .btn-outline { background: var(--gray-100); border-color: var(--gray-200); }
[data-theme="dark"] .btn-hist-action { background: var(--gray-100); border-color: var(--gray-200); }
[data-theme="dark"] .select-setting { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-800); }
[data-theme="dark"] .toast { background: var(--gray-800); color: var(--gray-100); }
[data-theme="dark"] .sku-list-item { border-color: var(--gray-200); }
[data-theme="dark"] .sku-list-item:hover { background: var(--gray-100); }
[data-theme="dark"] .modal-search-input { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-800); }
[data-theme="dark"] .modal-info-strip { background: rgba(37,99,235,.15); }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.7); }
[data-theme="dark"] .dark-input { background: rgba(255,255,255,.08); }
[data-theme="dark"] .page-btn { background: var(--gray-100); border-color: var(--gray-200); }
[data-theme="dark"] .hero-card { /* tetap navy, tidak perlu diubah */ }
[data-theme="dark"] .sidebar { /* tetap navy, tidak perlu diubah */ }
[data-theme="dark"] .summary-metric-card { background: var(--white); border-color: var(--gray-200); }
[data-theme="dark"] .analyze-tx-table th { background: var(--gray-100); }
[data-theme="dark"] .analyze-tx-table tr:hover td { background: var(--gray-100); }
[data-theme="dark"] .reconcile-remark-area { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-800); }
[data-theme="dark"] .locked-analysis-banner { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.2); }
[data-theme="dark"] .summary-tab-btn:hover:not(.active) { background: var(--gray-100); }
[data-theme="dark"] .modal-3d-overlay { background: rgba(0,0,0,.9); }

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  /* Pakai warna solid buat background biar aman */
  background-color: var(--bg); 
  color: var(--gray-800);
  min-height: 100vh;
  overflow-x: hidden;
  /* HAPUS background-image dari body kalau lu mau layout bersih */
}

/* Kalo lu mau background gudang tetep ada tapi cuma buat "dinding" paling belakang */
.app-layout {
  background-image: url('https://drive.google.com/uc?export=view&id=11KDJ0hxMdDWbnmb7KQxd-SqNjrdEYNNu');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
input, select, textarea { font-family: var(--font); }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ================================================================
   LAYOUT
   ================================================================ */
.app-layout { display: flex; min-height: 100vh; height: 100vh; overflow: hidden; }

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--navy-sidebar);
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

/* Brand */
/* Tinggi bar ditetapkan di sini, NGGAK ikut tinggi gambar.
   Dulu tingginya = tinggi gambar dikurangi margin negatif (-8 / -25), dan dua
   angka itu sebenernya ngukur whitespace kosong bawaan file logo lama. Begitu
   logonya diganti dengan yang whitespace-nya beda, hurufnya yang kepotong.
   Sekarang cuma ada SATU angka yang perlu disetel: height di bawah ini. */
.sidebar-brand {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  /* Ukuran logo  = height - (padding atas + bawah)  -> 76 - 28 = 48px
     Space napas  = padding atas/bawah              -> 14px
     Mau lebih lega? naikin DUA-DUANYA barengan (+8 height, +4 padding).
     Mau logonya lebih gede? naikin height doang. */
  height: 76px;
  padding: 14px 10px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
/* Gambar nyesuaiin diri ke dalam kotak di atas: nggak pernah kepotong,
   nggak pernah gepeng, apapun rasio logonya. */
.sidebar-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Nav */
.sidebar-nav { flex: 1; padding: 10px 10px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  color: rgba(255,255,255,.55);
  font-size: .82rem; font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 2px;
  position: relative;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; transition: var(--transition); }
.nav-item:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.nav-item.active {
  background: rgba(37,99,235,.25);
  color: #fff;
  font-weight: 600;
}
.nav-item.active svg { color: var(--blue-accent); }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 2.5px; background: var(--blue-accent);
  border-radius: 0 2px 2px 0;
  left: -10px;
}

/* Footer */
.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,.07);

  /* Wave di footer sidebar.
     Gambarnya dipasang sebagai background DI ELEMEN INI, tapi lapisan
     gelapnya lewat ::before -- bukan dijadikan satu lapisan background
     bertumpuk. Alasannya: ::before bisa dikasih pointer-events:none, jadi
     dia nggak pernah nyegat klik ke tombol Logout / Pengaturan di bawahnya.
     overflow:hidden wajib, kalau nggak wave-nya nyembur keluar footer
     waktu sidebar lagi animasi buka-tutup. */
  position: relative;
  overflow: hidden;
  background-image: url('/wave-sidebar.webp');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
/* Lapisan peredup. Angka .92 di baris paling atas itu KNOB-nya:
   makin kecil = wave makin kelihatan, makin besar = makin tenggelam.
   Jangan diturunkan di bawah ~.80 -- di bawah itu garis wave mulai lewat
   di belakang teks menu dan tulisannya jadi susah dibaca. */
.sidebar-footer::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(15,36,72,.92) 0%,
    rgba(15,36,72,.72) 45%,
    rgba(15,36,72,.55) 100%);
}
/* Mode gelap: sidebar pakai --navy-sidebar #060d1f, jadi lapisan peredup footer ikut warna itu
   (kalau tetap #0F2448, footer kelihatan lebih biru/terang dari bagian atas sidebar). */
[data-theme="dark"] .sidebar-footer { border-top-color: rgba(255,255,255,.05); }
[data-theme="dark"] .sidebar-footer::before {
  background: linear-gradient(180deg,
    rgba(6,13,31,.96) 0%,
    rgba(6,13,31,.80) 45%,
    rgba(6,13,31,.62) 100%);
}
/* Isi footer wajib diangkat di atas lapisan peredup, kalau nggak
   teks & tombolnya ketutup gradasi. */
.sidebar-footer > * { position: relative; z-index: 1; }
/* Credit button */
.btn-credit {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 10px;
  color: rgba(255,255,255,.3);
  font-size: .73rem; font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: default;
  letter-spacing: .01em;
}
.btn-credit svg { width: 13px; height: 13px; color: var(--blue-accent); flex-shrink: 0; }

/* Sidebar toggle button (< panah kiri di brand) */
.sidebar-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: var(--transition);
  position: absolute;
  /* Ditengahin vertikal, bukan dipatok 8px dari atas -- biar posisinya ikut
     nyesuaiin kalau tinggi .sidebar-brand diubah lagi nanti. */
  top: 50%; right: 8px;
  transform: translateY(-50%);
}
.sidebar-toggle-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.sidebar-toggle-btn svg { width: 14px; height: 14px; }

/* Sidebar show button (> panah kanan, muncul saat sidebar hidden) */
.sidebar-show-btn {
  display: none;
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 201;
  width: 22px; height: 48px;
  background: var(--navy);
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.1);
  border-left: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: var(--shadow);
}
.sidebar-show-btn:hover { background: var(--navy-light); color: #fff; width: 26px; }
.sidebar-show-btn svg { width: 13px; height: 13px; }

/* Sidebar collapsed state */
.sidebar.collapsed {
  transform: translateX(-100%);
  box-shadow: none;
}
.sidebar-show-btn.visible {
  display: flex;
}
.main-content.sidebar-hidden {
  margin-left: 0;
  transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}
.main-content {
  transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}

/* ================================================================
   MAIN CONTENT
   ================================================================ */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar {
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  z-index: 100;
  box-shadow: var(--shadow-xs);
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* Subtitle topbar. Kosong di hampir semua halaman -- :empty bikin dia
   nggak makan tempat sama sekali, jadi topbar halaman lain nggak berubah. */
.topbar-titlewrap { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.topbar-sub {
  font-size: .7rem; font-weight: 500; color: var(--gray-500);
  line-height: 1.25; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-sub:empty { display: none; }

/* ================================================================
   BREADCRUMB BAR (di bawah topbar)
   .main-content itu flex column, .page-content-nya flex:1 — jadi bar ini
   cukup flex-shrink:0 dan area konten otomatis nyusut sendiri.
   :empty = login & landing page persis kayak sebelumnya.
   ================================================================ */
.crumbbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 7px 24px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-size: .74rem;
  line-height: 1;
  color: var(--gray-500);
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.crumbbar::-webkit-scrollbar { display: none; }
.crumbbar:empty { display: none; }

.crumb-sep  { color: var(--gray-300); flex-shrink: 0; font-size: .85rem; }
.crumb-item { white-space: nowrap; flex-shrink: 0; font-weight: 500; }
.crumb-item.is-link {
  cursor: pointer;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
  /* Target sentuh di HP kekecilan kalau cuma setinggi teks. Padding vertikal
     dikasih negatif margin biar tinggi bar-nya nggak ikut nambah. */
  padding: 6px 2px;
  margin: -6px 0;
  border-radius: 4px;
}
.crumb-item.is-link:hover { color: var(--blue); }
.crumb-item.is-link:active { background: var(--gray-200); }

/* Highlight sebentar di accordion sidebar pas segmen grup breadcrumb diklik,
   biar mata user ketarik ke menu yang baru ke-expand. */
.nav-accordion.crumb-flash > .nav-accordion-header {
  box-shadow: inset 0 0 0 1.5px var(--blue-accent);
  border-radius: 8px;
}
.nav-accordion > .nav-accordion-header { transition: box-shadow .3s ease; }
.crumb-item.is-current { color: var(--gray-900); font-weight: 600; }
.crumb-home { display: inline-flex; align-items: center; }
.crumb-home svg { width: 13px; height: 13px; display: block; }

/* ================================================================
   TOPBAR — slot aksi per halaman
   ================================================================ */
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-actions:empty { display: none; }
.topbar-actions::before {
  content: ''; width: 1px; height: 20px; background: var(--gray-200); margin-right: 2px;
}
.sqx-refresh {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--gray-200); border-radius: 8px;
  padding: 5px 10px; cursor: pointer;
  font-family: inherit; font-size: .72rem; font-weight: 500; color: var(--gray-500);
  transition: border-color .15s, color .15s;
}
.sqx-refresh:hover { border-color: var(--blue); color: var(--blue); }
.sqx-refresh svg { width: 13px; height: 13px; flex-shrink: 0; }
.sqx-refresh strong { font-weight: 600; color: var(--gray-700); }
.sqx-refresh.is-spinning svg { animation: sqx-spin .9s linear infinite; }
@keyframes sqx-spin { to { transform: rotate(360deg); } }

/* ================================================================
   SMART QUEUE — VERSI DESKTOP (>=769px)
   Semua di bawah ini dibungkus .sq-desktop-only, yang di HP udah
   di-display:none. Jadi tampilan HP nggak kesenggol sama sekali.
   ================================================================ */
.sqx-tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.sqx-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 10px; cursor: pointer;
  background: var(--white); border: 1px solid var(--gray-200);
  font-family: inherit; font-size: .84rem; font-weight: 600; color: var(--gray-600);
  transition: background .15s, color .15s, border-color .15s;
}
.sqx-tab svg { width: 17px; height: 17px; }
.sqx-tab:hover { border-color: var(--blue); color: var(--blue); }
.sqx-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.sqx-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.9fr 1.05fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}
@media (max-width: 1180px) { .sqx-grid { grid-template-columns: 1fr 1fr; } }

.sqx-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px 18px 14px;
  min-width: 0;
  display: flex; flex-direction: column;
}
.sqx-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.sqx-card-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--blue-light); color: var(--blue);
}
.sqx-card-ic svg { width: 18px; height: 18px; }
.sqx-card-txt { min-width: 0; }
.sqx-card-txt h3 {
  margin: 0; font-size: .87rem; font-weight: 700; color: var(--gray-900);
  letter-spacing: -.01em; line-height: 1.25;
}
.sqx-card-txt p {
  margin: 2px 0 0; font-size: .71rem; font-weight: 400; color: var(--gray-500); line-height: 1.3;
}

/* --- Tabel ringkas (grid, bukan <table>: kolomnya gampang disamain) --- */
.sqx-row-3 { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; }
.sqx-row-2 { display: grid; grid-template-columns: 1fr auto; gap: 14px; }
.sqx-row-3 > span:nth-child(2), .sqx-row-3 > span:nth-child(3) { min-width: 62px; text-align: right; }
.sqx-row-2 > span:nth-child(2) { min-width: 62px; text-align: right; }

.sqx-th {
  padding: 8px 10px; background: var(--gray-50); border-radius: 7px;
  font-size: .7rem; font-weight: 600; color: var(--gray-500);
}
.sqx-row { padding: 11px 10px; border-bottom: 1px solid var(--gray-100); align-items: center; }
.sqx-lbl {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  font-size: .79rem; font-weight: 500; color: var(--gray-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sqx-lbl .sqm-ic { width: 16px; height: 16px; flex-shrink: 0; }

/* Warna ikon status. Aslinya cuma didefinisiin di dalam @media (max-width:768px),
   makanya di desktop ikonnya ikut warna teks (abu). Ditaruh di luar media query
   supaya kepakai di dua-duanya. Nilainya sama persis dengan versi HP, jadi
   tampilan HP nggak berubah sama sekali. */
.sqm-ic-wait   { color: var(--gray-400); }
.sqm-ic-proses { color: var(--blue); }
.sqm-ic-finish { color: #16A34A; }
.sqx-val { font-size: .79rem; font-weight: 500; color: var(--gray-800); }
.sqx-grand {
  margin-top: auto; padding: 12px 10px; border-top: 1.5px solid var(--gray-200);
  align-items: center;
}
.sqx-grand .sqx-lbl, .sqx-grand .sqx-val { font-weight: 700; color: var(--blue); font-size: .82rem; }

/* --- Donut + legenda --- */
.sqx-donut-wrap { display: flex; align-items: center; gap: 16px; flex: 1; min-height: 0; }
.sqx-donut { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.sqx-donut svg { width: 100%; height: 100%; display: block; }
.sqx-donut-c {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  font-size: .68rem; font-weight: 500; color: var(--gray-500); line-height: 1.35;
  pointer-events: none;
}
.sqx-donut-c strong { font-size: .94rem; font-weight: 700; color: var(--gray-900); }
.sqx-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sqx-lg-row { display: flex; align-items: center; gap: 9px; }
.sqx-lg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sqx-lg-lbl {
  flex: 1; min-width: 0; font-size: .76rem; font-weight: 500; color: var(--gray-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sqx-lg-pct { font-size: .79rem; font-weight: 700; color: var(--gray-900); }

/* ================================================================
   SMART QUEUE INBOUND — KARTU RINGKASAN (VERSI DESKTOP)
   Kelasnya nebeng .sqx-* punya Outbound; yang ditulis di sini cuma
   yang memang beda: grid 2x2, baris lima kolom, dan baris Gate Open
   yang isinya input.
   ================================================================ */

/* Dua kolom, bukan empat sebaris. Media query ngukur lebar JENDELA,
   sedangkan kartunya hidup di dalam .page-content yang sudah dipotong
   sidebar (~240px): empat kolom di jendela 1440 cuma kebagian ~280px
   per kartu dan kolom nama status di tabel lima kolom ikut kegencet
   sampai hilang. Dua kolom ngasih ~590px per kartu di lebar yang sama. */
/* Baris pertama: tiga kartu sebaris (Total | Count | Persentase).
   Bobotnya nggak rata: kartu Count punya lima kolom angka + baris Gate Open,
   jadi dia yang paling butuh lebar. Ingat media query ngukur lebar JENDELA,
   sedangkan kartunya hidup di .page-content yang sudah dipotong sidebar
   (~240px) -- di jendela 1440 yang kebagi cuma ~1200px. */
.sqxi-grid { grid-template-columns: 1.15fr 1.25fr 1.15fr; }
/* Batasnya 1300px, bukan 1180px seperti punya Outbound. Kartu Count di sini
   bawa lima kolom angka, bukan dua -- di bawah itu kolom nama statusnya
   kurang dari 100px sedangkan "Waiting Unload" butuh segitu, alias kepotong
   satu huruf terus-terusan. Lebih baik turun ke dua kolom lebih cepat. */
@media (max-width: 1300px) { .sqxi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .sqxi-grid { grid-template-columns: 1fr; } }

/* Kolom angka kartu Total by Status dikecilin dari 62px bawaan .sqx-row-3:
   isinya paling panjang "120,40", dan 62px bikin kolom nama status kehabisan
   jatah sampai "Waiting Unload" kepotong. Dikunci ke dalam .sqxi-grid supaya
   kartu Outbound yang pakai kelas sama nggak ikut berubah. */
.sqxi-grid .sqx-row-3 > span:nth-child(2),
.sqxi-grid .sqx-row-3 > span:nth-child(3) { min-width: 50px; }

/* Baris kedua: rincian divisi (sempit) + aktivitas terakhir (lebar). */
.sqxi-grid2 {
  display: grid; grid-template-columns: 1fr 1.55fr;
  gap: 16px; margin-bottom: 16px; align-items: stretch;
}
/* 1300px: di bawah itu kartu Recent kebagian kurang dari 600px dan mulai
   maksa scroll ke samping. Kartu "sekilas pandang" yang harus di-scroll
   dulu itu kehilangan gunanya, jadi lebih baik dia turun jadi selebar
   layar daripada dipaksa muat di sebelah. */
@media (max-width: 1300px) { .sqxi-grid2 { grid-template-columns: 1fr; } }

/* minmax(0,1fr) di kolom pertama, bukan 1fr: kalau 1fr, nama status
   yang panjang naikin lebar minimum kolomnya dan kolom angka kegencet. */
.sqxi-row5 { display: grid; grid-template-columns: minmax(0,1fr) 38px 44px 38px 38px; gap: 6px; }
.sqxi-row5 > *:not(:first-child) { text-align: right; }
.sqxi-row5 > span:not(:first-child) { font-size: .79rem; font-weight: 500; color: var(--gray-800); }
.sqx-th.sqxi-row5 > span:not(:first-child) { font-size: .7rem; font-weight: 600; color: var(--gray-500); }
.sqx-grand.sqxi-row5 > span:not(:first-child) { font-weight: 700; color: var(--blue); font-size: .82rem; }

.sqxi-gate { background: #EFF6FF; border-radius: 8px; border-bottom: none; margin-top: 8px; padding: 8px 10px; }
.sqxi-gate .sqx-lbl { color: var(--navy); font-weight: 700; }
.sqxi-auto { font-weight: 700; color: var(--navy); }

/* Daftar divisi di desktop: DUA kolom, ngisi ke bawah dulu baru pindah
   kolom (column-count, bukan grid) -- jadi urutan bacanya tetap atas-ke-bawah
   seperti di HP, cuma dipatahin di tengah. Kalau pakai grid, urutannya jadi
   kiri-kanan-kiri-kanan dan orang yang hafal posisi barisnya dari versi HP
   bakal kehilangan jejak.
   Scroll-nya dilepas: 14 baris dibagi dua tinggal 7 baris, muat tanpa
   dipotong, dan daftar yang nggak perlu di-scroll selalu lebih baik. */
.sqxi-div2 { column-count: 2; column-gap: 20px; margin-bottom: 4px; }
.sqxi-div2 > .sqxi-dv { break-inside: avoid; }
.sqxi-dv {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-bottom: 1px solid var(--gray-100);
}
.sqxi-dv span {
  font-size: .76rem; color: var(--gray-700); font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sqxi-dv b { font-size: .79rem; font-weight: 700; color: var(--gray-800); font-variant-numeric: tabular-nums; }
.sqxi-dv.is-zero span, .sqxi-dv.is-zero b { color: var(--gray-300); }

/* --- Tombol "Details" + keterangan periode --- */
.sqx-head-right {
  display: flex; align-items: center; gap: 9px;
  margin-left: auto; flex-shrink: 0;
}
.sqx-period {
  font-size: .7rem; font-weight: 500; color: var(--gray-500); white-space: nowrap;
}
.sqx-detail-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  background: var(--white); border: 1px solid var(--gray-200);
  font-family: inherit; font-size: .73rem; font-weight: 600; color: var(--blue);
  transition: background .15s, border-color .15s, color .15s;
}
.sqx-detail-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.sqx-detail-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
/* Umpan balik tekan. Durasinya pendek banget (.09s) -- kalau kelamaan,
   tombolnya kerasa ngambang, bukan responsif. */
.sqx-detail-btn:active { transform: scale(.955); transition-duration: .09s; }

/* Window detail muncul: fade + naik dikit. Pakai @keyframes, bukan transition,
   karena elemennya dateng dari display:none -- transition nggak jalan di situ.
   Dikunci ke desktop biar rasa buka-tutup versi HP nggak berubah. */
@media (min-width: 769px) {
  #modalSqDetail.sqy-in { animation: sqyIn .2s cubic-bezier(.32,.72,.35,1); }
  #modalSqDetail.sqy-in .modal-box { animation: sqyInBox .26s cubic-bezier(.32,.72,.35,1); }
}
@keyframes sqyIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sqyInBox {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #modalSqDetail.sqy-in,
  #modalSqDetail.sqy-in .modal-box { animation: none; }
}

/* ================================================================
   ANIMASI VERSI HP
   Semua di dalam @media max-width:768px -- desktop nggak kesentuh
   sama sekali dan tetap pakai sqy-in yang lama.
   ================================================================ */
@media (max-width: 768px) {

  /* --- 1. Halaman login keluar --- */
  @keyframes lgOut { to { opacity: 0; transform: scale(.965) translateY(-10px); } }
  .login-overlay.is-leaving {
    animation: lgOut .34s cubic-bezier(.4,0,.2,1) forwards;
    pointer-events: none;
  }

  /* --- 2. Halaman Menu masuk, satu per satu --- */
  @keyframes lmIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .landing-m.is-entering .mh-head,
  .landing-m.is-entering .mh-sec,
  .landing-m.is-entering .mh-wh {
    animation: lmIn .42s cubic-bezier(.32,.72,.35,1) both;
  }
  .landing-m.is-entering .mh-head               { animation-delay: .06s; }
  .landing-m.is-entering .mh-sec:nth-child(1)   { animation-delay: .12s; }
  .landing-m.is-entering .mh-sec:nth-child(2)   { animation-delay: .18s; }
  .landing-m.is-entering .mh-sec:nth-child(3)   { animation-delay: .24s; }
  .landing-m.is-entering .mh-sec:nth-child(4)   { animation-delay: .30s; }
  .landing-m.is-entering .mh-sec:nth-child(5)   { animation-delay: .36s; }
  .landing-m.is-entering .mh-wh                 { animation-delay: .40s; }

  /* --- 3. Detail Smart Queue: geser dari kanan --- */
  @keyframes sqmIn  { from { transform: translateX(100%); } to { transform: translateX(0); } }
  @keyframes sqmOut { from { transform: translateX(0); } to { transform: translateX(100%); } }
  #modalSqDetail.sqm-in  { animation: sqmIn  .30s cubic-bezier(.32,.72,.35,1); }
  #modalSqDetail.sqm-out { animation: sqmOut .26s cubic-bezier(.4,0,.6,1) forwards; }
  #modalSqDetail.sqm-in,
  #modalSqDetail.sqm-out { box-shadow: -10px 0 26px rgba(15,23,42,.14); }

  /* --- 4. Daftar di belakang ikut kedorong ---
     PENTING: transform JANGAN pernah dipasang ke #page-smartqueue atau ke
     #sqTabOutbound sendiri. #modalSqDetail itu anak langsung #sqTabOutbound,
     dan elemen ber-transform jadi acuan baru buat position:fixed di dalamnya
     -- modalnya bakal lepas dari layar dan ikut kegeser bareng daftarnya.
     Makanya yang digerakin saudara-saudaranya, bukan induknya. */
  @keyframes sqmPush { to   { transform: translateX(-22%); filter: brightness(.93); } }
  @keyframes sqmPop  { from { transform: translateX(-22%); filter: brightness(.93); }
                       to   { transform: none; filter: none; } }
  #sqTabOutbound.sqd-push > *:not(#modalSqDetail) { animation: sqmPush .30s cubic-bezier(.32,.72,.35,1) forwards; }
  #sqTabOutbound.sqd-pop  > *:not(#modalSqDetail) { animation: sqmPop  .26s cubic-bezier(.4,0,.6,1) forwards; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .login-overlay.is-leaving,
  .landing-m.is-entering .mh-head,
  .landing-m.is-entering .mh-sec,
  .landing-m.is-entering .mh-wh,
  #modalSqDetail.sqm-in,
  #modalSqDetail.sqm-out,
  #sqTabOutbound.sqd-push > *,
  #sqTabOutbound.sqd-pop  > * { animation: none; }
}

/* --- Recent Truck Activity --- */
.sqx-recent { margin-bottom: 16px; }
/* Scroller sendiri: di layar desktop sempit yang kegeser cuma tabelnya,
   judul kartu sama kotak pencarian tetap diem di tempat. */
.sqx-recent-scroll { overflow-x: auto; }
.sqx-recent-scroll::-webkit-scrollbar { height: 7px; }
.sqx-recent-scroll::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }

.sqx-rrow {
  display: grid;
  /* Semua kolom pakai fr dengan bobot ngikutin isi terpanjangnya, jadi sisa
     lebar layar kebagi rata-proporsional ke semua kolom -- bukan numpuk jadi
     satu lubang. Bobotnya kira-kira sepanjang isi aslinya:
       No 1 digit | Datang "14:03" | "SPNU4644315/B9333IT" | Start | Finish
       | badge "Proses Loading" | Qty 3 digit | CBM "376,89" | "ELAN JAELANI"
     Mau kolom tertentu lebih lega? gedein angka fr-nya doang, yang lain
     otomatis nyusut ngikutin. */
  grid-template-columns:
    0.5fr   /* No      */
    1.3fr   /* Datang  */
    2.1fr   /* Truck No */
    1.3fr   /* Start   */
    1.3fr   /* Finish  */
    0.9fr   /* Durasi  */
    1.9fr   /* Status  */
    0.8fr   /* Qty     */
    1fr     /* CBM     */
    1.4fr;  /* Driver  */
  gap: 12px; align-items: center;
  /* Lantai buat layar desktop sempit: di bawah ini tabelnya di-scroll
     horizontal, bukan digencet sampai teksnya kepotong semua. */
  min-width: 1220px;
}
.sqx-recent .sqx-th { margin-bottom: 2px; }
/* Nomor kolom setelah Durasi masuk: 8=Qty, 9=CBM, 10=Driver.
   Ketiganya rata kanan biar ujung kanannya sejajar rapi. */
.sqx-recent .sqx-rrow > span:nth-child(8),
.sqx-recent .sqx-rrow > span:nth-child(9),
.sqx-recent .sqx-rrow > span:nth-child(10) { text-align: right; }
/* Jarak aman antara angka CBM dan nama driver terpanjang. */
.sqx-recent .sqx-rrow > span:nth-child(10) { padding-left: 16px; }
.sqx-rc-dash { color: var(--gray-300); }

/* Sel tanggal + jam: tanggal kecil abu di atas, jam di bawah. Ditumpuk
   biar kolomnya tetap sempit -- kalau sebaris, tabelnya maksa scroll. */
.sqx-dt { display: flex; flex-direction: column; line-height: 1.3; }
.sqx-dt em {
  font-style: normal; font-size: .67rem; font-weight: 400; color: var(--gray-400);
}
.sqx-dt b { font-size: .78rem; font-weight: 500; color: var(--gray-700); }

/* Durasi loading. Abu = selesai (angka mati). Biru = masih berjalan, dan
   angkanya cuma benar pada saat digambar -- bukan stopwatch. */
.sqx-dur { font-size: .78rem; font-weight: 600; color: var(--gray-700); }
.sqx-dur.is-run { color: var(--blue); font-weight: 500; }
#sqxRecentBody .sqx-rrow { padding: 12px 10px; border-bottom: 1px solid var(--gray-100); }
#sqxRecentBody .sqx-rrow:last-child { border-bottom: none; }
.sqx-rc { font-size: .78rem; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqx-rc-no { color: var(--gray-400); }
.sqx-rc-truck { font-weight: 600; color: var(--gray-900); }
.sqx-rc-num { font-weight: 600; color: var(--gray-800); }
.sqx-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.sqx-badge .sqm-ic { width: 13px; height: 13px; flex-shrink: 0; }
.sqx-b-WAITING   { background: var(--gray-100); color: var(--gray-600); }
.sqx-b-ON_PROSES { background: var(--blue-light); color: var(--blue); }
.sqx-b-FINISH    { background: #DCFCE7; color: #15803D; }
[data-theme="dark"] .sqx-b-FINISH { background: rgba(22,163,74,.18); color: #4ADE80; }
/* Baris Recent Truck Activity versi Inbound. Delapan kolom, bukan sepuluh
   seperti Outbound: kartunya di sini cuma sekitar 60% lebar layar (dia
   sebaris sama kartu rincian divisi), jadi kolom Qty dan Driver dilepas --
   dua-duanya sudah ada di halaman detail, dan yang dicari orang di kartu ini
   itu "truk mana yang barusan gerak", bukan rincian muatannya. */
.sqiy-rrow {
  display: grid;
  /* Bobotnya disetel dari isi TERPANJANG tiap kolom, bukan dikira-kira:
     badge "Waiting Unload" 122px dan "B9732JYT + tag LOKAL" 111px itu dua
     yang paling boros, jadi dua kolom itu yang dapat jatah paling besar.
     Sisanya dikecilin secukupnya supaya totalnya tetap muat tanpa scroll. */
  grid-template-columns:
    0.40fr   /* No      */
    1.00fr   /* Datang  */
    1.90fr   /* No Truk */
    1.00fr   /* Start   */
    1.00fr   /* Finish  */
    0.75fr   /* Durasi  */
    2.10fr   /* Status  */
    0.85fr;  /* CBM     */
  gap: 10px; align-items: center;
  min-width: 600px;
}
.sqiy-rrow > span:nth-child(6),
.sqiy-rrow > span:nth-child(8) { text-align: right; }
.sqxi-recent .sqx-th { margin-bottom: 2px; }
.sqxi-recent .sqx-search { width: 200px; }
#sqiyRecentBody .sqiy-rrow { padding: 11px 10px; border-bottom: 1px solid var(--gray-100); }
#sqiyRecentBody .sqiy-rrow:last-child { border-bottom: none; }

.sqx-recent-empty {
  padding: 30px 10px; text-align: center; font-size: .78rem; color: var(--gray-400);
}

/* --- Rangka loading (skeleton) versi desktop ---
   Versi HP pakai .sqm-skel, tapi itu kekunci di dalam @media (max-width:768px).
   Ini kembarannya buat desktop, ukurannya px bukan vw. */
.sqx-skel {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
  background-size: 320% 100%;
  animation: sqxShimmer 1.25s ease-in-out infinite;
}
/* Kalau permintaan gagal, kedipnya dimatiin -- biar nggak kelihatan
   seperti masih memuat padahal udah nyerah. */
.sqx-skel.is-stalled { animation: none; background: var(--gray-100); }
@keyframes sqxShimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .sqx-skel { animation: none; } }

.sqx-skel-ic  { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.sqx-skel-txt { width: 58%; }
.sqx-lg-dot.sqx-skel { width: 9px; height: 9px; border-radius: 50%; }
.sqx-donut.is-loading svg { animation: sqx-spin 1.1s linear infinite; transform-origin: 50% 50%; }
/* Kembarannya buat donat versi HP. Ditaruh di luar @media biar @keyframes
   sqx-spin yang sama kepakai dua-duanya -- nggak ada gunanya nulis ulang
   putaran yang persis sama cuma karena beda ukuran layar. */
.sqm-donut.is-loading svg { animation: sqx-spin 1.1s linear infinite; transform-origin: 50% 50%; }
.sqx-search {
  position: relative; margin-left: auto; flex-shrink: 0; width: 300px; max-width: 38vw;
}
.sqx-search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--gray-400); pointer-events: none;
}
.sqx-search input {
  width: 100%; padding: 8px 12px 8px 33px;
  border: 1px solid var(--gray-200); border-radius: 8px;
  background: var(--white); color: var(--gray-800);
  font-family: inherit; font-size: .76rem; outline: none;
  transition: border-color .15s;
}
.sqx-search input:focus { border-color: var(--blue); }

/* ================================================================
   SMART QUEUE — HALAMAN DETAIL VERSI DESKTOP (namespace sqy*)
   Tetap modal, tapi diposisiin lewat JS (sqyFitModal) supaya persis
   nutupin area konten: di bawah topbar+breadcrumb, di kanan sidebar.
   ================================================================ */
@media (min-width: 769px) {
  #modalSqDetail {
    position: fixed; inset: auto; padding: 0;
    background: var(--bg); align-items: stretch; justify-content: stretch;
  }
  #modalSqDetail .modal-box {
    width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important;
    margin: 0 !important; border-radius: 0 !important;
    background: var(--bg); box-shadow: none; border: none;
  }
  /* Judul dipegang topbar halaman (diganti pas modal kebuka), jadi header
     navy bawaan modal nggak usah ikut tampil -- kalau tampil jadi dua judul. */
  #modalSqDetail .sqd-header { display: none !important; }
  /* Breadcrumb di dalam modal cuma buat HP. Di desktop modalnya berhenti di
     bawah #crumbBar asli, jadi kalau ini ikut tampil jadi dua breadcrumb. */
  #modalSqDetail .sqd-crumb { display: none !important; }
  #modalSqDetail .modal-box > div:last-child { padding: 18px !important; }

  /* --- Baris filter tanggal --- */
  #modalSqDetail .page-toolbar {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: 12px; padding: 14px 16px; align-items: center;
  }
  #modalSqDetail .page-toolbar > div:first-child { flex: 1; min-width: 0; }
  #modalSqDetail .page-toolbar > div:first-child > input { flex: 1; min-width: 0; width: auto !important; }
  #modalSqDetail .page-toolbar span { font-size: .76rem; color: var(--gray-500); flex-shrink: 0; }
  #modalSqDetail .page-toolbar .modal-input { height: 38px; font-size: .8rem; }
  #modalSqDetail .page-toolbar .filter-btn {
    background: var(--blue); border-color: var(--blue); color: #fff;
    padding: 10px 18px; font-size: .78rem; font-weight: 600; flex-shrink: 0;
  }
  #modalSqDetail .page-toolbar .filter-btn svg { width: 14px; height: 14px; }
}

/* --- Kartu ringkasan (Total Data | Periode) --- */
.sqy-summary {
  display: flex; align-items: center; gap: 22px;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 14px;
}
.sqy-sum-item { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.sqy-sum-div { width: 1px; align-self: stretch; background: var(--gray-200); }
.sqy-sum-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sqy-sum-lbl { font-size: .71rem; font-weight: 400; color: var(--gray-500); }
.sqy-sum-val { font-size: .78rem; font-weight: 500; color: var(--gray-500); }
.sqy-sum-val b { font-size: 1.15rem; font-weight: 700; color: var(--gray-900); margin-right: 3px; }
.sqy-sum-per { font-size: .88rem; font-weight: 700; color: var(--gray-900); }

/* Peringatan "ada pending lebih tua dari batas mundur". Sengaja satu baris
   tanpa tombol: nggak ada aksi yang aman buat ditawarin di sini -- tombol
   "lihat semua" cuma bakal balikin masalah rentang selebar-lebarnya yang
   justru dihindarin sama batas 3 hari itu. Tanggal terlamanya ditulis biar
   orang tau harus ngetik tanggal berapa kalau mau ngecek. */
.sqw-thin {
  display: flex; align-items: center; gap: 8px;
  background: var(--orange-light); border-left: 3px solid var(--orange);
  border-radius: 0 8px 8px 0; padding: 8px 12px; margin-bottom: 14px;
}
.sqw-thin > svg { width: 15px; height: 15px; color: var(--orange); flex-shrink: 0; }
.sqw-thin span { font-size: .76rem; color: #92400E; line-height: 1.35; }
.sqw-thin b { font-weight: 700; }

/* ===== Penanda lewat batas waktu (SLA) =====
   Merah, BUKAN oranye. Oranye di app ini sudah dipakai buat overload dan buat
   peringatan pending lama -- dua-duanya "perhatikan nanti". Yang ini "kerjain
   sekarang", jadi dia perlu warna sendiri, kalau nggak dia tenggelam di antara
   peringatan lain yang sudah biasa dilihat orang. */
.sla-badge {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: var(--red-light); border: 1px solid rgba(239,68,68,.3);
  border-radius: 7px; padding: 4px 8px;
  font-size: .7rem; font-weight: 700; color: #991B1B;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sla-badge svg { width: 12px; height: 12px; color: var(--red); flex-shrink: 0; }
/* Di desktop badge-nya nempel di kolom WAKTU, di bawah jam datang -- BUKAN di
   kolom Status. Kolom Status cuma ~159px; badge di situ bikin labelnya kepotong
   jadi "Waiting Loadin...". Kolom Waktu juga lebih masuk akal: ini soal waktu. */
.sqx-dt .sla-badge { margin-top: 3px; }

.sla-strip {
  display: flex; align-items: center; gap: 8px;
  background: var(--red-light); border-left: 3px solid var(--red);
  border-radius: 0 8px 8px 0; padding: 8px 12px; margin-bottom: 14px;
}
.sla-strip > svg { width: 15px; height: 15px; color: var(--red); flex-shrink: 0; }
.sla-strip span { font-size: .76rem; color: #991B1B; line-height: 1.35; }
.sla-strip b { font-weight: 700; }

/* Garis merah tipis di tepi kiri baris/kartu. Dipakai buat nyari cepat sambil
   scroll -- badge doang gampang kelewat di daftar panjang. */
.sqy-trk.is-late { box-shadow: inset 3px 0 0 var(--red); background: rgba(239,68,68,.028); }
.sqd-card.is-late { box-shadow: inset 3px 0 0 var(--red); background: rgba(239,68,68,.028); }

/* --- Daftar antrian --- */
.sqy-card { margin-bottom: 0; }

/* Tombol Kembali di baris filter tanggal (window detail, desktop).
   Di HP nggak usah tampil -- di sana header navy modal masih ada, lengkap
   dengan tombol kembalinya sendiri (.sqd-back). */
.sqy-back {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 9px 14px; border-radius: 9px; cursor: pointer;
  background: var(--white); border: 1px solid var(--gray-200);
  font-family: inherit; font-size: .78rem; font-weight: 600; color: var(--gray-600);
  transition: background .15s, border-color .15s, color .15s;
}
.sqy-back svg { width: 14px; height: 14px; }
.sqy-back:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
/* Dulu disembunyiin di HP dengan asumsi header navy modal (.sqd-header,
   lengkap dengan tombol kembalinya) selalu tampil di sana. Ternyata nggak
   selalu -- dan begitu dua-duanya hilang, user kejebak di halaman detail
   tanpa jalan keluar sama sekali. Sekarang tombol ini tampil di SEMUA
   ukuran layar: kalau header navy-nya muncul, paling cuma ada dua tombol
   kembali; jauh lebih baik daripada nol. */
@media (max-width: 768px) {
  .sqy-back {
    padding: 8px 12px;
    font-size: .74rem;
    border-radius: 8px;
  }
  .sqy-back svg { width: 13px; height: 13px; }
}

/* Wadah filter + kotak cari. margin-left:auto ditaruh DI SINI doang --
   kalau dipasang di dua anaknya, ruang kosong kebagi dua dan keduanya kepisah. */
.sqy-headtools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.sqy-headtools .sqx-search { margin-left: 0; width: 280px; }

/* Pil saringan status -- UKURAN DESKTOP.
   Kelasnya sengaja dipakai bareng sama versi HP: aturan warna (ikon per status,
   pil aktif selalu biru) cuma ditulis SEKALI, di blok .sqf-pill.is-on di bawah.
   Yang beda cuma ukuran, dan itu ditimpa media query <=768px yang letaknya
   SESUDAH blok ini -- jadi urutan dua blok ini jangan ditukar.
   Di sini pilnya flex:0 0 auto (selebar isinya) karena dia duduk sebaris sama
   kotak cari; di HP dia flex:1 karena satu baris penuh cuma buat pil. */
.sqf-pills { display: flex; gap: 6px; flex-shrink: 0; }
.sqf-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--gray-200); background: var(--white);
  font-family: inherit; font-size: .76rem; font-weight: 600;
  color: var(--gray-500); line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.sqf-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.sqf-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqf-pill:hover { border-color: var(--gray-300); }
.sqf-pill.is-on:hover { border-color: var(--blue); }

/* ---- WARNA: berlaku di HP dan desktop sekaligus. JANGAN disalin ke dalam
   media query, cukup di sini. Warna ikon disamain sama pil status di kartu,
   biar orang nggak perlu ngapalin dua bahasa warna buat hal yang sama. ---- */
.sqf-all  svg { color: var(--gray-600); }
.sqf-wait svg { color: var(--gray-500); }
.sqf-pros svg { color: var(--blue); }
.sqf-fin  svg { color: #15803D; }
/* Pil yang lagi aktif SELALU biru, apa pun statusnya -- biru di sini artinya
   "ini yang lagi dipilih", bukan "ini statusnya proses". */
.sqf-pill.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.sqf-pill.is-on svg { color: #fff; }

/* Pil TIPE INBOUND (Detail Antrian Inbound). Bentuk & aturan "aktif = biru"
   ikut .sqf-pill di atas. Titik warnanya disamain sama tag jenis inbound di
   sebelah nomor truk (.sqdi-tag), biar orang langsung nyambung pil mana = tag mana. */
.sqf-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--gray-400); }
.sqf-t-lokal  .sqf-dot { background: var(--gray-500); }
.sqf-t-import .sqf-dot { background: #4338CA; }
.sqf-t-steko  .sqf-dot { background: #047857; }
.sqf-pill.is-on .sqf-dot { background: #fff; }
/* Desktop: garis tipis pemisah grup pil status dan grup pil tipe di header. */
.sqy-tooldiv { width: 1px; height: 24px; background: var(--gray-200); flex-shrink: 0; }

/* Layar desktop sempit (laptop 1366 ke bawah masih aman; di bawah ~1200 mulai
   sesak). Empat pil + kotak cari makan ~620px, dan judul kartunya kedorong
   sampai pecah jadi 3 baris. Yang dikorbanin: judul dan kontrol dipisah jadi
   dua baris. Sengaja BUKAN ngilangin label pil -- pil yang tinggal ikon doang
   bikin orang harus nebak, dan itu ongkos yang lebih mahal daripada 40px
   tinggi tambahan di layar yang emang jarang dipakai. */
@media (max-width: 1200px) {
  #modalSqDetail .sqx-card-head { flex-wrap: wrap; }
  #modalSqDetail .sqy-headtools { margin-left: 0; width: 100%; }
  #modalSqDetail .sqy-headtools .sqx-search { flex: 1; width: auto; min-width: 0; }
}

/* Keterangan jumlah yang lagi ditampilkan -- cuma nongol pas ada filter aktif. */
.sqy-shown { font-size: .72rem; font-weight: 500; color: var(--blue); margin-left: 4px; }
.sqy-shown:empty { display: none; }
.sqy-scroll { overflow-x: auto; }
.sqy-scroll::-webkit-scrollbar { height: 7px; }
.sqy-scroll::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }
.sqy-row {
  display: grid;
  /* minmax(0, Xfr) -- BUKAN Xfr polos. Track 'fr' polos punya lantai min-content,
     jadi satu nama tujuan yang panjang bisa maksa kolomnya melar dan geser semua
     kolom lain. minmax(0,...) ngebolehin track-nya mengecil, dan itu yang bikin
     ellipsis di dalamnya beneran jalan. */
  grid-template-columns:
    minmax(0, 0.6fr)   /* No     */
    minmax(0, 1.3fr)   /* Waktu  */
    minmax(0, 2.8fr)   /* No Truk + driver */
    minmax(0, 2.5fr)   /* Lokasi -- dilebarin, nama PT paling sering kepotong di sini */
    minmax(0, 1.3fr)   /* Start  */
    minmax(0, 1.3fr)   /* Finish */
    minmax(0, 1fr)     /* CBM    */
    minmax(0, 2fr)     /* Status -- muat badge + penanda overload di kirinya */
    minmax(0, 0.6fr);  /* Aksi   */
  gap: 12px; align-items: center;
  min-width: 1180px;
}

/* Baris tabel antrian Inbound. Kolomnya beda dari Outbound: "Lokasi"
   (tujuan kirim) diganti "Vendor" (asal barang), dan ada kolom "Gate"
   yang di Outbound nggak ada. Sama-sama minmax(0,Xfr) supaya ellipsis
   di dalam selnya beneran jalan. */
.sqiy-row {
  display: grid;
  grid-template-columns:
    minmax(0, 0.6fr)   /* No               */
    minmax(0, 1.3fr)   /* Datang           */
    minmax(0, 2.6fr)   /* No Truk + driver */
    minmax(0, 2.2fr)   /* Vendor           */
    minmax(0, 0.7fr)   /* Gate             */
    minmax(0, 1.3fr)   /* Start            */
    minmax(0, 1.3fr)   /* Finish           */
    minmax(0, 1fr)     /* CBM              */
    minmax(0, 2fr)     /* Status           */
    minmax(0, 0.6fr);  /* Aksi             */
  gap: 12px; align-items: center;
  min-width: 1260px;
}
.sqiy-row > span:nth-child(5),
.sqiy-row > span:nth-child(8) { text-align: right; }
.sqy-trk { border-bottom: 1px solid var(--gray-100); }
.sqy-trk:last-child { border-bottom: none; }
/* .sqiy-row (inbound) wajib ikut: tanpa padding, badge nomor nempel ke tepi kiri
   dan ketimpa garis merah .is-late, plus kolomnya nggak lurus sama header (.sqx-th 10px). */
.sqy-trk > .sqy-row,
.sqy-trk > .sqiy-row { padding: 12px 10px 4px; }
.sqy-c { font-size: .78rem; color: var(--gray-700); min-width: 0; }
.sqy-no {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 4px 7px; border-radius: 7px;
  background: var(--blue-light); color: var(--blue);
  font-size: .74rem; font-weight: 700;
}
.sqy-truck { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sqy-truck b {
  font-size: .84rem; font-weight: 700; color: var(--gray-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sqy-truck em {
  font-style: normal; font-size: .69rem; color: var(--gray-400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* max-width + overflow di WADAHNYA, min-width:0 di TEKSNYA. Dua-duanya perlu,
   dan yang kedua itu yang dulu ketinggalan sampai nama tujuan panjang nimpa
   kolom Start Loading:
     - .sqy-ic > span punya white-space:nowrap, jadi lebar min-content-nya =
       lebar SELURUH teks (bukan sepanjang kata terpanjang).
     - dia flex item, dan flex item bawaannya min-width:auto = min-content.
   Gabungan dua hal itu bikin dia nolak mengecil, wadahnya ikut melar lewat
   batas kolom grid, dan teksnya luber ke kolom sebelah. text-overflow:ellipsis
   nggak pernah kepakai karena elemennya nggak pernah kesempitan.
   Nama lengkapnya ditaruh di atribut title, jadi yang kepotong tetap bisa
   dibaca dengan hover -- memotong teks tanpa kasih jalan lihat versi penuhnya
   itu ngilangin informasi, bukan ngerapihin. */
.sqy-ic { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow: hidden; }
.sqy-ic > svg { width: 13px; height: 13px; color: var(--gray-400); flex-shrink: 0; }
.sqy-ic > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sqy-cbm { justify-content: flex-start; font-weight: 700; color: var(--gray-900); }

/* Penanda overload, kembaran .sqd-ol-mark versi HP (di sana ukurannya vw).
   Posisinya juga sama: tepat di kiri badge status. */
.sqy-status { display: flex; align-items: center; gap: 8px; }
.sqy-ol-mark {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--orange-light); color: var(--orange);
  cursor: help;
}
.sqy-ol-mark svg { width: 12px; height: 12px; display: block; }

/* Baris remark: full-width di bawah tiap truk, persis kayak mockup. */
.sqy-remark { display: flex; align-items: center; gap: 8px; padding: 0 10px 11px 52px; }
.sqy-remark > svg { width: 13px; height: 13px; color: var(--gray-300); flex-shrink: 0; }
.sqy-remark input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: inherit; font-size: .74rem; color: var(--gray-700);
  padding: 3px 4px; border-radius: 5px;
}
.sqy-remark input::placeholder { color: var(--gray-300); }
.sqy-remark input:focus { background: var(--gray-50); }

.sqy-exp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
  background: none; border: none; color: var(--gray-400);
  transition: background .15s, color .15s, transform .3s cubic-bezier(.32,.72,.35,1);
}
.sqy-exp-btn:hover { background: var(--gray-100); color: var(--blue); }
.sqy-exp-btn svg { width: 15px; height: 15px; }
.sqy-trk.is-open .sqy-exp-btn { transform: rotate(180deg); color: var(--blue); }

/* Panel rincian buka-tutup mulus.
   display:none nggak bisa dianimasiin, dan max-height butuh angka tebakan
   yang bakal motong isi kalau baris SKU-nya banyak. Jadi pakai grid yang
   tinggi barisnya dianimasiin 0fr -> 1fr: browser ngukur tinggi aslinya
   sendiri, mau isinya 4 baris atau 40.
   Padding WAJIB nempel di .sqy-x-in, bukan di .sqy-x -- kalau di luar,
   panel yang lagi nutup tetap makan tinggi sebesar padding-nya. */
.sqy-x {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.32,.72,.35,1);
}
.sqy-x-in {
  overflow: hidden;
  min-height: 0;
  padding: 4px 10px 14px 52px;
  opacity: 0;
  transition: opacity .18s ease;
}
.sqy-trk.is-open .sqy-x { grid-template-rows: 1fr; }
.sqy-trk.is-open .sqy-x-in { opacity: 1; transition-delay: .07s; }

@media (prefers-reduced-motion: reduce) {
  .sqy-x, .sqy-x-in { transition: none; }
}
.sqy-x-sec {
  font-size: .7rem; font-weight: 700; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 7px;
}
.sqy-x-dest {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 11px; border-radius: 7px; background: var(--gray-50);
  font-size: .76rem; color: var(--gray-700); margin-bottom: 5px;
}
.sqy-x-dest span { color: var(--gray-400); }
.sqy-x-dn { border: 1px solid var(--gray-200); border-radius: 9px; margin-bottom: 8px; overflow: hidden; }
.sqy-x-dnno {
  padding: 7px 12px; background: var(--gray-50);
  font-size: .73rem; font-weight: 700; color: var(--gray-700);
}
/* Lebar kolom panel rincian, dipakai bareng sama baris judul & baris total.
   Angkanya dihitung dari isi terpanjang tiap kolom, terus tiap kolom dikasih
   kelonggaran yang kurang lebih sama (~32-34px) supaya jarak antar kolom
   kebaca rata -- bukan ada yang mepet dan ada yang nganga.
     SKU 300  : kode ~9 huruf + deskripsi ~32 huruf
     Order 66 : sampai 4 digit
     OL 62    : sampai 4 digit
     Done 66  : sampai 4 digit
     CBM 84x2 : isinya "117,30" (~50px) tapi JUDULNYA "CBM ORDER" lebih lebar,
                jadi dua kolom ini emang harus lebih lega dari kolom qty
   Kolom terakhir 1fr sengaja dibiarin kosong: itu yang nahan angka supaya
   nggak ketarik ke tepi kanan window. Mau geser semua? ubah 300px-nya aja. */
.sqy-x-row, .sqy-x-head, .sqy-x-tot {
  display: grid;
  /* Kolom ke-7 (38px) = ikon cocok/selisih. Sengaja sempit: isinya cuma
     lingkaran 17px, jadi nggak perlu kelonggaran sebanyak kolom angka. */
  grid-template-columns: minmax(0, 300px) 66px 62px 66px 84px 84px 38px 1fr;
  align-items: center; gap: 14px;
}
.sqy-x-row > span:nth-child(n+2):nth-child(-n+6),
.sqy-x-head > span:nth-child(n+2):nth-child(-n+6),
.sqy-x-tot > span:nth-child(n+2):nth-child(-n+6) { text-align: right; }
/* Ikon rata tengah di kolomnya, bukan rata kanan kayak angka. */
.sqy-x-row > span:nth-child(7),
.sqy-x-head > span:nth-child(7),
.sqy-x-tot > span:nth-child(7) { text-align: center; }

.sqy-x-row { padding: 8px 12px; border-top: 1px solid var(--gray-100); }
.sqy-x-head {
  padding: 6px 12px; background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  font-size: .66rem; font-weight: 700; color: var(--gray-400);
  text-transform: uppercase; letter-spacing: .04em;
}
.sqy-x-sku { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: .76rem; font-weight: 600; color: var(--gray-800); }
.sqy-x-sku em { font-style: normal; font-size: .69rem; font-weight: 400; color: var(--gray-400); }
/* Order = angka rencana, sengaja diredupin. Done Loading = angka hasil, paling
   tegas. OL dulunya chip pil; begitu jadi kolom tetap, bentuk pil bikin tinggi
   barisnya beda-beda -- jadi sekarang angka biasa, warnanya tetap sama. */
.sqy-x-order { font-size: .79rem; font-weight: 500; color: var(--gray-500); }
.sqy-x-qty   { font-size: .84rem; font-weight: 700; color: var(--gray-900); }
.sqy-x-ol    { font-size: .79rem; font-weight: 700; color: #B45309; }
.sqy-x-cbmo  { font-size: .79rem; font-weight: 500; color: var(--gray-400); }
.sqy-x-cbm   { font-size: .81rem; font-weight: 600; color: var(--gray-700); }
.sqy-x-dash  { color: var(--gray-300); font-size: .79rem; }

/* ================================================================
   MODAL SPLIT LOKASI (Smart Picking)
   ================================================================ */
.splitm {
  background: var(--white); border-radius: 16px; width: 400px; max-width: 92%;
  padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
  max-height: 88vh; overflow-y: auto;
}
.splitm-t { font-size: 1.02rem; font-weight: 700; color: var(--gray-900); margin-bottom: 2px; }
.splitm-s { font-size: .79rem; color: var(--gray-500); margin-bottom: 15px; }
.splitm-s b { color: var(--gray-800); }
.splitm-lbl { display: block; font-size: .79rem; font-weight: 600; color: var(--gray-700); margin-bottom: 7px; }

.splitm-row { display: grid; grid-template-columns: 1fr 78px 28px; gap: 8px; align-items: center; margin-bottom: 9px; }
.splitm-row > .splitm-hint { grid-column: 1 / -1; margin-top: -4px; }
.splitm-loc, .splitm-qty {
  width: 100%; padding: 8px 10px; border: 1px solid var(--gray-300); border-radius: 8px;
  font-family: inherit; font-size: .82rem; background: var(--white); color: var(--gray-800); outline: none;
}
.splitm-loc { font-family: var(--mono, monospace); text-transform: uppercase; font-weight: 600; color: var(--green); }
.splitm-qty { text-align: right; font-weight: 600; }
.splitm-loc:focus, .splitm-qty:focus { border-color: var(--blue); }
/* Merah cuma buat hal yang beneran ngunci Simpan. Nggak ada warna peringatan
   lain -- lokasi di luar daftar stok itu sah, bukan masalah. */
.splitm-loc.is-bad, .splitm-qty.is-bad { border-color: var(--red); background: var(--red-light, #FEF2F2); color: var(--red); }
.splitm-hint { font-size: .67rem; color: var(--gray-400); }
.splitm-hint.is-bad { color: var(--red); font-weight: 600; }

.splitm-rm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px; border: none; background: none;
  color: var(--gray-300); cursor: pointer;
}
.splitm-rm:hover { background: var(--red-light, #FEF2F2); color: var(--red); }
.splitm-rm svg { width: 14px; height: 14px; }

.splitm-add {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 8px 13px; margin-bottom: 15px; cursor: pointer;
  background: none; border: 1px dashed var(--gray-300); border-radius: 8px;
  font-family: inherit; font-size: .76rem; font-weight: 600; color: var(--blue);
}
.splitm-add:hover { border-color: var(--blue); background: var(--blue-light); }
.splitm-add svg { width: 13px; height: 13px; }

.splitm-meter { border-radius: 10px; padding: 11px 13px; margin-bottom: 15px; background: var(--gray-50); }
.splitm-meter-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .77rem; margin-bottom: 8px; }
.splitm-meter-top b { font-size: .92rem; font-weight: 700; }
.splitm-bar { height: 6px; border-radius: 99px; background: var(--gray-200); overflow: hidden; }
.splitm-bar i { display: block; height: 100%; border-radius: 99px; transition: width .18s ease; }
.splitm-msg { font-size: .71rem; line-height: 1.45; margin-top: 8px; }
.splitm-meter.is-ok   { background: #DCFCE7; }
.splitm-meter.is-ok   .splitm-meter-top, .splitm-meter.is-ok .splitm-msg { color: #15803D; }
.splitm-meter.is-ok   .splitm-bar i { background: var(--green); }
.splitm-meter.is-less { background: var(--orange-light); }
.splitm-meter.is-less .splitm-meter-top, .splitm-meter.is-less .splitm-msg { color: #92400E; }
.splitm-meter.is-less .splitm-bar i { background: var(--orange); }
.splitm-meter.is-over { background: var(--red-light, #FEF2F2); }
.splitm-meter.is-over .splitm-meter-top, .splitm-meter.is-over .splitm-msg { color: #B91C1C; }
.splitm-meter.is-over .splitm-bar i { background: var(--red); }

.splitm-acts { display: flex; gap: 9px; }
.splitm-acts .btn[disabled] {
  background: var(--gray-200); border-color: var(--gray-200); color: var(--gray-400); cursor: not-allowed;
}

/* Ikon cocok / selisih. Bentuk & warnanya sengaja disamain sama bahasa yang
   udah dipakai di app: centang hijau = beres, segitiga kuning = ada overload. */
.sqy-x-ok, .sqy-x-bad {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; cursor: help;
}
.sqy-x-ok  { background: #DCFCE7; color: #16A34A; }
.sqy-x-bad { background: var(--orange-light); color: var(--orange); }
.sqy-x-ok svg, .sqy-x-bad svg { width: 11px; height: 11px; display: block; }
[data-theme="dark"] .sqy-x-ok { background: rgba(22,163,74,.18); color: #4ADE80; }
[data-theme="dark"] .sqy-x-ol { color: #FCD34D; }
.sqy-x-empty { font-size: .74rem; color: var(--gray-400); padding: 8px 2px; }

/* Total Qty per kunjungan (satu truk, gabungan semua DN).
   Grid-nya disamain persis sama .sqy-x-row biar angkanya jatuh tepat di
   bawah kolom Qty. padding-left 13px = 12px padding baris + 1px border
   kotak DN -- tanpa itu totalnya meleset 1px dari angka di atasnya. */
/* Grid-nya udah diatur bareng .sqy-x-row di atas -- di sini tinggal jarak.
   padding-left 13px = 12px padding baris + 1px border kotak DN, biar angkanya
   jatuh tepat di bawah angka baris di atasnya. */
.sqy-x-tot {
  padding: 11px 12px 11px 13px;
  margin-top: 2px;
  border-top: 1.5px solid var(--gray-200);
}
.sqy-x-tot-lbl { font-size: .77rem; font-weight: 700; color: var(--blue); }
.sqy-x-tot-lbl em {
  font-style: normal; font-weight: 400; font-size: .69rem; color: var(--gray-400);
}
.sqy-x-tot .sqy-x-qty { font-size: .88rem; color: var(--blue); }
.sqy-x-tot .sqy-x-cbm { font-weight: 700; color: var(--blue); }
.sqy-empty { padding: 40px 10px; text-align: center; font-size: .8rem; color: var(--gray-400); }
/* Baris rangka loading: tingginya disamain sama baris asli (yang isinya
   2 baris tanggal+jam), biar daftarnya nggak lompat pas data masuk. */
.sqy-skelrow { padding: 16px 10px 10px !important; }
.sqy-skelrow > .sqx-skel { height: 13px; }
.sqy-remark > .sqx-skel { height: 9px; width: 34%; }

/* ================================================================
   TAMBAHAN KHUSUS DETAIL INBOUND — BENTUK & WARNA
   Ditulis DI LUAR media query, pakai ukuran desktop, dan yang di dalam
   @media (max-width:768px) cuma numpuk ukurannya pakai vw. Pola ini sama
   dengan .sqf-pill: aturan "apa bentuknya" ditulis sekali, aturan "sebesar
   apa" ditulis dua kali. Kalau dibalik -- semuanya di dalam media query --
   salah satu layar nggak kebagian sama sekali, dan itu yang kejadian.
   ================================================================ */

/* Tag jenis inbound (LOKAL / IMPORT / STEKO) di sebelah nomor truk.
   Di Outbound nggak ada padanannya -- di sana semua truk sejenis. */
.sqdi-tag {
  display: inline-flex; align-items: center;
  margin-left: 7px; padding: 2px 7px; border-radius: 5px;
  font-size: .62rem; font-weight: 700; letter-spacing: .3px; line-height: 1.5;
  background: var(--gray-100); color: var(--gray-600);
  flex-shrink: 0; white-space: nowrap;
}
.sqdi-tag.is-import { background: #EEF2FF; color: #4338CA; }
.sqdi-tag.is-steko  { background: #ECFDF5; color: #047857; }

/* Blok keterangan tambahan di dalam panel rincian. Inbound punya enam
   keterangan yang nggak ada di Outbound (type truck, vendor, container/
   plan, PO, checker, durasi); ditaruh di grid sendiri, bukan ikut baris
   ikon di atas, supaya baris ikon itu tetap empat kolom sama persis
   dengan Outbound.
   Di desktop SATU BARIS, pakai flex -- bukan grid dengan jumlah kolom tetap.
   Sebabnya jumlah keterangannya nggak sama: truk Lokal/Steko punya empat
   (Type Truck, Vendor, Checker, Durasi), truk Import punya lima (plus
   Container No). Grid tiga kolom bikin yang keempat jatuh sendirian ke baris
   dua dan kelihatan seperti ada yang ketinggalan. Flex dengan flex:1 1 0
   ngebagi lebarnya rata berapa pun jumlah itemnya.
   min-width:0 WAJIB di anaknya: tanpa itu isi sepanjang "CONTAINER 40'"
   maksa kolomnya melar dan panelnya meluber ke kanan.
   Di HP tetap dua kolom -- lima item sebaris di layar 390px nggak kebaca. */
.sqdi-meta {
  display: flex; flex-wrap: nowrap; gap: 18px;
  background: var(--gray-50); border-radius: 9px;
  padding: 12px 14px; margin-bottom: 12px;
}
.sqdi-m { flex: 1 1 0; min-width: 0; }
.sqdi-m em {
  display: block; font-style: normal; font-size: .67rem;
  color: var(--gray-400); margin-bottom: 2px;
}
.sqdi-m b {
  display: block; font-size: .78rem; font-weight: 600; color: var(--gray-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sqdi-m b.is-dash { color: var(--gray-300); font-weight: 500; }

/* Remark inbound cuma bisa DIBACA -- sheet-nya milik tim lain dan web app
   ini nggak punya wewenang nulis ke sana. Dibikin kelihatan mati supaya
   nggak ada yang ngetik di situ lalu heran kenapa hilang pas refresh.
   Garis putus-putusnya CUMA buat .sqd-remark, karena cuma dia yang punya
   border. .sqy-remark nggak punya border sama sekali, jadi 'border-style:
   dashed' di sana bikin browser pakai bawaannya -- tebal 'medium', warna
   currentColor alias hampir hitam -- dan hasilnya kotak putus-putus tebal
   melintang selebar baris. Buat desktop cukup latar input-nya yang diredupin. */
.sqd-remark.sqdi-ro { background: var(--gray-100); border-style: dashed; }
.sqd-remark.sqdi-ro input { cursor: default; color: var(--gray-600); }
/* Jarak atas ditambah CUMA buat versi read-only ini. .sqy-remark bawaannya
   padding-top:0 -- di Outbound itu nggak kerasa karena remark-nya kotak
   tanpa garis, jadi kebaca sebagai teks lanjutan. Di sini dia kotak bergaris
   putus-putus, dan kotak yang nempel 0px di bawah baris data kebaca seperti
   nabrak, bukan seperti bagian bawah baris yang sama. */
.sqy-remark.sqdi-ro { padding-top: 10px; padding-bottom: 12px; }
.sqy-remark.sqdi-ro input {
  cursor: default; color: var(--gray-500);
  background: var(--gray-50); border: 1px dashed var(--gray-200);
  padding: 5px 9px;
}

/* ================================================================
   SMART QUEUE — VERSI HP (<=768px)
   Blok .sq-m cuma tampil di HP; .sq-desktop-only kebalikannya.
   ================================================================ */
.sq-m { display: none; }

@media (max-width: 768px) {
  #page-smartqueue .sq-desktop-only { display: none !important; }
  #page-smartqueue .sq-m { display: block; }

  /* Smart Queue di HP SEKARANG BISA DI-SCROLL (dulu dikunci muat 1 layar).
     Tiga aturan di bawah harus konsisten satu sama lain -- kalau cuma
     overflow-nya yang diganti tapi tinggi halamannya masih dikunci 100%,
     isinya tetap kepotong, cuma sekarang tanpa cara buat ngeliatnya.
       1. overflow-y: auto  -> boleh scroll
       2. height: auto      -> halaman boleh lebih tinggi dari layar
       3. flex dilepas      -> kartu nggak dipaksa muat ke sisa ruang
     Alasan pindah dari "muat 1 layar": tinggi kartu dihitung dari LEBAR layar
     (semua ukurannya vw), sementara ruang yang tersedia itu TINGGI layar.
     Dua angka yang nggak berhubungan -- jadi di HP yang layarnya pendek
     isinya selalu kepotong, berapa pun nav-nya diramping. */
  .page-content:has(#page-smartqueue.active) {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* +12px supaya kartu terakhir nggak mepet banget ke nav pas di-scroll
       sampai mentok. Tinggi nav-nya diukur runtime lewat --nav-h, jadi
       angka ini ikut menyesuaikan kalau nav-nya diubah lagi. */
    padding-bottom: calc(var(--nav-h, 58px) + 12px) !important;
  }
  #page-smartqueue.page.active {
    height: auto;
    min-height: 0;
    display: block;
  }
  #page-smartqueue > #sqTabOutbound { min-height: 0; }

  /* --- Kartu hero (sebaris: ikon | teks | refresh | garis | jam) --- */
  .sqm-hero {
    display: flex;
    align-items: center;
    gap: 2.7vw;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 2.70vw;
    padding: 2.70vw 2.43vw;
    box-shadow: var(--shadow-xs);
    margin-bottom: 2.10vw;
  }
  .sqm-hero-icon {
    width: 7.02vw; height: 7.02vw; border-radius: 1.89vw; flex-shrink: 0;
    background: var(--blue-light); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
  }
  .sqm-hero-icon svg { width: 4.1vw; height: 4.1vw; }
  .sqm-hero-text { flex: 1; min-width: 0; }
  /* Ukuran font diturunin sesuai hasil ukur mockup (hero -22%, body -30%).
     Tinggi baris & jarak sengaja NGGAK diubah -- di mockup teksnya memang
     lebih kecil dengan ruang kosong lebih lega, bukan semuanya diperkecil. */
  .sqm-hero-text h2 {
    font-size: 3.20vw; font-weight: 700; color: var(--gray-900);
    margin: 0; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sqm-hero-text p {
    font-size: 2.20vw; color: var(--gray-400); margin: .4vw 0 0; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .sqm-refresh {
    width: 7.02vw; height: 7.02vw; border-radius: 1.62vw; flex-shrink: 0;
    background: var(--white); border: 1px solid rgba(37,99,235,.28);
    color: var(--blue);
    display: flex; align-items: center; justify-content: center;
  }
  .sqm-refresh svg { width: 3.8vw; height: 3.8vw; }
  .sqm-refresh.is-spinning svg { animation: sqmSpin .9s linear infinite; }
  @keyframes sqmSpin { to { transform: rotate(360deg); } }

  .sqm-hero-div { width: 1px; height: 5.4vw; background: var(--gray-200); flex-shrink: 0; }

  /* Di dummy "00:30" sejajar kiri dengan "Diperbarui pada", bukan rata kanan. */
  .sqm-updated { text-align: left; line-height: 1.2; flex-shrink: 0; }
  .sqm-updated span   { display: block; font-size: 1.95vw; color: var(--gray-400); white-space: nowrap; }
  .sqm-updated strong { font-size: 2.95vw; font-weight: 600; color: var(--gray-800); font-variant-numeric: tabular-nums; }

  /* --- Tab segment ---
     Di mockup tab-nya NGGAK selebar layar: rata kiri, Outbound 31.8% dan
     Inbound 29.4% dari lebar layar, sisa ~38% di kanan dibiarin kosong.
     Tinggi 62px @741 = 8.36vw. */
  .sqm-tabs { display: flex; justify-content: flex-start; gap: .8vw; margin-bottom: 2.90vw; }
  /* Disamakan dengan dummy: sudut lebih tumpul, pill lebih tinggi, ikon lebih
     besar, dan tab non-aktif TANPA garis tepi -- cuma putih + bayangan halus. */
  .sqm-tab {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; gap: 2.0vw;
    height: 9.0vw; padding: 0 1vw; border-radius: 2.1vw;
    background: var(--white); border: 1px solid transparent;
    box-shadow: 0 .3vw .9vw rgba(15,36,72,.06);
    color: var(--gray-500); font-size: 2.90vw; font-weight: 500;
    font-family: var(--font);
  }
  #sqmTabBtnOutbound { width: 31.8vw; }
  #sqmTabBtnInbound  { width: 29.4vw; }
  .sqm-tab svg { width: 4.5vw; height: 4.5vw; }
  .sqm-tab.active {
    background: var(--blue); border-color: var(--blue); color: #fff;
    box-shadow: 0 1.5vw 3vw rgba(37,99,235,.28);
  }

  /* --- Kartu isi --- */
  .sqm-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 2.70vw;
    padding: 1.90vw;
    box-shadow: var(--shadow-xs);
    margin-bottom: 2.10vw;
  }
  .sqm-card-head { display: flex; align-items: center; gap: 2.4vw; margin-bottom: 1.9vw; padding: .6vw .8vw 0; }
  /* Di mockup ikonnya glyph biru polos -- TANPA kotak biru muda. */
  .sqm-card-icon {
    width: 5.5vw; height: 5.5vw; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .sqm-card-icon svg { width: 100%; height: 100%; }
  .sqm-ci-blue { color: var(--blue); }
  .sqm-card-head h3 {
    font-size: 2.80vw; font-weight: 700; color: var(--gray-900); margin: 0; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sqm-card-head p {
    font-size: 2.10vw; color: var(--gray-400); margin: .4vw 0 0; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sqm-card-head > div { flex: 1; min-width: 0; }

  .sqm-detail {
    flex-shrink: 0; display: flex; align-items: center; gap: .8vw;
    padding: 1.5vw 2.4vw; border-radius: 1.6vw;
    border: 1px solid var(--gray-200); background: var(--white);
    color: var(--blue); font-size: 2.35vw; font-weight: 600; font-family: var(--font);
  }
  .sqm-detail svg { width: 2.4vw; height: 2.4vw; }

  /* --- Baris tabel --- */
  .sqm-row {
    display: grid;
    grid-template-columns: 1fr 20.5vw 20.5vw;
    align-items: center;
    gap: 2vw;
    height: 7.20vw;
    padding: 0 .8vw;
    border-bottom: 1px solid var(--gray-100);
  }
  .sqm-row-2 { grid-template-columns: 1fr 20.5vw; }

  .sqm-lbl {
    display: flex; align-items: center; gap: 2.2vw;
    font-size: 2.17vw; color: var(--gray-700); font-weight: 500;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sqm-val {
    display: flex; align-items: center; justify-content: center;
    height: 5.40vw; border-radius: 1.08vw;
    font-size: 2.40vw; font-weight: 600; color: var(--gray-800);
    background: var(--gray-100);
    font-variant-numeric: tabular-nums;
  }

  /* Baris judul: pita abu selebar kartu, sesuai mockup */
  .sqm-row-head {
    height: 4.86vw;
    background: var(--gray-100);
    border-radius: 1.08vw;
    border-bottom: none;
    margin-bottom: .5vw;
  }
  .sqm-row-head .sqm-lbl,
  .sqm-row-head .sqm-val {
    font-size: 2.15vw; font-weight: 600; color: var(--gray-500);
    background: none; height: auto; display: block; text-align: center;
    letter-spacing: .2px;
  }
  .sqm-row-head .sqm-lbl { text-align: left; }

  /* padding horizontal WAJIB sama dengan .sqm-row (0.8vw). Kalau beda,
     kolom grid-nya ikut bergeser dan kotak angkanya nggak lurus dengan
     baris di atasnya. */
  .sqm-row-grand {
    border-bottom: none; margin-top: 1.2vw;
    height: 7.29vw;
    background: var(--blue-light); border-radius: 1.62vw;
    padding: 0 .8vw;
  }
  /* Dihitung dari perbandingan di mockup: Grand Total 24% lebih besar dari
     label baris biasa (1.35% vs 1.09% lebar layar per huruf).
     Label baris = 2.17vw, jadi 2.17 x 1.24 = 2.70vw. Kalau nanti label baris
     diubah, angka ini ikut disesuaikan -- jangan disetel sendiri-sendiri. */
  .sqm-row-grand .sqm-lbl { color: var(--blue); font-weight: 700; font-size: 2.70vw; }
  .sqm-row-grand .sqm-val { color: var(--blue); font-weight: 700; font-size: 2.85vw; background: rgba(255,255,255,.75); }

  /* Ikon status per baris */
  .sqm-ic { width: 4.59vw; height: 4.59vw; flex-shrink: 0; }
  .sqm-ic-wait   { color: var(--gray-400); }
  .sqm-ic-proses { color: var(--blue); }
  .sqm-ic-finish { color: #16A34A; }

  /* --- Donut + legenda --- */
  .sqm-donut-wrap { display: flex; align-items: center; gap: 3.2vw; padding: .6vw .8vw .8vw; }
  .sqm-donut { position: relative; width: 27vw; flex-shrink: 0; }
  .sqm-donut svg { width: 100%; height: auto; display: block; }
  /* line-height: 1 + gap tetap. Sebelumnya line-height 1.15 plus margin-top
     bikin jarak antar baris nggak sama dan blok teksnya meleset dari titik
     tengah lingkaran. */
  .sqm-donut-ctr {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; line-height: 1; gap: .6vw;
  }
  /* Aturan untuk <b> dihapus -- elemennya sudah nggak ada.
     Sisa teks dinaikkan sedikit supaya tengah donut nggak terlihat kosong. */
  .sqm-donut-ctr span {
    display: block; font-size: 2.10vw; font-weight: 400;
    color: var(--gray-400); line-height: 1.4; margin-top: 0;
  }
  /* tabular-nums sengaja dibuang: dia bikin digit pakai set lebar-tetap yang
     bentuknya beda dari "Total" di atasnya, dan di sini nggak ada kolom angka
     yang perlu disejajarkan. */
  .sqm-donut-ctr strong {
    display: block; font-size: 2.80vw; font-weight: 600;
    color: var(--gray-800);
  }

  .sqm-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3.2vw; }
  .sqm-lg-row { display: flex; align-items: center; gap: 2.4vw; }
  .sqm-lg-dot { width: 2.7vw; height: 2.7vw; border-radius: 50%; flex-shrink: 0; }
  .sqm-lg-lbl {
    flex: 1; min-width: 0; font-size: 2.25vw; color: var(--gray-700); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sqm-lg-pct { font-size: 2.55vw; font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; }

  /* ================================================================
     SMART QUEUE INBOUND — KARTU RINGKASAN (VERSI HP)
     Semua ukuran ngikut skala .sqm-* yang sudah dipakai Outbound,
     bukan hasil ukur ulang -- biar dua tab kelihatan satu keluarga.
     ================================================================ */

  /* Baris 5 kolom: Status | Lokal | Import | Steko | Truk.
     Kolom angkanya pakai vw, bukan fr, supaya lebar kolom di baris
     kepala, isi, grand total dan Gate Open persis sama -- kalau pakai
     fr, tiap baris ngitung sendiri dari isinya dan angkanya meleset. */
  .sqi-row5 { grid-template-columns: 1fr 12vw 12vw 12vw 14vw; }

  /* Gate Open: satu-satunya baris yang diketik orang. Latarnya sengaja
     beda supaya nggak dikira ikut kebaca dari sheet. */
  .sqi-gate {
    margin-top: 1.2vw; background: #EFF6FF;
    border-radius: 1.62vw; border-bottom: none; height: 6.6vw;
  }
  .sqi-gate .sqm-lbl { color: var(--navy); font-weight: 700; }
  .sqi-auto { background: rgba(255,255,255,.8) !important; color: var(--navy); font-weight: 700; }
  /* Daftar product division: SATU kolom. */
  .sqi-div { display: block; margin-top: .5vw; }
  .sqi-dv {
    display: flex; align-items: center; justify-content: space-between; gap: 2vw;
    padding: 1.5vw .8vw; border-bottom: 1px solid var(--gray-100);
  }
  .sqi-dv span {
    font-size: 2.17vw; color: var(--gray-700); font-weight: 500; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sqi-dv b { font-size: 2.4vw; font-weight: 700; color: var(--gray-800); font-variant-numeric: tabular-nums; }
  .sqi-dv.is-zero span, .sqi-dv.is-zero b { color: var(--gray-300); }

  /* --- Rangka loading (skeleton) ---
     Ditaruh paling bawah supaya menang atas .sqm-val yang juga punya background. */
  .sqm-skel {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 38%, var(--gray-100) 62%);
    background-size: 300% 100%;
    animation: sqmShimmer 1.3s ease-in-out infinite;
    color: transparent;
    border-radius: 1.08vw;
  }
  .sqm-skel.is-stalled { animation: none; background: var(--gray-100); }
  @keyframes sqmShimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
  @media (prefers-reduced-motion: reduce) { .sqm-skel { animation: none; } }

  .sqm-skel-ic  { display: block; width: 4.59vw; height: 4.59vw; border-radius: 50%; flex-shrink: 0; }
  .sqm-skel-txt { display: block; width: 62%; height: 2.6vw; border-radius: 1.3vw; }
  .sqm-lg-dot.sqm-skel { border-radius: 50%; }

  /* ================================================================
     HALAMAN DETAIL SMART QUEUE (modalSqDetail) — VERSI HP
     Ukuran font ngikutin skala halaman utama Smart Queue yang sudah
     disepakati (label 2.17vw, judul kartu 2.80vw), bukan hasil ukur ulang.
     ================================================================ */

  /* Setinggi layar penuh: bottom nav HP sudah dibuang, --nav-h = 0 (blok MENU HP). */
  #modalSqDetail {
    padding: 0 !important;
    height: calc(100dvh - var(--nav-h, 58px)) !important;
    bottom: auto !important;
  }
  #modalSqDetail .modal-box {
    height: 100% !important; max-height: 100% !important;
    border-radius: 0 !important;
    /* Modal berhenti tepat di atas bottom-nav, jadi bayangan tepi bawahnya
       jatuh persis di garis pembatas dan kelihatan seperti garis kotor. */
    box-shadow: none !important;
    border: none !important;
  }

  /* Header: putih, tombol kembali, judul + subjudul, chip tanggal */
  #modalSqDetail .sqd-header {
    background: var(--white) !important;
    color: var(--gray-900) !important;
    display: flex; align-items: center; gap: 2.6vw;
    padding: 2.6vw 3.2vw !important;
    border-bottom: 1px solid var(--gray-200);
  }
  .sqd-back {
    display: flex; align-items: center; justify-content: center;
    width: 8.4vw; height: 8.4vw; flex-shrink: 0;
    border-radius: 2.1vw; border: 1px solid var(--gray-200);
    background: var(--white); color: var(--gray-700);
  }
  .sqd-back svg { width: 4.2vw; height: 4.2vw; }
  .sqd-header-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  #modalSqDetail .sqd-title {
    color: var(--gray-900) !important;
    font-size: 2.70vw !important; font-weight: 700; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sqd-header-sub {
    font-size: 1.85vw; color: var(--gray-400); line-height: 1.25; margin-top: .3vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sqd-header-date {
    display: flex; align-items: center; gap: 1.4vw; flex-shrink: 0;
    padding: 1.5vw 2.4vw; border-radius: 1.8vw;
    border: 1px solid var(--gray-200); background: var(--gray-50);
    color: var(--gray-600); font-size: 2.10vw; font-weight: 500;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .sqd-header-date svg { width: 3vw; height: 3vw; color: var(--blue); }
  #modalSqDetail .sqd-close { display: none !important; }

  /* Breadcrumb di dalam halaman detail (HP).
     Kenapa ditaruh DI DALAM modal, bukan pakai #crumbBar yang di atas:
     di HP modal ini full-screen (position:fixed, z-index 1000), jadi dia
     nutupin topbar + breadcrumb aslinya. Ditempel di sini biar ikut kegeser
     bareng animasi masuk-dari-kanan, bukan ganti mendadak di belakang.
     overflow-x:auto dipasang karena 4 segmen + nama modul panjang
     ("Restructure Outbound Plan") nggak muat di 390px -- lebih baik
     digeser samping daripada dipotong atau dibikin 2 baris. */
  .sqd-crumb {
    display: flex; align-items: center; gap: 1.4vw;
    padding: 1.8vw 3.2vw; background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    font-size: 1.85vw; color: var(--gray-500);
    overflow-x: auto; white-space: nowrap; flex-shrink: 0;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .sqd-crumb::-webkit-scrollbar { display: none; }
  .sqd-crumb:empty { display: none; }
  .sqd-crumb .crumb-item { white-space: nowrap; flex-shrink: 0; font-weight: 500; }
  .sqd-crumb .crumb-item.is-link { color: var(--gray-500); }
  .sqd-crumb .crumb-item.is-current { color: var(--gray-900); font-weight: 600; }
  .sqd-crumb .crumb-sep { color: var(--gray-300); flex-shrink: 0; }
  .sqd-crumb .crumb-home { display: inline-flex; align-items: center; }
  .sqd-crumb .crumb-home svg { width: 3vw; height: 3vw; display: block; }

  /* Isi modal */
  #modalSqDetail .modal-box > div:last-child { padding: 3.2vw !important; background: var(--bg); }
  /* Satu baris, nggak boleh wrap. Lebar tiap bagian diambil dari proporsi
     mockup: kotak tanggal ~31.6% lebar layar, tombol ~19.7%. */
  #modalSqDetail .page-toolbar {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: 2.7vw; padding: 2.2vw; margin-bottom: 2vw !important;
    gap: 1.4vw !important;
    flex-wrap: nowrap !important;
    align-items: center;
  }
  #modalSqDetail .page-toolbar > div {
    flex-wrap: nowrap !important; gap: 1.4vw !important;
    flex: 1; min-width: 0;
  }
  /* Font diturunin: di 1.95vw tahunnya kepotong jadi "10/09/202" karena
     input tanggal bawaan HP nyisihkan ruang sendiri buat ikon kalendernya. */
  #modalSqDetail .page-toolbar span { font-size: 1.45vw !important; color: var(--gray-500); flex-shrink: 0; }
  /* !important dipakai buat ngalahin aturan "input minimal 16px" di blok
     @media (hover:none) baris ~2973 -- aturan itu yang selama ini bikin
     tanggal & remark kelihatan jauh lebih besar dari teks sekitarnya.
     Konsekuensinya: iOS bakal nge-zoom halaman saat kolom ini disentuh. */
  #modalSqDetail .modal-input {
    width: auto !important; flex: 1 1 0; min-width: 0;
    font-size: 2.25vw !important; height: 7vw; padding: 0 1.1vw; border-radius: 1.5vw;
  }
  #modalSqDetail .page-toolbar .filter-btn {
    flex-shrink: 0;
    background: var(--blue); border-color: var(--blue); color: #fff;
    font-size: 1.60vw; border-radius: 1.5vw; padding: 0 1.5vw; height: 7vw;
  }
  #modalSqDetail .page-toolbar .filter-btn svg { width: 2.4vw; height: 2.4vw; }

  /* Kotak cari + pil status (HP).
     Ukurannya pakai vw biar sejalan sama sisa modal ini yang juga vw.
     KECUALI font input-nya: itu dikunci 16px. Di bawah 16px iOS otomatis
     nge-zoom halaman pas kolom diketik, dan halaman nggak balik lagi.
     Teks contohnya (::placeholder) boleh lebih kecil -- yang dilihat iOS
     cuma font-size input-nya. */
  /* Peringatan pending lama. Fontnya SENGAJA lebih gede dari teks di
     sekitarnya (label ringkasan cuma 1.85vw). Kalau ikut skala modal ini,
     keluarnya ~7px dan tenggelam di antara label biasa -- barang yang cuma
     muncul pas ada yang nyangkut nggak boleh lebih kecil dari label rutin. */
  .sqw-thin {
    gap: 1.8vw; border-left-width: .8vw; border-radius: 0 2vw 2vw 0;
    padding: 2vw 2.8vw; margin-bottom: 2.4vw;
  }
  .sqw-thin > svg { width: 3.6vw; height: 3.6vw; }
  .sqw-thin span { font-size: 2.6vw; line-height: 1.35; }

  .sla-badge {
    gap: 1.2vw; border-radius: 1.8vw; padding: 1vw 2vw; font-size: 2.3vw;
  }
  .sla-badge svg { width: 2.8vw; height: 2.8vw; }
  .sla-strip {
    gap: 1.8vw; border-left-width: .8vw; border-radius: 0 2vw 2vw 0;
    padding: 2vw 2.8vw; margin-bottom: 2.4vw;
  }
  .sla-strip > svg { width: 3.6vw; height: 3.6vw; }
  .sla-strip span { font-size: 2.6vw; line-height: 1.35; }

  .sqf-wrap { margin-bottom: 2.4vw; }
  .sqf-search {
    display: flex; align-items: center; gap: 2vw; width: 100%;
    margin-bottom: 2vw; background: var(--white);
    border: 1px solid var(--gray-200); border-radius: 2.7vw;
    padding: 0 3vw; height: 11vw;
  }
  .sqf-search > svg { width: 4.2vw; height: 4.2vw; color: var(--gray-400); flex-shrink: 0; }
  .sqf-search input {
    flex: 1; min-width: 0; border: none; outline: none; background: none;
    font-size: 16px; color: var(--gray-800); height: 100%;
  }
  .sqf-search input::placeholder { font-size: 3.3vw; color: var(--gray-400); }

  .sqf-pills { display: flex; gap: 1.6vw; }
  .sqf-pill {
    flex: 1; min-width: 0; display: flex; align-items: center;
    justify-content: center; gap: 1.2vw;
    border: 1px solid var(--gray-200); background: var(--white);
    border-radius: 2.2vw; padding: 2.1vw 0;
    font-size: 2.65vw; font-weight: 600; color: var(--gray-500); line-height: 1;
  }
  .sqf-pill svg { width: 3.3vw; height: 3.3vw; flex-shrink: 0; }
  .sqf-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Aturan WARNA-nya nggak ada di sini -- ditulis sekali di blok dasar .sqf-pill
     (cari "Pil saringan status -- UKURAN DESKTOP"), dipakai bareng HP & desktop.
     Di blok ini cuma ukuran. */
  .sqf-types { margin-top: 1.6vw; }
  .sqf-dot { width: 1.9vw; height: 1.9vw; }

  .sqd-shown { color: var(--blue); font-weight: 600; }
  .sqd-shown:empty { display: none; }

  /* Kartu ringkasan */
  .sqd-summary {
    display: flex; align-items: center;
    background: var(--gray-50); border: 1px solid var(--gray-200);
    border-radius: 2.7vw; padding: 2.6vw 3.2vw; margin-bottom: 2.4vw;
  }
  .sqd-sum-item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .6vw; }
  .sqd-sum-div { width: 1px; align-self: stretch; background: var(--gray-200); margin: 0 3.2vw; }
  .sqd-sum-lbl { font-size: 1.85vw; color: var(--gray-500); }
  .sqd-sum-val { font-size: 1.90vw; color: var(--gray-600); }
  .sqd-sum-val b { font-size: 2.90vw; font-weight: 700; color: var(--gray-900); margin-right: .8vw; font-variant-numeric: tabular-nums; }
  .sqd-sum-per { font-size: 1.95vw; font-weight: 600; color: var(--gray-800); font-variant-numeric: tabular-nums; }

  /* Kartu per truk */
  .sqd-empty { padding: 12vw 4vw; text-align: center; color: var(--gray-400); font-size: 2.4vw; }

  .sqd-loading {
    display: flex; flex-direction: column; align-items: center; gap: 3vw;
    padding: 14vw 4vw; color: var(--gray-400); font-size: 2.2vw;
  }
  .sqd-spinner {
    width: 9vw; height: 9vw; border-radius: 50%;
    border: .9vw solid var(--gray-200);
    border-top-color: var(--blue);
    animation: sqdSpin .8s linear infinite;
  }
  @keyframes sqdSpin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .sqd-spinner { animation-duration: 2.4s; } }
  .sqd-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: 2.7vw; padding: 2.8vw; margin-bottom: 2.2vw;
  }
  .sqd-top { display: flex; align-items: flex-start; gap: 2.6vw; }
  .sqd-no {
    flex-shrink: 0; width: 8.6vw; height: 8.6vw; border-radius: 2.1vw;
    background: var(--blue-light); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.20vw; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .sqd-ident { flex: 1; min-width: 0; }
  .sqd-when { font-size: 1.80vw; color: var(--gray-500); font-variant-numeric: tabular-nums; }
  .sqd-when span { margin-left: 2vw; }
  .sqd-truck {
    font-size: 2.45vw; font-weight: 700; color: var(--gray-900); line-height: 1.25; margin-top: .3vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sqd-party {
    font-size: 1.80vw; color: var(--gray-400); margin-top: .4vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sqd-party i { color: var(--gray-300); font-style: normal; margin: 0 .6vw; }

  .sqd-right { display: flex; align-items: center; gap: 1.6vw; flex-shrink: 0; }
  .sqd-pill {
    display: flex; align-items: center; gap: 1.2vw;
    padding: 1.2vw 2.4vw; border-radius: 99px;
    font-size: 1.80vw; font-weight: 600; white-space: nowrap;
  }
  .sqd-pill svg { width: 2.6vw; height: 2.6vw; flex-shrink: 0; }
  .sqd-pill-finish { background: #E9F8F0; color: #15803D; }
  .sqd-pill-proses { background: var(--blue-light); color: var(--blue); }
  .sqd-pill-wait   { background: var(--gray-100); color: var(--gray-500); }
  .sqd-ol-mark {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 4.2vw; height: 4.2vw; border-radius: 50%;
    background: var(--orange-light); color: var(--orange);
  }
  .sqd-ol-mark svg { width: 2.7vw; height: 2.7vw; }

  .sqd-toggle {
    background: none; border: none; color: var(--gray-400);
    display: flex; align-items: center; justify-content: center;
    width: 5vw; height: 5vw; padding: 0;
    transition: transform .2s ease;
  }
  .sqd-toggle svg { width: 4vw; height: 4vw; }
  .sqd-card.is-open .sqd-toggle { transform: rotate(180deg); }

  /* Baris info: 2 kolom x 2 baris.
     Urutan di HTML tetap Region > Start > Finish > CBM (biar JS nggak berubah);
     yang diatur ulang cuma posisi tampilnya lewat `order`:
       baris atas : Region | CBM
       baris bawah: Start  | Finish
     Dengan 2 kolom, tiap kolom dapat ~2x lebar, jadi "11/09/2026 | 08:53:15"
     muat satu baris tanpa harus mengecilkan font sampai nggak kebaca. */
  /* Satu baris, 4 kolom, urutan apa adanya: Region | Start | Finish | CBM.
     Lebar kolom ngikutin proporsi dummy -- SENGAJA nggak dibagi rata, karena
     dua kolom jam yang paling butuh ruang:
       Region 24.5% | Start 26% | Finish 26% | CBM 13.5%

     KNOB UKURAN ada di .sqd-info-txt di bawah. 1.70vw = ~6.8px di layar 400px.
     Dummy aslinya ~6px (1.50vw). Batas atas 1.85vw -- lebih dari itu teks
     "11/09/2026 | 08:53:15" nggak muat dan pecah jadi dua baris lagi. */
  /* Start & Finish dapat lebar SAMA (1fr : 1fr) dan mengisi ruang tengah.
     Region agak lebih sempit, CBM paling sempit dan didorong mepet kanan.
     minmax(0, ...) dipakai supaya nama region panjang kepotong "..." dan
     nggak menggerogoti jatah dua kolom jam di tengah. */
  .sqd-infos {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .6fr);
    gap: 0 2vw; margin-top: 2.4vw;
  }
  /* Bloknya tetap mepet kanan kartu (justify-self), tapi isinya rata kiri
     menempel ikonnya -- sama seperti tiga kolom lain. */
  .sqd-infos .sqd-info:nth-child(4) { justify-self: end; }
  .sqd-info { display: flex; align-items: flex-start; gap: 1.2vw; min-width: 0; }
  .sqd-info-ic { flex-shrink: 0; width: 2.6vw; height: 2.6vw; color: var(--gray-400); margin-top: .4vw; }
  .sqd-info-ic svg { width: 100%; height: 100%; }
  .sqd-info-txt {
    min-width: 0; font-size: 1.70vw; color: var(--gray-700);
    font-variant-numeric: tabular-nums; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sqd-info-txt em { display: block; font-style: normal; font-size: 1.50vw; color: var(--gray-400); }
  .sqd-info-txt b  { font-size: 2.00vw; font-weight: 700; color: var(--gray-900); }
  .sqd-info-1 { display: flex; align-items: center; min-height: 2.6vw; }
  .sqd-dash { color: var(--gray-300); }

  /* Panel rincian (dibuka lewat panah) */
  .sqd-expand { display: none; margin-top: 2.6vw; padding-top: 2.4vw; border-top: 1px solid var(--gray-100); }
  .sqd-card.is-open .sqd-expand { display: block; }
  .sqd-x-sec { font-size: 2.05vw; font-weight: 700; color: var(--gray-500); letter-spacing: .3px; margin-bottom: 1.4vw; }
  .sqd-x-dest {
    display: flex; justify-content: space-between; gap: 2vw;
    font-size: 2.15vw; color: var(--gray-700); padding: 1.2vw 0;
    border-bottom: 1px solid var(--gray-100);
  }
  .sqd-x-dest span { color: var(--gray-400); flex-shrink: 0; }
  .sqd-x-dn { margin-bottom: 2vw; }
  .sqd-x-dnno {
    font-size: 2.20vw; font-weight: 700; color: var(--blue);
    background: var(--blue-light); border-radius: 1.2vw;
    padding: 1vw 2vw; display: inline-block; margin-bottom: 1.2vw;
  }
  /* Kerangka kolom rincian DN & SKU versi HP.
     Kelima kolom angka SENGAJA dibikin sama lebar (8.45vw) dengan jarak
     seragam (2.55vw). Itu yang bikin jaraknya kebaca rata -- kalau tiap kolom
     dikasih lebar sesuai isinya sendiri, jarak antar angkanya jadi loncat-loncat
     (ada yang 8px, ada yang 38px) karena angkanya rata kanan.
     Hitungan di layar 390px: 5 x 33px + ikon 13px + 6 jarak x 10px = 238px,
     sisa 106px buat kolom SKU. Udah gw uji di 360 / 390 / 430px, nggak ada
     yang meluber. Kalau mau digeser, geser ANGKA 8.45vw-nya aja -- kolom SKU
     ikut nyesuaikan sendiri karena dia 1fr. */
  .sqd-x-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(5, 8.45vw) 3.35vw;
    column-gap: 2.55vw;
    align-items: center;
  }
  /* align-items:end bikin judul satu baris ("Order") sejajar bawah sama judul
     dua baris ("CBM / Order"), bukan ngambang di tengah. */
  .sqd-x-head {
    align-items: end;
    font-size: 1.80vw; font-weight: 700; color: var(--gray-400);
    letter-spacing: .2px; text-transform: uppercase;
    padding: .8vw 0 1vw; border-bottom: 1px solid var(--gray-200);
  }
  .sqd-x-head span { line-height: 1.18; }
  .sqd-x-head span:not(:first-child) { text-align: right; }

  .sqd-x-row { padding: 1.3vw 0; border-bottom: 1px solid var(--gray-100); }
  .sqd-x-sku { min-width: 0; font-size: 2.15vw; font-weight: 600; color: var(--gray-800); line-height: 1.25; }
  .sqd-x-sku em {
    display: block; font-style: normal; font-weight: 400;
    font-size: 2.00vw; color: var(--gray-400); margin-top: .25vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* tabular-nums WAJIB: tanpa itu lebar angka beda-beda per digit dan kolom
     yang rata kanan kelihatan goyang antar baris. */
  .sqd-x-n {
    font-size: 2.15vw; text-align: right; line-height: 1.2;
    color: var(--gray-700); font-variant-numeric: tabular-nums;
  }
  .sqd-x-order { color: var(--gray-700); }
  .sqd-x-done  { font-weight: 700; color: var(--gray-900); }
  .sqd-x-ol    { color: var(--orange); font-weight: 700; }
  .sqd-x-dash  { color: var(--gray-300); }
  .sqd-x-cbmo  { color: var(--gray-400); }
  .sqd-x-cbmd  { color: var(--gray-800); font-weight: 600; }

  /* Ikon polos tanpa kotak latar (beda sama versi desktop) -- di lebar 390px
     kotaknya makan ruang yang lebih berguna buat angka. */
  .sqd-x-ic { display: flex; justify-content: flex-end; align-items: center; }
  .sqd-x-ic svg { width: 3.35vw; height: 3.35vw; display: block; }
  .sqd-x-ic.is-ok  { color: #16A34A; }
  .sqd-x-ic.is-bad { color: var(--orange); }
  [data-theme="dark"] .sqd-x-ic.is-ok { color: #4ADE80; }

  /* Margin kiri-kanan minus + padding yang sama besarnya: kotak birunya
     melebar ke luar, TAPI lebar isi dalamnya tetap sama persis dengan baris
     SKU di atasnya. Tanpa trik ini angka Total meleset 8px ke kiri dari
     kolomnya. Udah gw ukur: selisihnya sekarang 0,00px di ketujuh kolom. */
  .sqd-x-tot {
    margin: 1.55vw -2.05vw 0; padding: 1.8vw 2.05vw;
    background: var(--blue-light); border-radius: 1.8vw;
  }
  .sqd-x-tot .sqd-x-n    { font-weight: 700; color: var(--blue); }
  .sqd-x-tot .sqd-x-ol   { color: var(--orange); }
  .sqd-x-tot .sqd-x-dash { color: var(--gray-300); }
  .sqd-x-totlbl { font-size: 2.05vw; font-weight: 700; color: var(--blue); line-height: 1.2; }
  .sqd-x-totlbl i { font-style: normal; font-weight: 400; color: var(--gray-400); font-size: 1.80vw; }

  .sqd-x-empty { font-size: 2.15vw; color: var(--gray-400); padding: 1.5vw 0; }

  /* Kolom remark */
  .sqd-remark {
    display: flex; align-items: center; gap: 1.6vw;
    margin-top: 2vw; padding: 0 2.2vw;
    height: 6vw; border-radius: 1.5vw;
    border: 1px solid var(--gray-200); background: var(--gray-50);
  }
  .sqd-remark svg { width: 2.6vw; height: 2.6vw; color: var(--gray-400); flex-shrink: 0; }
  .sqd-remark input {
    flex: 1; min-width: 0; border: none; background: none; outline: none;
    font-family: var(--font); font-size: 1.95vw !important; color: var(--gray-800);
  }
  .sqd-remark input::placeholder { color: var(--gray-400); }

  /* ================================================================
     TAMBAHAN KHUSUS DETAIL INBOUND (versi HP)
     Cuma yang memang beda dari Outbound; sisanya nebeng .sqd-*.
     ================================================================ */

  /* HANYA UKURAN. Bentuk, warna dan tata letaknya ditulis sekali di blok
     .sqdi-* di luar media query -- versi pertama naruh SEMUANYA di sini,
     dan akibatnya di desktop nggak satu pun kepakai: kotak keterangan balik
     jadi teks polos bertumpuk dan tag jenis inbound nempel mentah di
     sebelah nama vendor. */
  .sqdi-tag { margin-left: 1.6vw; padding: .5vw 1.6vw; border-radius: 1.2vw; font-size: 1.75vw; }
  /* 'display: grid' WAJIB ditulis lagi di sini. Blok dasarnya sekarang flex
     (satu baris buat desktop), jadi kalau cuma numpuk grid-template-columns
     seperti sebelumnya, aturannya nggak ngaruh sama sekali dan HP ikut jadi
     satu baris -- lima keterangan berjejer di layar 390px. */
  .sqdi-meta {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.6vw 3vw;
    border-radius: 2vw; padding: 2.4vw 2.8vw; margin-bottom: 2.4vw;
  }
  .sqdi-m em { font-size: 1.8vw; margin-bottom: .4vw; }
  .sqdi-m b  { font-size: 2.15vw; }
}
.topbar-title { font-size: .97rem; font-weight: 700; color: var(--gray-900); letter-spacing: -.01em; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-date {
  display: flex; align-items: center; gap: 6px;
  color: var(--gray-500); font-size: .78rem; font-weight: 500;
  padding: 5px 11px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
}
.topbar-date svg { width: 13px; height: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }

.hamburger-btn {
  display: none;
  padding: 7px;
  color: var(--gray-500);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
}
.hamburger-btn:hover { background: var(--gray-100); }
.hamburger-btn svg { width: 16px; height: 16px; display: block; }

/* ================================================================
   PAGE CONTENT
   ================================================================ */
.page-content { flex: 1; padding: 20px 24px; overflow-y: auto; height: 0; position: relative; scroll-behavior: smooth; }
.page { display: none; }
.page.active {
  display: block;
  animation: pageFadeIn .22s cubic-bezier(.4,0,.2,1);
}

/* ---- LANDING (welcome screen) ---- */
#page-landing.page.active { animation: none !important; }
.landing-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--navy);
}
.landing-stage-outer {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  margin: auto;
  overflow: hidden;
}
.landing-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transform: scale(1.14); }
.page-content:has(#page-landing.active) { overflow: hidden; }

/* LANDING MOBILE lama sudah diganti halaman Menu HP -- lihat blok "MENU HP"
   paling bawah file ini. */

@media (max-width: 768px) {
  .rt-sticky-toolbar {
    margin-left: -14px !important;
    margin-right: -14px !important;
    margin-top: -14px !important;
    padding: 24px 14px 10px !important;
    background: rgba(247,249,252,0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(15,36,72,0.14);
    box-shadow: 0 4px 14px rgba(15,36,72,0.12);
  }
  .rt-sticky-toolbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 80px;
    background: rgba(247,249,252,0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
  }
}
@media (max-width: 480px) {
  .rt-sticky-toolbar {
    margin-left: -10px !important;
    margin-right: -10px !important;
    margin-top: -10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 20px !important;
  }
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   CARDS
   ================================================================ */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--gray-100);
}
.card-title {
  font-size: .85rem; font-weight: 700; color: var(--gray-900);
  display: flex; align-items: center; gap: 7px;
}
.card-title svg { width: 15px; height: 15px; color: var(--blue); }
.card-body { padding: 18px; }
.card-subtitle {
  font-size: .76rem;
  color: var(--gray-400);
  font-weight: 500;
  margin-top: 3px;
  padding-left: 22px; /* sejajar di bawah teks judul, ngelewatin icon */
}

/* ================================================================
   PROGRESS BAR
   ================================================================ */
.progress-bar {
  width: 100%; height: 6px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 99px;
  transition: width .9s cubic-bezier(.4,0,.2,1);
}
.progress-fill.green  { background: var(--green); }
.progress-fill.blue   { background: var(--blue); }
.progress-fill.orange { background: var(--orange); }
.progress-fill.gray   { background: var(--gray-300); }
.progress-bar.sm { height: 4px; }
.progress-bar.md { height: 8px; }

/* ================================================================
   BADGES
   ================================================================ */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: .7rem; font-weight: 600;
  white-space: nowrap;
}
.badge-green  { background: var(--green-light);  color: #065F46; border: 1px solid rgba(16,185,129,.2); }
.badge-orange { background: var(--orange-light); color: #92400E; border: 1px solid rgba(245,158,11,.2); }
.badge-gray   { background: var(--gray-100);     color: var(--gray-600); border: 1px solid var(--gray-200); }
.badge-blue   { background: var(--blue-light);   color: var(--blue); border: 1px solid rgba(37,99,235,.2); }
.badge-red    { background: var(--red-light);    color: #991B1B; border: 1px solid rgba(239,68,68,.2); }

/* ================================================================
   HERO CARD (Dashboard)
   ================================================================ */
.hero-card {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a6b 55%, #1e4080 100%);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero-card::before {
  content: '';
  position: absolute; top: -50px; right: -30px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}
.hero-card::after {
  content: '';
  position: absolute; bottom: -40px; right: 120px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(37,99,235,.1);
  pointer-events: none;
}
/* Warehouse silhouette background */
.hero-card-bg {
  position: absolute; right: -10px; bottom: 0;
  width: 380px; height: 100%;
  opacity: .13;
  pointer-events: none;
  display: flex; align-items: flex-end; justify-content: flex-end;
}
.hero-card-bg svg { width: 100%; height: auto; color: #fff; }

.hero-label {
  color: rgba(255,255,255,.55);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: 6px;
}
.hero-percent {
  font-size: 3.2rem; font-weight: 800;
  color: #fff; line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.hero-subtitle { color: rgba(255,255,255,.6); font-size: .8rem; font-weight: 500; margin-bottom: 18px; }
.hero-progress {
  height: 6px;
  background: rgba(255,255,255,.15);
  border-radius: 99px; overflow: hidden;
  margin-bottom: 10px;
}
.hero-progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #60A5FA, #93C5FD);
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.hero-footer {
  display: flex; align-items: center; justify-content: space-between;
  color: rgba(255,255,255,.45);
  font-size: .72rem;
}
.hero-footer span.hl { color: rgba(255,255,255,.75); font-weight: 600; }

/* ================================================================
   SUMMARY CARDS
   ================================================================ */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.sum-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.sum-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.sum-card-top { display: flex; align-items: flex-end; gap: 12px; position: relative; z-index: 1; }

.sum-ghost {
  position: absolute;
  right: -18px; top: 50%;
  transform: translateY(-50%);
  width: 100px; height: 100px;
  opacity: .05;
  z-index: 0;
  pointer-events: none;
}
.sum-ghost svg { width: 100%; height: 100%; }
.sum-ghost.blue   { color: var(--blue); }
.sum-ghost.green  { color: var(--green); }
.sum-ghost.orange { color: var(--orange); }
.sum-ghost.gray   { color: var(--gray-500); }

.sum-icon-wrap {
  width: 48px; height: 48px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  order: -1;
}
.sum-icon-wrap svg { width: 23px; height: 23px; }
.sum-icon-wrap.blue   { background: var(--blue-light);   color: var(--blue); }
.sum-icon-wrap.green  { background: var(--green-light);  color: var(--green); }
.sum-icon-wrap.orange { background: var(--orange-light); color: var(--orange); }
.sum-icon-wrap.gray   { background: var(--gray-100);     color: var(--gray-500); }
.sum-label { font-size: .7rem; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.sum-value { font-size: 1.55rem; font-weight: 800; color: var(--gray-900); line-height: 1; letter-spacing: -.02em; }
.sum-unit  { font-size: .69rem; color: var(--gray-400); font-weight: 500; margin-top: 2px; }

/* ================================================================
   SECTION GRIDS
   ================================================================ */
.section-grid-2 {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 16px; margin-bottom: 18px;
}
/* ================================================================
   DATA TABLE
   ================================================================ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  padding: 9px 14px;
  font-size: .69rem; font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--gray-200);
  text-align: left; white-space: nowrap;
  background: var(--gray-50);
}
.data-table td {
  padding: 10px 14px;
  font-size: .8rem;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--gray-50); }
.counter-name { font-weight: 600; color: var(--gray-900); font-size: .82rem; }
.counter-progress-cell { min-width: 120px; }
.progress-pct { font-size: .75rem; font-weight: 600; color: var(--gray-500); white-space: nowrap; }

/* ================================================================
   DONUT CHART
   ================================================================ */
/* ================================================================
   SUMMARY REPORT SECTION
   ================================================================ */
.section-title {
  font-size: .88rem; font-weight: 700;
  color: var(--gray-900);
  display: flex; align-items: center; gap: 8px;
  letter-spacing: -.01em;
}
.section-title::before {
  content: '';
  display: block; width: 3px; height: 16px;
  background: var(--blue);
  border-radius: 2px;
}
/* ================================================================
   ACTIVITY LOG
   ================================================================ */
.activity-time    { color: var(--gray-600); font-family: var(--font); font-size: .82rem; }
.activity-binloc  { font-family: var(--font); color: var(--gray-700); font-size: .82rem; }
.activity-time { color: var(--gray-400); font-family: var(--mono); font-size: .72rem; }
.activity-binloc { font-family: var(--mono); color: var(--blue); font-size: .72rem; }

/* ================================================================
   COUNTER PAGE
   ================================================================ */
.page-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.search-wrap { position: relative; flex: 1; }
/* HP: toolbar halaman (cari + filter + tombol) turun baris, kotak cari selebar layar. */
@media (max-width: 768px) {
  .page-toolbar { flex-wrap: wrap; row-gap: 8px; }
  .page-toolbar > .search-wrap { flex: 1 1 100%; }
  .page-toolbar > select.filter-btn { flex: 1 1 0; min-width: 0; }
  /* Kotak cari Task List Putaway & Picking: selebar kartu di HP. */
  div:has(> #putawayTaskSearch), div:has(> #pickingTaskSearch) { flex: 1 1 100%; }
  #putawayTaskSearch, #pickingTaskSearch { width: 100% !important; }
}
.search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--gray-400);
}
.search-icon svg { width: 14px; height: 14px; display: block; }
.search-input {
  width: 100%; padding: 8px 12px 8px 34px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  background: var(--white);
  color: var(--gray-800);
  transition: var(--transition);
}
.search-input::placeholder { color: var(--gray-400); }
.search-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.filter-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 13px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  color: var(--gray-600); font-size: .78rem; font-weight: 500;
  background: var(--white);
  transition: var(--transition);
}
.filter-btn svg { width: 13px; height: 13px; }
.filter-btn:hover { border-color: var(--blue); color: var(--blue); }
.filter-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.25), 0 4px 12px rgba(37,99,235,.35);
}
.filter-btn.active:hover { color: #fff; border-color: var(--blue); }

.counter-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}
.counter-detail-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
}
.counter-detail-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.cdc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* BARU: wrapper kiri (avatar + nama) */
.cdc-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cdc-avatar {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--blue-light);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cdc-avatar svg { width: 18px; height: 18px; }

.cdc-name {
  font-weight: 700; font-size: .9rem; color: var(--gray-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdc-name { font-weight: 700; font-size: .9rem; color: var(--gray-900); }
.cdc-progress-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.cdc-progress-label { font-size: .72rem; color: var(--gray-400); font-weight: 500; }
.cdc-progress-value { font-size: .75rem; font-weight: 700; color: var(--gray-700); }
.cdc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.cdc-stat {
  text-align: center;
  padding: 8px 6px;
  background: var(--gray-50);
  border-radius: 7px;
  border: 1px solid var(--gray-100);
}
.cdc-stat-val { font-weight: 800; font-size: .9rem; color: var(--gray-900); letter-spacing: -.01em; }
.cdc-stat-label { font-size: .63rem; color: var(--gray-400); margin-top: 2px; }

/* ================================================================
   LOKASI PAGE
   ================================================================ */
.location-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 16px;
}
.loc-stat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}
.loc-stat-val { font-size: 1.35rem; font-weight: 800; color: var(--gray-900); letter-spacing: -.02em; }
.loc-stat-label { font-size: .68rem; color: var(--gray-400); margin-top: 2px; font-weight: 500; }

.filter-chips { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.chip {
  padding: 4px 12px;
  border-radius: 99px;
  font-size: .73rem; font-weight: 600;
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
  cursor: pointer; transition: var(--transition);
  background: var(--white);
}
.chip.active, .chip:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ================================================================
   RIWAYAT PAGE (Card Timeline)
   ================================================================ */
.timeline { position: relative; padding: 4px 0 4px 32px; }
.timeline::before {
  content: ''; position: absolute;
  left: 5px; top: 16px; bottom: 16px;
  width: 2px; background: var(--gray-200);
}
.tl-row { position: relative; margin-bottom: 12px; }
.tl-row:last-child { margin-bottom: 0; }

.tl-dot {
  position: absolute; left: -32px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--gray-100);
  z-index: 1;
}
.tl-dot.orange { background: var(--orange); }
.tl-dot.green  { background: var(--green); }

.tl-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}
.tl-card:hover { box-shadow: var(--shadow-sm); border-color: var(--gray-300); }

.tl-datetime { display: flex; flex-direction: column; min-width: 82px; flex-shrink: 0; }
.tl-date { font-size: .7rem; font-weight: 600; color: var(--blue); font-family: var(--mono); }
.tl-time { font-size: .88rem; font-weight: 700; color: var(--gray-900); line-height: 1.2; }

.tl-info { flex: 1; min-width: 0; }
.tl-info-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; flex-wrap: wrap; }
.tl-counter { font-size: .82rem; font-weight: 700; color: var(--gray-900); }
.tl-binloc { font-size: .8rem; color: var(--gray-500); }
.tl-binloc strong { color: var(--gray-700); font-weight: 700; }

.tl-chevron { width: 18px; height: 18px; color: var(--gray-300); flex-shrink: 0; }

@media (max-width: 480px) {
  .tl-card { gap: 12px; padding: 12px 14px; }
  .tl-datetime { min-width: 70px; }
}

/* ================================================================
   LAPORAN PAGE
   ================================================================ */
.report-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.form-group label { display: block; font-size: .75rem; font-weight: 600; color: var(--gray-600); margin-bottom: 5px; }
.form-control {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .8rem; color: var(--gray-800);
  transition: var(--transition);
  background: var(--white);
}
.form-control:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.report-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: .8rem; font-weight: 600;
  transition: var(--transition);
}
.btn svg { width: 14px; height: 14px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,.3); }
.btn-primary:hover { background: var(--blue-hover); box-shadow: 0 4px 10px rgba(37,99,235,.35); transform: translateY(-1px); }
.btn-success { background: var(--green); color: #fff; box-shadow: 0 2px 6px rgba(16,185,129,.3); }
.btn-success:hover { background: #059669; transform: translateY(-1px); }
.btn-warning { background: var(--orange); color: #fff; box-shadow: 0 2px 6px rgba(245,158,11,.3); }
.btn-warning:hover { background: #D97706; transform: translateY(-1px); }
.btn-outline {
  background: var(--white); border: 1px solid var(--gray-200);
  color: var(--gray-600);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

.report-history {}
.report-history-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--gray-100);
}
.report-history-item:last-child { border-bottom: none; }
.rh-info { flex: 1; }
.rh-name { font-size: .82rem; font-weight: 600; color: var(--gray-900); }
.rh-meta { font-size: .7rem; color: var(--gray-400); margin-top: 2px; }
.rh-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
  transition: var(--transition);
}
.icon-btn svg { width: 13px; height: 13px; }
.icon-btn:hover { background: var(--blue-light); border-color: var(--blue); color: var(--blue); }

/* ================================================================
   PENGATURAN PAGE
   ================================================================ */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.setting-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}
.setting-item:last-child { border-bottom: none; }
.setting-info label { font-size: .82rem; font-weight: 600; color: var(--gray-800); }
.setting-info p { font-size: .72rem; color: var(--gray-400); margin-top: 2px; }
.toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--gray-200);
  border-radius: 11px;
  cursor: pointer; transition: var(--transition);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px; background: #fff;
  border-radius: 50%;
  bottom: 3px; left: 3px;
  transition: var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.toggle input:checked + .toggle-slider { background: var(--blue); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }
.select-setting {
  padding: 6px 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  background: var(--white); color: var(--gray-700);
}

/* ================================================================
   TOAST
   ================================================================ */
.toast-container {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 9999; display: flex; flex-direction: column; gap: 7px;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  background: var(--gray-900);
  color: #fff;
  border-radius: var(--radius);
  font-size: .8rem; font-weight: 500;
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  animation: toastIn .25s cubic-bezier(.4,0,.2,1);
}
.toast svg { width: 15px; height: 15px; flex-shrink: 0; }
.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--blue-accent); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ================================================================
   LOADING OVERLAY
   ================================================================ */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(15,36,72,.6);
  z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--blue-accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ================================================================
   SIDEBAR OVERLAY (mobile)
   ================================================================ */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 199; backdrop-filter: blur(2px);
}

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination {
  display: flex; align-items: center; gap: 5px;
  justify-content: center; padding: 14px;
}
.page-btn {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .77rem; font-weight: 600;
  border: 1px solid var(--gray-200);
  color: var(--gray-600); transition: var(--transition);
}
.page-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.page-btn:hover:not(.active) { border-color: var(--blue); color: var(--blue); }

/* ================================================================
   SKELETON
   ================================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 5px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ================================================================
   MONO / UTILITY
   ================================================================ */
.mono { font-family: var(--mono); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.w-100 { width: 100%; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  :root { --sidebar-w: 250px; }
  .sidebar { transform: translateX(-100%); box-shadow: none; height: 100vh; }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-overlay.open { display: block; }
  .hamburger-btn { display: flex; }
  .sidebar-show-btn { display: none !important; }
  .main-content { margin-left: 0; height: 100vh; }
  .topbar { padding: 0 14px; gap: 10px; }

  /* Tanggal SEKARANG tampil di HP (sebelumnya di-hide di sini).
     Dibikin lebih ringkas biar nggak rebutan tempat sama judul halaman. */
  .topbar-date {
    display: flex;
    flex-shrink: 0;
    font-size: .68rem;
    padding: 4px 8px;
    gap: 5px;
  }
  .topbar-date svg { width: 12px; height: 12px; }

  /* Kalau judul halaman kepanjangan, yang ngalah judulnya (dipotong "..."),
     bukan tanggalnya yang kepencet jadi gepeng. */
  .topbar-left  { min-width: 0; }
  .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { flex-shrink: 0; }

  /* Di HP tombol refresh + jam udah ada di kartu hero Smart Queue,
     jadi slot topbar nggak usah ikut tampil (topbar HP udah sempit). */
  .topbar-actions { display: none !important; }

  /* ---- PADDING KARTU DISAMAIN (HP saja) ----
     21 dari 25 halaman pakai padding .card-body 10px. Empat halaman menyimpang
     karena padding-nya ditulis sebagai INLINE STYLE di Index.html -- Print &
     Wrap 22px 24px, Account 10px 18px. Inline style ngalahin stylesheet, jadi
     !important di sini bukan malas: itu satu-satunya cara nurunin inline tanpa
     ngedit belasan atribut style satu-satu, yang bakal ikut ngubah desktop juga.
     Dibatasi <=768px, jadi tampilan desktop tetap seperti sekarang.
     Selektornya nyocokin NILAI padding-nya, bukan nama halaman, biar yang
     sengaja dibikin mepet (padding:0 di Device, padding:8px 0 di daftar Account)
     nggak ikut kena -- nambahin padding ke daftar yang emang dirancang full-lebar
     itu bukan "nyamain", itu ngerusak.
     CATATAN: kalau suatu saat inline style-nya ditulis ulang dengan spasi beda
     (misal 'padding: 22px 24px'), aturan ini berhenti kena. Cek lagi kalau
     halaman Print/Wrap tiba-tiba kelihatan longgar lagi di HP. */
  .card-body[style*="padding:22px 24px"],
  .card-body[style*="padding:10px 18px"] { padding: 10px !important; }

  /* Breadcrumb versi HP: lebih ramping biar nggak rakus tinggi layar. */
  .crumbbar { padding: 6px 14px; gap: 5px; font-size: .68rem; }
  .crumb-home svg { width: 12px; height: 12px; }

  /* CATATAN: dulu di sini ada aturan yang nyembunyiin breadcrumb khusus di
     halaman Smart Queue HP. Alasannya waktu itu Smart Queue HP dikunci
     overflow:hidden dan wajib muat 1 layar, jadi bar ~25px ini diem-diem
     motong kartu Persentase Status paling bawah.
     Smart Queue HP sekarang UDAH BISA DI-SCROLL (overflow-y:auto,
     height:auto -- lihat blok #page-smartqueue di atas), jadi alasannya
     udah nggak berlaku dan aturannya dibuang. Jangan dibalikin kecuali
     Smart Queue HP dikunci 1 layar lagi. */

  /* Bottom nav sudah dibuang: ruang bawah cukup jarak napas + area aman iPhone. */
  .page-content { padding: 14px; padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; }
  .hero-card { padding: 18px 20px; }
  .hero-percent { font-size: 2.6rem; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .counter-cards-grid { grid-template-columns: 1fr; }
  .location-stats { grid-template-columns: repeat(2, 1fr); }
  .settings-grid { grid-template-columns: 1fr; }
  .toast-container { bottom: 16px; right: 10px; left: 10px; }
  .toast { min-width: unset; width: 100%; }
  .data-table thead { display: none; }
  .data-table tr { display: flex; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--gray-100); }
  .data-table td { padding: 3px 5px; border: none; font-size: .76rem; }
  .form-grid { grid-template-columns: 1fr; }
  .report-actions { flex-direction: column; }
  .btn { justify-content: center; }
}
@media (max-width: 400px) {
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .sum-value { font-size: 1.3rem; }
}

/* ================================================================
   INVENTORY TRANSFER MODULE
   ================================================================ */

.badge-new-transfer {
  background: var(--blue-light); color: var(--blue);
  font-size: .65rem; font-weight: 600;
  padding: 2px 8px; border-radius: 99px;
  border: 1px solid rgba(37,99,235,.15);
  margin-left: 4px;
}
.mb-16 { margin-bottom: 16px; }

/* ---- MODAL OVERLAY ---- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,36,72,.5);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
  padding: 20px;
}
.modal-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 480px;
  max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
}
.modal-title {
  font-size: .88rem; font-weight: 700; color: var(--gray-900);
  display: flex; align-items: center; gap: 7px;
}
.modal-title svg { width: 16px; height: 16px; color: var(--blue); }
.modal-close-btn {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); border: 1px solid var(--gray-200);
  transition: var(--transition); flex-shrink: 0;
}
.modal-close-btn svg { width: 14px; height: 14px; }
.modal-close-btn:hover { background: var(--red-light); border-color: var(--red); color: var(--red); }

.modal-sub {
  font-size: .75rem; color: var(--gray-500);
  padding: 8px 18px 0;
  flex-shrink: 0;
}
.modal-search-wrap {
  position: relative; padding: 10px 18px 6px;
  flex-shrink: 0;
}
.modal-search-wrap svg {
  position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--gray-400);
  margin-top: 2px;
}
.modal-search-input {
  width: 100%; padding: 7px 12px 7px 34px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .8rem; color: var(--gray-800);
  background: var(--white); transition: var(--transition);
}
.modal-search-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.modal-search-input::placeholder { color: var(--gray-400); }

.modal-action-row {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 18px 8px;
  flex-shrink: 0;
}

/* SKU List */
.modal-sku-list {
  flex: 1; overflow-y: auto;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  margin: 0;
}
.sku-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer; transition: var(--transition);
}
.sku-list-item:last-child { border-bottom: none; }
.sku-list-item:hover { background: var(--gray-50); }
.sku-list-item input[type=checkbox] {
  accent-color: var(--blue);
  width: 15px; height: 15px; flex-shrink: 0; cursor: pointer;
}
.sku-list-item-code {
  font-size: .82rem; font-weight: 600; color: var(--gray-900);
  font-family: var(--mono);
}

/* Modal Form */
.modal-form-group { padding: 10px 18px 0; flex-shrink: 0; }
.modal-label {
  display: block; font-size: .75rem; font-weight: 600;
  color: var(--gray-600); margin-bottom: 5px;
}
.modal-input {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .82rem; color: var(--gray-800);
  background: var(--white); transition: var(--transition);
}
.modal-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.modal-input.error { border-color: var(--red); }
.modal-error {
  font-size: .7rem; color: var(--red);
  margin-top: 4px; display: flex; align-items: center; gap: 4px;
}

.modal-info-strip {
  margin: 8px 18px 0;
  background: var(--blue-light);
  border: 1px solid rgba(37,99,235,.15);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: .75rem; color: var(--blue);
  font-weight: 500;
  flex-shrink: 0;
}

/* Modal Footer */
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--gray-100);
  flex-shrink: 0;
}

/* Transfer History Table */
#transferHistoryBody td { font-size: .78rem; }

/* Disabled button state */
.btn:disabled, .btn[disabled] {
  background: var(--gray-200) !important;
  color: var(--gray-400) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .modal-box { max-width: 100%; max-height: 90vh; }
}

/* ---- History Action Buttons ---- */
.btn-hist-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
  cursor: pointer; transition: var(--transition);
  background: var(--white);
}
.btn-hist-action svg { width: 13px; height: 13px; }
.btn-edit:hover    { background: var(--blue-light);  border-color: var(--blue);  color: var(--blue); }
.btn-confirm:hover { background: var(--green-light); border-color: var(--green); color: var(--green); }
.btn-delete:hover  { background: var(--red-light);   border-color: var(--red);   color: var(--red); }

/* ================================================================
   LOGIN & AUTH STYLES
   ================================================================ */

/* Warehouse bg — blok .login-overlay duplikat di atas sini udah dihapus.
   Satu-satunya properti yang dia sumbang cuma color:#FFFFFF, jadi dipindah ke sini. */
.login-overlay {
  position: fixed; inset: 0;
  color: #FFFFFF;
  z-index: 9990;
  display: flex;
  justify-content: center;
  /* hormatin notch/safe area HP */
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(135deg, #0F2448 0%, #1a3a6b 55%, #1e4080 100%);
  overflow-x: hidden;
  overflow-y: auto;                 /* boleh scroll kalau layar pendek */
  -webkit-overflow-scrolling: touch;
}

@media (max-height: 700px) {
}

@media (max-height: 820px) {
  .main-wrapper    { padding: 24px 20px; }
  .logo-container  { margin-bottom: 8px; }
  .login-card-invix{ padding: 28px 24px; }
  .features-row    { margin-top: 24px; }
  .footer-text     { margin-top: 24px; }
}
/* Blok @media (max-width:380px) dihapus — semua urusan tampilan login di HP
   sekarang terpusat di blok "LOGIN MOBILE — MOCKUP FINAL" di bagian bawah file. */

/* ================================================================
   SUMBER GAMBAR BACKGROUND LOGIN — GANTI DI SINI DOANG
   Upload JPG-nya ke Firebase Hosting, tempel URL-nya di bawah.
   Dipakai oleh blok "LOGIN MOBILE — MOCKUP FINAL".
   ================================================================ */
:root {
  --login-bg: url('/background.jpeg');
}
/* Selector .login-input ini sisa markup lama dan udah nggak kepake di mana-mana,
   makanya field-nya masih kuning pas di-autofill. Yang dipakai sekarang
   .input-wrapper input — itu yang di-override di bawah. */
.input-wrapper input:-webkit-autofill,
.input-wrapper input:-webkit-autofill:hover,
.input-wrapper input:-webkit-autofill:focus,
.input-wrapper input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(10, 26, 58, 0.95) inset !important;
  box-shadow: 0 0 0 1000px rgba(10, 26, 58, 0.95) inset !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #FFFFFF !important;
  border: 1px solid rgba(120, 165, 255, 0.22) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

.login-btn {
  width: 100%; padding: 10px;
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  color: #fff; border: none;
  border-radius: 10px;
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 4px 16px rgba(37,99,235,0.45);
  transition: all .18s;
}
.login-btn:hover { box-shadow: 0 6px 20px rgba(37,99,235,0.55); transform: translateY(-1px); }
.login-btn svg { width: 15px; height: 15px; }

/* ---- IDLE BANNER ---- */
.idle-banner {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 9985;
  background: linear-gradient(135deg, #0a1628, #0f2448);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 14px; padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 0 30px rgba(245,158,11,0.15), 0 8px 32px rgba(0,0,0,0.5);
  min-width: 380px; max-width: 480px;
  animation: slideUp .3s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.idle-banner-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.idle-banner-icon svg { width: 18px; height: 18px; color: #f59e0b; }
.idle-banner-title { color: #fff; font-size: .82rem; font-weight: 600; margin-bottom: 2px; }
.idle-banner-sub { color: rgba(255,255,255,0.45); font-size: .72rem; }
.idle-banner-sub .countdown { color: #f59e0b; font-weight: 700; font-family: var(--mono); font-size: .82rem; }
.idle-banner-actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
.idle-btn-logout {
  padding: 7px 12px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.55);
  font-size: .75rem; cursor: pointer;
  transition: all .18s;
}
.idle-btn-logout:hover { background: rgba(255,255,255,0.1); color: #fff; }
.idle-btn-stay {
  padding: 7px 14px;
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  border: none; border-radius: 8px;
  color: #fff; font-size: .75rem; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  box-shadow: 0 2px 10px rgba(37,99,235,0.4);
  transition: all .18s;
}
.idle-btn-stay:hover { box-shadow: 0 4px 16px rgba(37,99,235,0.5); }
.idle-btn-stay svg { width: 13px; height: 13px; }

/* ---- SIDEBAR WELCOME STRIP ---- */
.sidebar-welcome {
  padding: 10px 12px;
  background: rgba(37,99,235,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; gap: 9px;
}
.sidebar-welcome-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-welcome-avatar svg { width: 16px; height: 16px; }
.sidebar-welcome-avatar.role-user     { background: rgba(16,185,129,0.2); border: 1.5px solid rgba(16,185,129,0.4); }
.sidebar-welcome-avatar.role-user svg { color: #6EE7B7; }
.sidebar-welcome-avatar.role-inventory     { background: rgba(245,158,11,0.2); border: 1.5px solid rgba(245,158,11,0.4); }
.sidebar-welcome-avatar.role-inventory svg { color: #FCD34D; }
.sidebar-welcome-avatar.role-owner     { background: rgba(139,92,246,0.2); border: 1.5px solid rgba(139,92,246,0.4); }
.sidebar-welcome-avatar.role-owner svg { color: #C4B5FD; }
.sidebar-welcome-avatar.role-operational     { background: rgba(20,184,166,0.2); border: 1.5px solid rgba(20,184,166,0.4); }
.sidebar-welcome-avatar.role-operational svg { color: #5EEAD4; }
.sidebar-welcome-avatar.role-executive     { background: rgba(225,29,72,0.2); border: 1.5px solid rgba(225,29,72,0.4); }
.sidebar-welcome-avatar.role-executive svg { color: #FDA4AF; }
.sidebar-welcome-avatar.role-management     { background: rgba(99,102,241,0.2); border: 1.5px solid rgba(99,102,241,0.4); }
.sidebar-welcome-avatar.role-management svg { color: #A5B4FC; }
.sidebar-welcome-info { flex: 1; min-width: 0; }
.sidebar-welcome-greeting { color: rgba(255,255,255,0.4); font-size: .65rem; }
.sidebar-welcome-name { color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-welcome-badge {
  font-size: .6rem; font-weight: 600;
  padding: 2px 7px; border-radius: 99px;
  white-space: nowrap; flex-shrink: 0;
}
.sidebar-welcome-badge.role-user     { background: rgba(16,185,129,0.15); color: #6EE7B7; border: 0.5px solid rgba(16,185,129,0.3); }
.sidebar-welcome-badge.role-inventory { background: rgba(245,158,11,0.15); color: #FCD34D; border: 0.5px solid rgba(245,158,11,0.3); }
.sidebar-welcome-badge.role-owner    { background: rgba(139,92,246,0.15); color: #C4B5FD; border: 0.5px solid rgba(139,92,246,0.3); }
.sidebar-welcome-badge.role-operational { background: rgba(20,184,166,0.15); color: #5EEAD4; border: 0.5px solid rgba(20,184,166,0.3); }
.sidebar-welcome-badge.role-executive { background: rgba(225,29,72,0.15); color: #FDA4AF; border: 0.5px solid rgba(225,29,72,0.3); }
.sidebar-welcome-badge.role-management { background: rgba(99,102,241,0.15); color: #A5B4FC; border: 0.5px solid rgba(99,102,241,0.3); }

/* Logout btn */
.btn-logout-auth {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 10px;
  color: #F87171;
  font-size: .8rem; font-weight: 500;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: pointer;
  background: rgba(239,68,68,0.06);
  border: 0.5px solid rgba(239,68,68,0.15);
  margin-bottom: 6px;
}
.btn-logout-auth svg { width: 15px; height: 15px; }
.btn-logout-auth:hover { background: rgba(239,68,68,0.12); }

/* ---- ACCOUNT PAGE 3D MODALS ---- */
.modal-3d-overlay {
  position: fixed; inset: 0;
  background: rgba(6,13,26,0.88);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-3d-card {
  position: relative; z-index: 1;
  width: 100%; border-radius: 20px; overflow: hidden;
}
.modal-3d-card.blue {
  max-width: 420px;
  background: linear-gradient(145deg, rgba(20,36,64,0.97), rgba(10,18,36,0.99));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 40px rgba(37,99,235,0.25), 0 24px 60px rgba(0,0,0,0.6);
}
.modal-3d-card.red {
  max-width: 380px;
  background: linear-gradient(145deg, rgba(40,12,12,0.97), rgba(20,6,6,0.99));
  border: 1px solid rgba(239,68,68,0.18);
  box-shadow: 0 0 40px rgba(239,68,68,0.2), 0 24px 60px rgba(0,0,0,0.6);
}
.modal-3d-topline-blue { height: 2px; background: linear-gradient(90deg,transparent,#3b82f6,#818cf8,#3b82f6,transparent); }
.modal-3d-topline-red  { height: 2px; background: linear-gradient(90deg,transparent,#ef4444,#f87171,#ef4444,transparent); }
.modal-3d-corner { position: absolute; width: 36px; height: 36px; pointer-events: none; }
.modal-3d-corner.tl { top:0; left:0; border-top: 1.5px solid; border-left: 1.5px solid; border-radius: 20px 0 0 0; }
.modal-3d-corner.tr { top:0; right:0; border-top: 1.5px solid; border-right: 1.5px solid; border-radius: 0 20px 0 0; }
.modal-3d-corner.blue { border-color: rgba(99,179,255,0.5); }
.modal-3d-corner.red  { border-color: rgba(239,68,68,0.45); }
.modal-3d-bottomline-blue { height: 1px; background: linear-gradient(90deg,transparent,rgba(99,179,255,0.3),transparent); }
.modal-3d-bottomline-red  { height: 1px; background: linear-gradient(90deg,transparent,rgba(239,68,68,0.35),transparent); }

/* Role option cards */
.role-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 0.5px solid;
  cursor: pointer; transition: all .18s;
  margin-bottom: 7px;
}
.role-option.user     { border-color: rgba(16,185,129,0.2);  background: rgba(16,185,129,0.05); }
.role-option.inventory{ border-color: rgba(59,130,246,0.2);  background: rgba(37,99,235,0.06); }
.role-option.owner    { border-color: rgba(139,92,246,0.2);  background: rgba(139,92,246,0.05); }
.role-option.operational { border-color: rgba(20,184,166,0.2);  background: rgba(20,184,166,0.05); }
.role-option.executive { border-color: rgba(225,29,72,0.2);  background: rgba(225,29,72,0.05); }
.role-option.management { border-color: rgba(99,102,241,0.2);  background: rgba(99,102,241,0.05); }
.role-option.selected { border-width: 1.5px; }
.role-option.selected.user      { border-color: rgba(16,185,129,0.5);  background: rgba(16,185,129,0.1);  box-shadow: 0 0 14px rgba(16,185,129,0.15) inset; }
.role-option.selected.inventory { border-color: rgba(59,130,246,0.6);  background: rgba(37,99,235,0.12);  box-shadow: 0 0 14px rgba(37,99,235,0.2) inset; }
.role-option.selected.owner     { border-color: rgba(139,92,246,0.5);  background: rgba(139,92,246,0.1);  box-shadow: 0 0 14px rgba(139,92,246,0.15) inset; }
.role-option.selected.operational { border-color: rgba(20,184,166,0.5);  background: rgba(20,184,166,0.1);  box-shadow: 0 0 14px rgba(20,184,166,0.15) inset; }
.role-option.selected.executive { border-color: rgba(225,29,72,0.5);  background: rgba(225,29,72,0.1);  box-shadow: 0 0 14px rgba(225,29,72,0.15) inset; }
.role-option.selected.management { border-color: rgba(99,102,241,0.5);  background: rgba(99,102,241,0.1);  box-shadow: 0 0 14px rgba(99,102,241,0.15) inset; }
.role-avatar-sm {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.role-avatar-sm svg { width: 12px; height: 12px; }
.role-avatar-sm.user      { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.4); }
.role-avatar-sm.user svg  { color: #6EE7B7; }
.role-avatar-sm.inventory { background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.4); }
.role-avatar-sm.inventory svg { color: #FCD34D; }
.role-avatar-sm.owner     { background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.4); }
.role-avatar-sm.owner svg { color: #C4B5FD; }
.role-avatar-sm.operational     { background: rgba(20,184,166,0.15); border: 1px solid rgba(20,184,166,0.4); }
.role-avatar-sm.operational svg { color: #5EEAD4; }
.role-avatar-sm.executive     { background: rgba(225,29,72,0.15); border: 1px solid rgba(225,29,72,0.4); }
.role-avatar-sm.executive svg { color: #FB7185; }
.role-avatar-sm.management     { background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.4); }
.role-avatar-sm.management svg { color: #A5B4FC; }

/* ================================================================
   ROLE EXECUTIVE -- VIEW ONLY
   Sembunyikan semua tombol upload/edit/export/checkbox aksi di
   Smart Picking & Smart Putaway (tab Task List & Report), dan
   sembunyikan tab + isi Upload + Audit Multi-Lokasi sepenuhnya.
   Ditandai lewat class "role-viewonly" di <body> (js.html, applyAccessControl()).
   ================================================================ */
body.role-viewonly #putawayTab-upload,
body.role-viewonly #putawayTab-audit,
body.role-viewonly #putawayPane-upload,
body.role-viewonly #putawayPane-audit,
body.role-viewonly #putawayBulkBar,
body.role-viewonly #putawayTaskBody button,
body.role-viewonly .putaway-row-cb,
body.role-viewonly .putaway-report-cb,
body.role-viewonly #putawaySelectAll,
body.role-viewonly #putawayReportSelectAll,
body.role-viewonly label:has(#putawaySelectAll),
body.role-viewonly label:has(#putawayReportSelectAll),
body.role-viewonly #putawayPane-report .card-header button,
body.role-viewonly #pickingTab-upload,
body.role-viewonly #pickingPane-upload,
body.role-viewonly #pickingBulkBar,
body.role-viewonly #pickingTaskBody button,
body.role-viewonly .picking-row-cb,
body.role-viewonly .picking-report-cb,
body.role-viewonly #pickingSelectAll,
body.role-viewonly #pickingReportSelectAll,
body.role-viewonly label:has(#pickingSelectAll),
body.role-viewonly label:has(#pickingReportSelectAll),
body.role-viewonly #pickingPane-report .card-header button {
  display: none !important;
}
.account-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.account-avatar svg { width: 17px; height: 17px; }
.account-avatar.user      { background: rgba(16,185,129,0.15); border: 1.5px solid rgba(16,185,129,0.4); }
.account-avatar.user svg  { color: #6EE7B7; }
.account-avatar.inventory { background: rgba(245,158,11,0.15); border: 1.5px solid rgba(245,158,11,0.4); }
.account-avatar.inventory svg { color: #FCD34D; }
.account-avatar.owner     { background: rgba(139,92,246,0.15); border: 1.5px solid rgba(139,92,246,0.4); }
.account-avatar.owner svg { color: #C4B5FD; }
.account-role-badge {
  font-size: .65rem; font-weight: 600;
  padding: 2px 8px; border-radius: 99px;
}
.account-role-badge.user      { background: rgba(16,185,129,0.15); color: #6EE7B7; border: 0.5px solid rgba(16,185,129,0.3); }
.account-role-badge.inventory { background: rgba(245,158,11,0.15); color: #FCD34D; border: 0.5px solid rgba(245,158,11,0.3); }
.account-role-badge.owner     { background: rgba(139,92,246,0.15); color: #C4B5FD; border: 0.5px solid rgba(139,92,246,0.3); }

/* Dark input for modal 3D */
.dark-input-wrap { position: relative; }
.dark-input-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: rgba(255,255,255,0.3);
}
.dark-input-icon-right {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: rgba(255,255,255,0.3); cursor: pointer;
}
.dark-input {
  width: 100%; padding: 9px 34px 9px 33px;
  font-size: .82rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06); color: #fff;
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
}
.dark-input.no-right { padding-right: 11px; }
.dark-input::placeholder { color: rgba(255,255,255,0.25); }
.dark-input:focus { outline: none; border-color: rgba(59,130,246,0.5); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
.dark-label {
  font-size: .68rem; font-weight: 600;
  color: rgba(255,255,255,0.4);
  display: block; margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .05em;
}

/* ================================================================
   TRANSITION ANIMATIONS - LOGIN / LOGOUT
   ================================================================ */

@keyframes slideOutLeft {
  0%   { opacity:1; transform:translateX(0) scale(1); }
  100% { opacity:0; transform:translateX(-60px) scale(0.97); }
}
@keyframes slideInRight {
  0%   { opacity:0; transform:translateX(60px) scale(0.97); }
  100% { opacity:1; transform:translateX(0) scale(1); }
}
@keyframes slideOutRight {
  0%   { opacity:1; transform:translateX(0) scale(1); }
  100% { opacity:0; transform:translateX(60px) scale(0.97); }
}
@keyframes slideInLeft {
  0%   { opacity:0; transform:translateX(-60px) scale(0.97); }
  100% { opacity:1; transform:translateX(0) scale(1); }
}

.anim-slide-out-left {
  animation: slideOutLeft 0.35s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none;
}
.anim-slide-in-right {
  animation: slideInRight 0.35s cubic-bezier(.4,0,.2,1) forwards;
}

/* Location detail modal table rows */
#locDetailBody tr { transition: background .15s; }
#locDetailBody tr:last-child td { border-bottom: none !important; }
#locDetailBody td { vertical-align: middle; }

/* ================================================================
   WRAP FILE PAGE
   ================================================================ */
#wrapSheetList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
  padding: 2px;
}
.wrap-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--green-light);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 99px;
  padding: 4px 11px;
  font-size: .72rem;
  font-weight: 600;
  color: #065F46;
  white-space: nowrap;
  flex-shrink: 0;
}
.wrap-chip svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--green); }

/* ================================================================
   GLASS MORPHISM UPGRADES
   ================================================================ */
.card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.sum-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}

.counter-detail-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ================================================================
   SUMMARY REPORT PAGE
   ================================================================ */
.summary-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 20px;
}
.summary-tab-btn {
  padding: 10px 24px;
  font-size: .85rem; font-weight: 600;
  color: var(--gray-500);
  border: none; background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
  display: flex; align-items: center; gap: 7px;
}
.summary-tab-btn svg { width: 15px; height: 15px; }
.summary-tab-btn.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}
.summary-tab-btn:hover:not(.active) {
  color: var(--gray-700);
  background: var(--gray-50);
}
.summary-tab-content { display: none; }
.summary-tab-content.active { display: block; animation: pageFadeIn .2s ease; }

.summary-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.summary-metric-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.summary-metric-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.summary-metric-header {
  background: var(--navy);
  padding: 8px 14px;
  color: rgba(255,255,255,.9);
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.summary-metric-body { padding: 12px 14px; }
.summary-metric-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: .78rem;
}
.summary-metric-row:last-child { border-bottom: none; }
.summary-metric-label { color: var(--gray-500); }
.summary-metric-value { font-weight: 600; color: var(--gray-900); font-family: var(--mono); }
.summary-metric-value.green { color: var(--green); }
.summary-metric-value.red { color: var(--red); }
.summary-metric-value.blue { color: var(--blue); font-size: .85rem; font-weight: 700; }

/* ================================================================
   RECONCILE PAGE
   ================================================================ */
.reconcile-summary-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.reconcile-row-highlight { background: rgba(245,158,11,.07) !important; }
.reconcile-row-highlight:hover { background: rgba(245,158,11,.12) !important; }

.gap-urgent { color: var(--red); font-weight: 700; }
.gap-positive { color: var(--green); font-weight: 600; }
.gap-zero { color: var(--gray-400); }

.badge-analyzed {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: var(--green-light);
  color: #065F46;
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 99px;
  font-size: .7rem; font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.badge-analyzed:hover { background: #D1FAE5; }

.analyze-section-title {
  font-size: .75rem; font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 18px 6px;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.analyze-section-title::before {
  content: '';
  display: inline-block;
  width: 3px; height: 12px;
  background: var(--blue);
  border-radius: 2px;
}

.analyze-tx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .75rem;
}
.analyze-tx-table th {
  padding: 7px 12px;
  background: var(--gray-50);
  font-size: .67rem; font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--gray-200);
  text-align: left; white-space: nowrap;
}
.analyze-tx-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.analyze-tx-table tr:last-child td { border-bottom: none; }
.analyze-tx-table tr:hover td { background: var(--gray-50); }
.analyze-tx-table tr.tx-unmatched td { background: rgba(239,68,68,.05); }
.analyze-tx-table tr.tx-matched td { background: rgba(16,185,129,.04); }
.analyze-tx-table tr.tx-suspicious td { background: rgba(245,158,11,.06); }
.analyze-tx-table tr.tx-adjustment td { background: rgba(99,102,241,.04); }

.tx-status-match    { color: var(--green); font-weight: 600; font-size: .7rem; }
.tx-status-unmatch  { color: var(--red);   font-weight: 600; font-size: .7rem; }
.tx-status-warn     { color: var(--orange); font-weight: 600; font-size: .7rem; }
.tx-status-note     { color: #6366F1;      font-weight: 600; font-size: .7rem; }

.analyze-empty {
  text-align: center;
  padding: 20px;
  color: var(--gray-400);
  font-size: .8rem;
  font-style: italic;
}

#modalAnalyze .modal-box {
  max-width: 900px;
  max-height: 90vh;
}
#modalViewAnalysis .modal-box {
  max-width: 900px;
  max-height: 90vh;
}

.reconcile-remark-area {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .82rem; color: var(--gray-800);
  font-family: var(--font);
  resize: vertical;
  min-height: 70px;
  transition: var(--transition);
}
.reconcile-remark-area:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.reconcile-remark-area:read-only { background: var(--gray-50); color: var(--gray-600); cursor: default; }

.locked-analysis-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--green-light);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 0 18px 0;
  font-size: .78rem; color: #065F46;
  flex-shrink: 0;
}
.locked-analysis-banner svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ================================================================
   RESPONSIVE - HALAMAN BARU
   ================================================================ */
@media (max-width: 768px) {
  .reconcile-summary-strip { grid-template-columns: 1fr; }
  .summary-metric-grid { grid-template-columns: 1fr; }
  #modalAnalyze .modal-box, #modalViewAnalysis .modal-box { max-width: 100%; }
  .analyze-tx-table { font-size: .68rem; }
  .analyze-tx-table th, .analyze-tx-table td { padding: 5px 8px; }
}

/* ============================================================
   REALTIME COUNTING STYLES (UPDATED)
   ============================================================ */
.rc-item-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-xs);
  transition: var(--transition); position: relative;
}
.rc-item-card:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.rc-item-card.done { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.04); }

.rc-loc { font-size:.75rem; color:var(--gray-500); font-weight:700; margin-bottom:4px; }
.rc-sku { font-size:1.05rem; font-weight:800; font-family:var(--mono); color:var(--navy); }
/* Mode gelap: teks berwarna --navy (#0F2448) nyaris tak terlihat di latar gelap -> pakai warna teks utama.
   Berlaku untuk Realtime Counting (kode SKU, label area, statistik & info di halaman Review).
   Selector [style*=...] menangkap teks navy yang ditulis inline (judul Review, kode lokasi di Review). */
[data-theme="dark"] .rc-sku,
[data-theme="dark"] .rtm-area-label,
[data-theme="dark"] .rtr-stat .val,
[data-theme="dark"] .rtr-info-alert strong,
[data-theme="dark"] [style*="color:var(--navy)"] { color: var(--gray-900) !important; }
.rc-desc { font-size:.8rem; color:var(--gray-600); margin-bottom:12px; line-height: 1.4; }

/* Tombol Berdampingan di Kiri */
.rc-actions { display: flex; gap: 8px; justify-content: flex-start; margin-top: 10px; }
.rc-actions .btn { flex: 0 1 auto; padding: 6px 14px; font-size: .75rem; font-weight: 700; border-radius: 6px; }

.badge-done-stamp {
  position: absolute; top: 14px; right: 16px;
  background: var(--green-light); color: var(--green);
  font-size: .7rem; font-weight: 800;
  padding: 3px 10px; border-radius: 99px; border: 1px solid rgba(16,185,129,0.3);
}

/* ============================================================
   ANIMASI LOADING (BOUNCING DOTS)
   ============================================================ */
.bouncing-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 32px 0;
  width: 100%;
}
.bouncing-dots div {
  width: 12px;
  height: 12px;
  background-color: var(--blue); /* Ngikutin warna biru tema lu */
  border-radius: 50%;
  animation: bounce 0.5s infinite alternate;
}
/* Bikin delay biar mantulnya gantian (wave effect) */
.bouncing-dots div:nth-child(2) { animation-delay: 0.15s; }
.bouncing-dots div:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-10px); opacity: 0.3; }
}

.dash-phase-tabs { display:flex; gap:12px; margin-bottom:18px; }
.dash-phase-btn {
  flex:1; display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-radius:14px; text-align:left;
  border:1px solid var(--gray-200); background:var(--white);
  cursor:pointer; transition:var(--transition); position:relative; overflow:hidden;
}
.dash-phase-btn:hover { border-color:var(--blue); }
.phase-num {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:800;
  background:var(--gray-100); color:var(--gray-500); transition:var(--transition);
}
.phase-text { display:flex; flex-direction:column; gap:2px; }
.phase-title { font-size:.85rem; font-weight:800; color:var(--gray-900); letter-spacing:.02em; }
.phase-status { font-size:.72rem; color:var(--gray-400); font-weight:500; }
.dash-phase-btn.active {
  background:linear-gradient(135deg,#1d4ed8,#3b82f6);
  border-color:transparent; box-shadow:0 6px 20px rgba(37,99,235,.35);
}
.dash-phase-btn.active .phase-num   { background:rgba(255,255,255,.2); color:#fff; }
.dash-phase-btn.active .phase-title { color:#fff; }
.dash-phase-btn.active .phase-status{ color:rgba(255,255,255,.85); }
@media (max-width:600px){
  .dash-phase-tabs { gap:8px; }
  .dash-phase-btn  { flex-direction:column; align-items:flex-start; gap:6px; padding:10px 12px; }
  .phase-num   { width:30px; height:30px; font-size:.75rem; }
  .phase-title { font-size:.76rem; }
  .phase-status{ font-size:.64rem; }
}
.dash-phase-btn:hover { border-color:var(--blue); color:var(--blue); }
.dash-phase-btn.active {
  background:var(--blue); color:#fff; border-color:var(--blue);
  box-shadow:0 2px 8px rgba(37,99,235,.3);
}
@media (max-width: 480px){ .dash-phase-btn{ font-size:.74rem; padding:9px 6px; } }

/* ============================================================
   INVIX LOGIN UI STYLES 
   ============================================================ */
.login-overlay {
  position: fixed; inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* ← bukan center, biar content mulai dari atas */
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(135deg, #0F2448 0%, #1a3a6b 55%, #1e4080 100%);
  z-index: 9990;
}

/* Background image placeholder (Gudang) */
.bg-image {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  min-height: 100vh;
  min-height: 100dvh;           /* ← tambah ini */
  background: linear-gradient(to bottom, rgba(1,11,46,0.8), rgba(1,11,46,0.95)),
              url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=2070&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* ← tambah ini, biar bg ga scroll */
  z-index: 0;
}

.dot-pattern {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  min-height: 100vh;
  min-height: 100dvh;           /* ← tambah ini */
  background-image: radial-gradient(circle, rgba(10,91,255,0.3) 1px, transparent 1px);
  background-size: 16px 16px;
  z-index: 1;
  opacity: 0.5;
}

/* Blok @media (max-width:600px) lama dan .dot-pattern duplikat dihapus.
   .dot-pattern aslinya udah didefinisikan lengkap beberapa baris di atas,
   dan aturan mobile sekarang terpusat di "LOGIN MOBILE — MOCKUP FINAL". */
.main-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  padding: 20px 16px 40px;
  margin: 0 auto;
}

/* Header & Logo */
.logo-container { 
  text-align: center; 
  margin-bottom: 12px; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-img { 
  width: 100%;
  max-width: 320px;
  height: auto; 
  object-fit: contain; 
}

/* Card Login */
.login-card-invix {
  width: 100%; padding: 40px 32px; border-radius: 32px;
  backdrop-filter: blur(24px); background: rgba(4, 20, 66, 0.75);
  border: 1px solid rgba(71, 135, 255, 0.25);
  box-shadow: 0 0 20px rgba(10, 91, 255, 0.25), 0 0 60px rgba(10, 91, 255, 0.15);
  text-align: center; position: relative;
}
.login-card-invix::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 3px; background: #4F8FFF; box-shadow: 0 0 10px #4F8FFF; border-radius: 0 0 4px 4px;
}
.login-card-invix h2 { font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 600; margin-bottom: 8px; color: #fff; }
.login-card-invix p { font-family: 'Poppins', sans-serif; font-size: 13px; color: #B8C8FF; margin-bottom: 32px; }

/* Input Group */
.input-group { text-align: left; margin-bottom: 20px; }
.input-group label { display: block; font-family: 'Poppins', sans-serif; font-size: 11px; color: #B8C8FF; letter-spacing: 1px; margin-bottom: 8px; font-weight: 500;}
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper .lucide-icon { position: absolute; left: 16px; color: #4F8FFF; width: 18px; height: 18px; }
.input-wrapper .eye-icon { position: absolute; right: 16px; color: #B8C8FF; width: 18px; height: 18px; cursor: pointer; transition: color 0.3s; }
.input-wrapper .eye-icon:hover { color: #fff; }
.input-wrapper input {
  width: 100%; background: rgba(2, 26, 90, 0.5); border: 1px solid rgba(71, 135, 255, 0.2);
  border-radius: 12px; padding: 14px 40px 14px 44px; color: #FFFFFF; font-size: 14px; font-family: 'Poppins', sans-serif;
  outline: none; transition: all 0.3s;
}
.input-wrapper input:focus { border-color: #4F8FFF; background: rgba(2, 26, 90, 0.8); }

/* Options Row */
.options-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; font-family: 'Poppins', sans-serif; font-size: 12px; }
.checkbox-group { display: flex; align-items: center; gap: 8px; color: #FFFFFF; cursor: pointer; }
.checkbox-group input { accent-color: #0A5BFF; width: 16px; height: 16px; cursor: pointer; }
.forgot-link { color: #4F8FFF; text-decoration: none; transition: color 0.3s; }
.forgot-link:hover { color: #FFFFFF; }

/* Login Button */
.btn-login-invix {
  width: 100%; padding: 16px; background: linear-gradient(90deg, #0A5BFF, #4F8FFF);
  border: none; border-radius: 12px; color: #FFFFFF; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600;
  cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px;
  transition: all 0.3s; box-shadow: 0 8px 20px rgba(10, 91, 255, 0.4); margin-bottom: 15px;
}
.btn-login-invix:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(10, 91, 255, 0.6); }

/* Login Error Message */
.login-error-invix {
  background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3);
  color: #FCA5A5; font-size: 12px; font-family: 'Poppins', sans-serif; padding: 12px;
  border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px;
}
.login-error-invix svg { width: 16px; height: 16px; color: #FCA5A5; }

.dev-credit { margin-top: 24px; font-family: 'Poppins', sans-serif; font-size: 11px; color: #B8C8FF; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* Features / Pilar Bawah */
.features-row { display: flex; justify-content: space-between; width: 100%; margin-top: 40px; padding: 0 10px; }
.feature-item { text-align: center; flex: 1; }
.feature-icon {
  width: 40px; height: 40px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: rgba(2, 26, 90, 0.5); border: 1px solid rgba(71, 135, 255, 0.2); color: #FFFFFF;
}
.feature-icon svg { width: 20px; height: 20px; }
.feature-item h3 { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; margin-bottom: 4px; letter-spacing: 0.5px; color: #fff; }
.feature-item p { font-family: 'Poppins', sans-serif; font-size: 10px; color: #B8C8FF; line-height: 1.4; }

/* Footer */
.footer-text { margin-top: 40px; font-family: 'Poppins', sans-serif; font-size: 11px; color: #B8C8FF; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }

/* ===== REALTIME COUNTING — SETUP SCREEN (NEW) ===== */
.rt-stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.rt-step {
  flex: 1; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 14px; position: relative;
  border: 1px solid var(--gray-200); background: var(--white);
}
.rt-step.active { background: var(--blue-light); border-color: rgba(37,99,235,.3); }
.rt-step.active::after {
  content:''; position:absolute; left:18px; right:18px; bottom:-1px; height:3px;
  background: var(--blue); border-radius: 3px 3px 0 0;
}
.rt-step-num {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; background: var(--gray-100); color: var(--gray-500);
}
.rt-step.active .rt-step-num { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,.4); }
.rt-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-step-title { font-size: .85rem; font-weight: 700; color: var(--gray-900); white-space: nowrap; }
.rt-step.active .rt-step-title { color: var(--blue-hover); }
.rt-step-sub { font-size: .72rem; color: var(--gray-400); white-space: nowrap; }
.rt-step-line { flex: 0 0 30px; border-top: 2px dotted var(--gray-300); }

.rt-setup-card {
  position: relative; overflow: hidden; max-width: 720px; margin: 0 auto 16px;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 26px 28px;
}
.rt-setup-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.rt-setup-icon {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.rt-setup-icon svg { width: 24px; height: 24px; }
.rt-setup-title { font-size: 1.3rem; font-weight: 800; color: var(--gray-900); letter-spacing: -.02em; }
.rt-setup-sub { font-size: .82rem; color: var(--gray-500); margin-top: 4px; line-height: 1.5; }
.rt-setup-body { border-top: 1px solid var(--gray-100); padding-top: 20px; }

.rt-field { margin-bottom: 18px; }
.rt-label { display: block; font-size: .82rem; font-weight: 700; color: var(--gray-700); margin-bottom: 8px; }
.rt-select-wrap { position: relative; }
.rt-select-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gray-400); pointer-events: none; }
.rt-select-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gray-400); pointer-events: none; }
.rt-select {
  width: 100%; padding: 13px 40px 13px 42px; font-size: .9rem; color: var(--gray-800);
  border: 1px solid var(--gray-200); border-radius: 12px; background: var(--gray-50); cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: var(--transition);
}
.rt-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); background: var(--white); }
.rt-select:disabled { color: var(--gray-400); cursor: not-allowed; }

.rt-start-btn {
  width: 100%; margin-top: 6px; padding: 15px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #1d4ed8, #3b82f6); color: #fff; border: none;
  border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(37,99,235,.4); transition: var(--transition);
}
.rt-start-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(37,99,235,.5); }
.rt-start-btn svg { width: 16px; height: 16px; }

.rt-info-card {
  max-width: 720px; margin: 0 auto; display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-radius: var(--radius-lg);
  background: var(--gray-50); border: 1px solid var(--gray-200);
}
.rt-info-icon { color: var(--blue); flex-shrink: 0; }
.rt-info-icon svg { width: 20px; height: 20px; }
.rt-info-title { font-size: .85rem; font-weight: 700; color: var(--blue-hover); margin-bottom: 2px; }
.rt-info-text { font-size: .8rem; color: var(--gray-500); line-height: 1.5; }

@media (max-width: 600px) {
  .rt-stepper { flex-direction: column; align-items: stretch; }
  .rt-step-line { display: none; }
}

/* ===== PROSES COUNTING (MONITORING) ===== */
.rtm-header { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:22px 24px; margin-bottom:16px; }
.rtm-header-left { display:flex; gap:16px; align-items:flex-start; flex:1; min-width:280px; }
.rtm-total { margin-top:14px; }
.rtm-total-row { display:flex; justify-content:space-between; font-size:.78rem; color:var(--gray-500); margin-bottom:6px; }
.rtm-total-row b { color:var(--blue); }
.rtm-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.rtm-stat { display:flex; gap:9px; align-items:center; background:var(--gray-50);
  border:1px solid var(--gray-200); border-radius:var(--radius); padding:10px 12px; min-width:120px; }
.rtm-stat-icon { width:34px; height:34px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.rtm-stat-icon svg { width:17px; height:17px; }
.rtm-stat-icon.blue { background:var(--blue-light); color:var(--blue); }
.rtm-stat-icon.green { background:var(--green-light); color:var(--green); }
.rtm-stat-icon.orange { background:var(--orange-light); color:var(--orange); }
.rtm-stat-icon.gray { background:var(--gray-100); color:var(--gray-500); }
.rtm-stat-label { font-size:.66rem; color:var(--gray-400); font-weight:600; }
.rtm-stat-val { font-size:1.2rem; font-weight:800; color:var(--gray-900); line-height:1.1; }
.rtm-stat-unit { font-size:.62rem; color:var(--gray-400); }

.rtm-area-label { font-size:.82rem; font-weight:700; color:var(--navy); margin:18px 0 10px; display:flex; align-items:center; gap:6px; }
.rtm-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:12px; margin-bottom:6px; }
.rtm-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-xs); transition:var(--transition); }
.rtm-card:hover { border-color:var(--blue); box-shadow:var(--shadow-sm); }
.rtm-card-top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rtm-card-icon { width:36px; height:36px; border-radius:9px; background:var(--gray-100); color:var(--gray-500); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rtm-card-icon svg { width:17px; height:17px; }
.rtm-card-info { flex:1; min-width:0; }
.rtm-card-code { font-size:.92rem; font-weight:800; color:var(--gray-900); }
.rtm-card-sub { font-size:.7rem; color:var(--gray-400); }
.rtm-badge { font-size:.6rem; font-weight:700; padding:3px 8px; border-radius:99px; white-space:nowrap; }
.rtm-badge.complete { background:var(--green-light); color:#065F46; border:1px solid rgba(16,185,129,.25); }
.rtm-badge.progress { background:var(--orange-light); color:#92400E; border:1px solid rgba(245,158,11,.25); }
.rtm-badge.pending  { background:var(--gray-100); color:var(--gray-500); border:1px solid var(--gray-200); }
.rtm-card-bar { display:flex; align-items:center; gap:8px; }
.rtm-card-pct { font-size:.72rem; font-weight:700; color:var(--gray-500); white-space:nowrap; }
@media (max-width:900px){ .rtm-stats { grid-template-columns:repeat(2,1fr); } }

/* ================================================================
   AUTO-FIT RESPONSIVE SYSTEM
   ================================================================ */

/* ---- DEVICE CLASSES (di-set via JS) ---- */
/* .is-mobile  = layar < 768px  */
/* .is-tablet  = layar 768-1024px */
/* .is-desktop = layar > 1024px  */

/* ---- BASE FLUID TYPOGRAPHY ---- */
:root {
  --fluid-xs:   clamp(10px, 2vw, 12px);
  --fluid-sm:   clamp(11px, 2.2vw, 13px);
  --fluid-base: clamp(12px, 2.5vw, 14px);
  --fluid-md:   clamp(13px, 2.8vw, 16px);
  --fluid-lg:   clamp(16px, 3.5vw, 20px);
  --fluid-xl:   clamp(20px, 5vw, 32px);
}

html { font-size: var(--fluid-base); }

/* ---- FLUID SPACING ---- */
.page-content {
  padding: clamp(10px, 3vw, 24px) clamp(10px, 3vw, 24px);
}

/* ---- CARD SYSTEM AUTO-FIT ---- */
.card-body {
  padding: clamp(10px, 2.5vw, 18px);
}
.card-header {
  padding: clamp(10px, 2.5vw, 16px) clamp(10px, 2.5vw, 18px) clamp(8px, 2vw, 14px);
}
.sum-card {
  padding: clamp(10px, 2.5vw, 14px) clamp(10px, 2.5vw, 16px);
}

/* ---- SUMMARY GRID AUTO-FIT ---- */
.summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.summary-metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.reconcile-summary-strip {
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}
.counter-cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

/* ---- GRID AUTO-FIT: PENYAKIT YANG SAMA, BELUM KELIHATAN ----
   Dua grid di bawah ini masih muat di 390px, tapi lantainya dipatok px polos --
   persis pola yang bikin Upload SOH nyembul 53px. Di HP 320px dua-duanya mulai
   jebol. Dibungkus min(...,100%) sekarang, mumpung lagi dibuka: lebih murah
   daripada nunggu ada yang ngeluh pakai HP kecil.
   Grid lain (.summary-grid, .report-grid, .counter-cards-grid dst) sudah pakai
   pola ini di blok atas -- dua ini cuma kelewat. */
.rtm-cards { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.form-grid { grid-template-columns: repeat(auto-fit,  minmax(min(180px, 100%), 1fr)); }

/* ---- TABLE AUTO-FIT ---- */
.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table {
  min-width: 500px;
}

/* ---- TOPBAR AUTO-FIT ---- */
.topbar-title { font-size: clamp(0.82rem, 2.5vw, 0.97rem); }
.topbar { padding: 0 clamp(10px, 3vw, 24px); }

/* ---- HERO CARD AUTO-FIT ---- */
.hero-percent { font-size: clamp(2rem, 7vw, 3.2rem); }
.hero-card { padding: clamp(16px, 4vw, 24px) clamp(16px, 4vw, 28px); }

/* ---- BUTTON AUTO-FIT ---- */
.btn { font-size: clamp(0.72rem, 2vw, 0.8rem); padding: clamp(6px, 1.5vw, 8px) clamp(10px, 2.5vw, 16px); }
.rt-start-btn { font-size: clamp(0.85rem, 2.5vw, 1rem); }

/* ---- FORM AUTO-FIT ---- */
.form-control,
.modal-input,
.rt-select,
.search-input,
.select-setting {
  font-size: clamp(0.78rem, 2.2vw, 0.82rem);
}

/* Blok MOBILE SPECIFIC (<480px) dihapus seluruhnya.
   Isinya login semua dan ketiban blok "LOGIN MOBILE — MOCKUP FINAL" di bawah —
   cuma bikin bingung pas debug. */

/* ================================================================
   TABLET (768px - 1024px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 1024px) {

  .summary-grid    { grid-template-columns: repeat(2, 1fr); }
  .section-grid-2  { grid-template-columns: 1fr; }
  .dash-phase-tabs { gap: 10px; }

  /* Sidebar: auto-hide on tablet */
  .sidebar { width: 200px; }
  :root    { --sidebar-w: 200px; }

  .rtm-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   LARGE DESKTOP (> 1400px)
   ================================================================ */
@media (min-width: 1400px) {
  :root { --sidebar-w: 240px; }
  .summary-grid { grid-template-columns: repeat(4, 1fr); }
  .counter-cards-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ================================================================ */
@media (hover: none) and (pointer: coarse) {

  /* Tombol lebih gede buat jari */
  .btn          { min-height: 40px; }
  .nav-item     { padding: 11px 10px; }
  .icon-btn     { width: 36px; height: 36px; }
  .btn-hist-action { width: 34px; height: 34px; }
  .chip         { padding: 6px 14px; }

  /* Disable hover effects di touch — biar ga stuck */
  .card:hover           { transform: none; box-shadow: var(--shadow-sm); }
  .sum-card:hover       { transform: none; }
  .counter-detail-card:hover { transform: none; }
  .btn-primary:hover    { transform: none; }
  .btn-success:hover    { transform: none; }
  .btn-warning:hover    { transform: none; }
  .rt-start-btn:hover   { transform: none; }

  /* Input: font minimal 16px biar HP ga auto-zoom */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Scrolling: natural momentum */
  .page-content,
  .sidebar-nav,
  .modal-sku-list,
  .modal-box {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* ================================================================
   SAFE AREA (iPhone notch / Dynamic Island)
   ================================================================ */
@supports (padding: env(safe-area-inset-top)) {
  .topbar { padding-top: env(safe-area-inset-top); }
  .sidebar {
    padding-top: env(safe-area-inset-top);
  }
  .toast-container {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ================================================================
   TABLE WRAPPER — semua table otomatis scrollable di HP
   ================================================================ */
.card [style*="overflow-x:auto"],
.card > div[style*="overflow-x"] {
  -webkit-overflow-scrolling: touch;
}

/* ================================================================
   STICKY FIX — sticky harus works di dalam overflow container
   ================================================================ */
.page-content {
  overflow-y: auto;
  /* overflow-x jangan auto/scroll kalau mau sticky works */
  overflow-x: hidden;
}

/* Sticky header realtime counting */
#rtAisleScreen [style*="position: sticky"],
#rtListScreen  [style*="position: sticky"] {
  /* Backup kalau inline style ga ke-apply */
  position: -webkit-sticky;
  position: sticky;
}

/* ================================================================
   STICKY FIX REALTIME COUNTING — FINAL
   Root cause: .page.active animation pakai transform → bikin
   containing-block baru → sticky nempel ke .page bukan .page-content
   ================================================================ */

/* 1. Matikan animasi/transform di page realtime supaya sticky works */
#page-realtime.page.active {
  animation: none !important;
  transform: none !important;
}

/* 2. Pastikan tidak ada transform/overflow yang nge-break sticky
      di sepanjang chain dari sticky bar sampai .page-content */
#page-realtime,
#rtAisleScreen,
#rtListScreen,
#rtMonitorScreen,
#rtReviewScreen {
  overflow: visible !important;
  transform: none !important;
}

/* 3. Sticky bar — pastikan inline style ke-reinforce + kompensasi
      padding .page-content (desktop = 24px) */
#rtAisleScreen > div:first-child,
#rtListScreen  > div:first-child {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* 4. Mobile (≤768px): page-content padding = 14px, jadi kompensasi
      margin negatif sticky bar dari -24px → -14px */
@media (max-width: 768px) {
  #rtAisleScreen > div:first-child,
  #rtListScreen  > div:first-child {
    margin-left: -14px !important;
    margin-right: -14px !important;
  }
  #rtListScreen > div:first-child {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* 5. Mobile kecil (≤480px): page-content padding kemungkinan
      ikut clamp jadi ~10px */
@media (max-width: 480px) {
  #rtAisleScreen > div:first-child,
  #rtListScreen  > div:first-child {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
  #rtListScreen > div:first-child {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ================================================================
   STICKY TABLE HEADER — tabel dengan scroll internal
   ================================================================ */
.table-scroll-sticky {
  max-height: 480px;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
}
.table-scroll-sticky[data-autofit="1"] {
  max-height: none;
}
.table-scroll-sticky .data-table-wrap {
  overflow: visible !important;
}
.table-scroll-sticky table {
  border-collapse: separate;
  border-spacing: 0;
}
.table-scroll-sticky table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  border-top: 1px solid var(--gray-200);
}
[data-theme="dark"] .table-scroll-sticky table thead th {
  background: var(--navy-mid);
}

/* ============================================================
   RT REVIEW SCREEN STYLES (NEW)
   ============================================================ */
.rtr-summary-widget {
  display: flex; gap: 16px; align-items: stretch; margin: 0 16px 20px;
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); overflow: hidden;
}
.rtr-title-box {
  padding: 24px; background: rgba(248,250,252,0.6);
  border-right: 1px solid var(--gray-100); width: 340px; flex-shrink: 0;
  display: flex; align-items: center; gap: 16px;
}
.rtr-title-box .rtr-icon {
  width: 56px; height: 56px; border-radius: 14px; background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rtr-stats-box {
  display: flex; flex: 1; padding: 16px 0;
}
.rtr-stat {
  flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 20px;
  border-right: 1px solid var(--gray-200);
}
.rtr-stat-icon {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.rtr-stat-icon.blue { background: var(--blue-light); color: var(--blue); }
.rtr-stat-icon.green { background: var(--green-light); color: var(--green); }
.rtr-stat-icon.orange { background: var(--orange-light); color: var(--orange); }
.rtr-stat-icon.gray { background: var(--gray-100); color: var(--gray-500); }
.rtr-stat-icon.purple { background: rgba(139,92,246,0.1); color: #8B5CF6; }

.rtr-stat .lbl { font-size: .75rem; font-weight: 600; color: var(--gray-500); margin-bottom: 2px; }
.rtr-stat .val { font-size: 1.6rem; font-weight: 800; color: var(--navy); line-height: 1; }
.rtr-stat .sub { font-size: .7rem; color: var(--gray-400); margin-top: 4px; }

.rtr-action-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 16px 20px; padding: 12px 16px;
  background: var(--blue-light); border-radius: var(--radius-lg); border: 1px solid rgba(37,99,235,0.15);
}
.rtr-info-alert { display: flex; align-items: center; gap: 12px; color: var(--blue); }
.rtr-info-alert .icon-wrap { width: 36px; height: 36px; border-radius: 50%; background: rgba(37,99,235,0.1); display: flex; align-items: center; justify-content: center; }
.rtr-info-alert strong { font-size: .85rem; font-weight: 700; color: var(--navy); }
.rtr-info-alert p { font-size: .8rem; color: var(--gray-600); margin: 0; }

.rtr-table th { background: transparent; padding: 16px 14px; font-size: .75rem; }
.rtr-table td { padding: 16px 14px; }

.rtr-badge { padding: 4px 12px; border-radius: 6px; font-size: .7rem; font-weight: 700; display: inline-block; }
.rtr-badge.match { background: var(--green-light); color: var(--green); }
.rtr-badge.unmatch { background: var(--orange-light); color: var(--orange); }
.rtr-badge.belum { background: var(--gray-100); color: var(--gray-500); }

/* ============================================================
   RT REVIEW SCREEN STYLES (NEW - MATCH MOCKUP)
   ============================================================ */
#rtReviewScreen {
  position: relative;
  background: transparent; /* Background gambar dihapus sesuai request */
}

/* Stepper Custom untuk Review */
.rt-stepper-review {
  display: flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 0 16px;
}
.rt-stepper-review .rt-step {
  flex: 1; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 14px; position: relative;
  border: 1px solid var(--gray-200); background: var(--white);
}
.rt-stepper-review .rt-step-num {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; background: var(--gray-100); color: var(--gray-500);
}
.rt-stepper-review .rt-step.done .rt-step-num {
  background: var(--gray-100); color: var(--gray-500); 
}
.rt-stepper-review .rt-step.active {
  background: var(--white); border-color: var(--blue); box-shadow: 0 4px 12px rgba(37,99,235,.1);
}
.rt-stepper-review .rt-step.active .rt-step-num {
  background: var(--blue); color: var(--white);
}
.rt-stepper-review .rt-step.active .rt-step-title { color: var(--blue); }
.rt-stepper-review .rt-step-line {
  flex: 0 0 30px; border-top: 2px dashed var(--gray-300);
}

/* Summary Widget */
.rtr-summary-widget {
  display: flex; align-items: stretch; margin: 0 16px 20px;
  background: var(--white); border-radius: 16px;
  border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); overflow: hidden;
}
.rtr-title-box {
  padding: 20px 24px; background: var(--white);
  border-right: 1px dashed var(--gray-300); width: 320px; flex-shrink: 0;
  display: flex; align-items: center; gap: 16px;
}
.rtr-title-box .rtr-icon {
  width: 48px; height: 48px; border-radius: 10px; background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rtr-stats-box {
  display: flex; flex: 1; padding: 16px 0;
}
.rtr-stat {
  flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 20px;
  border-right: 1px solid var(--gray-200);
}
.rtr-stat:last-child { border-right: none; }
.rtr-stat-icon {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.rtr-stat-icon.blue { color: var(--blue); }
.rtr-stat-icon.green { color: var(--green); }
.rtr-stat-icon.orange { color: var(--orange); }
.rtr-stat-icon.gray { color: var(--gray-500); }
.rtr-stat-icon.purple { color: #8B5CF6; }

.rtr-stat .lbl { font-size: .75rem; font-weight: 600; color: var(--gray-500); margin-bottom: 2px; }
.rtr-stat .val { font-size: 1.6rem; font-weight: 800; color: var(--navy); line-height: 1; }
.rtr-stat .sub { font-size: .65rem; color: var(--gray-400); margin-top: 2px; }

/* Action Bar */
.rtr-action-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 16px 20px; padding: 12px 16px;
  background: var(--blue-light); border-radius: 12px; border: 1px solid rgba(37,99,235,0.15);
}
.rtr-info-alert { display: flex; align-items: center; gap: 12px; color: var(--blue); }
.rtr-info-alert .icon-wrap { width: 32px; height: 32px; border-radius: 50%; background: rgba(37,99,235,0.1); display: flex; align-items: center; justify-content: center; }
.rtr-info-alert strong { font-size: .85rem; font-weight: 700; color: var(--navy); }
.rtr-info-alert p { font-size: .78rem; color: var(--gray-600); margin: 0; }

/* Table */
.rtr-table th { 
  background: var(--white); 
  padding: 16px 14px; 
  font-size: .7rem; 
  border-bottom: 2px solid var(--gray-100); 
  color: var(--gray-500);
}
.rtr-table td { padding: 16px 14px; border-bottom: 1px solid var(--gray-100); }

.rtr-badge { padding: 4px 12px; border-radius: 6px; font-size: .7rem; font-weight: 700; display: inline-block; }
.rtr-badge.match { background: var(--green-light); color: var(--green); }
.rtr-badge.unmatch { background: #FEF08A; color: #CA8A04; } /* Kuning exact sesuai mockup */
.rtr-badge.belum { background: var(--gray-100); color: var(--gray-500); }

@media (max-width: 768px) {

  /* Summary widget: dari horizontal jadi vertikal */
  .rtr-summary-widget {
    flex-direction: column;
    margin: 0 0 16px;
  }
  .rtr-title-box {
    width: 100%;
    border-right: none;
    border-bottom: 1px dashed var(--gray-300);
    padding: 16px;
  }
  .rtr-stats-box {
    flex-wrap: wrap;
    padding: 8px 0;
  }
  .rtr-stat {
    flex: 0 0 50%;        /* 2 kolom per baris */
    border-right: none;
    border-bottom: 1px solid var(--gray-100);
    padding: 12px 16px;
  }
  .rtr-stat .val { font-size: 1.3rem; }

  /* Action bar: dari horizontal jadi vertikal */
  .rtr-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 16px;
  }
  .rtr-action-bar .btn {
    width: 100%;
    justify-content: center;
  }

  /* Stepper review: stack vertikal, garis disembunyikan */
  .rt-stepper-review {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 8px;
  }
  .rt-stepper-review .rt-step-line { display: none; }

  /* Toolbar filter: stack + full width */
  #rtReviewScreen .page-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 0 !important;
    gap: 8px;
  }
  #rtReviewScreen .page-toolbar .search-wrap { max-width: 100% !important; }
  #rtReviewScreen .page-toolbar select { width: 100% !important; }

  /* Card tabel: full width + bisa scroll horizontal */
  #rtReviewScreen .card { margin: 0 !important; }
  /* Tabel review → card layout (FIT, tanpa scroll horizontal) */
  #rtReviewScreen .card > div[style*="overflow-x"] { overflow-x: visible; }
  .rtr-table { min-width: 0; width: 100%; }
  .rtr-table thead { display: none; }
  .rtr-table tbody tr {
    display: block;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
  }
  .rtr-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--gray-100) !important;
    text-align: right !important;
  }
  .rtr-table tbody td:last-child { border-bottom: none !important; }
  .rtr-table tbody td::before {
    content: attr(data-label);
    font-size: .7rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    flex-shrink: 0;
    margin-right: 12px;
  }
  /* Kolom lokasi (pertama): tampil penuh tanpa label, jadi header kartu */
  .rtr-table tbody td:first-child {
    padding: 0 0 12px 0 !important;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--gray-200) !important;
    justify-content: flex-start;
    text-align: left !important;
  }
  .rtr-table tbody td:first-child::before { display: none; }
  /* Matikan scroll horizontal wrapper tabel di review screen */
  #rtReviewScreen .data-table-wrap { overflow-x: hidden !important; }
  #rtReviewScreen .card,
  #rtReviewScreen .rtr-table,
  #rtReviewScreen .rtr-table tbody tr { max-width: 100%; overflow-x: hidden; }

  /* Cell Akurasi: label di atas, progress bar full di bawah (wrap) */
  .rtr-table tbody td:last-child {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .rtr-table tbody td:last-child > div {
    width: 100% !important;
    flex: 1 1 100%;
    margin-top: 6px;
  }

  /* Header back button: kompensasi padding */
  #rtReviewScreen > div:first-child { padding: 0 !important; }
}

@media (max-width: 480px) {
  .rtr-stat { flex: 0 0 100%; }       /* 1 kolom per baris di HP kecil */
}

.rtr-stat-icon { width: 44px; height: 44px; }
.rtr-stat-icon.blue   { background: var(--blue-light);          color: var(--blue); }
.rtr-stat-icon.green  { background: var(--green-light);         color: var(--green); }
.rtr-stat-icon.orange { background: var(--orange-light);        color: var(--orange); }
.rtr-stat-icon.gray   { background: var(--gray-100);            color: var(--gray-500); }
.rtr-stat-icon.purple { background: rgba(139,92,246,0.12);      color: #8B5CF6; }

/* ================================================================
   PRINT COUNT SHEET PAGE (redesign)
   ================================================================ */
.print-head { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.print-head-icon {
  width:48px; height:48px; border-radius:13px;
  background:var(--blue-light); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.print-head-icon svg { width:24px; height:24px; }
.print-head-title { font-size:1.05rem; font-weight:800; color:var(--gray-900); }
.print-head-sub { font-size:.8rem; color:var(--gray-500); margin-top:2px; }

.print-phase-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap:16px;
}
.print-phase-card {
  position:relative; overflow:hidden;
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--radius-lg); padding:20px 20px 24px;
  cursor:pointer; transition:var(--transition);
}
.print-phase-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.print-phase-card::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:140px; height:140px; border-radius:50%; opacity:.07; pointer-events:none;
}
.print-phase-card.blue::before   { background:var(--blue); }
.print-phase-card.orange::before { background:var(--orange); }
.print-phase-card.red::before    { background:var(--red); }
.print-phase-card.green::before  { background:var(--green); }

.ppc-icon {
  width:50px; height:50px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.ppc-icon svg { width:24px; height:24px; }
.ppc-icon.blue   { background:var(--blue-light);   color:var(--blue); }
.ppc-icon.orange { background:var(--orange-light); color:var(--orange); }
.ppc-icon.red    { background:var(--red-light);    color:var(--red); }
.ppc-icon.green  { background:var(--green-light);  color:var(--green); }

.ppc-label { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; }
.print-phase-card.blue   .ppc-label { color:var(--blue); }
.print-phase-card.orange .ppc-label { color:var(--orange); }
.print-phase-card.red    .ppc-label { color:var(--red); }
.print-phase-card.green  .ppc-label { color:var(--green); }

.ppc-title {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:1.35rem; font-weight:800; color:var(--gray-900);
  letter-spacing:-.02em; margin-bottom:10px;
}
.ppc-chevron { width:20px; height:20px; color:var(--gray-300); flex-shrink:0; }

.ppc-dots { font-size:.5rem; letter-spacing:3px; margin-bottom:12px; }
.print-phase-card.blue   .ppc-dots { color:rgba(37,99,235,.35); }
.print-phase-card.orange .ppc-dots { color:rgba(245,158,11,.4); }
.print-phase-card.red    .ppc-dots { color:rgba(239,68,68,.35); }
.print-phase-card.green  .ppc-dots { color:rgba(16,185,129,.4); }

.ppc-desc { font-size:.8rem; color:var(--gray-500); }

.ppc-accent { position:absolute; left:16px; right:16px; bottom:0; height:4px; border-radius:4px 4px 0 0; }
.print-phase-card.blue   .ppc-accent { background:var(--blue); }
.print-phase-card.orange .ppc-accent { background:var(--orange); }
.print-phase-card.red    .ppc-accent { background:var(--red); }
.print-phase-card.green  .ppc-accent { background:var(--green); }

/* Blank count sheet layout */
.blank-grid { display:grid; grid-template-columns:340px 1fr 320px; gap:24px; align-items:center; }
.blank-illust { width:100%; height:auto; display:block; border-radius:16px; }
.blank-form label { display:block; font-size:.78rem; font-weight:700; color:var(--gray-700); margin-bottom:8px; }
.blank-form .form-control { margin-bottom:14px; }
.blank-form .btn-primary { width:100%; justify-content:center; padding:13px; font-size:.9rem; }
.blank-info {
  display:flex; gap:12px; align-items:flex-start;
  background:var(--blue-light); border:1px solid rgba(37,99,235,.15);
  border-radius:var(--radius); padding:16px 18px;
}
.blank-info-icon { color:var(--blue); flex-shrink:0; }
.blank-info-icon svg { width:20px; height:20px; }
.blank-info-title { font-size:.85rem; font-weight:700; color:var(--blue-hover); margin-bottom:3px; }
.blank-info p { font-size:.8rem; color:var(--gray-600); line-height:1.5; }

@media (max-width:1100px) { .blank-grid { grid-template-columns:1fr; gap:18px; } }

/* ================================================================
   RECONCILE PAGE (redesign)
   ================================================================ */
.reconcile-summary-strip {
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 14px;
}
.recon-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.recon-card-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.recon-card-icon svg { width: 22px; height: 22px; }
.recon-card-icon.red    { background: var(--red-light);    color: var(--red); }
.recon-card-icon.green  { background: var(--green-light);  color: var(--green); }
.recon-card-icon.orange { background: var(--orange-light); color: var(--orange); }
.recon-card-icon.blue   { background: var(--blue-light);   color: var(--blue); }
.recon-card-icon.gray   { background: var(--gray-100);     color: var(--gray-500); }
.recon-card-label { font-size: .68rem; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.recon-card-value { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.recon-card-value.red { color: var(--red); }
.recon-card-value.green { color: var(--green); }
.recon-card-value.orange { color: var(--orange); }
.recon-card-value.blue { color: var(--blue); }
.recon-card-value.gray { color: var(--gray-500); }
.recon-card-unit { font-size: .72rem; color: var(--gray-400); font-weight: 500; margin-top: 4px; }
[data-theme="dark"] .recon-card { background: var(--white); border-color: var(--gray-200); }

/* Table */
.recon-table th { padding: 12px 16px; }
.recon-table td { padding: 14px 16px; }

/* Pagination */
.recon-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px; border-top: 1px solid var(--gray-100);
  flex-wrap: wrap;
}
@media (max-width: 768px) { .recon-pagination { justify-content: center; } }

/* ================================================================
   MOBILE FIX — Progress per Counter & per Area (fit rata kiri-kanan)
   ================================================================ */
@media (max-width: 768px) {
  /* matiin min-width biar fit ke layar, ga geser horizontal */
  .dash-prog { min-width: 0 !important; width: 100%; }

  /* ---- Progress per Counter ---- */
  #counterTableBody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 10px;
    align-items: center;
    padding: 14px 16px !important;
    width: 100%;
  }
  #counterTableBody td { padding: 0 !important; border: none !important; font-size: .8rem; }
  #counterTableBody td:nth-child(1) { grid-area: 1/1/2/2; }                    /* nama */
  #counterTableBody td:nth-child(4) { grid-area: 1/2/2/3; justify-self: end; } /* status */
  #counterTableBody td:nth-child(2) { grid-area: 2/1/3/3; width: 100%; }       /* progress */
  #counterTableBody td:nth-child(3) { grid-area: 3/1/4/3; color: var(--gray-500); }
  #counterTableBody td:nth-child(3)::before { content: "Lokasi: "; color: var(--gray-400); font-weight: 600; }
  html[lang="en"] #counterTableBody td:nth-child(3)::before { content: "Bin Loc: "; }

  /* ---- Progress per Area ---- */
  #areaTableBody tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 7px 10px;
    align-items: center;
    padding: 14px 16px !important;
    width: 100%;
  }
  #areaTableBody td { padding: 0 !important; border: none !important; font-size: .8rem; text-align: left !important; }
  #areaTableBody td:nth-child(1) { grid-area: 1/1/2/3; }                        /* area */
  #areaTableBody td:nth-child(6) { grid-area: 1/3/2/4; justify-self: end; }     /* status */
  #areaTableBody td:nth-child(2) { grid-area: 2/1/3/4; width: 100%; }           /* progress */
  #areaTableBody td:nth-child(3) { grid-area: 3/1/4/2; }                        /* total */
  #areaTableBody td:nth-child(4) { grid-area: 3/2/4/3; }                        /* selesai */
  #areaTableBody td:nth-child(5) { grid-area: 3/3/4/4; }                        /* sisa */
  #areaTableBody td:nth-child(3)::before,
  #areaTableBody td:nth-child(4)::before,
  #areaTableBody td:nth-child(5)::before {
    display: block; font-size: .58rem; font-weight: 700;
    color: var(--gray-400); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px;
  }
  #areaTableBody td:nth-child(3)::before { content: "Total"; }
  #areaTableBody td:nth-child(4)::before { content: "Selesai"; }
  #areaTableBody td:nth-child(5)::before { content: "Sisa"; }
  /* Label kolom versi HP ditulis di CSS -> versi Inggris ikut atribut lang di <html> (I18n.html). */
  html[lang="en"] #areaTableBody td:nth-child(4)::before { content: "Done"; }
  html[lang="en"] #areaTableBody td:nth-child(5)::before { content: "Remaining"; }
}

/* ================================================================
   MOBILE FIX — Tabel Lokasi (fit 1 layar)
   ================================================================ */
@media (max-width: 768px) {
  #locationTableBody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 10px;
    align-items: center;
    padding: 14px 16px !important;
    width: 100%;
  }
  #locationTableBody td {
    padding: 0 !important;
    border: none !important;
    font-size: .8rem;
    min-width: 0 !important;
  }
  /* loading / empty message span penuh */
  #locationTableBody tr td[colspan] { grid-column: 1 / -1; text-align: center; }

  #locationTableBody td:nth-child(1) { grid-area: 1/1/2/2; }                      /* Aisle */
  #locationTableBody td:nth-child(4) { grid-area: 1/2/2/3; justify-self: end; }   /* Status */
  #locationTableBody td:nth-child(3) {                                            /* Progress */
    grid-area: 2/1/3/3; width: 100%; min-width: 0 !important; overflow: hidden;
  }
  #locationTableBody td:nth-child(2) { grid-area: 3/1/4/3; color: var(--gray-500); } /* PIC */
  #locationTableBody td:nth-child(2)::before { content: "PIC: "; color: var(--gray-400); font-weight: 600; }
  #locationTableBody td:nth-child(5) { grid-area: 4/1/5/2; color: var(--gray-700); } /* Qty */
  #locationTableBody td:nth-child(5)::before { content: "Qty: "; color: var(--gray-400); font-weight: 600; }
  #locationTableBody td:nth-child(6) { grid-area: 4/2/5/3; justify-self: end; }    /* Detail btn */
}

/* ================================================================
   LOGIN PAGE — SCALE FIT FINAL
   ================================================================ */

.login-overlay {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* ---- PC/DESKTOP: scale seluruh konten login ---- */
@media (min-width: 601px) {
  .main-wrapper {
    zoom: 0.82;   /* ← ini yang bikin 100% zoom = tampilan 80% zoom sebelumnya */
    max-width: 520px;
    padding: 20px 16px 32px !important;
    /* margin:auto (bukan '0 auto') = dipusatkan MENDATAR sekaligus TEGAK.
       .login-overlay itu flex arah kolom dengan justify-content:flex-start
       (aturan dasar baris ~3946), jadi di arah kolom isinya dipaku ke atas --
       itu sebabnya kiri-kanan sudah pas tapi atas-bawah meleset 140px.
       Dibetulkan lewat margin auto, BUKAN dengan mengubah justify-content
       jadi center: di kontainer yang bisa di-scroll, justify-content:center
       memotong bagian ATAS isi begitu isinya lebih tinggi dari layar, dan
       potongan itu tidak bisa di-scroll sama sekali. Margin auto otomatis
       jadi nol kalau ruangnya habis, jadi aman di layar pendek. */
    margin: auto;
    box-sizing: border-box;
    width: 100%;
  }
}

/* ---- Pilar mobile & credit: default ke-hide, dinyalain di blok mobile ---- */
.features-row-m { display: none; width: 100%; }
.features-row-m .fm-item { flex: 1; text-align: center; padding: 0 8px; }
.features-row-m .fm-item + .fm-item { border-left: 1px solid rgba(140, 175, 255, 0.16); }
.features-row-m svg {
  width: 16px; height: 16px; color: #B6C9F0;
  margin: 0 auto 6px; display: block;
}
.features-row-m span {
  display: block; font-family: 'Poppins', sans-serif;
  font-size: clamp(8px, 1.2vh, 9px); font-weight: 600;
  letter-spacing: 0.7px; line-height: 1.4; color: #B6C9F0;
}
.dev-credit-m {
  display: none; align-items: center; justify-content: center; gap: 5px;
  font-family: 'Poppins', sans-serif; color: #9FB6E8;
}
.dev-credit-m svg { width: 12px; height: 12px; }

/* ================================================================
   LOGIN MOBILE — MOCKUP FINAL (<=600px)
   SATU-SATUNYA blok yang ngatur tampilan login di HP.
   Kalau mau ubah tampilan login di HP, ubah DI SINI, jangan bikin blok baru.
   Target: muat 1 layar tanpa scroll (keputusan desain, bukan kecelakaan).
   ================================================================ */
@media (max-width: 600px) {

  /* --- Panggung: setinggi layar, scroll mati, foto gudang sebagai bg ---
     background-color dipasang terpisah sebagai DASAR OPAQUE. Gradient di atas
     foto sengaja semi-transparan biar fotonya kebaca; tanpa dasar ini, kalau
     fotonya gagal load, isi dashboard di belakang overlay bakal nembus.
     var(--login-bg, none) -> kalau variabelnya belum didefinisikan pun,
     deklarasinya tetap valid dan cuma nampilin gradient di atas dasar solid. --- */
  .login-overlay {
    /* JANGAN dikembalikan ke height:100dvh.
       .login-overlay itu position:fixed. Di dalam iframe Firebase pada iOS,
       100dvh berhenti DI ATAS area home indicator, jadi overlay kurang ~45px
       dari tinggi iframe. Iframe latarnya transparan, jadi strip sisa itu
       menampilkan latar halaman wrapper -- itulah pita navy di bawah layar
       login. Di /exec tidak kelihatan karena tidak ada wrapper di belakangnya.
       inset:0 mengisi tinggi iframe seutuhnya, berapa pun nilainya. */
    inset: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    align-items: center !important;
    /* flex-start, BUKAN center. Overlay ini sengaja dibuat setinggi iframe
       seutuhnya (lewat inset:0) supaya tidak pernah ada strip transparan yang
       memperlihatkan latar wrapper. Konsekuensinya dia bisa lebih tinggi dari
       area yang benar-benar terlihat -- kalau isinya di-center, isinya ikut
       turun setengah selisih itu dan masuk ke belakang bar Safari. */
    justify-content: flex-start !important;
    padding: max(10px, env(safe-area-inset-top)) clamp(20px, 7.5vw, 36px) max(10px, env(safe-area-inset-bottom)) !important;
    background-color: #0A1A3A !important;
    background-image:
      linear-gradient(180deg, rgba(6,16,38,0.74) 0%, rgba(6,16,38,0.52) 38%, rgba(6,16,38,0.88) 100%),
      var(--login-bg, none) !important;
    background-position: center, center !important;
    background-size: cover, cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-attachment: scroll, scroll !important;
    box-sizing: border-box;
  }
  .bg-image, .dot-pattern { display: none !important; }

  .main-wrapper {
    zoom: 1 !important;
    width: 100% !important; max-width: 430px !important;
    /* 100dvh, BUKAN 100%. 100% mengikuti tinggi overlay yang sengaja melebihi
       area terlihat; dvh adalah tinggi yang sungguh-sungguh terlihat. Jadi:
       LATAR mengisi seluruh iframe (tidak ada pita navy), ISI berhenti tepat
       di atas bar Safari (tidak ada yang ketutup). Dua lapisan, dua ukuran. */
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important; margin: 0 auto !important;
    display: flex !important; flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box;
  }

  /* --- Logo ---
     PENTING: .logo-img pakai vw (ikut LEBAR layar), sementara semua ukuran
     lain di blok ini pakai vh (ikut TINGGI layar). Itu sebabnya waktu
     tinggi viewport berubah, semua mengecil tapi logo tetap. Ukuran logo
     sengaja TIDAK diubah -- hasil ukur dua screenshot nunjukin logonya
     emang identik (128px di dua-duanya). */
  /* Jarak-jarak di blok ini SENGAJA dilebarin setelah teks & kartunya
     dikecilin. Yang dikecilin itu UKURAN elemen, bukan ruang antar bagian.
     Kalau ruangnya ikut menyusut, tinggi blok anjlok, titik tengahnya turun,
     dan credit kedorong NAIK dari posisi aslinya. Melebarkan jarak di ATAS
     (bukan di dekat credit) = bingkainya balik seperti semula sementara
     isinya tetap kecil. Terukur di 390x844: atas 45px, credit 45px dari
     bawah, jarak ikon-ke-credit 46px -- sama dengan sebelum dikecilin. */
  .logo-container { margin-bottom: clamp(24px, 8.4vh, 71px) !important; }
  .logo-img { width: 100% !important; max-width: clamp(170px, 52vw, 240px) !important; height: auto; }

  /* --- Heading keluar dari kartu ---
     .login-card-invix dibikin transparan dan rata kiri, jadi cuma pembungkus.
     Yang jadi "kartu kaca" sekarang #loginForm (lihat di bawah). --- */
  .login-card-invix {
    width: 100% !important;
    padding: clamp(10px, 1.9vh, 15px) 0 0 !important;
    background: transparent !important;
    border: none !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    text-align: left !important;
  }
  /* Blok heading di dummy agak masuk ke dalam dibanding tepi card,
     makanya ::before / h2 / p dikasih indent 3vw sendiri. */

  /* Garis biru kecil di atas "Welcome Back!" */
  .login-card-invix::before {
    display: block !important;
    top: 0 !important; left: 3vw !important; transform: none !important;
    width: 34px !important; height: 3px !important;
    border-radius: 2px !important;
    background: #4F8FFF !important;
    box-shadow: 0 0 10px rgba(79,143,255,0.85) !important;
  }
  /* Weight heading: 700. Jangan pakai angka selain 400/500/600/700/800 —
     selain itu nggak diunduh dan browser bakal diam-diam jatuh ke weight lain. */
  .login-card-invix h2 {
    text-align: left !important;
    padding-left: 3vw !important;
    font-size: clamp(18px, 3.2vh, 24px) !important;
    font-weight: 700 !important; line-height: 1.1 !important;
    letter-spacing: -0.4px !important;
    margin-bottom: clamp(3px, 0.8vh, 7px) !important;
  }
  /* max-width 21ch = yang bikin subtitle pecah jadi 2 baris kayak dummy.
     Kalau di HP kamu pecahnya di kata yang salah, geser angkanya (20ch / 22ch). */
  .login-card-invix p {
    text-align: left !important;
    padding-left: 3vw !important;
    max-width: 21ch !important;
    font-size: clamp(11px, 1.7vh, 13px) !important; line-height: 1.5 !important;
    color: #A9BCE4 !important;
    margin-bottom: clamp(10px, 2.2vh, 18px) !important;
  }

  /* --- Form = kartu kaca ---
     KNOB TRANSPARANSI ada di baris `background` di bawah: angka 0.42 itu
     seberapa pekat card-nya. Makin kecil = makin tembus foto.
     JANGAN disetel sekarang — tunggu foto background-nya nyala dulu,
     karena di atas navy polos angka berapa pun bakal keliatan gelap. */
  #loginForm {
    background: rgba(10, 26, 58, 0.42);
    border: 1px solid rgba(130, 172, 255, 0.26);
    border-radius: 17px;
    /* Kartu dipersempit lewat margin kiri-kanan, BUKAN lewat padding
       .login-overlay -- kalau padding overlay yang diubah, judul "Welcome
       Back!" yang ada DI LUAR kartu ikut menyempit. Terukur: 332px -> 303px. */
    margin: 0 clamp(8px, 3.6vw, 18px);
    padding: clamp(14px, 2.3vh, 18px) clamp(16px, 5.4vw, 24px);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }

  .input-group       { margin-bottom: clamp(8px, 1.5vh, 12px) !important; }
  .input-group label { font-size: clamp(8.5px, 1.15vh, 10px) !important; letter-spacing: 1.2px !important; margin-bottom: clamp(3px, 0.8vh, 6px) !important; }
  .input-wrapper input {
    background: rgba(255,255,255,0.045) !important;
    border: 1px solid rgba(120,165,255,0.22) !important;
    padding-top: clamp(9px, 1.35vh, 11px) !important;
    padding-bottom: clamp(9px, 1.35vh, 11px) !important;
    padding-left: 40px !important; padding-right: 38px !important;
    font-size: 16px !important;   /* JANGAN diturunin walau lagi ngecilin semua:
                                     di bawah 16px, iOS auto-zoom pas field diklik
                                     dan seluruh halaman kelempar membesar. */
    border-radius: 11px !important;
  }
  /* Teks "Masukkan username/password" dikecilin lewat ::placeholder, BUKAN
     lewat font-size input-nya. iOS mutusin auto-zoom dari font-size ELEMEN
     INPUT; pseudo-element placeholder nggak ikut dihitung. Jadi tulisan
     abu-abunya bisa 13px sementara input tetap dianggap 16px dan halaman
     nggak kelempar pas field diklik. Efek sampingnya: huruf yang DIKETIK
     tetap 16px, lebih besar dari placeholder-nya. Itu disengaja. */
  .input-wrapper input::placeholder { font-size: 13px !important; }
  .input-wrapper .lucide-icon, .input-wrapper .eye-icon { width: 15px !important; height: 15px !important; }

  .options-row     { margin-bottom: clamp(9px, 1.8vh, 15px) !important; font-size: clamp(10px, 1.4vh, 12px) !important; }
  .btn-login-invix { padding: clamp(9.5px, 1.5vh, 12.5px) !important; font-size: clamp(13px, 1.7vh, 14px) !important; border-radius: 11px !important; margin-bottom: 0 !important; }

  /* Versi desktop di-hide, diganti versi mobile */
  .dev-credit, .features-row, .footer-text { display: none !important; }

  /* Dua margin-top di bawah ini yang ngatur:
     - features-row-m : jarak kartu login -> 3 ikon
     - dev-credit-m   : jarak 3 ikon -> tulisan credit
     Naikin angkanya = makin renggang. Angka tengah (vh) yang paling berpengaruh. */
  .features-row-m {
    display: flex !important;
    margin-top: clamp(28px, 9.7vh, 82px);
    padding: 0 2vw;
  }
  .dev-credit-m {
    display: flex !important;
    margin-top: clamp(26px, 5.4vh, 46px);
    font-size: clamp(8.5px, 1.4vh, 10.5px);
  }
}

/* ================================================================
   PENGAMAN LAYAR PENDEK (<=700px tinggi)
   Jarak di blok atas pakai vh, dan vh itu linier: angka yang pas di layar
   844px masih kegedean di 640px. Di HP pendek ruangnya habis duluan dan
   credit kedorong keluar layar -- .login-overlay itu overflow:hidden dan
   nggak bisa di-scroll, jadi tulisannya HILANG, bukan cuma ketutup.
   (Ini sudah terjadi SEBELUM ukurannya dikecilin: di 360x640 credit-nya
   meleber 2px. Blok ini sekalian nambal itu.)
   ================================================================ */
@media (max-width: 600px) and (max-height: 700px) {
  .logo-container { margin-bottom: clamp(10px, 3.2vh, 22px) !important; }
  .features-row-m { margin-top: clamp(14px, 3.8vh, 28px) !important; }
}

/* ================================================================
   WRAP FILE — HERO & EMPTY STATE
   ================================================================ */
.wrap-hero { display:flex; align-items:center; gap:16px; position:relative; }
.wrap-hero-icon {
  width:48px; height:48px; border-radius:13px;
  background:var(--blue-light); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.wrap-hero-icon svg { width:24px; height:24px; }
.wrap-hero-text { flex:1; min-width:0; }
.wrap-hero-title {
  font-size:1.05rem; font-weight:800; color:var(--gray-900);
  display:flex; align-items:center; gap:8px;
}
.wrap-hero-sub { font-size:.8rem; color:var(--gray-500); margin-top:3px; }
.wrap-hero-illust { height:70px; width:auto; flex-shrink:0; object-fit:contain; }

.wrap-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:42px 20px; text-align:center;
}
.wrap-empty-img { width:150px; height:auto; margin-bottom:14px; }
.wrap-empty-title { font-size:.9rem; font-weight:700; color:var(--gray-700); margin-bottom:5px; }
.wrap-empty-sub { font-size:.78rem; color:var(--gray-400); }

@media (max-width:600px) {
  .wrap-hero-illust { display:none; }
}
/* ================================================================
   SIDEBAR ACCORDION
   ================================================================ */
/* Footer nav-items — tipografi konsisten sama sidebar nav */
.sidebar-footer .nav-item {
  font-size: .82rem;
  font-weight: 500;
  padding: 9px 10px;
  color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 2px;
  position: relative;
}
.sidebar-footer .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-footer .nav-item:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.sidebar-footer .nav-item.active { background: rgba(37,99,235,.25); color: #fff; font-weight: 600; }
.sidebar-footer .nav-item.active svg { color: var(--blue-accent); }
.nav-accordion { margin-bottom: 2px; }
.nav-accordion-header {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; cursor: pointer;
  color: rgba(255,255,255,.55);
  font-size: .82rem; font-weight: 500;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  user-select: none;
  margin-bottom: 2px;
  position: relative;
}
.nav-accordion-header:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.nav-accordion.open > .nav-accordion-header { color: rgba(255,255,255,.85); font-weight: 600; }
.nav-accordion-header .accordion-icon { width: 16px; height: 16px; flex-shrink: 0; transition: var(--transition); }
.nav-accordion.open > .nav-accordion-header .accordion-icon { color: var(--blue-accent); }
.nav-accordion-chevron {
  width: 12px; height: 12px; margin-left: auto; flex-shrink: 0;
  transition: transform .2s ease; color: rgba(255,255,255,.25);
}
/* WAJIB pakai '>' -- tanpa itu selektornya kena ke SEMUA keturunan, jadi panah
   sub-akordeon (Inbound/Outbound/Inventory) ikut muter cuma gara-gara induknya
   kebuka, padahal sub-nya sendiri masih tertutup. */
.nav-accordion.open > .nav-accordion-header .nav-accordion-chevron { transform: rotate(90deg); color: rgba(255,255,255,.5); }
.nav-accordion-body {
  max-height: 0; overflow: hidden;
  transition: max-height .25s cubic-bezier(.4,0,.2,1);
}
/* WAJIB pakai '>' juga. Tanpa itu, begitu Operational Support dibuka, SEMUA
   body sub-akordeon di dalamnya ikut kena max-height -- ketiga grup kebuka
   paksa dan nggak bisa ditutup sama sekali.
   900px itu cadangan: terukur semua grup kebuka cuma butuh 394px. */
.nav-accordion.open > .nav-accordion-body { max-height: 900px; }
.nav-accordion-body .nav-item { padding-left: 34px; font-size: .78rem; }

/* --- Akordeon tingkat 2: Inbound / Outbound / Inventory --- */
.nav-accordion-body .nav-accordion-header {
  padding-left: 26px;
  font-size: .78rem;
  color: rgba(255,255,255,.44);
}
.nav-accordion-body .nav-accordion-header .accordion-icon { width: 14px; height: 14px; }
.nav-accordion-body .nav-accordion.open > .nav-accordion-header { color: rgba(255,255,255,.88); }
.nav-accordion-body .nav-accordion .nav-item { padding-left: 50px; font-size: .76rem; }
.nav-accordion-body .nav-item svg { width: 14px; height: 14px; }
.nav-item.coming-soon { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ================================================================
   HALAMAN DETAIL INBOUND — PENYAMA TAMPILAN DENGAN DETAIL OUTBOUND

   Semua aturan tata letak halaman detail ditulis dengan pemilih
   #modalSqDetail, jadi nggak satu pun kena ke #modalSqiDetail: tanpa
   blok ini, di desktop header navy-nya ikut nongol (jadi dua judul)
   dan modalnya balik jadi kotak melayang, bukan panel yang nutup area
   konten.

   Blok ini SENGAJA naruh ulang aturannya, bukan ngganti pemilih yang
   lama jadi kelas bersama. Ngganti 37 pemilih di tengah CSS animasi &
   tata letak yang sudah jalan ongkos salah tempelnya lebih mahal
   daripada duplikasi ini -- dan pas dicoba, pemilih kelas kalah urutan
   sama .modal-overlay, jadi latar gelapnya balik lagi. Ditaruh di PALING
   BAWAH berkas supaya menang urutan tanpa perlu !important tambahan.

   Kalau suatu saat ada yang ngubah aturan #modalSqDetail di atas,
   aturan kembarannya di sini harus ikut diubah.
   ================================================================ */

@media (min-width: 769px) {
  #modalSqiDetail.sqy-in { animation: sqyIn .2s cubic-bezier(.32,.72,.35,1); }
  #modalSqiDetail.sqy-in .modal-box { animation: sqyInBox .26s cubic-bezier(.32,.72,.35,1); }

  #modalSqiDetail {
    position: fixed; inset: auto; padding: 0;
    background: var(--bg); align-items: stretch; justify-content: stretch;
  }
  #modalSqiDetail .modal-box {
    width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important;
    margin: 0 !important; border-radius: 0 !important;
    background: var(--bg); box-shadow: none; border: none;
  }
  #modalSqiDetail .sqd-header { display: none !important; }
  #modalSqiDetail .sqd-crumb { display: none !important; }
  #modalSqiDetail .modal-box > div:last-child { padding: 18px !important; }

  #modalSqiDetail .page-toolbar {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: 12px; padding: 14px 16px; align-items: center;
  }
  #modalSqiDetail .page-toolbar > div:first-child { flex: 1; min-width: 0; }
  #modalSqiDetail .page-toolbar > div:first-child > input { flex: 1; min-width: 0; width: auto !important; }
  #modalSqiDetail .page-toolbar span { font-size: .76rem; color: var(--gray-500); flex-shrink: 0; }
  #modalSqiDetail .page-toolbar .modal-input { height: 38px; font-size: .8rem; }
  #modalSqiDetail .page-toolbar .filter-btn {
    background: var(--blue); border-color: var(--blue); color: #fff;
    padding: 10px 18px; font-size: .78rem; font-weight: 600; flex-shrink: 0;
  }
  #modalSqiDetail .page-toolbar .filter-btn svg { width: 14px; height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #modalSqiDetail.sqy-in,
  #modalSqiDetail.sqy-in .modal-box { animation: none; }
}

/* Header inbound isinya judul + 4 pil status + 4 pil tipe + kotak cari (~1.330px).
   Baru muat sebaris di layar >= ~1680px (lebar sidebar ikut dihitung). Di bawah itu
   judul tetap di atas dan SEMUA filter sebaris di bawahnya; kalau masih nggak muat
   (tablet), kotak cari yang turun, pil tetap sebaris. */
@media (max-width: 1680px) {
  #modalSqiDetail .sqx-card-head { flex-wrap: wrap; }
  #modalSqiDetail .sqy-headtools { margin-left: 0; width: 100%; flex-wrap: wrap; }
  #modalSqiDetail .sqy-headtools .sqx-search { flex: 1; width: auto; min-width: 220px; }
}

@media (max-width: 768px) {
  #modalSqiDetail.sqm-in  { animation: sqmIn  .30s cubic-bezier(.32,.72,.35,1); }
  #modalSqiDetail.sqm-out { animation: sqmOut .26s cubic-bezier(.4,0,.6,1) forwards; }
  #modalSqiDetail.sqm-in,
  #modalSqiDetail.sqm-out { box-shadow: -10px 0 26px rgba(15,23,42,.14); }
  /* Sama seperti Outbound: yang digeser saudara-saudaranya, BUKAN
     #sqTabInbound sendiri -- elemen ber-transform bikin position:fixed
     di dalamnya kehilangan acuan dan modalnya ikut kegeser. */
  #sqTabInbound.sqd-push > *:not(#modalSqiDetail) { animation: sqmPush .30s cubic-bezier(.32,.72,.35,1) forwards; }
  #sqTabInbound.sqd-pop  > *:not(#modalSqiDetail) { animation: sqmPop  .26s cubic-bezier(.4,0,.6,1) forwards; }

  #modalSqiDetail {
    padding: 0 !important;
    height: calc(100dvh - var(--nav-h, 58px)) !important;
    bottom: auto !important;
  }
  #modalSqiDetail .modal-box {
    height: 100% !important; max-height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
  #modalSqiDetail .sqd-header {
    background: var(--white) !important;
    color: var(--gray-900) !important;
    display: flex; align-items: center; gap: 2.6vw;
    padding: 2.6vw 3.2vw !important;
    border-bottom: 1px solid var(--gray-200);
  }
  #modalSqiDetail .sqd-title {
    color: var(--gray-900) !important;
    font-size: 2.70vw !important; font-weight: 700; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #modalSqiDetail .sqd-close { display: none !important; }

  #modalSqiDetail .modal-box > div:last-child { padding: 3.2vw !important; background: var(--bg); }
  #modalSqiDetail .page-toolbar {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: 2.7vw; padding: 2.2vw; margin-bottom: 2vw !important;
    gap: 1.4vw !important;
    flex-wrap: nowrap !important;
    align-items: center;
  }
  #modalSqiDetail .page-toolbar > div {
    flex-wrap: nowrap !important; gap: 1.4vw !important;
    flex: 1; min-width: 0;
  }
  #modalSqiDetail .page-toolbar span { font-size: 1.45vw !important; color: var(--gray-500); flex-shrink: 0; }
  #modalSqiDetail .modal-input {
    width: auto !important; flex: 1 1 0; min-width: 0;
    font-size: 2.25vw !important; height: 7vw; padding: 0 1.1vw; border-radius: 1.5vw;
  }
  #modalSqiDetail .page-toolbar .filter-btn {
    flex-shrink: 0;
    background: var(--blue); border-color: var(--blue); color: #fff;
    font-size: 1.60vw; border-radius: 1.5vw; padding: 0 1.5vw; height: 7vw;
  }
  #modalSqiDetail .page-toolbar .filter-btn svg { width: 2.4vw; height: 2.4vw; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #modalSqiDetail.sqm-in,
  #modalSqiDetail.sqm-out,
  #sqTabInbound.sqd-push > *,
  #sqTabInbound.sqd-pop  > * { animation: none; }
}

/* ================================================================
   AGING PUTAWAY  (.ap-*)
   Kartu pakai kelas Smart Queue (.sqx-card desktop, .sqm-card HP) biar
   tampilannya seragam; di sini cuma tambahan + tata letak.
   .ap-dk = cuma desktop, .ap-m = cuma HP.
   ================================================================ */
.ap-m { display: none; }
.ap-warn { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; border-radius: 10px;
           padding: 9px 14px; font-size: .74rem; margin-bottom: 14px; }
.ap-warn.is-error { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }

.ap-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ap-kpi { background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.ap-kpi em { display: block; font-style: normal; font-size: .72rem; color: var(--gray-500); margin-bottom: 6px; }
.ap-kpi b { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ap-kpi span { font-size: .72rem; color: var(--gray-400); margin-left: 6px; }
.ap-kpi.is-bad { border-color: #FECACA; background: #FEF2F2; }
.ap-kpi.is-bad b { color: #B91C1C; }
.ap-kpi .ap-trend { display: block; margin-top: 4px; font-size: .7rem; color: var(--gray-500);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-kpi .sqx-skel { vertical-align: middle; }

.ap-grid1 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; margin-bottom: 16px; }
.ap-grid2 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); gap: 16px; margin-bottom: 16px; }
.ap-row4 { display: grid; grid-template-columns: minmax(0, 1fr) 52px 62px 62px; gap: 12px; }
.ap-row4 > span:not(:first-child) { text-align: right; }
/* Card Pending per Type: isinya CBM ("1.185,07"), kolom angkanya perlu lebih lebar */
.ap-row4.ap-row4c { grid-template-columns: minmax(0, 1fr) 58px 58px 64px; gap: 6px; }
.ap-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; flex-shrink: 0; }
.ap-bsub { display: block; font-size: .66rem; color: var(--gray-400); margin-left: 18px; margin-top: 1px; }
.ap-lbl { display: flex; align-items: center; font-size: .79rem; font-weight: 500; color: var(--gray-700); white-space: nowrap; }
.ap-row { padding: 10px; border-bottom: 1px solid var(--gray-100); align-items: center; }
.ap-row.is-bad { background: #FEF2F2; border-radius: 7px; }
.ap-row.is-bad .ap-lbl, .ap-row.is-bad span { color: #991B1B; font-weight: 600; }
.ap-row.is-nodate .ap-lbl, .ap-row.is-nodate .ap-v { color: var(--gray-500); }
.ap-v { font-size: .79rem; color: var(--gray-800); font-variant-numeric: tabular-nums; }

.ap-leg { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; font-size: .7rem; color: var(--gray-600); }
.ap-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.ap-bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 56px; gap: 10px; align-items: center; padding: 7px 0; }
.ap-bar > em { font-style: normal; font-size: .76rem; font-weight: 600; color: var(--gray-700);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-bar > b { font-size: .76rem; font-weight: 700; color: var(--gray-800); text-align: right; font-variant-numeric: tabular-nums; }
.ap-track-wrap { min-width: 0; }
.ap-track { display: flex; gap: 2px; height: 14px; }
.ap-seg { height: 100%; min-width: 2px; }
.ap-seg:first-child { border-radius: 4px 0 0 4px; }
.ap-seg:last-child { border-radius: 0 4px 4px 0; }
.ap-seg:only-child { border-radius: 4px; }

.ap-old { display: grid; grid-template-columns: 70px 78px minmax(0, 1.2fr) minmax(0, 1.9fr) 84px 64px 44px 56px;
          gap: 10px; align-items: center; min-width: 660px; }
/* Role yang boleh bikin task putaway: kolom Umur dapat kotak centang di depannya. */
.ap-old.ap-mk { grid-template-columns: 94px 78px minmax(0, 1.2fr) minmax(0, 1.9fr) 84px 64px 44px 56px; min-width: 684px; }
.ap-agecell { display: flex; align-items: center; gap: 8px; }
.ap-ck { width: 15px; height: 15px; margin: 0; flex: none; cursor: pointer; accent-color: var(--blue); }
.ap-ck:disabled { cursor: not-allowed; opacity: .4; }
.ap-oldrow.is-sel { background: rgba(37, 99, 235, .06); }
.ap-hastask { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: .62rem; font-style: normal;
              font-weight: 700; background: var(--gray-100); color: var(--gray-500); vertical-align: middle; }
.ap-mk-btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
/* Header kartu Paling Lama Belum Ditempatkan: judul tidak boleh terpotong. Kalau kartu sempit,
   tombol-tombol (filter, cari, Buat Task, Ekspor) turun ke baris kedua, rata kanan. */
.sqx-card-head:has(.ap-pills) { flex-wrap: wrap; row-gap: 10px; }
.sqx-card-head:has(.ap-pills) .sqx-card-txt { flex: 1 0 auto; }
.sqx-card-head:has(.ap-pills) .sqy-headtools { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 1; row-gap: 8px; }
.sqx-card-head:has(.ap-pills) .ap-search { width: 220px; }
/* Pop-up Buat Task Putaway */
.apmk-wrap { max-height: 52vh; overflow: auto; border: 1px solid var(--gray-200); border-radius: 10px; margin-top: 12px; }
.apmk-tbl { width: 100%; border-collapse: collapse; font-size: .78rem; }
.apmk-tbl th { position: sticky; top: 0; background: var(--gray-50, #F9FAFB); text-align: left; font-size: .68rem; font-weight: 700;
               text-transform: uppercase; letter-spacing: .3px; color: var(--gray-500); padding: 8px 10px; }
.apmk-tbl td { padding: 7px 10px; border-top: 1px solid var(--gray-100); vertical-align: middle; }
.apmk-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.apmk-tbl em { display: block; font-style: normal; font-size: .68rem; color: var(--gray-500); }
.apmk-dmg { width: 72px; padding: 5px 8px; border: 1px solid var(--gray-300); border-radius: 7px; text-align: right; font-size: .78rem;
            background: var(--white); color: var(--gray-800); }
.apmk-dmg.bad { border-color: var(--red); background: rgba(239, 68, 68, .06); }
.apmk-err { color: var(--red); font-size: .74rem; margin-top: 8px; }
.ap-old > span:nth-child(7), .ap-old > span:nth-child(8) { text-align: right; }
.ap-old-scroll { max-height: 470px; overflow: auto; }
.ap-old-scroll > .sqx-th { position: sticky; top: 0; z-index: 1; }
/* Desktop: tabel ngisi penuh tinggi kartu (tinggi kartunya ikut kolom kiri), bukan berhenti
   di 470px lalu nyisain ruang kosong di bawah. contain:size = panjang daftar nggak ikut
   nentuin tinggi kartu; daftarnya cuma ngisi sisa ruang lalu discroll. */
.ap-grid2 > .sqx-card > .ap-old-scroll { max-height: none; flex: 1 1 auto; min-height: 320px; contain: size; }
/* tombol Ekspor kartu Paling Lama Belum Ditempatkan (desktop: setinggi kotak cari; HP: ikon saja) */
.ap-exp-btn { padding: 0 12px; align-self: stretch; font-size: .74rem; white-space: nowrap; flex-shrink: 0; }
.ap-exp-btn svg { width: 14px; height: 14px; }
.ap-exp-m { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--gray-200);
            background: var(--white); color: var(--gray-600); cursor: pointer; }
.ap-oldrow { padding: 9px 10px; border-bottom: 1px solid var(--gray-100); font-size: .76rem; color: var(--gray-700); }
.ap-oldrow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-age { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 3px 7px;
          border-radius: 6px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.ap-age.b0 { background: #DCFCE7; color: #15803D; }
.ap-age.b1 { background: #DBEAFE; color: #1D4ED8; }
.ap-age.b2 { background: #FEF3C7; color: #92400E; }
.ap-age.b3 { background: #FEE2E2; color: #B91C1C; }
.ap-age.nd { background: var(--gray-100); color: var(--gray-500); }
.ap-sku b { display: block; font-weight: 600; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-sku em { display: block; font-style: normal; color: var(--gray-400); font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-pills { display: flex; gap: 6px; }
.ap-pill { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--gray-200); background: #fff; font-size: .74rem;
           font-weight: 600; color: var(--gray-600); cursor: pointer; font-family: var(--font); }
.ap-pill:hover { border-color: var(--blue); color: var(--blue); }
.ap-pill.on, .ap-pill.on:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
/* Selektornya sengaja sepanjang ini: .sqy-headtools .sqx-search (280px) dari
   Smart Queue lebih kuat kalau cuma pakai .ap-search. */
.sqy-headtools .sqx-search.ap-search { width: 170px; }
#page-agingputaway .sqx-card-txt h3 { white-space: nowrap; }
.ap-note { font-size: .68rem; color: var(--gray-400); margin-top: 10px; }
.ap-empty { padding: 18px 10px; text-align: center; font-size: .76rem; color: var(--gray-400); }

/* ---- Produktivitas per Shift ---- */
.ap-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ap-dayp { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.ap-dayp .ap-pill { padding: 5px 10px; font-size: .7rem; }
.ap-sh-tot { display: flex; gap: 18px; padding: 10px 12px; background: var(--gray-50, #F8FAFC); border-radius: 9px; margin-bottom: 10px; }
.ap-sh-tot > div { flex: 1; min-width: 0; }
.ap-sh-tot em { display: block; font-style: normal; font-size: .66rem; color: var(--gray-500); }
.ap-sh-tot b { font-size: 1.05rem; font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; }
.ap-sh-tot .is-tot b { color: var(--blue); }
.ap-sh { display: grid; grid-template-columns: 52px minmax(0, 1fr) 54px 54px 50px 60px; gap: 8px; align-items: center;
         padding: 9px 2px; border-bottom: 1px solid var(--gray-100); }
.ap-sh > span:nth-child(n+3) { text-align: right; font-size: .78rem; color: var(--gray-800); font-variant-numeric: tabular-nums; }
.ap-sh > span.tot { font-weight: 700; color: var(--gray-900); }
/* :nth-child(n) cuma buat nambah bobot selektor -- biar header menang dari aturan angka di atas */
.ap-sh.ap-sh-head { padding: 0 2px 6px; }
.ap-sh.ap-sh-head > span:nth-child(n) { font-size: .66rem; font-weight: 600; color: var(--gray-500); }
.ap-sh-name b { display: block; font-size: .78rem; font-weight: 600; color: var(--gray-800); white-space: nowrap; }
.ap-sh-bar { height: 12px; border-radius: 0 4px 4px 0; background: #2563EB; min-width: 2px; }

/* Layar laptop kecil: 3 kartu sebaris kesempitan -> donut turun ke baris sendiri. */
@media (max-width: 1300px) and (min-width: 769px) {
  .ap-grid1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ap-grid1 > .sqx-card:last-child { grid-column: 1 / -1; }
  .ap-grid2 { grid-template-columns: minmax(0, 1fr); }
  /* satu kolom: kartunya nggak disejajarin kolom kiri lagi -> balik ke tinggi tetap */
  .ap-grid2 > .sqx-card > .ap-old-scroll { flex: none; max-height: 470px; contain: none; }
}

/* ------------------------------ HP ------------------------------ */
@media (max-width: 768px) {
  #page-agingputaway .ap-dk { display: none !important; }
  #page-agingputaway .ap-m { display: block; }
  .ap-warn { font-size: 2.3vw; padding: 2vw 2.6vw; border-radius: 2.2vw; margin-bottom: 2.1vw; }
  .ap-kpis { grid-template-columns: 1fr 1fr; gap: 2.1vw; margin-bottom: 2.1vw; }
  .ap-kpi { padding: 2.8vw 3vw; border-radius: 2.7vw; }
  .ap-kpi em { font-size: 1.9vw; margin-bottom: 1vw; }
  .ap-kpi b { font-size: 4.2vw; }
  .ap-kpi span { font-size: 1.9vw; }
  .ap-kpi .ap-trend { font-size: 1.8vw; }
  .ap-m .ap-row4 { grid-template-columns: minmax(0, 1fr) 12vw 15vw 15vw; gap: 2vw; }
  .ap-m .ap-row { padding: 2vw 1.6vw; }
  .ap-m .ap-lbl, .ap-m .ap-v { font-size: 2.2vw; }
  .ap-m .ap-bsub { font-size: 1.7vw; margin-left: 3.4vw; }
  .ap-m .ap-dot { width: 1.8vw; height: 1.8vw; margin-right: 1.6vw; }
  .ap-m .ap-bar { grid-template-columns: 11vw minmax(0, 1fr) 10vw; gap: 2vw; padding: 1.3vw 0; }
  .ap-m .ap-bar > em, .ap-m .ap-bar > b { font-size: 2.1vw; }
  .ap-m .ap-track { height: 2.6vw; }
  .ap-m .ap-leg { font-size: 1.8vw; gap: 2.4vw; margin-bottom: 2vw; }
  .ap-m .ap-leg i { width: 1.8vw; height: 1.8vw; }
  .ap-mtools { display: flex; gap: 1.6vw; align-items: center; margin-bottom: 1.4vw; }
  .ap-mtools .ap-pills { gap: 1.2vw; }
  .ap-mtools .ap-pill { padding: 1.2vw 2.2vw; font-size: 2vw; border-radius: 1.6vw; }
  .ap-exp-m { width: 9vw; min-width: 36px; align-self: stretch; border-radius: 1.6vw; }
  .ap-exp-m svg { width: 3.6vw; height: 3.6vw; min-width: 15px; min-height: 15px; }
  .ap-msearch { flex: 1; min-width: 0; border: 1px solid var(--gray-200); border-radius: 1.6vw; padding: 1.3vw 2vw;
                font-size: 2.1vw; font-family: var(--font); color: var(--gray-800); background: var(--white); }
  .ap-msearch:focus { outline: none; border-color: var(--blue); }
  .ap-hc { display: flex; gap: 2.4vw; align-items: flex-start; padding: 2.4vw 0; border-bottom: 1px solid var(--gray-100); }
  .ap-hc .ap-age { font-size: 1.9vw; min-width: 11vw; padding: .8vw 1.4vw; border-radius: 1.2vw; }
  .ap-hc .ap-sku { flex: 1; min-width: 0; }
  .ap-hc .ap-sku b { font-size: 2.2vw; }
  .ap-hc .ap-sku em { font-size: 1.85vw; }
  .ap-hc .ap-meta { font-size: 1.8vw; color: var(--gray-400); margin-top: .5vw; }
  .ap-hc .ap-num { text-align: right; font-size: 2.1vw; font-weight: 700; color: var(--gray-800); white-space: nowrap; }
  .ap-hc .ap-num em { display: block; font-style: normal; font-weight: 400; font-size: 1.8vw; color: var(--gray-400); }
  .ap-more { display: block; width: 100%; margin-top: 2vw; padding: 2vw; border: 1px solid var(--gray-200); border-radius: 1.8vw;
             background: var(--white); color: var(--blue); font-size: 2.1vw; font-weight: 600; font-family: var(--font); }
  .ap-m .ap-empty { font-size: 2.1vw; padding: 3vw; }
  .ap-m .ap-dayp { gap: 1.2vw; }
  .ap-m .ap-dayp .ap-pill { font-size: 1.9vw; padding: 1vw 2vw; border-radius: 1.4vw; }
  .ap-m .sqm-card-head { align-items: center; }
  .ap-m .ap-sh-tot { gap: 2vw; padding: 2vw; border-radius: 1.8vw; margin-bottom: 1.5vw; }
  .ap-m .ap-sh-tot em { font-size: 1.8vw; }
  .ap-m .ap-sh-tot b { font-size: 3.2vw; }
  .ap-m .ap-sh { grid-template-columns: 11vw minmax(0, 1fr) 11vw 11vw 10vw 12vw; gap: 1.6vw; padding: 2vw .5vw; }
  .ap-m .ap-sh.ap-sh-head { padding: 0 .5vw 1vw; }
  .ap-m .ap-sh.ap-sh-head > span:nth-child(n) { font-size: 1.8vw; }
  .ap-m .ap-sh > span:nth-child(n+3) { font-size: 2.1vw; }
  .ap-m .ap-sh-name b { font-size: 2.2vw; }
  .ap-m .ap-sh-bar { height: 2.6vw; }
}

/* ================================================================
   STOCK OVERVIEW (.so-* / .oc-*) + CAPACITY MASTER (.cap-*)
   Kartu pakai .sqx-card & .ap-kpi yang udah ada; di sini tambahan aja.
   ================================================================ */
.so-m { display: none; }
.so-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; background: #F1F5F9;
           border: 1px solid var(--gray-200); color: var(--gray-600); font-size: .72rem; margin-bottom: 14px; }
.so-chip b { color: var(--gray-900); }
.so-chip.is-old { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.so-chip.is-old b { color: #78350F; }

.oc-g1 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.oc-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.oc-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.oc-pgcard { margin-bottom: 16px; }
.oc-h { background: var(--gray-50, #F8FAFC); border-radius: 7px; border: 0 !important; font-size: .64rem !important;
        font-weight: 600 !important; color: var(--gray-500) !important; }
.oc-dim { color: var(--gray-400); }
.oc-kode { font-size: .62rem; font-weight: 600; color: var(--gray-400); margin-left: 4px; }
.neg { color: #B91C1C; }

/* ---- occupancy per zona ---- */
.oc-z { display: grid; grid-template-columns: 150px minmax(0, 1fr) 62px 96px 96px 110px; gap: 12px; align-items: center;
        padding: 6px; border-bottom: 1px solid var(--gray-100); font-size: .74rem; color: var(--gray-800); font-variant-numeric: tabular-nums; }
.oc-z > span:nth-child(n+4) { text-align: right; }
.oc-z.oc-t { border: 0; font-weight: 700; color: var(--blue); padding: 9px 6px; margin: 4px 0; background: rgba(37, 99, 235, .06); border-radius: 8px; }
.oc-z.is-ov { background: #FEF2F2; }
.oc-n { font-weight: 600; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-n em { display: block; font-style: normal; font-weight: 400; font-size: .6rem; color: var(--gray-400); }
.oc-z.oc-t .oc-n { color: var(--blue); }
.oc-tr { position: relative; height: 10px; background: var(--gray-100); border-radius: 3px; }
.oc-f { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; }
.oc-100 { position: absolute; left: 83.333%; top: -3px; bottom: -3px; width: 2px; background: var(--gray-700); z-index: 2; }
.oc-p { font-weight: 700; }
.oc-p.ov { color: #B91C1C; } .oc-p.fu { color: #92400E; } .oc-p.ok { color: var(--blue); }
.oc-leg { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .66rem; color: var(--gray-500); }
.oc-f.oc-fx { background: #94A3B8; }
.oc-z.oc-fixed .oc-n { font-weight: 500; }
.oc-z.oc-u { border-top: 1px solid var(--gray-200); margin-top: 4px; }

/* ---- okupansi per zona (full width) + kartu Kapasitas Gudang ---- */
.oc-zcard, .oc-capcard { margin-bottom: 16px; }
.oc-g3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.oc-pill { display: inline-block; min-width: 50px; text-align: center; padding: 2px 6px; border-radius: 6px; font-size: .68rem; font-weight: 700; }
.oc-pill.ok { background: rgba(37, 99, 235, .12); color: #1D4ED8; }
.oc-pill.fu { background: rgba(245, 158, 11, .18); color: #92400E; }
.oc-pill.ov { background: rgba(185, 28, 28, .12); color: #B91C1C; }
[data-theme="dark"] .oc-pill.ok { color: #93C5FD; }
[data-theme="dark"] .oc-pill.fu { color: #FCD34D; }
[data-theme="dark"] .oc-pill.ov { color: #FCA5A5; }
.oc-sub { display: block; font-style: normal; font-size: .6rem; font-weight: 500; color: var(--gray-500); }
.oc-sub.neg { color: #B91C1C; }
.oc-ic-util { background: #ECFDF5; color: #047857; }
.oc-cap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.oc-a { display: grid; grid-template-columns: minmax(0, 1.3fr) 104px 104px 88px; gap: 12px; align-items: center; padding: 9px 8px;
        border-bottom: 1px solid var(--gray-100); font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--gray-800); }
.oc-a > span:nth-child(n+2) { text-align: right; }
.oc-a > .oc-a-m { display: none; }
.oc-a.oc-h { padding: 6px 8px; }
.oc-a.oc-t { border: 0; margin-top: 4px; background: rgba(16, 185, 129, .09); border-radius: 8px; font-weight: 700; color: var(--gray-900); }
.oc-a .oc-n { font-weight: 600; color: var(--gray-700); }
.oc-a.oc-t .oc-n { color: var(--gray-900); }
.oc-cap-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.oc-ring-box { display: flex; gap: 18px; align-items: center; padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: 12px; background: var(--gray-50); }
.oc-ring { width: 96px; height: 96px; flex-shrink: 0; }
.oc-ring svg { width: 100%; height: 100%; display: block; }
.oc-ring-bg { fill: none; stroke: var(--gray-200); stroke-width: 10; }
.oc-ring-v { fill: none; stroke-width: 10; stroke-linecap: round; }
.oc-ring text { font-size: 18px; font-weight: 700; fill: var(--gray-900); font-family: var(--font); }
.oc-ring-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oc-ring-txt b { font-size: .86rem; color: var(--gray-900); }
.oc-ring-txt span { font-size: .74rem; color: var(--gray-600); font-variant-numeric: tabular-nums; }
.oc-ring-txt em { font-style: normal; font-size: .66rem; color: var(--gray-500); }
.oc-defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oc-def { padding: 12px; border: 1px solid var(--gray-200); border-radius: 10px; }
.oc-def b { display: block; font-size: .76rem; }
.oc-def span { display: block; font-size: .68rem; color: var(--gray-600); margin-top: 3px; line-height: 1.45; }
.oc-def em { display: block; font-style: normal; font-size: .68rem; color: var(--gray-500); margin-top: 6px; }
.oc-def--occ b { color: var(--blue); }
.oc-def--util b { color: #047857; }
[data-theme="dark"] .oc-def--util b { color: #6EE7B7; }
.oc-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* ---- non-storage & area khusus ---- */
.oc-sp { display: grid; grid-template-columns: minmax(0, 1fr) 70px 70px 50px; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--gray-100);
         font-size: .76rem; align-items: center; font-variant-numeric: tabular-nums; color: var(--gray-800); }
.oc-sp > span:nth-child(n+2) { text-align: right; }
.oc-sp.oc-h { padding: 6px 4px; }
.oc-sp b { font-weight: 600; color: var(--gray-800); }
.oc-sp em { display: block; font-style: normal; font-size: .64rem; color: var(--gray-400); }

/* ---- status & aging ---- */
.oc-ag { display: grid; grid-template-columns: 116px minmax(0, 1fr) 76px 48px; gap: 10px; align-items: center; padding: 7px 4px;
         font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--gray-800); }
.oc-ag > span:nth-child(n+3) { text-align: right; }
.oc-ag > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-ag.oc-h { padding: 6px 4px; }
.oc-ag.oc-t { font-weight: 700; color: var(--blue); border-top: 1px solid var(--gray-200); margin-top: 4px; padding-top: 9px; }
.oc-ag.is-bad { background: #F5F3FF; border-radius: 7px; }
.oc-ag.is-bad span { color: #5B21B6; font-weight: 600; }
.oc-agb { height: 10px; border-radius: 0 3px 3px 0; }

/* ---- stock paling lama ---- */
.oc-old { display: grid; grid-template-columns: 74px minmax(0, 1fr) 74px 44px 44px 56px; gap: 8px; align-items: center; padding: 8px 4px;
          border-bottom: 1px solid var(--gray-100); font-size: .74rem; color: var(--gray-700); font-variant-numeric: tabular-nums; }
.oc-old > span:nth-child(5), .oc-old > span:nth-child(6) { text-align: right; }
.oc-old.oc-h { padding: 6px 4px; }
.so-age { display: inline-flex; padding: 3px 7px; border-radius: 6px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.oc-scroll { max-height: 440px; overflow: auto; }
.sqy-headtools .sqx-search.ap-search.so-search { width: 200px; }
/* tombol Export di kartu Stok Paling Lama -- tingginya disamain sama kotak cari */
.so-exp-btn { padding: 0 12px; align-self: stretch; font-size: .74rem; white-space: nowrap; flex-shrink: 0; }
.so-exp-btn svg { width: 14px; height: 14px; }
.so-exp-btn:disabled { opacity: .6; cursor: default; }
#page-stockoverview .sqx-card-txt h3 { white-space: nowrap; }

/* ---- stock per PG ---- */
.oc-pg { display: grid; grid-template-columns: minmax(0, 1.3fr) 48px 72px 84px 56px minmax(0, 1.4fr); gap: 10px; align-items: center;
         padding: 7px 4px; border-bottom: 1px solid var(--gray-100); font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--gray-800); }
.oc-pg > span:nth-child(n+2):nth-child(-n+5) { text-align: right; }
.oc-pgn { font-weight: 600; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-pc { color: var(--gray-500); }
.oc-mix { display: flex; gap: 2px; height: 10px; }
.oc-mix i { height: 100%; min-width: 2px; }
.oc-mix i:first-child { border-radius: 3px 0 0 3px; } .oc-mix i:last-child { border-radius: 0 3px 3px 0; }
.oc-mix i:only-child { border-radius: 3px; }

/* ---- umur stok per PG · per status (kolom sama kayak Stok per PG + "> 180 Hari") ---- */
.so-ps-tabs { flex-wrap: wrap; margin-bottom: 12px; }
.so-ps-tabs .ap-pill em { font-style: normal; font-weight: 500; opacity: .75; margin-left: 5px; font-variant-numeric: tabular-nums; }
.oc-ps { grid-template-columns: minmax(0, 1.3fr) 48px 72px 84px 56px 84px minmax(0, 1.3fr); }
.oc-ps > span:nth-child(6) { text-align: right; }
.oc-ps.oc-t { font-weight: 700; color: var(--blue); border-bottom: 0; border-top: 1px solid var(--gray-200); margin-top: 2px; }
.oc-ps.oc-t .oc-pgn { color: var(--blue); }
.oc-ps .is-dm-old { color: #9F1239; font-weight: 700; }

/* ---- capacity master ---- */
.cap-badge { display: inline-flex; padding: 3px 8px; border-radius: 6px; font-size: .68rem; font-weight: 600; white-space: nowrap; }
.cap-sub { font-size: .64rem; font-weight: 400; color: var(--gray-400); margin-top: 2px; font-family: var(--font); }
.cap-foot { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 16px; border-top: 1px solid var(--gray-100); font-size: .74rem; color: var(--gray-600); }
.cap-foot b { color: var(--gray-900); font-variant-numeric: tabular-nums; }
.cap-foot .cap-all { margin-left: auto; }

@media (max-width: 1300px) and (min-width: 769px) {
  .oc-g1, .oc-g2, .oc-g3, .oc-cap { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------ HP ------------------------------ */
@media (max-width: 768px) {
  #page-stockoverview .so-m { display: block; }
  .so-chip { font-size: 2vw; padding: 1.6vw 2.4vw; border-radius: 2vw; margin-bottom: 2vw; }
  .oc-g1, .oc-g2, .oc-g3 { grid-template-columns: minmax(0, 1fr); gap: 2.1vw; margin-bottom: 2.1vw; }
  .oc-zcard, .oc-capcard { margin-bottom: 2.1vw; }
  .oc-cap { grid-template-columns: minmax(0, 1fr); gap: 2.4vw; }
  .oc-cap-side { order: -1; gap: 2vw; }   /* HP: cincin utilisasi di atas tabel */
  .oc-a { grid-template-columns: minmax(0, 1fr) 30vw 14vw; gap: 1.6vw; padding: 1.8vw 1vw; font-size: 2.1vw; }
  .oc-a > span:nth-child(2), .oc-a > span:nth-child(3) { display: none; }
  .oc-a > .oc-a-m { display: block; font-size: 1.8vw; color: var(--gray-600); }
  .oc-pill { min-width: 11vw; font-size: 1.8vw; padding: .4vw 1vw; }
  .oc-sub { font-size: 1.6vw; }
  .oc-ring-box { gap: 3vw; padding: 2.4vw; }
  .oc-ring { width: 20vw; height: 20vw; }
  .oc-ring-txt b { font-size: 2.6vw; } .oc-ring-txt span { font-size: 2.1vw; } .oc-ring-txt em { font-size: 1.8vw; }
  .oc-defs { gap: 2vw; }
  .oc-def { padding: 2vw; } .oc-def b { font-size: 2.2vw; } .oc-def span, .oc-def em { font-size: 1.8vw; }
  .oc-col { gap: 2.1vw; }
  #page-stockoverview .sqx-card { padding: 3vw; border-radius: 2.7vw; }
  #page-stockoverview .sqx-card-head { flex-wrap: wrap; }
  #page-stockoverview .sqy-headtools { margin-left: 0; width: 100%; }
  #page-stockoverview .sqy-headtools .sqx-search { flex: 1; width: auto !important; max-width: none; }
  #page-stockoverview .sqy-headtools .sqx-search input { min-height: 40px; }   /* setinggi tombol Ekspor (.btn di HP min 40px) */
  .oc-h { font-size: 1.7vw !important; }
  /* Tabel zona di HP cuma Zona | batang | % -- kapasitas, terisi & sisa disembunyiin */
  .oc-z { grid-template-columns: 19vw minmax(0, 1fr) 13vw 17vw; gap: 2vw; padding: 1.4vw 1vw; font-size: 2.1vw; }
  .oc-z > span:nth-child(4), .oc-z > span:nth-child(5) { display: none; }   /* HP: Zona | batang | Okupansi | Sisa */
  .oc-n em { font-size: 1.6vw; }
  .oc-tr { height: 2.2vw; }
  .oc-leg { font-size: 1.8vw; }
  .oc-sp { grid-template-columns: minmax(0, 1fr) 15vw 15vw 10vw; gap: 1.6vw; font-size: 2.1vw; padding: 2vw 1vw; }
  .oc-sp em { font-size: 1.7vw; }
  .oc-ag { grid-template-columns: 22vw minmax(0, 1fr) 16vw 10vw; gap: 1.6vw; font-size: 2.1vw; padding: 1.6vw 1vw; }
  .oc-agb { height: 2vw; }
  .oc-old { grid-template-columns: 15vw minmax(0, 1fr) 14vw 14vw; gap: 1.6vw; font-size: 2vw; padding: 1.8vw 1vw; }
  .oc-old > span:nth-child(4), .oc-old > span:nth-child(5) { display: none; }
  .so-age { font-size: 1.8vw; padding: .6vw 1.2vw; }
  .oc-pg { grid-template-columns: minmax(0, 1fr) 16vw 10vw 20vw; gap: 1.6vw; font-size: 2vw; padding: 1.6vw 1vw; }
  .oc-pg > span:nth-child(2), .oc-pg > span:nth-child(3) { display: none; }
  .oc-mix { height: 2vw; }
  .oc-ps { grid-template-columns: minmax(0, 1fr) 15vw 9vw 14vw 18vw; }
  .so-ps-tabs { gap: 1.2vw; margin-bottom: 2vw; }
  .so-ps-tabs .ap-pill { padding: 1.2vw 2.2vw; font-size: 2vw; border-radius: 1.6vw; }
  .cap-foot { font-size: 2vw; gap: 3vw; }
}
/* tombol & modal daftar SKU bermasalah (Stock Overview) */
.ap-warn > div + div { margin-top: 4px; }
.so-warn-btn { margin-left: 6px; padding: 2px 9px; border-radius: 6px; border: 1px solid #F59E0B; background: #fff;
               color: #92400E; font-size: .7rem; font-weight: 600; cursor: pointer; font-family: var(--font); }
.so-warn-btn:hover { background: #FEF3C7; }
.so-sku-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.so-sku-copy { margin-left: auto; padding: 6px 12px; font-size: .74rem; }
.so-sku-note { font-size: .72rem; color: var(--gray-500); margin: 10px 0; }
@media (max-width: 768px) { .so-warn-btn { font-size: 2vw; padding: .6vw 2vw; } }
.so-cbm-in, .so-pg-in { border: 1px solid var(--gray-200); border-radius: 6px; padding: 4px 7px; font-size: .74rem;
                        font-family: var(--font); color: var(--gray-800); background: var(--white); }
.so-cbm-in { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.so-pg-in { width: 130px; }
.so-cbm-in:focus, .so-pg-in:focus { outline: none; border-color: var(--blue); }
.so-sku-hint { margin-right: auto; font-size: .7rem; color: var(--gray-500); }
/* Executive = lihat doang: tombol simpan CBM disembunyiin */
body.role-viewonly .so-edit { display: none !important; }

/* ================================================================
   TOGGLE BAHASA (ID | EN)
   Satu markup, dua varian. Kelas .is-on di tombol bahasa aktif dipasang
   I18n.html (i18nSyncToggles_), bukan di sini.
   --auth : pojok kanan atas halaman login / aktivasi / verifikasi (latar gelap)
   --bar  : topbar aplikasi (latar terang, ikut tema terang/gelap)
   ================================================================ */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-family: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .4px;
  line-height: 1; cursor: pointer; user-select: none; flex-shrink: 0;
}
.lang-toggle .lang-globe { width: 14px; height: 14px; flex-shrink: 0; }
.lang-toggle button {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: inherit; transition: color .15s;
}
.lang-toggle button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
.lang-toggle .lang-sep { width: 1px; height: 12px; background: currentColor; opacity: .35; }

/* Halaman login: fixed di atas SEMUA overlay login (aktivasi 9999, email 9998). */
.lang-toggle--auth {
  position: fixed; top: 16px; right: 16px; z-index: 10000;
  color: rgba(255, 255, 255, .55);
  background: rgba(10, 20, 50, .45);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lang-toggle--auth .lang-globe { color: rgba(255, 255, 255, .75); }
.lang-toggle--auth button.is-on { color: #fff; font-weight: 800; }
.lang-toggle--auth button:hover { color: #fff; }
/* Sudah masuk aplikasi -> toggle pindah ke topbar */
body.is-authed .lang-toggle--auth { display: none; }

/* Topbar: sejajar dengan pill tanggal di sebelahnya */
.lang-toggle--bar {
  color: var(--gray-400);
  background: transparent;
  border: 1px solid var(--gray-200);
  padding: 5px 11px;
}
.lang-toggle--bar .lang-globe { color: var(--gray-500); }
.lang-toggle--bar button.is-on { color: var(--gray-900); font-weight: 800; }
.lang-toggle--bar button:hover { color: var(--gray-700); }

@media (max-width: 768px) {
  .lang-toggle--auth {
    top: calc(12px + env(safe-area-inset-top)); right: 12px;
    padding: 5px 10px; font-size: .68rem;
  }
  /* Topbar HP sempit: cukup globe + bahasa aktif. Tap = pindah ke bahasa
     satunya (i18nToggleClick). Judul halaman tetap dapat ruang. */
  .lang-toggle--bar { padding: 4px 8px; gap: 5px; font-size: .68rem; }
  .lang-toggle--bar .lang-globe { width: 12px; height: 12px; }
  .lang-toggle--bar .lang-sep,
  .lang-toggle--bar button:not(.is-on) { display: none; }
}

/* Teks tombol di toolbar detail Smart Queue sekarang dibungkus <span> (buat terjemahan).
   Aturan ".page-toolbar span" di atas itu buat label "Sampai" (abu-abu, lebih kecil) --
   teks di DALAM tombol harus tetap ikut warna & ukuran tombolnya (tombol "Hari Ini" biru teks putih). */
#modalSqDetail .page-toolbar button > span,
#modalSqiDetail .page-toolbar button > span { color: inherit; font-size: inherit !important; }

/* ================================================================
   MENU HP (<=768px)
   Halaman Menu (pengganti landing HP + bottom nav), header wave, laci ☰,
   dan topbar halaman modul. Sengaja di PALING BAWAH file: aturan .topbar HP
   yang lebih lama (padding, tanggal, dll.) harus kalah urutan dari blok ini.
   Desktop nggak kesentuh: .landing-m, .md, .md-ov, .topbar-grp dasarnya display:none.
   ================================================================ */
:root {
  /* Wave yang sama dengan footer sidebar desktop */
  --m-wave: url('/wave-sidebar.webp');
  /* Gambar gudang di dasar Menu. Upload wh-menu.webp ke Cloudflare Pages (folder Invix Cloudflare).
     Ganti file dengan nama yang sama? Naikkan ?v= supaya HP nggak pakai cache lama. */
  --m-wh: url('/wh-menu.webp?v=1');
  /* Bottom nav HP sudah dibuang: tinggi nav = 0. Aturan lama yang masih pakai
     calc(... - var(--nav-h, 58px)) jadi otomatis setinggi layar penuh. */
  --nav-h: 0px;
  --m-ink:  #0F2448;
  --m-bg:   #F4F7FC;
  --m-icbg: #EDF2FA;
  --m-line: #E3EAF4;
  /* Lapisan peredup di atas wave -- angka .92 di atas itu KNOB-nya, sama seperti sidebar */
  --m-wave-shade: linear-gradient(180deg, rgba(15,36,72,.92) 0%, rgba(15,36,72,.62) 55%, rgba(15,36,72,.38) 100%);
}
[data-theme="dark"] {
  --m-ink:  var(--gray-900);
  --m-bg:   var(--bg);
  --m-icbg: var(--gray-100);
  --m-line: var(--gray-200);
}

.landing-m, .md, .md-ov, .topbar-grp { display: none; }

/* Konfirmasi Keluar (dibuka dari Menu / laci HP) */
.m-logout-box {
  max-width: 360px; padding: 24px 20px 20px; border-radius: 22px;
  align-items: center; text-align: center; gap: 10px;
}
.m-logout-ic {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: #FDECEC; color: #B91C1C;
  display: flex; align-items: center; justify-content: center;
}
.m-logout-ic svg { width: 26px; height: 26px; }
.m-logout-title { margin: 4px 0 0; font-size: 1.1rem; font-weight: 700; color: var(--gray-900); }
.m-logout-desc { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--gray-600); }
.m-logout-actions { width: 100%; margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-logout-actions .btn { min-height: 48px; border-radius: 14px; justify-content: center; font-weight: 600; }
.m-logout-ok { background: #B91C1C; color: #fff; border: 1px solid #B91C1C; }
.m-logout-ok:hover { background: #991B1B; }

@media (max-width: 768px) {
  /* ---------- Halaman Menu ---------- */
  .landing-wrap        { background: var(--m-bg); }
  .landing-stage-outer { display: none !important; }

  .landing-m {
    display: flex; flex-direction: column;
    position: absolute; inset: 0;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--m-bg);
    font-family: 'Poppins', sans-serif;
    color: var(--m-ink);
    /* Scrollbar disembunyiin: scrollbar 5px (lihat ::-webkit-scrollbar global) makan
       lebar layar, jadi header Menu nggak nempel ke kanan. Tetap bisa digeser. */
    scrollbar-width: none;
  }
  .landing-m::-webkit-scrollbar { display: none; }
  /* Di Menu, topbar & breadcrumb diganti header besar di dalam .landing-m */
  body.m-home .topbar,
  body.m-home .crumbbar { display: none !important; }

  .mh-head {
    position: relative; flex-shrink: 0;
    padding: calc(env(safe-area-inset-top) + 18px) 18px 20px;
    display: flex; flex-direction: column; gap: 22px;
    color: #fff;
    background: var(--m-wave-shade), var(--m-wave) center bottom / cover no-repeat, #0F2448;
    border-radius: 0 0 26px 26px;
    box-shadow: 0 10px 24px rgba(15,36,72,.18);
  }
  .mh-row { display: flex; align-items: center; gap: 12px; }
  .mh-row--user { justify-content: space-between; align-items: flex-end; }
  .mh-btn {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08);
    color: #fff; display: flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mh-btn:active { background: rgba(255,255,255,.2); }
  .mh-btn svg { width: 22px; height: 22px; }
  .mh-btn--sm { width: 44px; height: 44px; }
  .mh-btn--sm svg { width: 20px; height: 20px; }
  .mh-titlewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .mh-title { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15; color: #fff; }
  .mh-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 500; color: #BFD3F2; }
  .mh-sub svg { width: 14px; height: 14px; flex-shrink: 0; }
  .mh-sub span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mh-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .mh-avatar {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    background: #2B5192; border: 1.5px solid rgba(255,255,255,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: #fff;
  }
  /* Peran di ATAS nama (bertumpuk, bukan satu baris) */
  .mh-userinfo, .md-userinfo { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
  .mh-role {
    padding: 1px 9px; border-radius: 999px; background: rgba(255,255,255,.16);
    font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: #DCE7F8;
  }
  .mh-role:empty { display: none; }
  .mh-name { max-width: 190px; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lang-toggle--menu {
    color: #6F87AE; background: rgba(8,20,42,.45); border: 1px solid rgba(255,255,255,.18);
    padding: 5px 11px; gap: 7px; font-size: 12px; font-weight: 700;
  }
  .lang-toggle--menu .lang-globe { color: #DCE7F8; }
  .lang-toggle--menu button { padding: 5px 2px; }
  .lang-toggle--menu button.is-on { color: #fff; font-weight: 800; }

  .mh-body { display: flex; flex-direction: column; gap: 24px; padding: 24px 16px 8px; }
  .mh-sec { display: flex; flex-direction: column; gap: 12px; }
  .mh-sec-title {
    margin: 0; display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--m-ink);
  }
  .mh-sec-bar { width: 4px; height: 18px; border-radius: 2px; background: var(--blue); flex-shrink: 0; }
  /* Semua grup: 4 kotak per baris, ukuran kotak sama. Grup yang isinya < 4
     (atau sisa baris terakhir) otomatis rata kiri. */
  .mh-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mh-tile {
    height: 114px; box-sizing: border-box; padding: 12px 2px 10px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
    background: var(--white); border: 1px solid var(--m-line); border-radius: 18px;
    box-shadow: 0 6px 18px rgba(15,36,72,.06);
    font-family: inherit; color: var(--m-ink); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .mh-tile:active { transform: scale(.96); box-shadow: 0 2px 8px rgba(15,36,72,.08); }
  .mh-tile-ic {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
    background: var(--m-icbg); box-shadow: inset 0 -2px 6px rgba(15,36,72,.06);
    display: flex; align-items: center; justify-content: center;
  }
  .mh-tile-svg { width: 24px; height: 24px; }
  /* 4 kolom di HP sempit: huruf mengecil sedikit biar kata terpanjang ("Pengaturan",
     "Restructure") muat 1 baris tanpa kepotong di tengah kata. 390px ke atas tetap 12px. */
  .mh-tile-lbl { font-size: clamp(9px, calc(4vw - 3.6px), 12px); font-weight: 600; line-height: 1.25; text-align: center; letter-spacing: -.1px; overflow-wrap: anywhere;
                 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

  .mh-wh {
    position: relative; flex-shrink: 0; margin-top: auto;
    height: 176px; min-height: 176px;
    background: var(--m-wh) center bottom / cover no-repeat;
  }
  .mh-wh::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 70px;
    background: linear-gradient(180deg, var(--m-bg) 0%, rgba(244,247,252,0) 100%);
  }
  [data-theme="dark"] .mh-wh { opacity: .35; }

  /* ---------- Topbar halaman modul: header wave versi pendek ---------- */
  .crumbbar { display: none !important; }   /* diganti label grup di bawah judul */
  .topbar,
  [data-theme="dark"] .topbar {
    height: auto; min-height: 76px;
    padding: calc(env(safe-area-inset-top) + 12px) 14px 14px !important;
    gap: 12px;
    color: #fff; border: none;
    background: var(--m-wave-shade), var(--m-wave) center bottom / cover no-repeat, #0F2448;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 8px 20px rgba(15,36,72,.16);
  }
  .topbar .hamburger-btn {
    width: 44px; height: 44px; padding: 0; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.08); color: #fff;
  }
  .topbar .hamburger-btn:hover,
  .topbar .hamburger-btn:active { background: rgba(255,255,255,.2); }
  .topbar .hamburger-btn svg { width: 20px; height: 20px; }
  .topbar-title { color: #fff; font-family: 'Poppins', sans-serif; font-size: 19px; line-height: 1.2; }
  .topbar-sub { display: none; }
  .topbar-grp {
    display: block; margin-top: 2px;
    font-size: 12px; font-weight: 500; color: #BFD3F2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-grp:empty { display: none; }
  .topbar-date { display: none !important; }
  .lang-toggle--bar { color: #DCE7F8; background: rgba(8,20,42,.45); border-color: rgba(255,255,255,.18); padding: 7px 10px; }
  .lang-toggle--bar .lang-globe { color: #DCE7F8; }
  .lang-toggle--bar button.is-on { color: #fff; }

  /* ---------- Laci ☰ ---------- */
  .md-ov {
    display: block; position: fixed; inset: 0; z-index: 1200;
    background: rgba(8,20,42,.5);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .md-ov.open { opacity: 1; pointer-events: auto; }
  .md {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 1201;
    width: min(304px, 84vw);
    background: var(--white); color: var(--m-ink);
    border-radius: 0 24px 24px 0; box-shadow: 12px 0 32px rgba(8,20,42,.25);
    font-family: 'Poppins', sans-serif; overflow: hidden;
    transform: translateX(-105%); visibility: hidden;
    transition: transform .24s cubic-bezier(.32,.72,.35,1), visibility 0s linear .24s;
  }
  .md.open { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.32,.72,.35,1); }
  body.md-open { overflow: hidden; }
  .md-head {
    flex-shrink: 0; display: flex; align-items: center; gap: 12px;
    padding: calc(env(safe-area-inset-top) + 28px) 12px 18px 18px;
    color: #fff;
    background: var(--m-wave-shade), var(--m-wave) center bottom / cover no-repeat, #0F2448;
  }
  .md-avatar { width: 46px; height: 46px; font-size: 17px; }
  .md-userinfo { flex: 1; }
  .md-name { max-width: 100%; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .md-co { font-size: 11px; color: #BFD3F2; }
  .md-close {
    align-self: flex-start; width: 40px; height: 40px; flex-shrink: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  }
  .md-close svg { width: 18px; height: 18px; }
  .md-body {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 2px;
  }
  .md-sec { margin: 12px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--gray-500); }
  .md-foot {
    flex-shrink: 0; display: flex; flex-direction: column; gap: 2px;
    padding: 8px 12px calc(env(safe-area-inset-bottom) + 14px);
    border-top: 1px solid var(--m-line);
  }
  .md-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; flex-shrink: 0;
    padding: 0 12px; border: none; border-radius: 12px; background: transparent;
    color: var(--m-ink); font-family: inherit; font-size: 13.5px; font-weight: 500; text-align: left;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .md-item:active { background: var(--m-icbg); }
  .md-item.is-active { background: #0F2448; color: #fff; font-weight: 600; }
  [data-theme="dark"] .md-item.is-active { background: var(--blue); }
  .md-item.is-danger { color: #B91C1C; }
  .md-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .md-svg { width: 20px; height: 20px; flex-shrink: 0; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .md, .md-ov, .mh-tile { transition: none; }
}

/* ================================================================
   1 AKUN = 1 PERANGKAT: pop-up login ditahan & pemberitahuan dikeluarkan
   Desktop: kotak di tengah. HP: login ditahan jadi panel dari bawah.
   ================================================================ */
.dev-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(3, 8, 22, .66);
          display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
          font-family: 'Poppins', var(--font); }
.dev-box { width: 100%; max-width: 480px; box-sizing: border-box; background: #fff; color: #0F172A; border-radius: 18px;
           padding: 26px 28px 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); display: flex; flex-direction: column; gap: 16px;
           max-height: calc(100vh - 32px); overflow-y: auto; }
.dev-box--center { max-width: 400px; align-items: stretch; text-align: center; gap: 14px; }
.dev-head { display: flex; gap: 14px; align-items: flex-start; }
.dev-htxt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dev-box h2 { margin: 0; font-size: 18px; font-weight: 700; color: #0F172A; line-height: 1.3; }
.dev-box p { margin: 0; font-size: 13px; line-height: 1.5; color: #475569; }
.dev-box p b { color: #0F172A; }
.dev-ic { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dev-ic svg { width: 22px; height: 22px; }
.dev-ic--warn { background: #FEF3C7; color: #B45309; }
.dev-ic--info { width: 52px; height: 52px; border-radius: 50%; background: #E0E7FF; color: #1D4ED8; align-self: center; }
.dev-info { border: 1px solid #E2E8F0; border-radius: 12px; padding: 4px 16px; background: #F8FAFC; text-align: left; }
.dev-row { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid #E2E8F0; font-size: 13px; }
.dev-row:first-child { border-top: 0; }
.dev-row span:first-child { color: #64748B; }
.dev-row span:last-child { color: #0F172A; font-weight: 600; overflow-wrap: anywhere; }
.dev-warn { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #FFF7ED; color: #9A3412; font-size: 12px; line-height: 1.5; }
.dev-warn svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.dev-note { color: #9A3412 !important; font-size: 12px !important; }
.dev-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.dev-btn { min-height: 44px; padding: 0 20px; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dev-btn:disabled { opacity: .6; cursor: default; }
.dev-btn--ghost { border: 1px solid #CBD5E1; background: #fff; color: #334155; }
.dev-btn--danger { border: 0; background: #C2410C; color: #fff; }
.dev-btn--pri { border: 0; background: #1F6BFF; color: #fff; }
@media (max-width: 768px) {
  #devBusyModal { align-items: flex-end; padding: 0; }
  #devBusyModal .dev-box { max-width: none; border-radius: 24px 24px 0 0; padding: 22px 20px calc(env(safe-area-inset-bottom) + 24px);
                           max-height: 92vh; gap: 14px; }
  .dev-box h2 { font-size: 17px; }
  .dev-box p { font-size: 12.5px; }
  .dev-info { padding: 2px 14px; }
  .dev-row { grid-template-columns: 108px minmax(0, 1fr); gap: 10px; font-size: 12.5px; }
  .dev-warn { font-size: 11.5px; }
  .dev-actions { flex-direction: column-reverse; gap: 8px; }
  .dev-btn { min-height: 48px; font-size: 14px; border-radius: 12px; width: 100%; }
}