/* ============================================================
   GMS WAREHOUSE — TAMPILAN "LITE" (Industrial Blueprint)
   Redesign frontend total: light / clean / premium.
   Aktif hanya saat html[data-gms-ui="lite"] (?ui=lite).

   TIDAK mengubah: logic, data flow, backend, fitur, hak akses,
   standar warna material/lot (--col-*, .mat-*), branding/logo.
   Murni lapisan presentasi.
   ============================================================ */

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

/* ============================================================
   1. TOKEN
   ============================================================ */
html[data-gms-ui="lite"] {
  /* identitas */
  --lt-navy: #0B1D33;
  --lt-navy-2: #12294a;
  --lt-navy-3: #1e3a5f;
  --lt-amber: #FFC107;
  --lt-amber-d: #d9a100;
  --lt-amber-soft: #FFF7E0;

  /* status */
  --lt-ok: #22C55E;
  --lt-ok-soft: #ECFDF5;
  --lt-warn: #F59E0B;
  --lt-warn-soft: #FFFBEB;
  --lt-bad: #EF4444;
  --lt-bad-soft: #FEF2F2;
  --lt-info: #2563EB;
  --lt-info-soft: #EFF6FF;

  /* permukaan */
  --lt-bg: #F1F5F9;
  --lt-surface: #FFFFFF;
  --lt-surface-2: #F8FAFC;
  --lt-ink: #0F172A;
  --lt-ink-2: #475569;
  --lt-ink-3: #94A3B8;
  --lt-line: #E2E8F0;
  --lt-line-2: #CBD5E1;

  /* bentuk */
  --lt-r: 14px;
  --lt-r-sm: 10px;
  --lt-r-xs: 8px;
  --lt-pill: 999px;
  --lt-sh: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .06);
  --lt-sh-2: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 30px rgba(15, 23, 42, .10);
  --lt-sh-nav: 0 10px 40px rgba(11, 29, 51, .28);

  /* ritme (density dashboard) */
  --lt-s1: 4px;
  --lt-s2: 8px;
  --lt-s3: 12px;
  --lt-s4: 16px;
  --lt-s5: 24px;
  --lt-s6: 32px;

  --lt-font: 'Fira Sans', 'Segoe UI', system-ui, sans-serif;
  --lt-mono: 'Fira Code', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* ---- remap token dasar app (dipakai ratusan rule di gms-all) ---- */
  --bg-dark: var(--lt-bg);
  --bg-card: var(--lt-surface);
  --bg-card2: var(--lt-surface-2);
  --border: var(--lt-line);
  --accent: var(--lt-navy);
  --accent2: var(--lt-amber);
  --text: var(--lt-ink);
  --text-dim: var(--lt-ink-2);
  --danger: var(--lt-bad);
  --success: var(--lt-ok);
  --warning: var(--lt-warn);

  color-scheme: light;
  background: var(--lt-bg);
}

/* varian gelap (tombol tema tetap berfungsi di mode lite) */
html[data-gms-ui="lite"][data-gms-theme="dark"] {
  --lt-bg: #0B1220;
  --lt-surface: #131C2E;
  --lt-surface-2: #0F1828;
  --lt-ink: #E8EEF7;
  --lt-ink-2: #9FB0C6;
  --lt-ink-3: #6B7E96;
  --lt-line: #22304A;
  --lt-line-2: #2E3F5E;
  --lt-amber-soft: #2A2210;
  --lt-ok-soft: #0D2A1D;
  --lt-warn-soft: #2B2110;
  --lt-bad-soft: #2C1517;
  --lt-info-soft: #0F1E3B;
  --lt-sh: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
  --lt-sh-2: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .35);
  --accent: #E8EEF7;
  color-scheme: dark;
}

/* ============================================================
   2. DASAR
   ============================================================ */
html[data-gms-ui="lite"] body {
  font-family: var(--lt-font) !important;
  background: var(--lt-bg) !important;
  background-image:
    linear-gradient(to right, rgba(11, 29, 51, .028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 29, 51, .028) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  color: var(--lt-ink) !important;
  -webkit-font-smoothing: antialiased;
}

html[data-gms-ui="lite"] #appShell {
  background-image: none !important;
  background: transparent !important;
}

html[data-gms-ui="lite"] ::selection {
  background: var(--lt-amber);
  color: var(--lt-navy);
}

html[data-gms-ui="lite"] :focus-visible {
  outline: 2px solid var(--lt-amber) !important;
  outline-offset: 2px !important;
  border-radius: var(--lt-r-xs);
}

/* angka selalu rata (tabular) — penting untuk stok/qty */
html[data-gms-ui="lite"] .dash-value,
html[data-gms-ui="lite"] .stat-value,
html[data-gms-ui="lite"] .lane-count,
html[data-gms-ui="lite"] .critical-qty,
html[data-gms-ui="lite"] .rank-value,
html[data-gms-ui="lite"] .movement-delta,
html[data-gms-ui="lite"] .badge,
html[data-gms-ui="lite"] .notif-badge,
html[data-gms-ui="lite"] table td,
html[data-gms-ui="lite"] table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* scrollbar */
html[data-gms-ui="lite"] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-gms-ui="lite"] *::-webkit-scrollbar-track { background: transparent; }
html[data-gms-ui="lite"] *::-webkit-scrollbar-thumb {
  background: var(--lt-line-2);
  border-radius: var(--lt-pill);
  border: 3px solid var(--lt-bg);
}
html[data-gms-ui="lite"] *::-webkit-scrollbar-thumb:hover { background: var(--lt-ink-3); }

/* ============================================================
   3. LOGIN
   ============================================================ */
html[data-gms-ui="lite"] #loginScreen {
  background: var(--lt-bg) !important;
  background-image:
    radial-gradient(1100px 520px at 50% -10%, rgba(11, 29, 51, .10) 0, transparent 70%),
    linear-gradient(to right, rgba(11, 29, 51, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 29, 51, .035) 1px, transparent 1px) !important;
  background-size: auto, 32px 32px, 32px 32px !important;
}
html[data-gms-ui="lite"] #loginScreen::before { display: none !important; }

html[data-gms-ui="lite"] .login-box {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-top: 3px solid var(--lt-amber) !important;
  border-radius: 16px !important;
  box-shadow: var(--lt-sh-2) !important;
}
html[data-gms-ui="lite"] .login-title {
  background: none !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  color: var(--lt-navy) !important;
  filter: none !important;
  font-family: var(--lt-font) !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
}
html[data-gms-ui="lite"] .login-sub { color: var(--lt-ink-2) !important; }
html[data-gms-ui="lite"] .gms-login-img { filter: none !important; animation: none !important; }
html[data-gms-ui="lite"] .login-box label {
  color: var(--lt-ink-2) !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
}
html[data-gms-ui="lite"] .login-box input,
html[data-gms-ui="lite"] .login-box select {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink) !important;
  font-family: var(--lt-font) !important;
  border-radius: var(--lt-r-sm) !important;
}
html[data-gms-ui="lite"] .login-box input:focus,
html[data-gms-ui="lite"] .login-box select:focus {
  border-color: var(--lt-navy) !important;
  background: var(--lt-surface) !important;
  box-shadow: 0 0 0 3px rgba(11, 29, 51, .08) !important;
}
html[data-gms-ui="lite"] .btn-login {
  background: var(--lt-navy) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: var(--lt-font) !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  border-radius: var(--lt-r-sm) !important;
  box-shadow: 0 6px 18px rgba(11, 29, 51, .22) !important;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease !important;
}
html[data-gms-ui="lite"] .btn-login:hover {
  background: var(--lt-navy-2) !important;
  box-shadow: 0 10px 26px rgba(11, 29, 51, .3) !important;
}

/* ============================================================
   4. TOPBAR
   ============================================================ */
html[data-gms-ui="lite"] .topbar {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--lt-line) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  height: 60px !important;
  padding: 0 var(--lt-s5) !important;
  gap: var(--lt-s3) !important;
}
html[data-gms-ui="lite"] .topbar-logo img[data-gms-asset="logo"] {
  filter: none !important;
  height: 34px !important;
}
html[data-gms-ui="lite"] .topbar-title {
  background: none !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  color: var(--lt-navy) !important;
  filter: none !important;
  font-family: var(--lt-font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
}
html[data-gms-ui="lite"] .topbar-user { gap: var(--lt-s2) !important; }
html[data-gms-ui="lite"] .user-name { color: var(--lt-ink) !important; font-weight: 600 !important; }

html[data-gms-ui="lite"] .role-badge {
  background: var(--lt-info-soft) !important;
  border: 1px solid rgba(37, 99, 235, .22) !important;
  color: var(--lt-info) !important;
  border-radius: var(--lt-pill) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  padding: 4px 10px !important;
}
html[data-gms-ui="lite"] .role-badge.foreman {
  background: var(--lt-amber-soft) !important;
  border-color: rgba(217, 161, 0, .32) !important;
  color: #92700a !important;
}
html[data-gms-ui="lite"] .role-badge.leader {
  background: var(--lt-ok-soft) !important;
  border-color: rgba(34, 197, 94, .3) !important;
  color: #15803d !important;
}
html[data-gms-ui="lite"] .session-chip {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  border-radius: var(--lt-pill) !important;
  font-family: var(--lt-mono) !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
}
html[data-gms-ui="lite"] .btn-logout {
  background: var(--lt-bad-soft) !important;
  border: 1px solid rgba(239, 68, 68, .25) !important;
  color: #b91c1c !important;
  border-radius: var(--lt-r-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  transition: background .18s ease, border-color .18s ease !important;
}
html[data-gms-ui="lite"] .btn-logout:hover {
  background: var(--lt-bad) !important;
  border-color: var(--lt-bad) !important;
  color: #fff !important;
}

html[data-gms-ui="lite"] .sb-toggle-bar { background: var(--lt-navy) !important; }

html[data-gms-ui="lite"] #syncStatus {
  background: var(--lt-info-soft) !important;
  border-bottom: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  font-family: var(--lt-mono) !important;
  letter-spacing: .04em !important;
}

/* ============================================================
   5. SIDEBAR — navy, kompak, ikon + label
   ============================================================ */
html[data-gms-ui="lite"] #gmsSidebar {
  background: var(--lt-navy) !important;
  background-image: none !important;
  border-right: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow: var(--lt-sh-nav) !important;
  color: #cfdcea !important;
}

html[data-gms-ui="lite"] #gmsSidebar .sb-head {
  background: var(--lt-navy) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: none !important;
  min-height: 60px !important;
  padding: var(--lt-s3) var(--lt-s4) !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-head-mark {
  background: rgba(255, 255, 255, .07) !important;
  background-image: none !important;
  border-radius: var(--lt-r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 193, 7, .3) !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-head-mark img.sb-brand-logo { filter: none !important; }
html[data-gms-ui="lite"] #gmsSidebar .sb-head-text .t {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  font-family: var(--lt-font) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .14em !important;
  text-shadow: none !important;
  filter: none !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-head-text .s {
  color: rgba(207, 220, 234, .6) !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-close {
  color: rgba(255, 255, 255, .6) !important;
  background: transparent !important;
  border: 0 !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-close:hover { color: var(--lt-amber) !important; }

html[data-gms-ui="lite"] #gmsSidebar .sb-body {
  background: transparent !important;
  padding: var(--lt-s3) var(--lt-s2) !important;
}

html[data-gms-ui="lite"] #gmsSidebar .sb-group {
  background: transparent !important;
  border: 0 !important;
  margin-bottom: var(--lt-s3) !important;
  padding: 0 !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-group-label {
  color: rgba(148, 170, 196, .72) !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--lt-font) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  padding: var(--lt-s3) var(--lt-s3) var(--lt-s2) !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-group-label .ic {
  opacity: .55 !important;
  filter: grayscale(1) !important;
  font-size: 11px !important;
}

html[data-gms-ui="lite"] #gmsSidebar .sb-item {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--lt-r-sm) !important;
  box-shadow: none !important;
  color: #cbd9e8 !important;
  font-family: var(--lt-font) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  min-height: 40px !important;
  padding: var(--lt-s2) var(--lt-s3) !important;
  gap: var(--lt-s3) !important;
  position: relative !important;
  transition: background .16s ease, color .16s ease !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-item .ic {
  color: #8fa6bf !important;
  font-size: 14px !important;
  width: 20px !important;
  text-align: center !important;
  flex: 0 0 20px !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-item .lbl {
  color: inherit !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-item:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-item:hover .ic { color: var(--lt-amber) !important; }

html[data-gms-ui="lite"] #gmsSidebar .sb-item.active,
html[data-gms-ui="lite"] #gmsSidebar .sb-item[aria-current="true"] {
  background: rgba(255, 193, 7, .14) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-item.active .ic { color: var(--lt-amber) !important; }
html[data-gms-ui="lite"] #gmsSidebar .sb-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--lt-amber);
}

html[data-gms-ui="lite"] #gmsSidebar .sb-item.sb-parent {
  font-weight: 600 !important;
  color: #e3ecf6 !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-submenu-inner {
  background: rgba(0, 0, 0, .16) !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 0 !important;
  margin: 2px 0 var(--lt-s2) 18px !important;
  padding: var(--lt-s1) 0 var(--lt-s1) var(--lt-s2) !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-sub-item {
  font-size: 12px !important;
  min-height: 34px !important;
  color: #a9bcd1 !important;
}

html[data-gms-ui="lite"] #gmsSidebar .sb-item.danger { color: #ffb4b4 !important; }
html[data-gms-ui="lite"] #gmsSidebar .sb-item.danger:hover {
  background: rgba(239, 68, 68, .18) !important;
  color: #fff !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-item.danger .ic { color: #ff8f8f !important; }

html[data-gms-ui="lite"] #gmsSidebar .badge {
  background: var(--lt-amber) !important;
  border: 0 !important;
  color: var(--lt-navy) !important;
  border-radius: var(--lt-pill) !important;
  font-family: var(--lt-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  min-width: 18px !important;
  padding: 1px 6px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] #gmsSidebar .badge.copper {
  background: var(--lt-info) !important;
  color: #fff !important;
}
html[data-gms-ui="lite"] #gmsSidebar .badge:empty { display: none !important; }

html[data-gms-ui="lite"] #gmsSidebar .sb-foot {
  background: rgba(0, 0, 0, .22) !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  padding: var(--lt-s3) var(--lt-s4) !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-foot .user { color: #fff !important; font-weight: 600 !important; }
html[data-gms-ui="lite"] #gmsSidebar .sb-foot .role { color: rgba(255, 193, 7, .8) !important; }

html[data-gms-ui="lite"] #sbBackdrop {
  background: rgba(11, 29, 51, .45) !important;
  backdrop-filter: blur(2px);
}

/* ============================================================
   6. TAB NAVIGASI (kategori + panel tambahan)
   ============================================================ */
html[data-gms-ui="lite"] .nav-tabs,
html[data-gms-ui="lite"] .admin-tabs {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--lt-line) !important;
  box-shadow: none !important;
  gap: var(--lt-s2) !important;
  padding: var(--lt-s2) var(--lt-s5) !important;
}
html[data-gms-ui="lite"] .admin-tabs-label {
  color: var(--lt-ink-3) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
}
html[data-gms-ui="lite"] .nav-tab {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: var(--lt-pill) !important;
  box-shadow: none !important;
  color: var(--lt-ink-2) !important;
  font-family: var(--lt-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  padding: 7px 14px !important;
  text-shadow: none !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease !important;
}
html[data-gms-ui="lite"] .nav-tab:hover {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line) !important;
  color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] .nav-tab.active {
  background: var(--lt-navy) !important;
  border-color: var(--lt-navy) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(11, 29, 51, .2) !important;
}
html[data-gms-ui="lite"] .notif-badge {
  background: var(--lt-bad) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: var(--lt-pill) !important;
  font-family: var(--lt-mono) !important;
  font-size: 10px !important;
  padding: 1px 6px !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .notif-badge:empty { display: none !important; }

/* ============================================================
   7. KERANGKA HALAMAN
   ============================================================ */
html[data-gms-ui="lite"] .main-content,
html[data-gms-ui="lite"] .page-shell {
  background: transparent !important;
  padding: var(--lt-s5) !important;
}
html[data-gms-ui="lite"] .page-title,
html[data-gms-ui="lite"] .section-title,
html[data-gms-ui="lite"] .panel-head {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--lt-navy) !important;
  filter: none !important;
  font-family: var(--lt-font) !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .page-subtitle { color: var(--lt-ink-2) !important; }

html[data-gms-ui="lite"] .page-card,
html[data-gms-ui="lite"] .section-box,
html[data-gms-ui="lite"] .chart-card,
html[data-gms-ui="lite"] .dashboard-section,
html[data-gms-ui="lite"] .dashboard-table-card,
html[data-gms-ui="lite"] .analytics-section,
html[data-gms-ui="lite"] .analytics-chart-card,
html[data-gms-ui="lite"] .analytics-side-card,
html[data-gms-ui="lite"] .qcdash-section,
html[data-gms-ui="lite"] .qcdash-card,
html[data-gms-ui="lite"] .laporan-card,
html[data-gms-ui="lite"] .eval-card,
html[data-gms-ui="lite"] .account-card,
html[data-gms-ui="lite"] .catalog-card,
html[data-gms-ui="lite"] .movement-card,
html[data-gms-ui="lite"] .reminder-panel,
html[data-gms-ui="lite"] .lane-card,
html[data-gms-ui="lite"] .table-wrap {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  color: var(--lt-ink) !important;
}

html[data-gms-ui="lite"] .lane-card:hover,
html[data-gms-ui="lite"] .catalog-card:hover,
html[data-gms-ui="lite"] .laporan-card:hover {
  border-color: var(--lt-line-2) !important;
  box-shadow: var(--lt-sh-2) !important;
}

html[data-gms-ui="lite"] .lane-header,
html[data-gms-ui="lite"] .lane-title,
html[data-gms-ui="lite"] .catalog-name,
html[data-gms-ui="lite"] .supplier-name,
html[data-gms-ui="lite"] .laporan-title,
html[data-gms-ui="lite"] .rank-name {
  color: var(--lt-navy) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
  font-family: var(--lt-font) !important;
}
html[data-gms-ui="lite"] .lane-count {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  border-radius: var(--lt-pill) !important;
  font-family: var(--lt-mono) !important;
}

/* ============================================================
   8. DASHBOARD
   ============================================================ */
html[data-gms-ui="lite"] #dashboardPanel,
html[data-gms-ui="lite"] .dashboard-panel {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: var(--lt-s5) !important;
}

html[data-gms-ui="lite"] .dashboard-head {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-left: 4px solid var(--lt-amber) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  padding: var(--lt-s4) var(--lt-s5) !important;
  margin-bottom: var(--lt-s4) !important;
}
html[data-gms-ui="lite"] .dashboard-kicker {
  color: var(--lt-ink-3) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .dashboard-title {
  background: none !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  color: var(--lt-navy) !important;
  filter: none !important;
  text-shadow: none !important;
  font-family: var(--lt-font) !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}
html[data-gms-ui="lite"] .dashboard-subtitle { color: var(--lt-ink-2) !important; }

html[data-gms-ui="lite"] .dashboard-badge-row { gap: var(--lt-s2) !important; }
html[data-gms-ui="lite"] .dash-badge {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  border-radius: var(--lt-pill) !important;
  font-size: 11px !important;
  padding: 5px 12px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .dash-badge strong { color: var(--lt-navy) !important; font-family: var(--lt-mono) !important; }

/* KPI cards */
html[data-gms-ui="lite"] .dashboard-grid,
html[data-gms-ui="lite"] .stats-row {
  gap: var(--lt-s3) !important;
}
html[data-gms-ui="lite"] .dash-card,
html[data-gms-ui="lite"] .stat-card {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  color: var(--lt-ink) !important;
  padding: var(--lt-s4) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
html[data-gms-ui="lite"] .dash-card::before,
html[data-gms-ui="lite"] .stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--lt-navy);
  opacity: .85;
}
html[data-gms-ui="lite"] .dash-card[data-gms-cat="coil"]::before { background: var(--lt-info); }
html[data-gms-ui="lite"] .dash-card[data-gms-cat="plate"]::before { background: #7C3AED; }
html[data-gms-ui="lite"] .dash-card[data-gms-cat="critical"]::before,
html[data-gms-ui="lite"] .dash-card[data-gms-cat="danger"]::before { background: var(--lt-bad); }
html[data-gms-ui="lite"] .dash-card[data-gms-cat="ok"]::before { background: var(--lt-ok); }

html[data-gms-ui="lite"] .dash-card:hover,
html[data-gms-ui="lite"] .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--lt-sh-2) !important;
  border-color: var(--lt-line-2) !important;
}
html[data-gms-ui="lite"] .dash-label,
html[data-gms-ui="lite"] .stat-label {
  color: var(--lt-ink-2) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .dash-value,
html[data-gms-ui="lite"] .stat-value {
  background: none !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  color: var(--lt-navy) !important;
  filter: none !important;
  text-shadow: none !important;
  font-family: var(--lt-font) !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
}
html[data-gms-ui="lite"] .dash-meta { color: var(--lt-ink-3) !important; font-size: 11px !important; }

/* section (grafik, aktivitas, dll) */
html[data-gms-ui="lite"] .dashboard-section { padding: 0 !important; overflow: hidden !important; }
html[data-gms-ui="lite"] .dashboard-section-head {
  background: var(--lt-surface-2) !important;
  border-bottom: 1px solid var(--lt-line) !important;
  padding: var(--lt-s3) var(--lt-s4) !important;
}
html[data-gms-ui="lite"] .dashboard-section-title {
  color: var(--lt-navy) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
  text-shadow: none !important;
  font-family: var(--lt-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}
html[data-gms-ui="lite"] .dashboard-section-sub { color: var(--lt-ink-3) !important; }
html[data-gms-ui="lite"] .dashboard-section-body { padding: var(--lt-s4) !important; }
html[data-gms-ui="lite"] .dashboard-section-toggle {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  border-radius: var(--lt-r-xs) !important;
}
html[data-gms-ui="lite"] .dashboard-empty { color: var(--lt-ink-3) !important; }

/* stok kritis */
html[data-gms-ui="lite"] .critical-item,
html[data-gms-ui="lite"] .critical-stock-row {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-sm) !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .critical-item:hover { background: var(--lt-surface-2) !important; }
html[data-gms-ui="lite"] .critical-name { color: var(--lt-ink) !important; font-weight: 600 !important; }
html[data-gms-ui="lite"] .critical-meta,
html[data-gms-ui="lite"] .critical-sub { color: var(--lt-ink-3) !important; }
html[data-gms-ui="lite"] .critical-qty {
  font-family: var(--lt-mono) !important;
  font-weight: 600 !important;
}
html[data-gms-ui="lite"] .critical-ultra .critical-qty,
html[data-gms-ui="lite"] .chip-ultra {
  background: var(--lt-bad-soft) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(239, 68, 68, .28) !important;
  border-radius: var(--lt-r-xs) !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .critical-high .critical-qty,
html[data-gms-ui="lite"] .chip-high {
  background: var(--lt-warn-soft) !important;
  color: #b45309 !important;
  border: 1px solid rgba(245, 158, 11, .3) !important;
  border-radius: var(--lt-r-xs) !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .critical-count-chip,
html[data-gms-ui="lite"] .critical-priority-chip,
html[data-gms-ui="lite"] .critical-inline-tag {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  border-radius: var(--lt-pill) !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .critical-sort-btn,
html[data-gms-ui="lite"] .critical-toggle-btn {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  border-radius: var(--lt-pill) !important;
  font-weight: 600 !important;
  transition: all .16s ease !important;
}
html[data-gms-ui="lite"] .critical-sort-btn.active,
html[data-gms-ui="lite"] .critical-toggle-btn.active {
  background: var(--lt-navy) !important;
  border-color: var(--lt-navy) !important;
  color: #fff !important;
}
html[data-gms-ui="lite"] .critical-sort-label { color: var(--lt-ink-3) !important; }

/* aktivitas terkini */
html[data-gms-ui="lite"] .movement-row,
html[data-gms-ui="lite"] .movement-list > * {
  border-color: var(--lt-line) !important;
}
html[data-gms-ui="lite"] .movement-row:hover { background: var(--lt-surface-2) !important; }
html[data-gms-ui="lite"] .movement-label { color: var(--lt-ink) !important; }
html[data-gms-ui="lite"] .movement-time { color: var(--lt-ink-3) !important; font-family: var(--lt-mono) !important; }
html[data-gms-ui="lite"] .movement-delta.plus,
html[data-gms-ui="lite"] .table-positive { color: #15803d !important; }
html[data-gms-ui="lite"] .movement-delta.minus,
html[data-gms-ui="lite"] .table-negative { color: #b91c1c !important; }
html[data-gms-ui="lite"] .table-muted { color: var(--lt-ink-3) !important; }

/* pengingat tim */
html[data-gms-ui="lite"] .reminder-panel { padding: var(--lt-s4) !important; }
html[data-gms-ui="lite"] .reminder-title {
  color: var(--lt-navy) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .reminder-sub,
html[data-gms-ui="lite"] .reminder-meta { color: var(--lt-ink-3) !important; }
html[data-gms-ui="lite"] .reminder-card,
html[data-gms-ui="lite"] .reminder-row {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-sm) !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .reminder-name { color: var(--lt-ink) !important; }
html[data-gms-ui="lite"] .reminder-chip {
  background: var(--lt-amber-soft) !important;
  border: 1px solid rgba(217, 161, 0, .3) !important;
  color: #92700a !important;
  border-radius: var(--lt-pill) !important;
}

/* grafik */
html[data-gms-ui="lite"] .chart-wrap,
html[data-gms-ui="lite"] .gms-scope .gms-chart-svg-v2 { background: transparent !important; }
html[data-gms-ui="lite"] .gms-scope .gms-chart-title {
  color: var(--lt-navy) !important;
  text-shadow: none !important;
  font-family: var(--lt-font) !important;
  font-size: 14px !important;
  letter-spacing: .06em !important;
}
html[data-gms-ui="lite"] .gms-scope .gms-chart-sub,
html[data-gms-ui="lite"] .gms-scope .gms-chart-count { color: var(--lt-ink-2) !important; }
html[data-gms-ui="lite"] .gms-scope .gms-chart-count {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line) !important;
}
html[data-gms-ui="lite"] .gms-chartmode,
html[data-gms-ui="lite"] .gms-btn-reset,
html[data-gms-ui="lite"] .analytics-filter-chip,
html[data-gms-ui="lite"] .history-tab-btn,
html[data-gms-ui="lite"] .analytics-btn {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  border-radius: var(--lt-pill) !important;
  font-family: var(--lt-font) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: all .16s ease !important;
}
html[data-gms-ui="lite"] .gms-chartmode.active,
html[data-gms-ui="lite"] .analytics-filter-chip.active,
html[data-gms-ui="lite"] .history-tab-btn.active,
html[data-gms-ui="lite"] .analytics-btn.active {
  background: var(--lt-navy) !important;
  border-color: var(--lt-navy) !important;
  color: #fff !important;
}
html[data-gms-ui="lite"] .legend-bar-title,
html[data-gms-ui="lite"] .legend-item { color: var(--lt-ink-2) !important; }

/* ============================================================
   9. TOMBOL
   ============================================================ */
html[data-gms-ui="lite"] .btn-action,
html[data-gms-ui="lite"] .btn-add,
html[data-gms-ui="lite"] .btn-save,
html[data-gms-ui="lite"] .btn-cancel,
html[data-gms-ui="lite"] .btn-edit,
html[data-gms-ui="lite"] .btn-del,
html[data-gms-ui="lite"] .btn-qc,
html[data-gms-ui="lite"] .btn-transfer,
html[data-gms-ui="lite"] .btn-export,
html[data-gms-ui="lite"] .btn-filter,
html[data-gms-ui="lite"] .btn-reset,
html[data-gms-ui="lite"] .btn-small,
html[data-gms-ui="lite"] .btn-mini,
html[data-gms-ui="lite"] .btn-cek-lot,
html[data-gms-ui="lite"] .btn-manage-lane,
html[data-gms-ui="lite"] .btn-cross-lane,
html[data-gms-ui="lite"] .btn-reminder,
html[data-gms-ui="lite"] .btn-buat-laporan,
html[data-gms-ui="lite"] .history-action-btn {
  font-family: var(--lt-font) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  border-radius: var(--lt-r-xs) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
  cursor: pointer !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .1s ease !important;
}
html[data-gms-ui="lite"] .btn-action:active,
html[data-gms-ui="lite"] .btn-add:active,
html[data-gms-ui="lite"] .btn-save:active { transform: translateY(1px) !important; }

/* primer (navy) */
html[data-gms-ui="lite"] .btn-add,
html[data-gms-ui="lite"] .btn-save,
html[data-gms-ui="lite"] .btn-buat-laporan {
  background: var(--lt-navy) !important;
  border: 1px solid var(--lt-navy) !important;
  color: #fff !important;
}
html[data-gms-ui="lite"] .btn-add:hover,
html[data-gms-ui="lite"] .btn-save:hover,
html[data-gms-ui="lite"] .btn-buat-laporan:hover { background: var(--lt-navy-2) !important; }

/* aksen (amber) */
html[data-gms-ui="lite"] .btn-cek-lot,
html[data-gms-ui="lite"] .btn-reminder,
html[data-gms-ui="lite"] .btn-manage-lane {
  background: var(--lt-amber) !important;
  border: 1px solid var(--lt-amber-d) !important;
  color: var(--lt-navy) !important;
}
html[data-gms-ui="lite"] .btn-cek-lot:hover,
html[data-gms-ui="lite"] .btn-reminder:hover,
html[data-gms-ui="lite"] .btn-manage-lane:hover { background: var(--lt-amber-d) !important; }

/* netral / ghost */
html[data-gms-ui="lite"] .btn-cancel,
html[data-gms-ui="lite"] .btn-filter,
html[data-gms-ui="lite"] .btn-reset,
html[data-gms-ui="lite"] .btn-small,
html[data-gms-ui="lite"] .btn-mini,
html[data-gms-ui="lite"] .btn-export,
html[data-gms-ui="lite"] .btn-eye,
html[data-gms-ui="lite"] .history-action-btn {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
}
html[data-gms-ui="lite"] .btn-cancel:hover,
html[data-gms-ui="lite"] .btn-filter:hover,
html[data-gms-ui="lite"] .btn-reset:hover,
html[data-gms-ui="lite"] .btn-small:hover,
html[data-gms-ui="lite"] .btn-mini:hover,
html[data-gms-ui="lite"] .btn-export:hover,
html[data-gms-ui="lite"] .history-action-btn:hover {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line-2) !important;
  color: var(--lt-ink) !important;
}

/* status */
html[data-gms-ui="lite"] .btn-edit {
  background: var(--lt-info-soft) !important;
  border: 1px solid rgba(37, 99, 235, .24) !important;
  color: #1d4ed8 !important;
}
html[data-gms-ui="lite"] .btn-qc {
  background: var(--lt-amber-soft) !important;
  border: 1px solid rgba(217, 161, 0, .3) !important;
  color: #92700a !important;
}
html[data-gms-ui="lite"] .btn-transfer {
  background: var(--lt-ok-soft) !important;
  border: 1px solid rgba(34, 197, 94, .28) !important;
  color: #15803d !important;
}
html[data-gms-ui="lite"] .btn-del,
html[data-gms-ui="lite"] .lane-del-btn,
html[data-gms-ui="lite"] .btn-status-del {
  background: var(--lt-bad-soft) !important;
  border: 1px solid rgba(239, 68, 68, .25) !important;
  color: #b91c1c !important;
}
html[data-gms-ui="lite"] .btn-del:hover,
html[data-gms-ui="lite"] .lane-del-btn:hover,
html[data-gms-ui="lite"] .btn-status-del:hover {
  background: var(--lt-bad) !important;
  border-color: var(--lt-bad) !important;
  color: #fff !important;
}

/* ============================================================
   10. INPUT & FILTER
   ============================================================ */
html[data-gms-ui="lite"] input,
html[data-gms-ui="lite"] select,
html[data-gms-ui="lite"] textarea {
  font-family: var(--lt-font) !important;
}
html[data-gms-ui="lite"] .main-content input,
html[data-gms-ui="lite"] .main-content select,
html[data-gms-ui="lite"] .main-content textarea,
html[data-gms-ui="lite"] .filters-bar input,
html[data-gms-ui="lite"] .filters-bar select,
html[data-gms-ui="lite"] .modal input,
html[data-gms-ui="lite"] .modal select,
html[data-gms-ui="lite"] .modal textarea {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink) !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .main-content input:focus,
html[data-gms-ui="lite"] .main-content select:focus,
html[data-gms-ui="lite"] .modal input:focus,
html[data-gms-ui="lite"] .modal select:focus,
html[data-gms-ui="lite"] .modal textarea:focus {
  border-color: var(--lt-navy) !important;
  box-shadow: 0 0 0 3px rgba(11, 29, 51, .08) !important;
  outline: none !important;
}
html[data-gms-ui="lite"] .filters-bar,
html[data-gms-ui="lite"] .lane-toolbar,
html[data-gms-ui="lite"] .history-toolbar,
html[data-gms-ui="lite"] .filter-ringkasan-bar,
html[data-gms-ui="lite"] .qcdash-filter-row,
html[data-gms-ui="lite"] .analytics-controls,
html[data-gms-ui="lite"] .gms-scope .gms-chart-controls {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  padding: var(--lt-s3) var(--lt-s4) !important;
}
html[data-gms-ui="lite"] .gms-flabel,
html[data-gms-ui="lite"] .filter-group > label { color: var(--lt-ink-3) !important; }
html[data-gms-ui="lite"] .gms-ftrigger,
html[data-gms-ui="lite"] .gms-fdrop {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-sm) !important;
  color: var(--lt-ink) !important;
  box-shadow: var(--lt-sh) !important;
}
html[data-gms-ui="lite"] .gms-fopt:hover { background: var(--lt-surface-2) !important; }
html[data-gms-ui="lite"] .gms-fchip {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  border-radius: var(--lt-pill) !important;
}

/* ============================================================
   11. TABEL
   ============================================================ */
html[data-gms-ui="lite"] table {
  background: var(--lt-surface) !important;
  border-color: var(--lt-line) !important;
  color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] table thead th,
html[data-gms-ui="lite"] .dashboard-table-head,
html[data-gms-ui="lite"] .history-table th,
html[data-gms-ui="lite"] .qcdash-table th,
html[data-gms-ui="lite"] .cls-table th {
  background: var(--lt-surface-2) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  font-family: var(--lt-font) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] table tbody td {
  border-bottom: 1px solid var(--lt-line) !important;
  color: var(--lt-ink) !important;
  font-size: 12.5px !important;
}
html[data-gms-ui="lite"] table tbody tr:hover td { background: var(--lt-surface-2) !important; }
html[data-gms-ui="lite"] .item-row,
html[data-gms-ui="lite"] .lane-row,
html[data-gms-ui="lite"] .supplier-row,
html[data-gms-ui="lite"] .catalog-row {
  border-color: var(--lt-line) !important;
}
html[data-gms-ui="lite"] .item-row:hover,
html[data-gms-ui="lite"] .lane-row:hover { background: var(--lt-surface-2) !important; }

/* ============================================================
   12. BADGE / STATUS / QC
   ============================================================ */
html[data-gms-ui="lite"] .badge-in,
html[data-gms-ui="lite"] .status-selesai,
html[data-gms-ui="lite"] .badge-selesai,
html[data-gms-ui="lite"] .qc-ok,
html[data-gms-ui="lite"] .qc-release {
  background: var(--lt-ok-soft) !important;
  border: 1px solid rgba(34, 197, 94, .28) !important;
  color: #15803d !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .badge-out,
html[data-gms-ui="lite"] .qc-ng {
  background: var(--lt-bad-soft) !important;
  border: 1px solid rgba(239, 68, 68, .26) !important;
  color: #b91c1c !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .badge-open,
html[data-gms-ui="lite"] .status-open,
html[data-gms-ui="lite"] .qc-hold,
html[data-gms-ui="lite"] .badge-proses,
html[data-gms-ui="lite"] .status-proses,
html[data-gms-ui="lite"] .qc-review,
html[data-gms-ui="lite"] .qc-recheck {
  background: var(--lt-warn-soft) !important;
  border: 1px solid rgba(245, 158, 11, .3) !important;
  color: #b45309 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .badge-xfer {
  background: var(--lt-info-soft) !important;
  border: 1px solid rgba(37, 99, 235, .24) !important;
  color: #1d4ed8 !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .qc-pending,
html[data-gms-ui="lite"] .qc-unchecked {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .qc-badge,
html[data-gms-ui="lite"] .history-pill,
html[data-gms-ui="lite"] .history-tag,
html[data-gms-ui="lite"] .lot-tag,
html[data-gms-ui="lite"] .laporan-badge,
html[data-gms-ui="lite"] .tag-role {
  border-radius: var(--lt-pill) !important;
  font-family: var(--lt-font) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .lot-tag,
html[data-gms-ui="lite"] .lot-builder-chip,
html[data-gms-ui="lite"] .qc-lot-chip {
  font-family: var(--lt-mono) !important;
  border-radius: var(--lt-r-xs) !important;
}

/* standar warna material dipertahankan — hanya ditambah ring
   supaya swatch terang tetap terlihat di atas kartu putih */
html[data-gms-ui="lite"] .mat-dot,
html[data-gms-ui="lite"] .mat-badge,
html[data-gms-ui="lite"] .legend-dot {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18) !important;
}

/* ============================================================
   13. MODAL
   ============================================================ */
html[data-gms-ui="lite"] .modal-overlay,
html[data-gms-ui="lite"] .cls-modal {
  background: rgba(11, 29, 51, .42) !important;
  backdrop-filter: blur(3px) !important;
}
html[data-gms-ui="lite"] .modal,
html[data-gms-ui="lite"] .cls-body {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(11, 29, 51, .24) !important;
  color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] .modal h2,
html[data-gms-ui="lite"] .modal h3,
html[data-gms-ui="lite"] .cls-header {
  background: none !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  color: var(--lt-navy) !important;
  filter: none !important;
  text-shadow: none !important;
  font-family: var(--lt-font) !important;
}
html[data-gms-ui="lite"] .modal-field label { color: var(--lt-ink-2) !important; }
html[data-gms-ui="lite"] .modal-actions { border-top: 1px solid var(--lt-line) !important; }

/* ============================================================
   14. RESPONSIF
   ============================================================ */
@media (max-width: 1024px) {
  html[data-gms-ui="lite"] .main-content,
  html[data-gms-ui="lite"] .page-shell,
  html[data-gms-ui="lite"] #dashboardPanel { padding: var(--lt-s4) !important; }
  html[data-gms-ui="lite"] .topbar { padding: 0 var(--lt-s4) !important; }
  html[data-gms-ui="lite"] .nav-tabs,
  html[data-gms-ui="lite"] .admin-tabs { padding: var(--lt-s2) var(--lt-s4) !important; }
}
@media (max-width: 640px) {
  html[data-gms-ui="lite"] .main-content,
  html[data-gms-ui="lite"] .page-shell,
  html[data-gms-ui="lite"] #dashboardPanel { padding: var(--lt-s3) !important; }
  html[data-gms-ui="lite"] .topbar { padding: 0 var(--lt-s3) !important; height: 56px !important; }
  html[data-gms-ui="lite"] .topbar-title { font-size: 12.5px !important; letter-spacing: .1em !important; }
  html[data-gms-ui="lite"] .dashboard-head { padding: var(--lt-s3) var(--lt-s4) !important; }
  html[data-gms-ui="lite"] .dash-card,
  html[data-gms-ui="lite"] .stat-card { padding: var(--lt-s3) !important; }
  /* target sentuh minimum 44px */
  html[data-gms-ui="lite"] .nav-tab,
  html[data-gms-ui="lite"] .btn-action,
  html[data-gms-ui="lite"] .btn-small,
  html[data-gms-ui="lite"] .history-action-btn { min-height: 44px !important; }
  html[data-gms-ui="lite"] #gmsSidebar .sb-item { min-height: 44px !important; }
}

/* ============================================================
   15. MOTION
   ============================================================ */
html[data-gms-ui="lite"] .dash-card,
html[data-gms-ui="lite"] .stat-card,
html[data-gms-ui="lite"] .dashboard-section {
  animation: gmsLiteRise .34s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes gmsLiteRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
html[data-gms-ui="lite"] .dashboard-grid > *:nth-child(2) { animation-delay: .05s; }
html[data-gms-ui="lite"] .dashboard-grid > *:nth-child(3) { animation-delay: .1s; }
html[data-gms-ui="lite"] .dashboard-grid > *:nth-child(4) { animation-delay: .15s; }
html[data-gms-ui="lite"] .dashboard-grid > *:nth-child(5) { animation-delay: .2s; }
html[data-gms-ui="lite"] .dashboard-grid > *:nth-child(6) { animation-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] *,
  html[data-gms-ui="lite"] *::before,
  html[data-gms-ui="lite"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   16. MATIKAN DEKORASI GELAP YANG TERSISA
   (efek glow/gear dari lapisan lama yang di-inject runtime)
   ============================================================ */
html[data-gms-ui="lite"] .fv-bg-gear,
html[data-gms-ui="lite"] .fv-bg-gear-2,
html[data-gms-ui="lite"] .fv-bg-gear-3,
html[data-gms-ui="lite"] .fv-bg-gear-card,
html[data-gms-ui="lite"] .fv-bolt-bg,
html[data-gms-ui="lite"] .fv-corner-bolt,
html[data-gms-ui="lite"] .fv-topbar-bolt,
html[data-gms-ui="lite"] .fv-vault-ring,
html[data-gms-ui="lite"] .fv-ring-mid,
html[data-gms-ui="lite"] .fv-ring-outer,
html[data-gms-ui="lite"] .fv-perm-gear,
html[data-gms-ui="lite"] .fv-arc-divider,
html[data-gms-ui="lite"] .fv-hammered,
html[data-gms-ui="lite"] .gms-gear-main,
html[data-gms-ui="lite"] .gms-gear-small {
  display: none !important;
}

/* ============================================================
   17. IKON SVG (pasangan js/gms-icons.js)
   Lapisan gear yang biasanya mengatur ukuran .gi dimatikan di
   mode lite, jadi ukurannya diatur ulang di sini.
   ============================================================ */
html[data-gms-ui="lite"] .gi {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  vertical-align: -2.5px !important;
  stroke-width: 2 !important;
  color: inherit !important;
}
html[data-gms-ui="lite"] .gi-sm { width: 13px !important; height: 13px !important; }
html[data-gms-ui="lite"] .gi-lg { width: 18px !important; height: 18px !important; }
html[data-gms-ui="lite"] .sb-item .ic .gi,
html[data-gms-ui="lite"] .sb-group-label .ic .gi {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}
html[data-gms-ui="lite"] .history-note .gi { width: 15px !important; height: 15px !important; }
html[data-gms-ui="lite"] .gms-cs-btn .gi { width: 20px !important; height: 20px !important; }

/* ============================================================
   18. HAPUS DEKORASI TEMA LAMA (pseudo-element runtime)
   ============================================================ */
html[data-gms-ui="lite"] .topbar::before,
html[data-gms-ui="lite"] .topbar::after,
html[data-gms-ui="lite"] .topbar-logo::before,
html[data-gms-ui="lite"] .topbar-logo::after,
html[data-gms-ui="lite"] #appShell::before,
html[data-gms-ui="lite"] #appShell::after,
html[data-gms-ui="lite"] #gmsSidebar::before,
html[data-gms-ui="lite"] #gmsSidebar::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* tombol hamburger */
html[data-gms-ui="lite"] .sb-toggle {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  box-shadow: none !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: background .16s ease, border-color .16s ease !important;
}
html[data-gms-ui="lite"] .sb-toggle:hover {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line-2) !important;
}
html[data-gms-ui="lite"] .sb-toggle-bar {
  background: var(--lt-navy) !important;
  width: 16px !important;
  height: 2px !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* ============================================================
   19. DASHBOARD HERO + TAB MODE (js/dashboard-premium.js)
   ============================================================ */
html[data-gms-ui="lite"] .gms-dash-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: var(--lt-s3) !important;
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-left: 4px solid var(--lt-navy) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  margin: var(--lt-s4) var(--lt-s5) 0 !important;
  padding: var(--lt-s3) var(--lt-s4) !important;
}
html[data-gms-ui="lite"] .gms-dash-meta {
  display: flex !important;
  align-items: baseline !important;
  gap: var(--lt-s3) !important;
  flex-wrap: wrap !important;
}
html[data-gms-ui="lite"] .gms-dash-clock {
  font-family: var(--lt-mono) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  color: var(--lt-navy) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .gms-dash-date {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--lt-ink-3) !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-clock-ico { color: var(--lt-amber) !important; }

html[data-gms-ui="lite"] .gms-dash-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--lt-s2) !important;
  background: transparent !important;
  border: 0 !important;
  margin: var(--lt-s3) var(--lt-s5) 0 !important;
  padding: 0 !important;
}
html[data-gms-ui="lite"] .gms-dash-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--lt-s2) !important;
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-pill) !important;
  box-shadow: none !important;
  color: var(--lt-ink-2) !important;
  cursor: pointer !important;
  font-family: var(--lt-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  min-height: 36px !important;
  padding: 0 var(--lt-s4) !important;
  text-shadow: none !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease !important;
}
html[data-gms-ui="lite"] .gms-dash-tab::after { display: none !important; }
html[data-gms-ui="lite"] .gms-dash-tab:hover {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line-2) !important;
  color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] .gms-dash-tab.active {
  background: var(--lt-navy) !important;
  border-color: var(--lt-navy) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(11, 29, 51, .18) !important;
}
html[data-gms-ui="lite"] .gms-dash-tab.active .gms-dash-tab-ico { color: var(--lt-amber) !important; }

/* ============================================================
   20. PAGINASI, NAVIGASI LANE, TOAST
   ============================================================ */
html[data-gms-ui="lite"] .gms-pager {
  background: transparent !important;
  border: 0 !important;
  gap: var(--lt-s1) !important;
}
html[data-gms-ui="lite"] .gms-pg-btn {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  box-shadow: none !important;
  color: var(--lt-ink-2) !important;
  font-family: var(--lt-mono) !important;
  font-size: 12px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  cursor: pointer !important;
  text-shadow: none !important;
  transition: all .16s ease !important;
}
html[data-gms-ui="lite"] .gms-pg-btn:hover {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line-2) !important;
  color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] .gms-pg-btn.active {
  background: var(--lt-navy) !important;
  border-color: var(--lt-navy) !important;
  color: #fff !important;
}
html[data-gms-ui="lite"] .gms-pg-dots { color: var(--lt-ink-3) !important; }

html[data-gms-ui="lite"] .gms-ln-btn {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  box-shadow: none !important;
  color: var(--lt-ink-2) !important;
  font-family: var(--lt-font) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: all .16s ease !important;
}
html[data-gms-ui="lite"] .gms-ln-btn:hover:not(:disabled) {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line-2) !important;
}
html[data-gms-ui="lite"] .gms-ln-btn.primary {
  background: var(--lt-navy) !important;
  border-color: var(--lt-navy) !important;
  color: #fff !important;
}
html[data-gms-ui="lite"] .gms-ln-btn.primary:hover:not(:disabled) { background: var(--lt-navy-2) !important; }
html[data-gms-ui="lite"] .gms-ln-btn:disabled { opacity: .45 !important; cursor: not-allowed !important; }

html[data-gms-ui="lite"] #gms-ms-bar {
  background: var(--lt-navy) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--lt-pill) !important;
  box-shadow: 0 12px 30px rgba(11, 29, 51, .3) !important;
  color: #e8eef7 !important;
  font-family: var(--lt-font) !important;
}
html[data-gms-ui="lite"] #gms-ms-bar button {
  border-radius: var(--lt-r-xs) !important;
  font-family: var(--lt-font) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* ============================================================
   21. AKSI BARIS TABEL
   ============================================================ */
html[data-gms-ui="lite"] td.actions-cell { white-space: normal !important; }
html[data-gms-ui="lite"] .btn-cek-lot {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
}
html[data-gms-ui="lite"] .btn-export,
html[data-gms-ui="lite"] .btn-manage-lane {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}
html[data-gms-ui="lite"] .btn-action {
  min-width: 30px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html[data-gms-ui="lite"] .gms-cs-btn {
  background: var(--lt-amber) !important;
  background-image: none !important;
  border: 1px solid var(--lt-amber-d) !important;
  border-radius: var(--lt-r-sm) !important;
  box-shadow: none !important;
  color: var(--lt-navy) !important;
  text-shadow: none !important;
}

/* ============================================================
   22. IKON KARTU KPI
   ============================================================ */
html[data-gms-ui="lite"] .dash-card { padding-right: 56px !important; }
html[data-gms-ui="lite"] .dash-ico {
  position: absolute !important;
  top: var(--lt-s3) !important;
  right: var(--lt-s3) !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-sm) !important;
  color: var(--lt-ink-2) !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}
html[data-gms-ui="lite"] .dash-ico-svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
  color: inherit !important;
}
html[data-gms-ui="lite"] .dash-card[data-gms-cat="coil"] .dash-ico { color: var(--lt-info) !important; }
html[data-gms-ui="lite"] .dash-card[data-gms-cat="plate"] .dash-ico { color: #7C3AED !important; }
html[data-gms-ui="lite"] .dash-card[data-gms-cat="critical"] .dash-ico,
html[data-gms-ui="lite"] .dash-card[data-gms-cat="danger"] .dash-ico { color: var(--lt-bad) !important; }
html[data-gms-ui="lite"] .dash-card[data-gms-cat="ok"] .dash-ico { color: var(--lt-ok) !important; }

/* ============================================================
   23. KONTROL GRAFIK (js/stock-chart-v2.js)
   ============================================================ */
html[data-gms-ui="lite"] .gms-ctl-label { color: var(--lt-ink-3) !important; }
html[data-gms-ui="lite"] .gms-ctl-btn {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-pill) !important;
  box-shadow: none !important;
  color: var(--lt-ink-2) !important;
  cursor: pointer !important;
  font-family: var(--lt-font) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  transition: all .16s ease !important;
}
html[data-gms-ui="lite"] .gms-ctl-btn:hover {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line-2) !important;
  color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] .gms-ctl-btn.active {
  background: var(--lt-amber) !important;
  border-color: var(--lt-amber-d) !important;
  color: var(--lt-navy) !important;
}
html[data-gms-ui="lite"] .gms-ctl-btn.is-mode.active {
  background: var(--lt-navy) !important;
  border-color: var(--lt-navy) !important;
  color: #fff !important;
}

/* ============================================================
   24. AKTIVITAS TERKINI (js/aktivitas-terkini.js)
   ============================================================ */
html[data-gms-ui="lite"] #gms-akt-card,
html[data-gms-ui="lite"] .gms-akt-card {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] .gms-akt-head,
html[data-gms-ui="lite"] .gms-akt-foot {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line) !important;
}
html[data-gms-ui="lite"] .gms-akt-title {
  color: var(--lt-navy) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
  font-family: var(--lt-font) !important;
}
html[data-gms-ui="lite"] .gms-akt-sub,
html[data-gms-ui="lite"] .gms-akt-meta,
html[data-gms-ui="lite"] .gms-akt-time,
html[data-gms-ui="lite"] .gms-akt-who,
html[data-gms-ui="lite"] .gms-akt-pg-info,
html[data-gms-ui="lite"] .gms-akt-empty { color: var(--lt-ink-3) !important; }
html[data-gms-ui="lite"] .gms-akt-t,
html[data-gms-ui="lite"] .gms-akt-user { color: var(--lt-ink) !important; }
html[data-gms-ui="lite"] .gms-akt-time { font-family: var(--lt-mono) !important; }
html[data-gms-ui="lite"] .gms-akt-day {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink-2) !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-akt-row {
  background: transparent !important;
  border-color: var(--lt-line) !important;
}
html[data-gms-ui="lite"] .gms-akt-row:hover { background: var(--lt-surface-2) !important; }
html[data-gms-ui="lite"] .gms-akt-sel,
html[data-gms-ui="lite"] .gms-akt-search {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink) !important;
  font-family: var(--lt-font) !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-akt-sel:focus,
html[data-gms-ui="lite"] .gms-akt-search:focus {
  border-color: var(--lt-navy) !important;
  box-shadow: 0 0 0 3px rgba(11, 29, 51, .08) !important;
  outline: none !important;
}
html[data-gms-ui="lite"] .gms-akt-btn {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink-2) !important;
  font-family: var(--lt-font) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-akt-btn:hover { background: var(--lt-surface-2) !important; }
html[data-gms-ui="lite"] .gms-akt-btn.danger {
  background: var(--lt-bad-soft) !important;
  border-color: rgba(239, 68, 68, .25) !important;
  color: #b91c1c !important;
}
html[data-gms-ui="lite"] .gms-akt-stat {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-sm) !important;
  color: var(--lt-ink-2) !important;
}
html[data-gms-ui="lite"] .gms-akt-pg {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink-2) !important;
  font-family: var(--lt-mono) !important;
}
html[data-gms-ui="lite"] .gms-akt-pg.active {
  background: var(--lt-navy) !important;
  border-color: var(--lt-navy) !important;
  color: #fff !important;
}
html[data-gms-ui="lite"] .gms-akt-ico,
html[data-gms-ui="lite"] .gms-akt-svg { color: var(--lt-ink-3) !important; }
html[data-gms-ui="lite"] .gms-akt-svg { width: 15px !important; height: 15px !important; }

/* ============================================================
   25. SISA PERMUKAAN GELAP
   ============================================================ */
html[data-gms-ui="lite"] .movement-row {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-sm) !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .movement-row:hover { background: var(--lt-surface-2) !important; }
html[data-gms-ui="lite"] .critical-sort-bar {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-sm) !important;
}
html[data-gms-ui="lite"] .gms-fav-star {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink-3) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all .16s ease !important;
}
html[data-gms-ui="lite"] .gms-fav-star:hover,
html[data-gms-ui="lite"] .gms-fav-star.active,
html[data-gms-ui="lite"] .gms-fav-star.is-fav {
  background: var(--lt-amber-soft) !important;
  border-color: rgba(217, 161, 0, .35) !important;
  color: var(--lt-amber-d) !important;
}
/* swatch standar warna material: warna aslinya JANGAN diubah,
   hanya diberi cincin tipis supaya warna terang tetap terlihat */
html[data-gms-ui="lite"] .gms-cs-sw {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .22) !important;
  border-radius: 3px !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-cs-sw {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3) !important;
}
html[data-gms-ui="lite"] .gms-cs-line,
html[data-gms-ui="lite"] .gms-cs-i {
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-cs-line > b,
html[data-gms-ui="lite"] .gms-cs-line > strong {
  color: var(--lt-ink-3) !important;
  -webkit-text-fill-color: var(--lt-ink-3) !important;
}
html[data-gms-ui="lite"] .gms-akt-cat,
html[data-gms-ui="lite"] .gms-akt-tag {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-pill) !important;
  color: var(--lt-ink-2) !important;
  text-shadow: none !important;
}

/* label sidebar panjang boleh membungkus, jangan terpotong */
html[data-gms-ui="lite"] #gmsSidebar .sb-item .lbl {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ============================================================
   26. KONTRAS (WCAG AA)
   --lt-ink-3 dinaikkan ke slate-500 supaya teks sekunder
   tetap terbaca (rasio >= 4.5:1 di atas kartu putih).
   ============================================================ */
html[data-gms-ui="lite"] { --lt-ink-3: #64748B; }
html[data-gms-ui="lite"][data-gms-theme="dark"] { --lt-ink-3: #8FA2BA; }

html[data-gms-ui="lite"] .dash-badge strong,
html[data-gms-ui="lite"] .dash-badge b { color: inherit !important; }
html[data-gms-ui="lite"] .dash-badge.gms-tf-kritis {
  background: var(--lt-bad-soft) !important;
  border-color: rgba(239, 68, 68, .28) !important;
  color: #b91c1c !important;
}

html[data-gms-ui="lite"] .rank-list,
html[data-gms-ui="lite"] .rank-row { border-color: var(--lt-line) !important; }
html[data-gms-ui="lite"] .rank-name { color: var(--lt-ink) !important; }
html[data-gms-ui="lite"] .rank-meta { color: var(--lt-ink-3) !important; }
html[data-gms-ui="lite"] .rank-value {
  color: var(--lt-navy) !important;
  font-family: var(--lt-mono) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .rank-bar {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-pill) !important;
  overflow: hidden !important;
}
html[data-gms-ui="lite"] .rank-fill {
  background: var(--lt-navy) !important;
  background-image: none !important;
  border-radius: var(--lt-pill) !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .rank-hapus-btn,
html[data-gms-ui="lite"] .gms-hapus-btn {
  background: var(--lt-bad-soft) !important;
  border: 1px solid rgba(239, 68, 68, .25) !important;
  border-radius: var(--lt-r-xs) !important;
  color: #b91c1c !important;
  font-family: var(--lt-font) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .rank-hapus-btn:hover,
html[data-gms-ui="lite"] .gms-hapus-btn:hover {
  background: var(--lt-bad) !important;
  border-color: var(--lt-bad) !important;
  color: #fff !important;
}

html[data-gms-ui="lite"] .critical-title,
html[data-gms-ui="lite"] .critical-head,
html[data-gms-ui="lite"] .critical-summary {
  color: var(--lt-navy) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
}
html[data-gms-ui="lite"] .critical-sort-bar,
html[data-gms-ui="lite"] .critical-sort-bar span,
html[data-gms-ui="lite"] .critical-controls,
html[data-gms-ui="lite"] .critical-mode-group { color: var(--lt-ink-2) !important; }

html[data-gms-ui="lite"] .gms-akt-stat b,
html[data-gms-ui="lite"] .gms-akt-stat strong,
html[data-gms-ui="lite"] .gms-akt-count {
  color: var(--lt-navy) !important;
  font-family: var(--lt-mono) !important;
  text-shadow: none !important;
}

/* ============================================================
   27. PENGUNCI KONTRAS BER-SPESIFISITAS ID
   Beberapa aturan lama memakai selector ber-ID sehingga menang
   atas selector kelas. Dikunci ulang di sini.
   ============================================================ */
html[data-gms-ui="lite"] #dashboardPanel .dash-badge strong,
html[data-gms-ui="lite"] #dashboardPanel .dash-badge b,
html[data-gms-ui="lite"] #dashboardPanel .dash-badge span {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  font-family: var(--lt-mono) !important;
}
html[data-gms-ui="lite"] #dashboardPanel .dash-value,
html[data-gms-ui="lite"] #dashboardPanel .dashboard-title {
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  background: none !important;
  filter: none !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] #dashboardPanel .dash-label,
html[data-gms-ui="lite"] #dashboardPanel .dashboard-kicker { color: var(--lt-ink-2) !important; }
html[data-gms-ui="lite"] #dashboardPanel .dash-meta,
html[data-gms-ui="lite"] #dashboardPanel .dashboard-subtitle,
html[data-gms-ui="lite"] #dashboardPanel .dashboard-section-sub { color: var(--lt-ink-3) !important; }
html[data-gms-ui="lite"] #dashboardPanel .movement-time,
html[data-gms-ui="lite"] #dashboardPanel .rank-meta { color: var(--lt-ink-3) !important; }
html[data-gms-ui="lite"] #dashboardPanel .rank-name,
html[data-gms-ui="lite"] #dashboardPanel .rank-value { color: var(--lt-ink) !important; }
html[data-gms-ui="lite"] #dashboardPanel .critical-title { color: var(--lt-navy) !important; }

/* ============================================================
   28. VARIAN GELAP — teks judul
   Di mode terang judul memakai navy. Navy tidak terbaca di atas
   permukaan gelap, jadi di tema dark judul memakai --lt-ink.
   Warna navy tetap dipakai untuk permukaan (sidebar, tombol
   primer), jadi tokennya tidak dibalik — hanya teks yang diatur.
   ============================================================ */
html[data-gms-ui="lite"][data-gms-theme="dark"] .topbar-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .login-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .page-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .section-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .panel-head,
html[data-gms-ui="lite"][data-gms-theme="dark"] .lane-header,
html[data-gms-ui="lite"][data-gms-theme="dark"] .lane-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .catalog-name,
html[data-gms-ui="lite"][data-gms-theme="dark"] .supplier-name,
html[data-gms-ui="lite"][data-gms-theme="dark"] .laporan-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .dashboard-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .dashboard-section-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-dash-clock,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-chart-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-akt-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .reminder-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .critical-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .modal h2,
html[data-gms-ui="lite"][data-gms-theme="dark"] .modal h3,
html[data-gms-ui="lite"][data-gms-theme="dark"] .cls-header,
html[data-gms-ui="lite"][data-gms-theme="dark"] #dashboardPanel .dashboard-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] #dashboardPanel .dash-value,
html[data-gms-ui="lite"][data-gms-theme="dark"] #dashboardPanel .critical-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] #dashboardPanel .rank-name,
html[data-gms-ui="lite"][data-gms-theme="dark"] #dashboardPanel .rank-value,
html[data-gms-ui="lite"][data-gms-theme="dark"] .dash-value,
html[data-gms-ui="lite"][data-gms-theme="dark"] .stat-value,
html[data-gms-ui="lite"][data-gms-theme="dark"] .rank-value,
html[data-gms-ui="lite"][data-gms-theme="dark"] .dash-badge strong,
html[data-gms-ui="lite"][data-gms-theme="dark"] #dashboardPanel .dash-badge strong,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-akt-stat b,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-akt-count,
html[data-gms-ui="lite"][data-gms-theme="dark"] .dash-badge strong {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .dash-badge.gms-tf-kritis,
html[data-gms-ui="lite"][data-gms-theme="dark"] .dash-badge.gms-tf-kritis strong {
  color: #FCA5A5 !important;
  -webkit-text-fill-color: #FCA5A5 !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .sb-toggle-bar { background: var(--lt-ink) !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .dashboard-head { border-left-color: var(--lt-amber) !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-dash-hero { border-left-color: var(--lt-amber) !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .dash-card::before,
html[data-gms-ui="lite"][data-gms-theme="dark"] .stat-card::before { background: var(--lt-amber); }
html[data-gms-ui="lite"][data-gms-theme="dark"] body {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .022) 1px, transparent 1px) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #gmsSidebar {
  background: #0A1524 !important;
  border-right-color: var(--lt-line) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .btn-add,
html[data-gms-ui="lite"][data-gms-theme="dark"] .btn-save,
html[data-gms-ui="lite"][data-gms-theme="dark"] .btn-buat-laporan,
html[data-gms-ui="lite"][data-gms-theme="dark"] .nav-tab.active,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-dash-tab.active,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-ctl-btn.is-mode.active,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-pg-btn.active,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-ln-btn.primary,
html[data-gms-ui="lite"][data-gms-theme="dark"] .critical-sort-btn.active,
html[data-gms-ui="lite"][data-gms-theme="dark"] .critical-toggle-btn.active,
html[data-gms-ui="lite"][data-gms-theme="dark"] .analytics-btn.active,
html[data-gms-ui="lite"][data-gms-theme="dark"] .history-tab-btn.active,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-akt-pg.active {
  background: var(--lt-amber) !important;
  border-color: var(--lt-amber-d) !important;
  color: #0B1220 !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #gms-ms-bar {
  background: #182338 !important;
  border: 1px solid var(--lt-line) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .mat-dot,
html[data-gms-ui="lite"][data-gms-theme="dark"] .mat-badge,
html[data-gms-ui="lite"][data-gms-theme="dark"] .legend-dot {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28) !important;
}

/* ============================================================
   29. LEGENDA STANDAR WARNA
   Warna material tetap dibawa oleh titik/kotak swatch (tidak
   diubah sama sekali). Hanya teks labelnya dinetralkan supaya
   material terang (putih / baby blue) tetap terbaca di atas
   kartu putih.
   ============================================================ */
html[data-gms-ui="lite"] .legend-item,
html[data-gms-ui="lite"] .legend-item > span:not(.legend-dot):not(.mat-dot),
html[data-gms-ui="lite"] .legend-item > label,
html[data-gms-ui="lite"] .legend-bar label {
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .legend-bar-title {
  color: var(--lt-ink-3) !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
}
html[data-gms-ui="lite"] .legend-dot,
html[data-gms-ui="lite"] .mat-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 3px !important;
  flex: 0 0 auto !important;
}

/* ============================================================
   30. RINGKASAN LANE — grid kartu (pasangan js/gms-lite-lanes.js)
   Mengikuti arsitektur mockup: kartu per lane berisi nama,
   material + diameter, supplier, jumlah, bar porsi, jumlah item.
   ============================================================ */
html[data-gms-ui="lite"] .lt-lanes {
  display: block;
  margin: 0 0 var(--lt-s4);
}

html[data-gms-ui="lite"] .lt-lanes-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lt-s2);
  margin: 0 0 var(--lt-s3);
}
html[data-gms-ui="lite"] .lt-lanes-title {
  color: var(--lt-navy);
  font-family: var(--lt-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
html[data-gms-ui="lite"] .lt-lanes-sub {
  color: var(--lt-ink-3);
  font-size: 11.5px;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .lt-lanes-hint {
  color: var(--lt-ink-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

html[data-gms-ui="lite"] .lt-lane-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--lt-s3);
}

html[data-gms-ui="lite"] .lt-lane-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r);
  box-shadow: var(--lt-sh);
  padding: var(--lt-s3) var(--lt-s4) var(--lt-s3);
  cursor: pointer;
  font-family: var(--lt-font);
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
html[data-gms-ui="lite"] .lt-lane-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--lt-line-2);
  transition: background .16s ease;
}
html[data-gms-ui="lite"] .lt-lane-card[data-tone="ok"]::before { background: var(--lt-ok); }
html[data-gms-ui="lite"] .lt-lane-card[data-tone="warn"]::before { background: var(--lt-warn); }
html[data-gms-ui="lite"] .lt-lane-card[data-tone="bad"]::before { background: var(--lt-bad); }

html[data-gms-ui="lite"] .lt-lane-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lt-sh-2);
  border-color: var(--lt-line-2);
}
html[data-gms-ui="lite"] .lt-lane-card:focus-visible {
  outline: 2px solid var(--lt-amber);
  outline-offset: 2px;
}
html[data-gms-ui="lite"] .lt-lane-card.is-active {
  border-color: var(--lt-navy);
  box-shadow: 0 0 0 1px var(--lt-navy), var(--lt-sh-2);
}
html[data-gms-ui="lite"] .lt-lane-card.is-active::after {
  content: "AKTIF";
  position: absolute;
  top: 10px;
  right: 12px;
  background: var(--lt-navy);
  color: #fff;
  border-radius: var(--lt-pill);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 3px 7px;
}

html[data-gms-ui="lite"] .lt-lane-head {
  display: flex;
  align-items: center;
  gap: var(--lt-s2);
  min-height: 20px;
  padding-right: 52px;
}
html[data-gms-ui="lite"] .lt-lane-name {
  color: var(--lt-navy);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}
html[data-gms-ui="lite"] .lt-lane-crit {
  background: var(--lt-bad-soft);
  border: 1px solid rgba(239, 68, 68, .26);
  border-radius: var(--lt-pill);
  color: #b91c1c;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .lt-lane-spec {
  color: var(--lt-ink-2);
  font-family: var(--lt-mono);
  font-size: 11.5px;
  letter-spacing: -.01em;
}
html[data-gms-ui="lite"] .lt-lane-sup {
  color: var(--lt-ink-3);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-gms-ui="lite"] .lt-lane-nums {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lt-s2);
  margin-top: 4px;
}
html[data-gms-ui="lite"] .lt-lane-nums b {
  color: var(--lt-navy);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .lt-lane-nums i {
  color: var(--lt-ink-3);
  font-family: var(--lt-mono);
  font-size: 11.5px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .lt-lane-bar {
  display: block;
  height: 6px;
  border-radius: var(--lt-pill);
  background: var(--lt-surface-2);
  box-shadow: inset 0 0 0 1px var(--lt-line);
  overflow: hidden;
}
html[data-gms-ui="lite"] .lt-lane-bar > i {
  display: block;
  height: 100%;
  border-radius: var(--lt-pill);
  background: var(--lt-navy);
  transition: width .4s cubic-bezier(.2, .7, .3, 1);
}
html[data-gms-ui="lite"] .lt-lane-card[data-tone="ok"] .lt-lane-bar > i { background: var(--lt-ok); }
html[data-gms-ui="lite"] .lt-lane-card[data-tone="warn"] .lt-lane-bar > i { background: var(--lt-warn); }
html[data-gms-ui="lite"] .lt-lane-card[data-tone="bad"] .lt-lane-bar > i { background: var(--lt-bad); }

html[data-gms-ui="lite"] .lt-lane-foot {
  color: var(--lt-ink-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-lanes-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-lane-name,
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-lane-nums b { color: var(--lt-ink); }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-lane-card.is-active {
  border-color: var(--lt-amber);
  box-shadow: 0 0 0 1px var(--lt-amber), var(--lt-sh-2);
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-lane-card.is-active::after {
  background: var(--lt-amber);
  color: #0B1220;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-lane-crit {
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, .4);
}

@media (max-width: 640px) {
  html[data-gms-ui="lite"] .lt-lane-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  html[data-gms-ui="lite"] .lt-lane-card { padding: var(--lt-s3); min-height: 44px; }
  html[data-gms-ui="lite"] .lt-lanes-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] .lt-lane-bar > i { transition: none; }
}

/* ============================================================
   31. NAVIGASI LANE + KEPALA LANE (halaman inventaris)
   ============================================================ */
html[data-gms-ui="lite"] .gms-lanenav {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-left: 4px solid var(--lt-amber) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  gap: var(--lt-s2) !important;
  padding: var(--lt-s2) var(--lt-s3) !important;
}
html[data-gms-ui="lite"] .gms-ln-sel {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink) !important;
  font-family: var(--lt-font) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-ln-info {
  color: var(--lt-ink-3) !important;
  font-family: var(--lt-mono) !important;
  font-size: 11.5px !important;
}
html[data-gms-ui="lite"] .lane-section {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  overflow: hidden !important;
}
html[data-gms-ui="lite"] .lane-header {
  background: var(--lt-surface-2) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--lt-line) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  padding: var(--lt-s3) var(--lt-s4) !important;
}
html[data-gms-ui="lite"] .lane-header:hover { background: var(--lt-line) !important; }
html[data-gms-ui="lite"] .lane-toggle { color: var(--lt-ink-3) !important; }
html[data-gms-ui="lite"] .lane-toggle .gi { width: 15px !important; height: 15px !important; }
html[data-gms-ui="lite"] .lane-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}
html[data-gms-ui="lite"] .lane-section .table-wrap {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-lane-pager { gap: var(--lt-s1) !important; }
html[data-gms-ui="lite"] .gms-pg-info {
  color: var(--lt-ink-3) !important;
  font-family: var(--lt-mono) !important;
  font-size: 11px !important;
}

/* baris item: rapat, terbaca, aksi tidak melebar */
html[data-gms-ui="lite"] .lane-section table tbody td { padding: 10px 12px !important; }
html[data-gms-ui="lite"] .lane-section table thead th { padding: 10px 12px !important; }
/* Sel AKSI DIBIARKAN sebagai sel tabel biasa.
   Dulu sel ini dijadikan `display:flex` supaya tiga tombol teks
   (Edit/Hapus/Pindah) bisa membungkus rapi. Tombol-tombol itu kini
   disembunyikan (§50C) dan digantikan kotak `.lt-act`, sedangkan
   `display:flex` pada sebuah <td> MENGELUARKANNYA dari tata letak
   tabel: selnya berhenti setinggi barisnya, jadi `vertical-align:
   middle` (§61F) tidak lagi berlaku dan ikon menggantung di atas
   pada setiap baris yang isinya lebih dari satu baris teks — persis
   keluhan "mulai item ke-3 garisnya miring". Perataan isi sel
   sekarang ditangani `.lt-act` (§63A). */
html[data-gms-ui="lite"] .lot-month {
  color: var(--lt-ink-3) !important;
  font-family: var(--lt-font) !important;
  font-style: normal !important;
  font-size: 10.5px !important;
}

/* ============================================================
   32. BADGE MATERIAL (.mat-badge)
   Aslinya teks + latar memakai warna material dengan opacity 7% —
   di atas kartu putih, material putih & baby blue jadi tidak
   terbaca. Standar warnanya TIDAK diubah: warna dipindah ke titik
   penanda, teksnya dibuat gelap supaya kontras aman.
   ============================================================ */
html[data-gms-ui="lite"] .mat-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  font-family: var(--lt-font) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 3px 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .mat-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 auto;
  background: var(--lt-line-2);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .22);
}
html[data-gms-ui="lite"] .mat-badge.mat-yellow::before { background: var(--col-yellow); }
html[data-gms-ui="lite"] .mat-badge.mat-green::before { background: var(--col-green); }
html[data-gms-ui="lite"] .mat-badge.mat-blue::before { background: var(--col-blue); }
html[data-gms-ui="lite"] .mat-badge.mat-black-mat::before { background: var(--col-black); }
html[data-gms-ui="lite"] .mat-badge.mat-white::before { background: var(--col-white); }
html[data-gms-ui="lite"] .mat-badge.mat-babyblue::before { background: var(--col-baby-blue); }

html[data-gms-ui="lite"][data-gms-theme="dark"] .mat-badge {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .mat-badge::before {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

/* .coil-type = tipe coil (1S2D / Biasa), bukan warna material */
html[data-gms-ui="lite"] .coil-type {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  box-shadow: none !important;
}

/* tombol favorit di baris item */
html[data-gms-ui="lite"] .gms-fav-row-star,
html[data-gms-ui="lite"] .gms-fav-lane-star {
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================================
   33. FAVORIT · QC DASHBOARD · RIWAYAT IN/OUT
   (pasangan js/favorite-ux-v2.js — halaman ini punya lapisan CSS
   sendiri yang disuntik saat runtime, jadi ditimpa di sini)
   ============================================================ */
html[data-gms-ui="lite"] .gms-fav-page,
html[data-gms-ui="lite"] .gms-qc-page {
  background: transparent !important;
  background-image: none !important;
}
html[data-gms-ui="lite"] .gms-fav-title {
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  text-shadow: none !important;
  font-family: var(--lt-font) !important;
  font-size: clamp(17px, 2vw, 22px) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}
html[data-gms-ui="lite"] .gms-fav-subtitle,
html[data-gms-ui="lite"] .gms-fav-meta,
html[data-gms-ui="lite"] .gms-fav-item-sub,
html[data-gms-ui="lite"] .gms-fav-empty { color: var(--lt-ink-3) !important; }

html[data-gms-ui="lite"] .gms-fav-head {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-left: 4px solid var(--lt-amber) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
}
html[data-gms-ui="lite"] .gms-fav-stat,
html[data-gms-ui="lite"] .gms-fav-item,
html[data-gms-ui="lite"] .gms-fav-lane,
html[data-gms-ui="lite"] .gms-fav-row,
html[data-gms-ui="lite"] .gms-fav-all-row {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] .gms-fav-item:hover,
html[data-gms-ui="lite"] .gms-fav-lane:hover,
html[data-gms-ui="lite"] .gms-fav-row:hover {
  border-color: var(--lt-line-2) !important;
  box-shadow: var(--lt-sh-2) !important;
}
html[data-gms-ui="lite"] .gms-fav-item-name,
html[data-gms-ui="lite"] .gms-fav-lane-name {
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  background: none !important;
  text-shadow: none !important;
  font-family: var(--lt-font) !important;
  font-weight: 700 !important;
}
html[data-gms-ui="lite"] .gms-fav-qty {
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  font-family: var(--lt-font) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .gms-fav-lot {
  font-family: var(--lt-mono) !important;
  border-radius: var(--lt-r-xs) !important;
}
html[data-gms-ui="lite"] .gms-fav-missing-tag {
  background: var(--lt-warn-soft) !important;
  border: 1px solid rgba(245, 158, 11, .3) !important;
  color: #b45309 !important;
  border-radius: var(--lt-pill) !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-fav-search {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink) !important;
  font-family: var(--lt-font) !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-fav-search:focus {
  border-color: var(--lt-navy) !important;
  box-shadow: 0 0 0 3px rgba(11, 29, 51, .08) !important;
  outline: none !important;
}
html[data-gms-ui="lite"] .gms-fav-unfav {
  background: var(--lt-bad-soft) !important;
  border: 1px solid rgba(239, 68, 68, .25) !important;
  color: #b91c1c !important;
  border-radius: var(--lt-r-xs) !important;
  text-shadow: none !important;
  cursor: pointer !important;
}
html[data-gms-ui="lite"] .gms-fav-unfav:hover {
  background: var(--lt-bad) !important;
  border-color: var(--lt-bad) !important;
  color: #fff !important;
}
html[data-gms-ui="lite"] .gms-fav-empty-star { color: var(--lt-ink-3) !important; opacity: .5 !important; }

/* tab kategori QC + tombol export QC */
html[data-gms-ui="lite"] .gms-qc-tabbtn,
html[data-gms-ui="lite"] .gms-qc-allbtn,
html[data-gms-ui="lite"] .btn-export-qc,
html[data-gms-ui="lite"] .gms-hist-cat {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-pill) !important;
  box-shadow: none !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  cursor: pointer !important;
  font-family: var(--lt-font) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  transition: all .16s ease !important;
}
html[data-gms-ui="lite"] .gms-qc-tabbtn:hover,
html[data-gms-ui="lite"] .gms-qc-allbtn:hover,
html[data-gms-ui="lite"] .btn-export-qc:hover,
html[data-gms-ui="lite"] .gms-hist-cat:hover {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line-2) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] .gms-qc-tabbtn.active,
html[data-gms-ui="lite"] .gms-qc-allbtn.active,
html[data-gms-ui="lite"] .gms-hist-cat.active {
  background: var(--lt-navy) !important;
  border-color: var(--lt-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html[data-gms-ui="lite"] .btn-export-qc {
  background: var(--lt-amber-soft) !important;
  border-color: rgba(217, 161, 0, .32) !important;
  color: #92700a !important;
  -webkit-text-fill-color: #92700a !important;
  border-radius: var(--lt-r-xs) !important;
}
html[data-gms-ui="lite"] .btn-export-qc:hover {
  background: var(--lt-amber) !important;
  border-color: var(--lt-amber-d) !important;
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
}
html[data-gms-ui="lite"] .gms-qc-scope,
html[data-gms-ui="lite"] .gms-qc-autoslide {
  color: var(--lt-ink-3) !important;
  font-family: var(--lt-font) !important;
}
html[data-gms-ui="lite"] .gms-hist-cat-lbl { color: inherit !important; }
html[data-gms-ui="lite"] .gms-hist-cat-indicator { background: var(--lt-amber) !important; }

html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-fav-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-fav-item-name,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-fav-lane-name,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-fav-qty {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-qc-tabbtn.active,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-qc-allbtn.active,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-hist-cat.active {
  background: var(--lt-amber) !important;
  border-color: var(--lt-amber-d) !important;
  color: #0B1220 !important;
  -webkit-text-fill-color: #0B1220 !important;
}

/* ============================================================
   34. TEKS BERWARNA MATERIAL DI ATAS LATAR PUTIH
   Beberapa tabel (mis. Tabel Cek QC per Lot) menulis nama material
   sebagai TEKS berwarna standar material lewat style inline. Di
   latar gelap itu terbaca; di latar terang tidak.

   Yang diubah hanya WARNA CAT teksnya (-webkit-text-fill-color).
   Properti `color` sengaja dibiarkan apa adanya, jadi nilai standar
   materialnya tetap utuh dan apa pun yang memakai `currentColor`
   (titik, garis, ikon) tetap memakai warna material yang benar.
   Chip, swatch, dan tag lot tetap memakai warna aslinya.
   ============================================================ */
html[data-gms-ui="lite"] [style*="#ffd60a"],
html[data-gms-ui="lite"] [style*="#f0f0f0"],
html[data-gms-ui="lite"] [style*="#90e0ef"],
html[data-gms-ui="lite"] [style*="#55a630"],
html[data-gms-ui="lite"] [style*="#0096c7"] {
  -webkit-text-fill-color: var(--lt-ink) !important;
}
/* chip/tag yang memang memakai warna material sebagai LATAR tidak
   ikut aturan di atas — teksnya sudah diatur di bagian lot & badge */
html[data-gms-ui="lite"] .lot-tag[style*="#ffd60a"],
html[data-gms-ui="lite"] .lot-tag[style*="#f0f0f0"],
html[data-gms-ui="lite"] .lot-tag[style*="#90e0ef"],
html[data-gms-ui="lite"] .gms-lotword[style*="#ffd60a"],
html[data-gms-ui="lite"] .gms-lotword[style*="#f0f0f0"],
html[data-gms-ui="lite"] .gms-lotword[style*="#90e0ef"] {
  -webkit-text-fill-color: #0F172A !important;
}

/* chip kategori COIL / PLAT */
html[data-gms-ui="lite"] .gms-cat-chip {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  font-family: var(--lt-font) !important;
  font-size: 10.5px !important;
  letter-spacing: .16em !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-cat-chip.coil {
  background: var(--lt-info-soft) !important;
  border-color: rgba(37, 99, 235, .24) !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
}
html[data-gms-ui="lite"] .gms-cat-chip.plate {
  background: #F5F3FF !important;
  border-color: rgba(124, 58, 237, .24) !important;
  color: #6D28D9 !important;
  -webkit-text-fill-color: #6D28D9 !important;
}

/* kartu statistik QC */
html[data-gms-ui="lite"] .qcdash-label { color: var(--lt-ink-2) !important; }
html[data-gms-ui="lite"] .qcdash-value {
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  background: none !important;
  filter: none !important;
  text-shadow: none !important;
  font-family: var(--lt-font) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .qcdash-card.qc-ok .qcdash-value,
html[data-gms-ui="lite"] .qcdash-value.qc-ok { color: #15803d !important; -webkit-text-fill-color: #15803d !important; }
html[data-gms-ui="lite"] .qcdash-card.qc-ng .qcdash-value,
html[data-gms-ui="lite"] .qcdash-value.qc-ng { color: #b91c1c !important; -webkit-text-fill-color: #b91c1c !important; }

html[data-gms-ui="lite"][data-gms-theme="dark"] [style*="#ffd60a"],
html[data-gms-ui="lite"][data-gms-theme="dark"] [style*="#f0f0f0"],
html[data-gms-ui="lite"][data-gms-theme="dark"] [style*="#90e0ef"],
html[data-gms-ui="lite"][data-gms-theme="dark"] [style*="#55a630"],
html[data-gms-ui="lite"][data-gms-theme="dark"] [style*="#0096c7"] {
  -webkit-text-fill-color: currentColor !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .qcdash-value {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}

/* ============================================================
   35. AKSI MERAH & TAG KRITIS DI LATAR TERANG
   js/hapus-riwayat-fix.js menyuntik CSS-nya sendiri saat runtime
   (merah #ff5a5a untuk latar gelap). Di mode lite warnanya
   digelapkan supaya kontras aman, tetapi maknanya (merah = aksi
   merusak data) tetap sama.
   ============================================================ */
html[data-gms-ui="lite"] .btn-small.danger,
html[data-gms-ui="lite"] .btn-danger,
html[data-gms-ui="lite"] .btn-delete,
html[data-gms-ui="lite"] .btn-hapus,
html[data-gms-ui="lite"] .gms-akt-btn.danger,
html[data-gms-ui="lite"] .gms-mbtn.danger,
html[data-gms-ui="lite"] .history-del-btn,
html[data-gms-ui="lite"] .gms-hapus-btn,
html[data-gms-ui="lite"] [data-akt-del],
html[data-gms-ui="lite"] [onclick*="hapus" i],
html[data-gms-ui="lite"] [onclick*="delete" i] {
  background: var(--lt-bad-soft) !important;
  background-image: none !important;
  border: 1px solid rgba(239, 68, 68, .3) !important;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
  border-radius: var(--lt-r-xs) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .btn-small.danger:hover,
html[data-gms-ui="lite"] .btn-danger:hover,
html[data-gms-ui="lite"] .gms-hapus-btn:hover,
html[data-gms-ui="lite"] .gms-akt-btn.danger:hover,
html[data-gms-ui="lite"] [data-akt-del]:hover {
  background: var(--lt-bad) !important;
  border-color: var(--lt-bad) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* bukan aksi merusak data — tetap netral */
html[data-gms-ui="lite"] .btn-cancel,
html[data-gms-ui="lite"] .btn-reset,
html[data-gms-ui="lite"] .cls-btn-close,
html[data-gms-ui="lite"] .gms-mclose,
html[data-gms-ui="lite"] .sb-close,
html[data-gms-ui="lite"] .gms-fr-reset {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-close {
  background: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, .65) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .65) !important;
}
html[data-gms-ui="lite"] .btn-cancel:hover,
html[data-gms-ui="lite"] .btn-reset:hover,
html[data-gms-ui="lite"] .gms-fr-reset:hover {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line-2) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}

html[data-gms-ui="lite"] .critical-inline-tag,
html[data-gms-ui="lite"] .critical-priority-chip {
  background: var(--lt-bad-soft) !important;
  border: 1px solid rgba(239, 68, 68, .28) !important;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
  text-shadow: none !important;
}

html[data-gms-ui="lite"][data-gms-theme="dark"] .btn-small.danger,
html[data-gms-ui="lite"][data-gms-theme="dark"] .btn-danger,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-hapus-btn,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-akt-btn.danger,
html[data-gms-ui="lite"][data-gms-theme="dark"] [data-akt-del],
html[data-gms-ui="lite"][data-gms-theme="dark"] .critical-inline-tag,
html[data-gms-ui="lite"][data-gms-theme="dark"] .critical-priority-chip {
  color: #FCA5A5 !important;
  -webkit-text-fill-color: #FCA5A5 !important;
  border-color: rgba(239, 68, 68, .42) !important;
}

/* ============================================================
   36. SISA KONTRAS DI LATAR TERANG
   ============================================================ */

/* 36A. Tag "STOK KRITIS" di sel tabel.
   js/tampilan-fix.js sengaja menaikkan spesifisitas aturannya
   menjadi (0,2,2) — html[data-gms-ui] body .critical-inline-tag —
   supaya menang atas tema v4. Aturan lite biasa (0,2,1) kalah.
   Atribut ui ditulis dua kali agar spesifisitasnya (0,3,2). */
html[data-gms-ui="lite"][data-gms-ui] body .critical-inline-tag,
html[data-gms-ui="lite"][data-gms-ui] body .critical-priority-chip {
  background: var(--lt-bad-soft) !important;
  background-image: none !important;
  border: 1px solid rgba(239, 68, 68, .32) !important;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"][data-gms-ui][data-gms-theme="dark"] body .critical-inline-tag,
html[data-gms-ui="lite"][data-gms-ui][data-gms-theme="dark"] body .critical-priority-chip {
  color: #FCA5A5 !important;
  -webkit-text-fill-color: #FCA5A5 !important;
}

/* 36B. Isi chip lot memakai warna teks yang sudah DIHITUNG app.js
   dari warna lot itu sendiri. Jangan dipaksa netral — nanti malah
   hilang di atas lot yang gelap. */
html[data-gms-ui="lite"] .lot-tag .lot-month,
html[data-gms-ui="lite"] .lot-tag .lot-qty,
html[data-gms-ui="lite"] .lot-tag b,
html[data-gms-ui="lite"] .lot-tag i,
html[data-gms-ui="lite"] .lot-tag small {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* 36C. Chip bulan di kartu Stok Kritis (.gms-cs-mo) dan chip lot
   TIDAK disentuh: warnanya dikunci js/lot-warna-kunci.js sebagai
   standar warna lot, lengkap dengan warna teks hasil hitungannya
   sendiri. Sama persis di semua tampilan — jangan ditimpa. */

/* 36D. Teks kecil yang masih di bawah 4.5:1 */
html[data-gms-ui="lite"] .lt-lanes-sub,
html[data-gms-ui="lite"] .lt-lanes-hint { color: var(--lt-ink-2); }
html[data-gms-ui="lite"] .role-badge {
  color: #7a5d08 !important;
  -webkit-text-fill-color: #7a5d08 !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .role-badge {
  color: var(--lt-amber) !important;
  -webkit-text-fill-color: var(--lt-amber) !important;
}

/* ============================================================
   37. SISA WARNA CAT WARISAN
   Tombol "Cek Data Lot" masih mewarisi -webkit-text-fill-color
   biru neon dari lapisan lama, sehingga teksnya dicat biru di
   atas latar kuning meskipun `color`-nya sudah navy.
   ============================================================ */
html[data-gms-ui="lite"] .btn-cek-lot,
html[data-gms-ui="lite"] .btn-cek-lot * {
  -webkit-text-fill-color: var(--lt-navy) !important;
}
html[data-gms-ui="lite"] .btn-cek-lot:hover,
html[data-gms-ui="lite"] .btn-cek-lot:hover * {
  -webkit-text-fill-color: var(--lt-navy) !important;
}

/* ============================================================
   38. KATEGORI SIDEBAR — RODA GIGI YANG BERPUTAR
   js/sidebar-premium.js SUDAH punya buka/tutup grup (kelas
   .collapsed pada .sb-group) beserta pembungkus .sb-group-inner,
   tetapi lapisan CSS-nya (gms-sb-premium) dimatikan di mode lite.
   Bagian ini mengembalikan animasinya dengan gaya lite dan
   mengganti ikon panah menjadi roda gigi yang berputar halus.
   Ikonnya memakai mask + currentColor, jadi warnanya selalu ikut
   warna teks (termasuk saat aktif / hover / tema gelap).
   ============================================================ */
html[data-gms-ui="lite"] {
  --lt-gear: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
  --lt-sidebar: 280px;
  --lt-topbar: 60px;
}

html[data-gms-ui="lite"] #gmsSidebar .sb-group-label {
  display: flex !important;
  align-items: center !important;
  gap: var(--lt-s2) !important;
  cursor: pointer !important;
  user-select: none !important;
  border-radius: var(--lt-r-xs) !important;
  transition: color .18s ease !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-group-label:hover { color: var(--lt-amber) !important; }
html[data-gms-ui="lite"] #gmsSidebar .sb-group-label:focus-visible {
  outline: 2px solid var(--lt-amber);
  outline-offset: 2px;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-group-label-text { flex: 1 1 auto; }

/* lipat/buka halus — pembungkus .sb-group-inner dibuat sidebar-premium.js */
html[data-gms-ui="lite"] #gmsSidebar .sb-group-body {
  display: grid !important;
  grid-template-rows: 1fr;
  transition: grid-template-rows .38s cubic-bezier(.4, 0, .2, 1), opacity .26s ease;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-group-inner {
  min-height: 0;
  overflow: hidden;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-group.collapsed .sb-group-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* panah -> roda gigi */
html[data-gms-ui="lite"] #gmsSidebar .sb-caret > svg { display: none !important; }
html[data-gms-ui="lite"] #gmsSidebar .sb-caret {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
  margin-left: auto !important;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-caret::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: .55;
  -webkit-mask: var(--lt-gear) center / contain no-repeat;
  mask: var(--lt-gear) center / contain no-repeat;
  transform: rotate(0deg);
  transition: transform .55s cubic-bezier(.34, .01, .2, 1), opacity .2s ease;
}
/* terbuka = roda gigi sudah berputar */
html[data-gms-ui="lite"] #gmsSidebar .sb-group:not(.collapsed) > .sb-group-label .sb-caret::before,
html[data-gms-ui="lite"] #gmsSidebar .sb-parent.open .sb-caret::before,
html[data-gms-ui="lite"] #gmsSidebar .sb-parent[aria-expanded="true"] .sb-caret::before {
  transform: rotate(150deg);
  opacity: .9;
}
html[data-gms-ui="lite"] #gmsSidebar .sb-group-label:hover .sb-caret::before,
html[data-gms-ui="lite"] #gmsSidebar .sb-parent:hover .sb-caret::before { opacity: 1; }

html[data-gms-ui="lite"] #gmsSidebar .sb-submenu {
  transition: max-height .34s cubic-bezier(.4, 0, .2, 1), opacity .24s ease;
}

@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] #gmsSidebar .sb-caret::before,
  html[data-gms-ui="lite"] #gmsSidebar .sb-group-body,
  html[data-gms-ui="lite"] #gmsSidebar .sb-submenu { transition: none !important; }
}

/* ============================================================
   39. HALAMAN TERTANAM — RINGKASAN TOTAL ITEM & STOCK OPNAME
   Keduanya milik app.js berupa modal. Elemennya TIDAK dipindah;
   hanya digambar selebar area konten sehingga terbaca sebagai
   halaman, bukan kotak mengambang. Sidebar & topbar tetap utuh
   dan tetap bisa dipakai.
   ============================================================ */
html[data-gms-ui="lite"] #crossLaneModal,
html[data-gms-ui="lite"] #gmsOpnameModal {
  position: fixed !important;
  top: var(--lt-topbar) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 70 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--lt-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  animation: gmsLitePageIn .22s cubic-bezier(.2, .7, .3, 1) both;
}
html[data-gms-ui="lite"] body.sidebar-open #crossLaneModal,
html[data-gms-ui="lite"] body.sidebar-open #gmsOpnameModal {
  left: var(--lt-sidebar) !important;
}
@keyframes gmsLitePageIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] #crossLaneModal,
  html[data-gms-ui="lite"] #gmsOpnameModal { animation: none; }
}

html[data-gms-ui="lite"] #crossLaneModal > .cls-modal,
html[data-gms-ui="lite"] #gmsOpnameModal > .gms-mbox {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: var(--lt-s5) clamp(16px, 3vw, 32px) var(--lt-s6) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--lt-s4) !important;
  overflow: visible !important;
  animation: none !important;
  transform: none !important;
}

/* kepala halaman */
html[data-gms-ui="lite"] #crossLaneModal .cls-header,
html[data-gms-ui="lite"] #gmsOpnameModal .gms-mhead {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lt-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 var(--lt-s3) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: var(--lt-s3) !important;
}
html[data-gms-ui="lite"] #crossLaneModal .cls-header h3,
html[data-gms-ui="lite"] #gmsOpnameModal .gms-mhead h3 {
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  text-shadow: none !important;
  font-family: var(--lt-font) !important;
  font-size: clamp(19px, 2.4vw, 26px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  margin: 0 !important;
}
html[data-gms-ui="lite"] #crossLaneModal .cls-sub {
  color: var(--lt-ink-3) !important;
  font-family: var(--lt-font) !important;
  font-size: 12.5px !important;
  margin-top: 4px !important;
}

/* kartu-kartu isi halaman */
html[data-gms-ui="lite"] #crossLaneModal .cls-body,
html[data-gms-ui="lite"] #gmsOpnameModal .gms-mbody {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  padding: var(--lt-s4) !important;
  max-height: none !important;
  overflow: visible !important;
}
html[data-gms-ui="lite"] #crossLaneModal .cls-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: var(--lt-s3) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
html[data-gms-ui="lite"] #crossLaneModal .cls-stats > span {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-left: 4px solid var(--lt-amber) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  padding: var(--lt-s3) var(--lt-s4) !important;
  color: var(--lt-ink-3) !important;
  font-family: var(--lt-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
html[data-gms-ui="lite"] #crossLaneModal .cls-stats > span > strong {
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  font-size: clamp(20px, 2.2vw, 27px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  font-variant-numeric: tabular-nums;
}

/* tab & kaki halaman */
html[data-gms-ui="lite"] #crossLaneModal .cls-tabs {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lt-line) !important;
  border-radius: 0 !important;
  gap: var(--lt-s1) !important;
  padding: 0 !important;
}
html[data-gms-ui="lite"] #crossLaneModal .cls-tab {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  font-family: var(--lt-font) !important;
  font-weight: 700 !important;
  padding: 9px 14px !important;
  cursor: pointer !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] #crossLaneModal .cls-tab:hover { color: var(--lt-ink) !important; -webkit-text-fill-color: var(--lt-ink) !important; }
html[data-gms-ui="lite"] #crossLaneModal .cls-tab.active {
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  border-bottom-color: var(--lt-amber) !important;
}
html[data-gms-ui="lite"] #crossLaneModal .cls-footer {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--lt-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--lt-s3) 0 0 !important;
  margin: 0 !important;
}
html[data-gms-ui="lite"] #crossLaneModal .cls-search,
html[data-gms-ui="lite"] #gmsOpnameModal select,
html[data-gms-ui="lite"] #gmsOpnameModal input[type="text"],
html[data-gms-ui="lite"] #gmsOpnameModal input[type="number"] {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  font-family: var(--lt-font) !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] #gmsOpnameModal .gms-mtoolbar,
html[data-gms-ui="lite"] #gmsOpnameModal .gms-toggle-grp {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  padding: var(--lt-s3) var(--lt-s4) !important;
  color: var(--lt-ink-2) !important;
}
html[data-gms-ui="lite"] #gmsOpnameModal .gms-mtoolbar label,
html[data-gms-ui="lite"] #gmsOpnameModal .gms-toggle-grp label,
html[data-gms-ui="lite"] #gmsOpnameModal .gms-toggle-grp span {
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  font-family: var(--lt-font) !important;
}

/* tombol tutup jadi tombol "kembali" yang jelas */
html[data-gms-ui="lite"] #crossLaneModal .cls-btn-close,
html[data-gms-ui="lite"] #gmsOpnameModal .gms-mclose {
  position: static !important;
  flex: 0 0 auto !important;
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  box-shadow: var(--lt-sh) !important;
  cursor: pointer !important;
  min-width: 34px !important;
  min-height: 34px !important;
}
html[data-gms-ui="lite"] #crossLaneModal .cls-btn-close:hover,
html[data-gms-ui="lite"] #gmsOpnameModal .gms-mclose:hover {
  background: var(--lt-bad-soft) !important;
  border-color: rgba(239, 68, 68, .3) !important;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
}

@media (max-width: 640px) {
  html[data-gms-ui="lite"] body.sidebar-open #crossLaneModal,
  html[data-gms-ui="lite"] body.sidebar-open #gmsOpnameModal { left: 0 !important; }
}

/* ============================================================
   40. PERMUKAAN & KONTROL YANG BELUM IKUT MODE TERANG
   Halaman-halaman yang CSS-nya disuntik modulnya sendiri masih
   memakai warna tema gelap: latar gelap dengan teks gelap =
   tidak terbaca. Bagian ini menyeragamkannya ke permukaan lite.
   ============================================================ */

/* 40A. Semua kontrol isian, di mana pun letaknya.
   Satu aturan untuk semua halaman — termasuk halaman yang belum
   ada saat aturan ini ditulis. */
html[data-gms-ui="lite"] .main-content select,
html[data-gms-ui="lite"] .main-content input:not([type="checkbox"]):not([type="radio"]),
html[data-gms-ui="lite"] .main-content textarea,
html[data-gms-ui="lite"] #crossLaneModal select,
html[data-gms-ui="lite"] #crossLaneModal input:not([type="checkbox"]):not([type="radio"]),
html[data-gms-ui="lite"] #gmsOpnameModal select,
html[data-gms-ui="lite"] #gmsOpnameModal input:not([type="checkbox"]):not([type="radio"]),
html[data-gms-ui="lite"] .modal-overlay select,
html[data-gms-ui="lite"] .modal-overlay input:not([type="checkbox"]):not([type="radio"]),
html[data-gms-ui="lite"] .modal-overlay textarea {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  font-family: var(--lt-font) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .main-content select:focus,
html[data-gms-ui="lite"] .main-content input:focus,
html[data-gms-ui="lite"] .main-content textarea:focus,
html[data-gms-ui="lite"] #crossLaneModal select:focus,
html[data-gms-ui="lite"] #crossLaneModal input:focus,
html[data-gms-ui="lite"] #gmsOpnameModal select:focus,
html[data-gms-ui="lite"] #gmsOpnameModal input:focus {
  border-color: var(--lt-navy) !important;
  box-shadow: 0 0 0 3px rgba(11, 29, 51, .08) !important;
  outline: none !important;
}
html[data-gms-ui="lite"] .main-content ::placeholder,
html[data-gms-ui="lite"] #crossLaneModal ::placeholder,
html[data-gms-ui="lite"] #gmsOpnameModal ::placeholder {
  color: var(--lt-ink-3) !important;
  -webkit-text-fill-color: var(--lt-ink-3) !important;
  opacity: 1 !important;
}

/* 40B. Bar filter (Ringkasan Total Item & halaman lain) */
html[data-gms-ui="lite"] #gmsRingkasanFilterBar,
html[data-gms-ui="lite"] .filter-ringkasan-bar,
html[data-gms-ui="lite"] .gms-fr {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-left: 4px solid var(--lt-amber) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  color: var(--lt-ink-2) !important;
  padding: var(--lt-s3) var(--lt-s4) !important;
  gap: var(--lt-s2) !important;
}
html[data-gms-ui="lite"] .gms-flabel,
html[data-gms-ui="lite"] .gms-fr label,
html[data-gms-ui="lite"] .gms-fr-label {
  color: var(--lt-ink-3) !important;
  -webkit-text-fill-color: var(--lt-ink-3) !important;
  font-family: var(--lt-font) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-filter-divider {
  background: var(--lt-line) !important;
  width: 1px !important;
}
html[data-gms-ui="lite"] .gms-btn-reset,
html[data-gms-ui="lite"] #gmsFilterReset {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-btn-reset:hover,
html[data-gms-ui="lite"] #gmsFilterReset:hover {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line-2) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}

/* 40C. Stock Opname / Cycle Count */
html[data-gms-ui="lite"] .gms-opname-summary,
html[data-gms-ui="lite"] .gms-opname,
html[data-gms-ui="lite"] .gms-opname-table {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: none !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] .gms-opname-stat {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
}
html[data-gms-ui="lite"] .gms-op-input {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line-2) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .gms-mbtn {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-family: var(--lt-font) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .gms-mbtn:hover {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line-2) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] .gms-mbtn:not(.outline):not(.danger) {
  background: var(--lt-amber) !important;
  border-color: var(--lt-amber-d) !important;
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
}
html[data-gms-ui="lite"] .gms-mbtn:not(.outline):not(.danger):hover {
  background: var(--lt-amber-d) !important;
}

/* selisih opname: makna warnanya tetap, hanya nadanya diterangkan */
html[data-gms-ui="lite"] td.var-match,
html[data-gms-ui="lite"] .var-match {
  background: var(--lt-ok-soft) !important;
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
}
html[data-gms-ui="lite"] td.var-surplus,
html[data-gms-ui="lite"] .var-surplus {
  background: var(--lt-info-soft) !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
}
html[data-gms-ui="lite"] td.var-deficit,
html[data-gms-ui="lite"] .var-deficit {
  background: var(--lt-bad-soft) !important;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
}
html[data-gms-ui="lite"] td.var-nodata,
html[data-gms-ui="lite"] .var-nodata,
html[data-gms-ui="lite"] td.var-pending,
html[data-gms-ui="lite"] .var-pending {
  background: var(--lt-surface-2) !important;
  color: var(--lt-ink-3) !important;
  -webkit-text-fill-color: var(--lt-ink-3) !important;
}

/* 40D. Master data — baris item & supplier */
html[data-gms-ui="lite"] .catalog-row,
html[data-gms-ui="lite"] .supplier-row,
html[data-gms-ui="lite"] .catalog-card,
html[data-gms-ui="lite"] .supplier-card {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] .catalog-row:hover,
html[data-gms-ui="lite"] .supplier-row:hover {
  border-color: var(--lt-line-2) !important;
  box-shadow: var(--lt-sh-2) !important;
}

/* 40E. Tombol PDF di kaki halaman ringkasan */
html[data-gms-ui="lite"] .cls-btn {
  border-radius: var(--lt-r-xs) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-family: var(--lt-font) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .cls-btn-pdf {
  background: var(--lt-amber) !important;
  background-image: none !important;
  border: 1px solid var(--lt-amber-d) !important;
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
}
html[data-gms-ui="lite"] .cls-btn-pdf:hover { background: var(--lt-amber-d) !important; }

/* 40F. Varian gelap: kembalikan permukaan gelap yang konsisten */
html[data-gms-ui="lite"][data-gms-theme="dark"] #gmsRingkasanFilterBar,
html[data-gms-ui="lite"][data-gms-theme="dark"] .filter-ringkasan-bar,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-fr,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-opname-summary,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-opname,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-opname-table,
html[data-gms-ui="lite"][data-gms-theme="dark"] .catalog-row,
html[data-gms-ui="lite"][data-gms-theme="dark"] .supplier-row {
  background: var(--lt-surface) !important;
  border-color: var(--lt-line) !important;
  color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .main-content select,
html[data-gms-ui="lite"][data-gms-theme="dark"] .main-content input:not([type="checkbox"]):not([type="radio"]),
html[data-gms-ui="lite"][data-gms-theme="dark"] .main-content textarea,
html[data-gms-ui="lite"][data-gms-theme="dark"] #crossLaneModal select,
html[data-gms-ui="lite"][data-gms-theme="dark"] #crossLaneModal input:not([type="checkbox"]):not([type="radio"]),
html[data-gms-ui="lite"][data-gms-theme="dark"] #gmsOpnameModal select,
html[data-gms-ui="lite"][data-gms-theme="dark"] #gmsOpnameModal input:not([type="checkbox"]):not([type="radio"]),
html[data-gms-ui="lite"][data-gms-theme="dark"] .modal-overlay select,
html[data-gms-ui="lite"][data-gms-theme="dark"] .modal-overlay input:not([type="checkbox"]):not([type="radio"]),
html[data-gms-ui="lite"][data-gms-theme="dark"] .modal-overlay textarea {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line-2) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-mbtn:not(.outline):not(.danger) {
  color: #0B1220 !important;
  -webkit-text-fill-color: #0B1220 !important;
}

/* ============================================================
   41. TABEL RINGKASAN TOTAL ITEM (.cls-*)
   ============================================================ */
html[data-gms-ui="lite"] .cls-table { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; }
html[data-gms-ui="lite"] .cls-table thead th {
  background: var(--lt-surface-2) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-3) !important;
  -webkit-text-fill-color: var(--lt-ink-3) !important;
  font-family: var(--lt-font) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  padding: 10px 12px !important;
}
html[data-gms-ui="lite"] .cls-table tbody td {
  background: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid var(--lt-line) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  padding: 10px 12px !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .cls-table tbody tr:hover td { background: var(--lt-surface-2) !important; }
html[data-gms-ui="lite"] .cls-no { color: var(--lt-ink-3) !important; -webkit-text-fill-color: var(--lt-ink-3) !important; font-variant-numeric: tabular-nums; }
html[data-gms-ui="lite"] .cls-item {
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  font-family: var(--lt-font) !important;
  font-weight: 700 !important;
}
html[data-gms-ui="lite"] .cls-tipe,
html[data-gms-ui="lite"] .cls-pt { color: var(--lt-ink-2) !important; -webkit-text-fill-color: var(--lt-ink-2) !important; font-family: var(--lt-mono) !important; font-size: 12px !important; }
html[data-gms-ui="lite"] .cls-total {
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  font-family: var(--lt-font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .cls-spread-badge {
  background: var(--lt-warn-soft) !important;
  border: 1px solid rgba(245, 158, 11, .32) !important;
  border-radius: var(--lt-pill) !important;
  color: #b45309 !important;
  -webkit-text-fill-color: #b45309 !important;
  font-family: var(--lt-font) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  padding: 2px 7px !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .cls-lanes { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; }
html[data-gms-ui="lite"] .cls-lane-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
  font-family: var(--lt-mono) !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .cls-lane-qty {
  background: var(--lt-navy) !important;
  border-radius: 4px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .cls-search {
  padding: 10px 14px !important;
  font-size: 13px !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .cls-item,
html[data-gms-ui="lite"][data-gms-theme="dark"] .cls-total {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .cls-lane-qty {
  background: var(--lt-amber) !important;
  color: #0B1220 !important;
  -webkit-text-fill-color: #0B1220 !important;
}

/* ============================================================
   42. SPESIFISITAS ID DI HALAMAN RINGKASAN
   gms-all memakai selector berawalan #crossLaneModal (1,2,0),
   jadi aturan lite biasa (0,2,1) kalah. Diulang dengan awalan id.
   ============================================================ */
html[data-gms-ui="lite"] #crossLaneModal .cls-table .cls-item,
html[data-gms-ui="lite"] #crossLaneModal .cls-table .cls-total,
html[data-gms-ui="lite"] #crossLaneModal .cls-stats strong,
html[data-gms-ui="lite"] #crossLaneModal .cls-header h3 {
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #crossLaneModal .cls-table .cls-item,
html[data-gms-ui="lite"][data-gms-theme="dark"] #crossLaneModal .cls-table .cls-total,
html[data-gms-ui="lite"][data-gms-theme="dark"] #crossLaneModal .cls-stats strong,
html[data-gms-ui="lite"][data-gms-theme="dark"] #crossLaneModal .cls-header h3 {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}

/* ============================================================
   43. TAG STATUS RIWAYAT (IN / OUT / SWITCH LANE)
   Maknanya tetap: hijau = masuk, merah = keluar, kuning = pindah.
   Hanya nadanya diterangkan agar terbaca di atas kartu putih.
   ============================================================ */
html[data-gms-ui="lite"] .history-tag {
  border-radius: var(--lt-pill) !important;
  font-family: var(--lt-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  padding: 3px 9px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  background-image: none !important;
}
html[data-gms-ui="lite"] .history-tag.badge-in {
  background: var(--lt-ok-soft) !important;
  border: 1px solid rgba(34, 197, 94, .3) !important;
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
}
html[data-gms-ui="lite"] .history-tag.badge-out {
  background: var(--lt-bad-soft) !important;
  border: 1px solid rgba(239, 68, 68, .3) !important;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
}
html[data-gms-ui="lite"] .history-tag.switch-lane {
  background: var(--lt-warn-soft) !important;
  border: 1px solid rgba(245, 158, 11, .32) !important;
  color: #b45309 !important;
  -webkit-text-fill-color: #b45309 !important;
}
html[data-gms-ui="lite"] .gms-fr-count { color: var(--lt-ink-3) !important; -webkit-text-fill-color: var(--lt-ink-3) !important; }
html[data-gms-ui="lite"] .cls-tab { color: var(--lt-ink-2) !important; -webkit-text-fill-color: var(--lt-ink-2) !important; }

html[data-gms-ui="lite"][data-gms-theme="dark"] .history-tag.badge-in { color: #6EE7B7 !important; -webkit-text-fill-color: #6EE7B7 !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .history-tag.badge-out { color: #FCA5A5 !important; -webkit-text-fill-color: #FCA5A5 !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .history-tag.switch-lane { color: #FCD34D !important; -webkit-text-fill-color: #FCD34D !important; }

/* ============================================================
   44. TOPBAR DIPAKU DI ATAS
   Aslinya position:sticky di dalam #appShell, jadi ikut hilang
   saat halaman digulir di dalam kontainer lain — dan halaman
   tertanam (§39) yang menyisakan ruang 60 px di atasnya jadi
   memperlihatkan isi halaman di belakangnya. Dipaku supaya
   identitas user, jam sesi, dan tombol keluar selalu terjangkau.
   ============================================================ */
html[data-gms-ui="lite"] .topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 90 !important;
  height: var(--lt-topbar) !important;
  min-height: var(--lt-topbar) !important;
}
html[data-gms-ui="lite"] body.sidebar-open .topbar { left: var(--lt-sidebar) !important; }
html[data-gms-ui="lite"] #appShell { padding-top: var(--lt-topbar) !important; }
html[data-gms-ui="lite"] #gmsSidebar { z-index: 100 !important; }

@media (max-width: 1023px) {
  html[data-gms-ui="lite"] body.sidebar-open .topbar { left: 0 !important; }
}

/* ============================================================
   45. WARNA TEKS: SATU ATURAN DASAR UNTUK SEMUA HALAMAN
   ------------------------------------------------------------
   AKAR MASALAHNYA: puluhan modul menyuntik CSS-nya sendiri dengan
   warna teks tema GELAP yang dipatok langsung (bukan token). Di
   latar terang warnanya jadi tidak terbaca, dan menambalnya satu
   per satu tidak akan pernah selesai — selalu ada halaman yang
   terlewat.

   SOLUSINYA: warna teks bawaan untuk SELURUH area konten dipatok
   ke token --lt-ink. Token itu sudah ikut tema (gelap -> terang
   otomatis), jadi SATU aturan ini benar untuk light DAN dark
   sekaligus, termasuk untuk halaman yang belum pernah dibuka.

   Spesifisitasnya sengaja dibuat serendah mungkin — semua bagian
   dibungkus :where() sehingga nilainya hanya (0,1,1) — supaya:
     - menang atas CSS modul lama (karena !important), TAPI
     - kalah dari aturan lite yang lebih spesifik di atas, yang
       memang sengaja memberi warna (judul navy, teks sekunder
       slate, angka, dsb).

   Yang DIKECUALIKAN = elemen yang warnanya membawa makna:
   chip lot & bulan, swatch/badge material, badge status, tombol,
   tautan, ikon SVG, dan seluruh komponen bawaan lite (.lt-*).
   ============================================================ */
html[data-gms-ui="lite"] :where(.main-content, #crossLaneModal, #gmsOpnameModal, .modal-overlay, .gms-addon-modal)
  :not(:where(
    svg, svg *,
    button, button *,
    a, a *,
    input, select, textarea, option,
    [class^="lt-"], [class*=" lt-"], [class^="lt-"] *, [class*=" lt-"] *,
    .lot-tag, .lot-tag *,
    .gms-lotword, .gms-lotword *,
    .gms-cs-mo, .gms-cs-mo *,
    .gms-cs-sw, .gms-cs-sw *,
    .mat-badge, .mat-badge *,
    .coil-type, .coil-type *,
    [class*="badge"], [class*="badge"] *,
    [class*="chip"], [class*="chip"] *,
    [class*="tag"], [class*="tag"] *,
    [class*="pill"], [class*="pill"] *,
    [class*="status"], [class*="status"] *,
    [class*="swatch"], [class*="dot"],
    [class*="var-"], [class*="qc-"], [class*="-ok"], [class*="-ng"]
  )) {
  color: var(--lt-ink) !important;
  text-shadow: none !important;
}

/* -webkit-text-fill-color DIWARISKAN, jadi tidak boleh dipatok pada
   aturan menyeluruh di atas — tombol & chip yang dikecualikan akan
   ikut kena lewat induknya. Yang benar: kembalikan ke currentColor
   supaya setiap elemen dicat memakai `color` miliknya sendiri.
   Aturan lite yang memang sengaja memisahkan keduanya (mis. teks
   warna material di §34) spesifisitasnya lebih tinggi, jadi menang. */
html[data-gms-ui="lite"] :where(.main-content, #crossLaneModal, #gmsOpnameModal, .modal-overlay, .gms-addon-modal) :where(*) {
  -webkit-text-fill-color: currentColor !important;
}

/* Nada sekunder tetap ada supaya hirarki tidak rata.
   Spesifisitasnya sama-sama rendah, tapi ditulis SESUDAHNYA. */
html[data-gms-ui="lite"] :where(.main-content, #crossLaneModal, #gmsOpnameModal, .modal-overlay)
  :where(label, small, figcaption, th, .meta, .sub, .subtitle, .hint, .note, .desc, .caption,
         [class*="-label"], [class*="-meta"], [class*="-sub"], [class*="-hint"], [class*="-note"]) {
  color: var(--lt-ink-2) !important;
}

/* ============================================================
   46. TABEL INVENTARIS COIL & PLAT — TAMPILAN BARU
   Mengikuti arsitektur foto referensi: kepala lane sebagai bar
   ringkas, tabel rapat dan tenang, angka rata kanan dengan angka
   tabular, kepala tabel menempel saat digulir, dan tombol aksi
   yang tidak berisik (warnanya muncul saat baris disentuh).
   ============================================================ */

/* --- kepala lane --- */
html[data-gms-ui="lite"] .lane-header {
  display: flex !important;
  align-items: center !important;
  gap: var(--lt-s3) !important;
  background: var(--lt-surface) !important;
  border-bottom: 1px solid var(--lt-line) !important;
  padding: var(--lt-s3) var(--lt-s4) !important;
}
html[data-gms-ui="lite"] .lane-title {
  font-family: var(--lt-font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}
html[data-gms-ui="lite"] .lane-count {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-pill) !important;
  color: var(--lt-ink-2) !important;
  font-family: var(--lt-mono) !important;
  font-size: 11px !important;
  padding: 2px 9px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* --- kerangka tabel --- */
html[data-gms-ui="lite"] .lane-section table,
html[data-gms-ui="lite"] #dataContainer table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  font-family: var(--lt-font) !important;
  font-size: 13px !important;
}
html[data-gms-ui="lite"] .lane-section thead th {
  background: var(--lt-surface-2) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-3) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  white-space: nowrap !important;
  padding: 9px 12px !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .lane-section tbody td {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lt-line) !important;
  padding: 9px 12px !important;
  vertical-align: middle !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .lane-section tbody tr { transition: background .14s ease !important; }
html[data-gms-ui="lite"] .lane-section tbody tr:hover td { background: var(--lt-surface-2) !important; }
html[data-gms-ui="lite"] .lane-section tbody tr:last-child td { border-bottom: 0 !important; }

/* kolom angka & kode: monospace + angka tabular, rata kanan */
html[data-gms-ui="lite"] .lane-section td.diameter-cell,
html[data-gms-ui="lite"] .lane-section td.qty-cell,
html[data-gms-ui="lite"] .lane-section td.total-cell {
  font-family: var(--lt-mono) !important;
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
  white-space: nowrap !important;
}
html[data-gms-ui="lite"] .lane-section td.supplier-cell {
  font-family: var(--lt-mono) !important;
  font-size: 12px !important;
}

/* --- aksi baris: tenang dulu, berwarna saat disentuh --- */
html[data-gms-ui="lite"] .lane-section td.actions-cell {
  text-align: right !important;
  white-space: nowrap !important;
}
html[data-gms-ui="lite"] .lane-section td.actions-cell .btn-small {
  opacity: .72 !important;
  transition: opacity .14s ease, transform .14s ease !important;
}
html[data-gms-ui="lite"] .lane-section tr:hover td.actions-cell .btn-small,
html[data-gms-ui="lite"] .lane-section td.actions-cell .btn-small:focus-visible {
  opacity: 1 !important;
}
html[data-gms-ui="lite"] .lane-section td.actions-cell .btn-small:hover { transform: translateY(-1px) !important; }

/* --- kartu lane (grid ringkasan) sedikit dirapikan --- */
html[data-gms-ui="lite"] .lt-lane-grid { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
html[data-gms-ui="lite"] .lt-lane-card { padding: 14px 16px 13px; }



/* ============================================================
   47. PEMBERSIHAN & KERANGKA HALAMAN
   ============================================================ */

/* 47A. Tab "Keseluruhan / Coil / Plat / Stok Kritis" adalah pemilih
   ringkasan DASHBOARD. Di halaman inventaris tidak ada gunanya,
   jadi hanya ditampilkan saat mode dashboard/grafik aktif.
   body.gms-nodash dipasang app.js untuk semua halaman non-dashboard. */
html[data-gms-ui="lite"] body.gms-nodash #gmsDashTabs,
html[data-gms-ui="lite"] body.gms-nodash .gms-dash-tabs {
  display: none !important;
}

/* Navigasi tab lama di atas konten sudah digantikan sidebar. */
html[data-gms-ui="lite"] .nav-tabs { display: none !important; }

/* 47B. Lebar & jarak halaman yang konsisten */
html[data-gms-ui="lite"] .main-content {
  width: 100% !important;
  max-width: 1560px !important;
  margin: 0 auto !important;
  padding: var(--lt-s5) clamp(16px, 2.4vw, 32px) var(--lt-s6) !important;
}
html[data-gms-ui="lite"] .main-content > * + * { margin-top: var(--lt-s4); }

/* 47C. Kartu KPI dashboard — mengikuti foto referensi:
   garis aksen di sisi atas, ubin ikon berwarna lembut, angka besar,
   dan baris selisih di bawahnya. */
html[data-gms-ui="lite"] .dash-card {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  padding: var(--lt-s4) !important;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease !important;
}
html[data-gms-ui="lite"] .dash-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--lt-amber);
}
html[data-gms-ui="lite"] .dash-card:nth-child(2)::before { background: var(--lt-info); }
html[data-gms-ui="lite"] .dash-card:nth-child(3)::before { background: var(--lt-ok); }
html[data-gms-ui="lite"] .dash-card:nth-child(4)::before { background: #8B5CF6; }
html[data-gms-ui="lite"] .dash-card:nth-child(5)::before { background: var(--lt-bad); }
html[data-gms-ui="lite"] .dash-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--lt-sh-2) !important;
  border-color: var(--lt-line-2) !important;
}

/* ============================================================
   48. SISTEM HALAMAN — SATU BAHASA UNTUK SEMUA LAYAR
   ------------------------------------------------------------
   Hampir semua halaman aplikasi memakai kosakata yang sama:

     .page-shell > .page-card > .page-head (.page-title/.page-subtitle)
     .history-summary > .history-pill (.lbl/.val)     -> baris KPI
     .gms-fr (.gms-fr-head/-grid/-f/-sel/-q/-reset)   -> panel filter
     .history-table / .qcdash-table                   -> tabel data
     .gms-pager (.gms-pg-btn/-dots/-info)             -> paginasi
     .qcdash-grid > .qcdash-card (.qcdash-label/-value)
     .gms-sec-title + .count                          -> judul seksi

   Menata kosakata itu SEKALI membuat Switch Lane, Riwayat In/Out,
   QC Dashboard, Favorit, Laporan, Master Data, dan Pengaturan
   ikut rapi sekaligus — mengikuti arsitektur foto referensi.
   ============================================================ */

/* --- 48A. Kerangka halaman ------------------------------------ */
html[data-gms-ui="lite"] .page-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--lt-s4) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
}
html[data-gms-ui="lite"] .page-card {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  padding: var(--lt-s4) !important;
  overflow: visible !important;
}

/* Kepala halaman: judul besar, keterangan sebaris di bawahnya,
   tombol aksi didorong ke kanan, dipisah garis rambut. */
html[data-gms-ui="lite"] .page-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: var(--lt-s3) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lt-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 var(--lt-s3) !important;
  margin: 0 0 var(--lt-s4) !important;
}
html[data-gms-ui="lite"] .page-title {
  position: relative !important;
  padding-left: 14px !important;
  color: var(--lt-navy) !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  text-shadow: none !important;
  font-family: var(--lt-font) !important;
  font-size: clamp(19px, 2.2vw, 25px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  margin: 0 !important;
}
html[data-gms-ui="lite"] .page-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 4px;
  border-radius: 2px;
  background: var(--lt-amber);
}
html[data-gms-ui="lite"] .page-subtitle {
  color: var(--lt-ink-3) !important;
  font-family: var(--lt-font) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  margin: 6px 0 0 14px !important;
  max-width: 78ch !important;
  text-transform: none !important;
}

/* --- 48B. Baris KPI (.history-summary / .history-pill) --------- */
html[data-gms-ui="lite"] .history-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)) !important;
  gap: var(--lt-s3) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 var(--lt-s4) !important;
}
html[data-gms-ui="lite"] .history-pill {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow: hidden !important;
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  padding: 13px 16px 14px !important;
  min-width: 0 !important;
  transition: box-shadow .16s ease, border-color .16s ease !important;
}
html[data-gms-ui="lite"] .history-pill::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--lt-navy);
}
html[data-gms-ui="lite"] .history-pill:nth-child(2)::before { background: var(--lt-ok); }
html[data-gms-ui="lite"] .history-pill:nth-child(3)::before { background: var(--lt-amber); }
html[data-gms-ui="lite"] .history-pill:nth-child(4)::before { background: var(--lt-info); }
html[data-gms-ui="lite"] .history-pill:nth-child(5)::before { background: var(--lt-bad); }
html[data-gms-ui="lite"] .history-pill:hover {
  border-color: var(--lt-line-2) !important;
  box-shadow: var(--lt-sh-2) !important;
}
html[data-gms-ui="lite"] .history-pill .lbl {
  color: var(--lt-ink-3) !important;
  font-family: var(--lt-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html[data-gms-ui="lite"] .history-pill .val {
  color: var(--lt-navy) !important;
  font-family: var(--lt-font) !important;
  font-size: clamp(19px, 2vw, 24px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
}

/* --- 48C. Panel filter (.gms-fr) ------------------------------ */
html[data-gms-ui="lite"] .gms-fr-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--lt-s2) !important;
  color: var(--lt-ink-3) !important;
  font-family: var(--lt-font) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: var(--lt-s2) !important;
}
html[data-gms-ui="lite"] .gms-fr-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)) !important;
  gap: var(--lt-s2) !important;
  align-items: end !important;
}
html[data-gms-ui="lite"] .gms-fr-f {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}
html[data-gms-ui="lite"] .gms-fr-sel,
html[data-gms-ui="lite"] .gms-fr-q {
  height: 36px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  width: 100% !important;
}
html[data-gms-ui="lite"] .gms-fr-qwrap { position: relative !important; }
html[data-gms-ui="lite"] .gms-fr-ic {
  color: var(--lt-ink-3) !important;
  opacity: .8 !important;
}
html[data-gms-ui="lite"] .gms-fr-reset {
  height: 36px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

/* --- 48D. Tabel data ------------------------------------------ */
html[data-gms-ui="lite"] .history-table,
html[data-gms-ui="lite"] .qcdash-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  font-family: var(--lt-font) !important;
  font-size: 12.5px !important;
}
html[data-gms-ui="lite"] .history-table thead th,
html[data-gms-ui="lite"] .qcdash-table thead th {
  background: var(--lt-surface-2) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-3) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  white-space: nowrap !important;
  padding: 9px 12px !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .history-table tbody td,
html[data-gms-ui="lite"] .qcdash-table tbody td {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lt-line) !important;
  padding: 9px 12px !important;
  vertical-align: middle !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .history-table tbody tr,
html[data-gms-ui="lite"] .qcdash-table tbody tr { transition: background .14s ease !important; }
html[data-gms-ui="lite"] .history-table tbody tr:hover td,
html[data-gms-ui="lite"] .qcdash-table tbody tr:hover td { background: var(--lt-surface-2) !important; }
html[data-gms-ui="lite"] .history-table tbody tr:last-child td,
html[data-gms-ui="lite"] .qcdash-table tbody tr:last-child td { border-bottom: 0 !important; }

html[data-gms-ui="lite"] .lot-before-cell,
html[data-gms-ui="lite"] .lot-after-cell {
  font-family: var(--lt-mono) !important;
  font-size: 11.5px !important;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .history-action-btn {
  border-radius: var(--lt-r-xs) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  opacity: .78 !important;
  transition: opacity .14s ease !important;
}
html[data-gms-ui="lite"] tr:hover .history-action-btn { opacity: 1 !important; }

/* --- 48E. Paginasi -------------------------------------------- */
html[data-gms-ui="lite"] .gms-pager {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  padding: var(--lt-s3) 0 0 !important;
  border-top: 1px solid var(--lt-line) !important;
  margin-top: var(--lt-s3) !important;
}
html[data-gms-ui="lite"] .gms-pg-btn {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 9px !important;
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink-2) !important;
  font-family: var(--lt-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: all .14s ease !important;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .gms-pg-btn:hover {
  background: var(--lt-surface-2) !important;
  border-color: var(--lt-line-2) !important;
  color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] .gms-pg-btn.active {
  background: var(--lt-navy) !important;
  border-color: var(--lt-navy) !important;
  color: #fff !important;
}
html[data-gms-ui="lite"] .gms-pg-dots { color: var(--lt-ink-3) !important; padding: 0 3px !important; }
html[data-gms-ui="lite"] .gms-pg-info {
  margin-left: auto !important;
  color: var(--lt-ink-3) !important;
  font-family: var(--lt-mono) !important;
  font-size: 11px !important;
}

/* --- 48F. Kartu statistik & badge QC -------------------------- */
html[data-gms-ui="lite"] .qcdash-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)) !important;
  gap: var(--lt-s3) !important;
}
html[data-gms-ui="lite"] .qcdash-card {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  padding: 13px 16px 14px !important;
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease !important;
}
html[data-gms-ui="lite"] .qcdash-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--lt-amber);
}
html[data-gms-ui="lite"] .qcdash-card:nth-child(2)::before { background: var(--lt-ok); }
html[data-gms-ui="lite"] .qcdash-card:nth-child(3)::before { background: var(--lt-bad); }
html[data-gms-ui="lite"] .qcdash-card:nth-child(4)::before { background: var(--lt-info); }
html[data-gms-ui="lite"] .qcdash-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--lt-line-2) !important;
  box-shadow: var(--lt-sh-2) !important;
}
html[data-gms-ui="lite"] .qcdash-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
html[data-gms-ui="lite"] .qcdash-value {
  font-size: clamp(19px, 2vw, 25px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}

html[data-gms-ui="lite"] .qc-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: var(--lt-pill) !important;
  font-family: var(--lt-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  padding: 3px 9px !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] .qc-badge.qc-ok {
  background: var(--lt-ok-soft) !important;
  border: 1px solid rgba(34, 197, 94, .3) !important;
  color: #15803d !important;
}
html[data-gms-ui="lite"] .qc-badge.qc-ng {
  background: var(--lt-bad-soft) !important;
  border: 1px solid rgba(239, 68, 68, .3) !important;
  color: #b91c1c !important;
}
html[data-gms-ui="lite"] .qc-badge.qc-hold {
  background: var(--lt-warn-soft) !important;
  border: 1px solid rgba(245, 158, 11, .32) !important;
  color: #b45309 !important;
}
html[data-gms-ui="lite"] .qc-badge.qc-unchecked {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-3) !important;
}

/* --- 48G. Judul seksi + penghitung ---------------------------- */
html[data-gms-ui="lite"] .gms-sec-title {
  display: flex !important;
  align-items: center !important;
  gap: var(--lt-s2) !important;
  color: var(--lt-navy) !important;
  font-family: var(--lt-font) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  background: none !important;
  text-shadow: none !important;
  margin: 0 0 var(--lt-s3) !important;
}
html[data-gms-ui="lite"] .gms-sec-title .count {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-pill) !important;
  color: var(--lt-ink-2) !important;
  font-family: var(--lt-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding: 1px 8px !important;
}
html[data-gms-ui="lite"] .qcdash-section,
html[data-gms-ui="lite"] .qcdash-filter-row {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  box-shadow: var(--lt-sh) !important;
  padding: var(--lt-s4) !important;
}

/* --- 48H. Bar alat halaman ------------------------------------ */
html[data-gms-ui="lite"] .history-toolbar,
html[data-gms-ui="lite"] .history-tools {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--lt-s2) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
}
html[data-gms-ui="lite"] .gms-hist-cat-ic { opacity: .85 !important; }

/* --- 48I. Gerak masuk yang tenang ----------------------------- */
html[data-gms-ui="lite"] .page-card,
html[data-gms-ui="lite"] .history-pill,
html[data-gms-ui="lite"] .qcdash-card {
  animation: gmsLiteRise .34s cubic-bezier(.2, .7, .3, 1) both;
}
html[data-gms-ui="lite"] .history-pill:nth-child(2),
html[data-gms-ui="lite"] .qcdash-card:nth-child(2) { animation-delay: .04s; }
html[data-gms-ui="lite"] .history-pill:nth-child(3),
html[data-gms-ui="lite"] .qcdash-card:nth-child(3) { animation-delay: .08s; }
html[data-gms-ui="lite"] .history-pill:nth-child(4),
html[data-gms-ui="lite"] .qcdash-card:nth-child(4) { animation-delay: .12s; }
html[data-gms-ui="lite"] .history-pill:nth-child(5),
html[data-gms-ui="lite"] .qcdash-card:nth-child(5) { animation-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] .page-card,
  html[data-gms-ui="lite"] .history-pill,
  html[data-gms-ui="lite"] .qcdash-card { animation: none !important; }
}

@media (max-width: 640px) {
  html[data-gms-ui="lite"] .page-card { padding: var(--lt-s3) !important; }
  html[data-gms-ui="lite"] .history-summary,
  html[data-gms-ui="lite"] .qcdash-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
  html[data-gms-ui="lite"] .gms-pg-info { margin-left: 0 !important; width: 100% !important; }
}

/* --- 48J. Varian gelap ---------------------------------------- */
html[data-gms-ui="lite"][data-gms-theme="dark"] .page-title,
html[data-gms-ui="lite"][data-gms-theme="dark"] .history-pill .val,
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-sec-title { color: var(--lt-ink) !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-pg-btn.active {
  background: var(--lt-amber) !important;
  border-color: var(--lt-amber-d) !important;
  color: #0B1220 !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .qc-badge.qc-ok { color: #6EE7B7 !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .qc-badge.qc-ng { color: #FCA5A5 !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .qc-badge.qc-hold { color: #FCD34D !important; }

/* ============================================================
   49. TABEL LEBAR — DIGULIR DI DALAM KARTUNYA
   Tabel Riwayat In/Out & Switch Lane punya banyak kolom; tanpa
   ini kolom paling kanan terpotong tepi kartu. Gulirnya dikurung
   di dalam .page-card supaya halaman sendiri tidak pernah
   bergeser ke samping.
   ============================================================ */
html[data-gms-ui="lite"] .page-card {
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-x: contain;
}
html[data-gms-ui="lite"] .page-card > .page-head,
html[data-gms-ui="lite"] .page-card > .history-summary,
html[data-gms-ui="lite"] .page-card > .gms-fr,
html[data-gms-ui="lite"] .page-card > .gms-pager {
  position: sticky;
  left: 0;
}
html[data-gms-ui="lite"] .history-table,
html[data-gms-ui="lite"] .qcdash-table,
html[data-gms-ui="lite"] .cls-table { min-width: max-content !important; }

/* isi sel tidak dipatahkan di tengah kode */
html[data-gms-ui="lite"] .lot-before-cell,
html[data-gms-ui="lite"] .lot-after-cell,
html[data-gms-ui="lite"] .history-table td,
html[data-gms-ui="lite"] .history-table th { white-space: nowrap !important; }
html[data-gms-ui="lite"] .history-table td.note-cell,
html[data-gms-ui="lite"] .history-table td.keterangan-cell {
  white-space: normal !important;
  max-width: 260px !important;
}

/* batang gulir yang tidak berisik */
html[data-gms-ui="lite"] .page-card::-webkit-scrollbar { height: 9px; }
html[data-gms-ui="lite"] .page-card::-webkit-scrollbar-track { background: var(--lt-surface-2); border-radius: 999px; }
html[data-gms-ui="lite"] .page-card::-webkit-scrollbar-thumb {
  background: var(--lt-line-2);
  border-radius: 999px;
  border: 2px solid var(--lt-surface-2);
}
html[data-gms-ui="lite"] .page-card:hover::-webkit-scrollbar-thumb { background: var(--lt-ink-3); }

/* ============================================================
   50. DAFTAR LANE, AKSI RINGKAS & PANEL DETAIL
   Pasangan js/gms-lite-inv.js — mengikuti foto referensi.
   ============================================================ */

/* --- 50A. Kepala "Daftar Lane X" ------------------------------ */
html[data-gms-ui="lite"] .lane-header {
  flex-wrap: wrap !important;
  gap: var(--lt-s3) !important;
}
html[data-gms-ui="lite"] .lane-header .lane-title { display: none !important; }
html[data-gms-ui="lite"] .lt-inv-title {
  flex: 1 1 240px;
  min-width: 0;
  order: -1;
}
html[data-gms-ui="lite"] .lt-inv-h1 {
  color: var(--lt-navy);
  font-family: var(--lt-font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}
html[data-gms-ui="lite"] .lt-inv-h2 {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 11.5px;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-inv-h1 { color: var(--lt-ink); }

/* --- 50B. Kolom & badge STATUS -------------------------------- */
html[data-gms-ui="lite"] th.lt-th-status {
  background: var(--lt-surface-2) !important;
  border-bottom: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-3) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  white-space: nowrap !important;
  padding: 9px 12px !important;
}
html[data-gms-ui="lite"] td.lt-td-status { white-space: nowrap !important; }
html[data-gms-ui="lite"] .lt-st {
  display: inline-block;
  border-radius: var(--lt-pill);
  font-family: var(--lt-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 3px 10px;
  text-transform: uppercase;
}
html[data-gms-ui="lite"] .lt-st.is-aman {
  background: var(--lt-ok-soft);
  border: 1px solid rgba(34, 197, 94, .3);
  color: #15803d;
}
html[data-gms-ui="lite"] .lt-st.is-kritis {
  background: var(--lt-bad-soft);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #b91c1c;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-st.is-aman { color: #6EE7B7; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-st.is-kritis { color: #FCA5A5; }

/* --- 50C. Kolom aksi ringkas ---------------------------------- */
/* Tombol asli app.js tetap ADA di DOM (dipakai sebagai sasaran
   klik oleh tombol proxy), hanya disembunyikan dari mata. */
html[data-gms-ui="lite"] td.actions-cell > .btn-small,
html[data-gms-ui="lite"] td.actions-cell > .btn-cek-lot,
html[data-gms-ui="lite"] td.actions-cell > .btn-qc {
  display: none !important;
}
html[data-gms-ui="lite"] td.actions-cell {
  display: table-cell !important;
  text-align: right !important;
  white-space: nowrap !important;
}
html[data-gms-ui="lite"] .lt-act {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
}
html[data-gms-ui="lite"] .lt-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--lt-r-xs);
  color: var(--lt-ink-3);
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
html[data-gms-ui="lite"] .lt-act-btn:hover {
  background: var(--lt-surface-2);
  border-color: var(--lt-line);
  color: var(--lt-navy);
}
html[data-gms-ui="lite"] .lt-act-btn.is-qc:hover { color: #15803d; }
html[data-gms-ui="lite"] .lt-act-btn:focus-visible {
  outline: 2px solid var(--lt-amber);
  outline-offset: 1px;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-act-btn:hover { color: var(--lt-amber); }

/* --- 50D. Menu titik-tiga ------------------------------------- */
html[data-gms-ui="lite"] .lt-menu,
.lt-menu {
  position: fixed;
  z-index: 200;
  min-width: 196px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px;
  background: var(--lt-surface, #fff);
  border: 1px solid var(--lt-line, #E2E8F0);
  border-radius: var(--lt-r, 14px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
  animation: gmsLiteMenuIn .14s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes gmsLiteMenuIn {
  from { opacity: 0; transform: translateY(-5px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.lt-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  background: transparent;
  border: 0;
  border-radius: var(--lt-r-xs, 8px);
  color: var(--lt-ink, #0F172A);
  cursor: pointer;
  font-family: var(--lt-font, system-ui);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
.lt-menu-item svg { flex: 0 0 auto; opacity: .8; }
.lt-menu-item:hover { background: var(--lt-surface-2, #F8FAFC); }
.lt-menu-item:focus-visible { outline: 2px solid var(--lt-amber, #FFC107); outline-offset: -2px; }
.lt-menu-item.is-danger { color: #b91c1c; }
.lt-menu-item.is-danger:hover { background: var(--lt-bad-soft, #FEF2F2); }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-menu-item.is-danger { color: #FCA5A5; }

/* --- 50E. Baris bisa diklik ----------------------------------- */
html[data-gms-ui="lite"] tr.lt-row { cursor: pointer; }
html[data-gms-ui="lite"] tr.lt-row.is-selected > td {
  background: var(--lt-amber-soft) !important;
}
html[data-gms-ui="lite"] tr.lt-row.is-selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--lt-amber) !important;
}

/* --- 50F. Panel detail item ----------------------------------- */
html[data-gms-ui="lite"] .lt-detail {
  display: block;
  margin: var(--lt-s4) 0 0;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-left: 4px solid var(--lt-navy);
  border-radius: var(--lt-r);
  box-shadow: var(--lt-sh-2);
  padding: var(--lt-s4);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .34s cubic-bezier(.2, .7, .3, 1), transform .34s cubic-bezier(.2, .7, .3, 1);
}
html[data-gms-ui="lite"] .lt-detail.is-open { opacity: 1; transform: none; }
html[data-gms-ui="lite"] .lt-detail[hidden] { display: none; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-detail { border-left-color: var(--lt-amber); }

html[data-gms-ui="lite"] .lt-d-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lt-s3);
  border-bottom: 1px solid var(--lt-line);
  padding-bottom: var(--lt-s3);
  margin-bottom: var(--lt-s4);
}
html[data-gms-ui="lite"] .lt-d-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lt-s2);
  color: var(--lt-navy);
  font-family: var(--lt-font);
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 800;
  letter-spacing: -.01em;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-d-title { color: var(--lt-ink); }
html[data-gms-ui="lite"] .lt-d-st {
  border-radius: var(--lt-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 3px 10px;
  text-transform: uppercase;
}
html[data-gms-ui="lite"] .lt-d-st.is-aman {
  background: var(--lt-ok-soft);
  border: 1px solid rgba(34, 197, 94, .3);
  color: #15803d;
}
html[data-gms-ui="lite"] .lt-d-st.is-kritis {
  background: var(--lt-bad-soft);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #b91c1c;
}
html[data-gms-ui="lite"] .lt-d-close {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  color: var(--lt-ink-2);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 13px;
  transition: all .14s ease;
}
html[data-gms-ui="lite"] .lt-d-close:hover {
  background: var(--lt-surface-2);
  border-color: var(--lt-line-2);
  color: var(--lt-ink);
}

html[data-gms-ui="lite"] .lt-d-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--lt-s3);
  align-items: start;
}
html[data-gms-ui="lite"] .lt-d-box {
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r);
  padding: var(--lt-s3) var(--lt-s4) var(--lt-s4);
  min-width: 0;
}
html[data-gms-ui="lite"] .lt-d-box-t {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--lt-s3);
}
html[data-gms-ui="lite"] .lt-d-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lt-s2);
  border-bottom: 1px dashed var(--lt-line);
  padding: 6px 0;
  font-family: var(--lt-font);
  font-size: 12px;
}
html[data-gms-ui="lite"] .lt-d-row:last-child { border-bottom: 0; }
html[data-gms-ui="lite"] .lt-d-row > span { color: var(--lt-ink-3); }
html[data-gms-ui="lite"] .lt-d-row > b {
  color: var(--lt-ink);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

html[data-gms-ui="lite"] .lt-d-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lt-s2);
  margin-bottom: var(--lt-s3);
}
html[data-gms-ui="lite"] .lt-d-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  padding: 9px 11px;
}
html[data-gms-ui="lite"] .lt-d-kpi > span {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
}
html[data-gms-ui="lite"] .lt-d-kpi > b {
  color: var(--lt-navy);
  font-family: var(--lt-font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-d-kpi > b { color: var(--lt-ink); }
html[data-gms-ui="lite"] .lt-d-lot,
html[data-gms-ui="lite"] .lt-d-ket {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--lt-font);
  font-size: 11.5px;
  line-height: 1.7;
}
html[data-gms-ui="lite"] .lt-d-kosong {
  color: var(--lt-ink-3);
  font-size: 11.5px;
  font-style: italic;
}

html[data-gms-ui="lite"] .lt-d-aksi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
html[data-gms-ui="lite"] .lt-d-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  color: var(--lt-ink);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 12px;
  text-align: left;
  transition: all .14s ease;
}
html[data-gms-ui="lite"] .lt-d-btn svg { flex: 0 0 auto; opacity: .75; }
html[data-gms-ui="lite"] .lt-d-btn:hover {
  background: var(--lt-surface-2);
  border-color: var(--lt-navy);
  transform: translateX(2px);
}
html[data-gms-ui="lite"] .lt-d-btn.is-danger { color: #b91c1c; }
html[data-gms-ui="lite"] .lt-d-btn.is-danger:hover {
  background: var(--lt-bad-soft);
  border-color: rgba(239, 68, 68, .35);
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-d-btn.is-danger { color: #FCA5A5; }

/* --- 50G. Kartu lane jadi karusel ----------------------------- */
html[data-gms-ui="lite"] .lt-lane-grid {
  display: flex !important;
  gap: 14px !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 2px;
}
html[data-gms-ui="lite"] .lt-lane-grid::-webkit-scrollbar { display: none; }
html[data-gms-ui="lite"] .lt-lane-card {
  flex: 0 0 clamp(200px, 22%, 260px);
  scroll-snap-align: start;
}
html[data-gms-ui="lite"] .lt-lanes-hint::after {
  content: " · geser otomatis tiap 3 detik";
  opacity: .75;
}

@media (max-width: 640px) {
  html[data-gms-ui="lite"] .lt-lane-card { flex: 0 0 76%; }
  html[data-gms-ui="lite"] .lt-d-stat { grid-template-columns: 1fr; }
  html[data-gms-ui="lite"] .lt-lanes-hint::after { content: ""; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] .lt-lane-grid { scroll-behavior: auto; }
  html[data-gms-ui="lite"] .lt-detail { transition: none; }
  .lt-menu { animation: none; }
}

/* ============================================================
   51. KEPALA HALAMAN INVENTARIS — breadcrumb, judul, kartu KPI
   Pasangan js/gms-lite-inv.js, mengikuti foto arsitektur.
   ============================================================ */
html[data-gms-ui="lite"] .lt-top {
  display: block;
  margin: 0 0 var(--lt-s4);
}
html[data-gms-ui="lite"] .lt-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 11.5px;
  margin-bottom: var(--lt-s3);
}
html[data-gms-ui="lite"] .lt-crumb i { font-style: normal; opacity: .45; }
html[data-gms-ui="lite"] .lt-crumb b { color: var(--lt-ink); font-weight: 700; }

html[data-gms-ui="lite"] .lt-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lt-s3);
  margin-bottom: var(--lt-s4);
}
html[data-gms-ui="lite"] .lt-h1 {
  color: var(--lt-navy);
  font-family: var(--lt-font);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0;
}
html[data-gms-ui="lite"] .lt-h1s {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 12.5px;
  margin: 6px 0 0;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-h1 { color: var(--lt-ink); }

html[data-gms-ui="lite"] .lt-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: var(--lt-s3);
}
html[data-gms-ui="lite"] .lt-kpi {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r);
  box-shadow: var(--lt-sh);
  padding: 14px 16px 15px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  animation: gmsLiteRise .34s cubic-bezier(.2, .7, .3, 1) both;
}
html[data-gms-ui="lite"] .lt-kpi:nth-child(2) { animation-delay: .04s; }
html[data-gms-ui="lite"] .lt-kpi:nth-child(3) { animation-delay: .08s; }
html[data-gms-ui="lite"] .lt-kpi:nth-child(4) { animation-delay: .12s; }
html[data-gms-ui="lite"] .lt-kpi:nth-child(5) { animation-delay: .16s; }
html[data-gms-ui="lite"] .lt-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
}
html[data-gms-ui="lite"] .lt-kpi.is-amber::before { background: var(--lt-amber); }
html[data-gms-ui="lite"] .lt-kpi.is-info::before { background: var(--lt-info); }
html[data-gms-ui="lite"] .lt-kpi.is-ok::before { background: var(--lt-ok); }
html[data-gms-ui="lite"] .lt-kpi.is-ungu::before { background: #8B5CF6; }
html[data-gms-ui="lite"] .lt-kpi.is-bad::before { background: var(--lt-bad); }
html[data-gms-ui="lite"] .lt-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--lt-line-2);
  box-shadow: var(--lt-sh-2);
}
html[data-gms-ui="lite"] .lt-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lt-s2);
}
html[data-gms-ui="lite"] .lt-kpi-l {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html[data-gms-ui="lite"] .lt-kpi-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex: 0 0 auto;
}
html[data-gms-ui="lite"] .lt-kpi.is-amber .lt-kpi-ic { background: var(--lt-amber-soft); color: #92700a; }
html[data-gms-ui="lite"] .lt-kpi.is-info .lt-kpi-ic { background: var(--lt-info-soft); color: #1d4ed8; }
html[data-gms-ui="lite"] .lt-kpi.is-ok .lt-kpi-ic { background: var(--lt-ok-soft); color: #15803d; }
html[data-gms-ui="lite"] .lt-kpi.is-ungu .lt-kpi-ic { background: #F5F3FF; color: #6D28D9; }
html[data-gms-ui="lite"] .lt-kpi.is-bad .lt-kpi-ic { background: var(--lt-bad-soft); color: #b91c1c; }
html[data-gms-ui="lite"] .lt-kpi-v {
  color: var(--lt-navy);
  font-family: var(--lt-font);
  font-size: clamp(21px, 2.3vw, 28px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-kpi-v { color: var(--lt-ink); }
html[data-gms-ui="lite"] .lt-kpi-n {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 11px;
}

/* ============================================================
   52. TOMBOL GESER MANUAL PADA KARUSEL LANE
   ============================================================ */
html[data-gms-ui="lite"] .lt-kar-wrap { position: relative; }
html[data-gms-ui="lite"] .lt-kar-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: 50%;
  box-shadow: var(--lt-sh-2);
  color: var(--lt-navy);
  cursor: pointer;
  opacity: .92;
  transition: background .14s ease, color .14s ease, opacity .14s ease, transform .14s ease;
}
html[data-gms-ui="lite"] .lt-kar-btn.is-kiri { left: -6px; }
html[data-gms-ui="lite"] .lt-kar-btn.is-kanan { right: -6px; }
html[data-gms-ui="lite"] .lt-kar-btn:hover {
  background: var(--lt-navy);
  color: #fff;
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
}
html[data-gms-ui="lite"] .lt-kar-btn:focus-visible {
  outline: 2px solid var(--lt-amber);
  outline-offset: 2px;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-kar-btn { color: var(--lt-amber); }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-kar-btn:hover {
  background: var(--lt-amber);
  color: #0B1220;
}
@media (max-width: 640px) {
  html[data-gms-ui="lite"] .lt-kar-btn { width: 32px; height: 32px; }
  html[data-gms-ui="lite"] .lt-kar-btn.is-kiri { left: -4px; }
  html[data-gms-ui="lite"] .lt-kar-btn.is-kanan { right: -4px; }
}

/* ============================================================
   53. ANIMASI GESER SAAT GANTI HALAMAN TABEL
   ============================================================ */
@keyframes gmsLitePageSlide {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: none; }
}
html[data-gms-ui="lite"] tbody.lt-slide > tr {
  animation: gmsLitePageSlide .32s cubic-bezier(.2, .7, .3, 1) both;
}
html[data-gms-ui="lite"] tbody.lt-slide > tr:nth-child(1) { animation-delay: 0s; }
html[data-gms-ui="lite"] tbody.lt-slide > tr:nth-child(2) { animation-delay: .022s; }
html[data-gms-ui="lite"] tbody.lt-slide > tr:nth-child(3) { animation-delay: .044s; }
html[data-gms-ui="lite"] tbody.lt-slide > tr:nth-child(4) { animation-delay: .066s; }
html[data-gms-ui="lite"] tbody.lt-slide > tr:nth-child(5) { animation-delay: .088s; }
html[data-gms-ui="lite"] tbody.lt-slide > tr:nth-child(6) { animation-delay: .11s; }
html[data-gms-ui="lite"] tbody.lt-slide > tr:nth-child(7) { animation-delay: .132s; }
html[data-gms-ui="lite"] tbody.lt-slide > tr:nth-child(8) { animation-delay: .154s; }
html[data-gms-ui="lite"] tbody.lt-slide > tr:nth-child(9) { animation-delay: .176s; }
html[data-gms-ui="lite"] tbody.lt-slide > tr:nth-child(n+10) { animation-delay: .198s; }

/* ============================================================
   54. PANEL DETAIL — bagian tambahan (histori, rincian lot, kaki)
   ============================================================ */
html[data-gms-ui="lite"] .lt-d-kpi.is-ok > b { color: #15803d; }
html[data-gms-ui="lite"] .lt-d-kpi.is-warn > b { color: #b45309; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-d-kpi.is-ok > b { color: #6EE7B7; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-d-kpi.is-warn > b { color: #FCD34D; }

html[data-gms-ui="lite"] .lt-d-lots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--lt-s3);
}
html[data-gms-ui="lite"] .lt-d-lotrow {
  display: grid;
  grid-template-columns: 92px 1fr 42px;
  align-items: center;
  gap: 8px;
  font-family: var(--lt-font);
  font-size: 11px;
}
html[data-gms-ui="lite"] .lt-d-lotrow > span { color: var(--lt-ink-3); }
html[data-gms-ui="lite"] .lt-d-lotrow > i {
  display: block;
  height: 6px;
  min-width: 4px;
  border-radius: var(--lt-pill);
  background: var(--lt-navy);
  transition: width .4s cubic-bezier(.2, .7, .3, 1);
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-d-lotrow > i { background: var(--lt-amber); }
html[data-gms-ui="lite"] .lt-d-lotrow > b {
  color: var(--lt-ink);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .lt-d-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lt-s2);
  border-top: 1px dashed var(--lt-line);
  padding-top: 9px;
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

html[data-gms-ui="lite"] .lt-d-box.is-his { max-height: 260px; overflow-y: auto; }
html[data-gms-ui="lite"] .lt-d-his {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  border-left: 3px solid var(--lt-line-2);
  padding: 7px 0 7px 10px;
  margin-bottom: 7px;
}
html[data-gms-ui="lite"] .lt-d-his.is-in { border-left-color: var(--lt-ok); }
html[data-gms-ui="lite"] .lt-d-his.is-out { border-left-color: var(--lt-bad); }
html[data-gms-ui="lite"] .lt-d-his.is-edit { border-left-color: var(--lt-amber); }
html[data-gms-ui="lite"] .lt-d-his-k {
  color: var(--lt-ink);
  font-family: var(--lt-font);
  font-size: 12px;
  font-weight: 700;
}
html[data-gms-ui="lite"] .lt-d-his-t {
  grid-column: 1 / -1;
  color: var(--lt-ink-3);
  font-family: var(--lt-mono);
  font-size: 10.5px;
}
html[data-gms-ui="lite"] .lt-d-his-q {
  color: var(--lt-ink-2);
  font-family: var(--lt-font);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .lt-d-his.is-in .lt-d-his-q { color: #15803d; }
html[data-gms-ui="lite"] .lt-d-his.is-out .lt-d-his-q { color: #b91c1c; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-d-his.is-in .lt-d-his-q { color: #6EE7B7; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-d-his.is-out .lt-d-his-q { color: #FCA5A5; }

html[data-gms-ui="lite"] .lt-d-lotchip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px dashed var(--lt-line);
  margin-top: 10px;
  padding-top: 10px;
}

/* kaki: Aksi Cepat mendatar, sesuai foto */
html[data-gms-ui="lite"] .lt-d-foot {
  border-top: 1px solid var(--lt-line);
  margin-top: var(--lt-s4);
  padding-top: var(--lt-s3);
}
html[data-gms-ui="lite"] .lt-d-foot-t {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--lt-s3);
}
html[data-gms-ui="lite"] .lt-d-aksi {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)) !important;
  gap: 8px !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] tbody.lt-slide > tr { animation: none !important; }
  html[data-gms-ui="lite"] .lt-kpi { animation: none !important; }
  html[data-gms-ui="lite"] .lt-d-lotrow > i { transition: none; }
}

/* ============================================================
   55. AKSI KEPALA HALAMAN, BARIS TAB, & KARTU "LIHAT SEMUA LANE"
   Semua tombol di sini MENDELEGASIKAN ke tombol asli app.js.
   ============================================================ */
html[data-gms-ui="lite"] .lt-head-act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
html[data-gms-ui="lite"] .lt-hbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 15px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  box-shadow: var(--lt-sh);
  color: var(--lt-ink-2);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: all .14s ease;
}
html[data-gms-ui="lite"] .lt-hbtn svg { opacity: .75; }
html[data-gms-ui="lite"] .lt-hbtn:hover {
  background: var(--lt-surface-2);
  border-color: var(--lt-line-2);
  color: var(--lt-ink);
  transform: translateY(-1px);
}
html[data-gms-ui="lite"] .lt-hbtn.is-primary {
  background: var(--lt-amber);
  border-color: var(--lt-amber-d);
  color: var(--lt-navy);
}
html[data-gms-ui="lite"] .lt-hbtn.is-primary svg { opacity: 1; }
html[data-gms-ui="lite"] .lt-hbtn.is-primary:hover { background: var(--lt-amber-d); color: var(--lt-navy); }
html[data-gms-ui="lite"] .lt-hbtn:focus-visible { outline: 2px solid var(--lt-amber); outline-offset: 2px; }

html[data-gms-ui="lite"] .lt-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lt-s3);
  border-bottom: 1px solid var(--lt-line);
  margin-top: var(--lt-s4);
}
html[data-gms-ui="lite"] .lt-tabs-l { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
html[data-gms-ui="lite"] .lt-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--lt-ink-3);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 14px;
  transition: color .14s ease, border-color .14s ease;
}
html[data-gms-ui="lite"] .lt-tab:hover { color: var(--lt-ink); }
html[data-gms-ui="lite"] .lt-tab.is-on {
  color: var(--lt-navy);
  border-bottom-color: var(--lt-amber);
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-tab.is-on { color: var(--lt-ink); }
html[data-gms-ui="lite"] .lt-refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 0;
  color: var(--lt-ink-3);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 11.5px;
  font-weight: 600;
  padding: 8px 4px;
  transition: color .14s ease;
}
html[data-gms-ui="lite"] .lt-refresh:hover { color: var(--lt-navy); }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-refresh:hover { color: var(--lt-amber); }

/* Saringan tampilan "Stok Kritis": HANYA menyembunyikan baris
   non-kritis. Baris yang sudah disembunyikan paginasi app.js
   tetap tersembunyi — tidak ada aturan yang saling menimpa. */
html[data-gms-ui="lite"] body.lt-kritis-only #dataContainer tbody tr:not(.critical-stock-row):not(.critical-high):not(.critical-ultra) {
  display: none !important;
}

html[data-gms-ui="lite"] .lt-lane-all {
  flex: 0 0 132px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--lt-surface);
  border: 1px dashed var(--lt-line-2);
  border-radius: var(--lt-r);
  color: var(--lt-navy);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  padding: var(--lt-s3);
  transition: all .16s ease;
}
html[data-gms-ui="lite"] .lt-lane-all:hover {
  background: var(--lt-surface-2);
  border-color: var(--lt-navy);
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: var(--lt-sh-2);
}
html[data-gms-ui="lite"] .lt-lane-all-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--lt-amber-soft);
  border-radius: 50%;
  color: #92700a;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-lane-all { color: var(--lt-ink); }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-lane-all:hover { border-color: var(--lt-amber); }

@media (max-width: 640px) {
  html[data-gms-ui="lite"] .lt-head-act { width: 100%; }
  html[data-gms-ui="lite"] .lt-hbtn { flex: 1 1 auto; justify-content: center; }
  html[data-gms-ui="lite"] .lt-lane-all { flex: 0 0 118px; }
}

/* ============================================================
   56. PERBAIKAN LANJUTAN (28 Agu 2026)
   ============================================================ */

/* --- 56A. Tag "STOK KRITIS" di kolom Keterangan dibuang ------
   Informasinya sudah diwakili kolom STATUS, jadi tidak perlu
   diulang. Elemennya tetap ada di DOM (dipasang app.js). */
html[data-gms-ui="lite"] #dataContainer .critical-inline-tag,
html[data-gms-ui="lite"] .lane-section .critical-inline-tag {
  display: none !important;
}

/* --- 56B. Skala status stok --------------------------------- */
html[data-gms-ui="lite"] .lt-st.is-sangat,
html[data-gms-ui="lite"] .lt-d-st.is-sangat {
  background: #7F1D1D !important;
  border: 1px solid #7F1D1D !important;
  color: #fff !important;
}
html[data-gms-ui="lite"] .lt-st.is-menipis,
html[data-gms-ui="lite"] .lt-d-st.is-menipis {
  background: var(--lt-warn-soft) !important;
  border: 1px solid rgba(245, 158, 11, .34) !important;
  color: #b45309 !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-st.is-menipis,
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-d-st.is-menipis { color: #FCD34D !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-st.is-sangat,
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-d-st.is-sangat {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
  color: #fff !important;
}

/* --- 56C. Penanda FIFO --------------------------------------- */
html[data-gms-ui="lite"] .lt-fifo,
html[data-gms-ui="lite"] .lt-lane-fifo {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  background: var(--lt-navy);
  border-radius: var(--lt-pill);
  color: var(--lt-amber);
  font-family: var(--lt-font);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .16em;
  padding: 3px 9px;
  white-space: nowrap;
  animation: gmsLiteFifo 1.8s ease-in-out infinite;
}
@keyframes gmsLiteFifo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, .5); }
  50% { box-shadow: 0 0 0 5px rgba(255, 193, 7, 0); }
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-fifo,
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-lane-fifo {
  background: var(--lt-amber);
  color: #0B1220;
}
@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] .lt-fifo,
  html[data-gms-ui="lite"] .lt-lane-fifo { animation: none; }
}

/* --- 56D. Mode "Stok Kritis": pager sendiri ------------------ */
html[data-gms-ui="lite"] body.lt-kritis-only #dataContainer tbody tr.lt-krit-show {
  display: table-row !important;
}
html[data-gms-ui="lite"] body.lt-kritis-only #dataContainer tbody tr.lt-krit-hide,
html[data-gms-ui="lite"] body.lt-kritis-only #dataContainer tbody tr:not(.lt-krit-show):not(.lt-krit-hide) {
  display: none !important;
}
/* pager bawaan app.js disembunyikan selama mode ini aktif */
html[data-gms-ui="lite"] body.lt-kritis-only #dataContainer .gms-lane-pager,
html[data-gms-ui="lite"] body.lt-kritis-only #dataContainer .lane-header .gms-pager {
  display: none !important;
}
html[data-gms-ui="lite"] .lt-krit-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lt-s2);
  border-top: 1px solid var(--lt-line);
  padding: var(--lt-s3) var(--lt-s4);
}
html[data-gms-ui="lite"] .lt-krit-info {
  color: var(--lt-ink-3);
  font-family: var(--lt-mono);
  font-size: 11px;
}
html[data-gms-ui="lite"] .lt-krit-btns { display: flex; gap: 4px; flex-wrap: wrap; }
html[data-gms-ui="lite"] .lt-krit-b {
  min-width: 30px;
  height: 30px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  color: var(--lt-ink-2);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 12px;
  font-weight: 700;
  transition: all .14s ease;
}
html[data-gms-ui="lite"] .lt-krit-b:hover { background: var(--lt-surface-2); color: var(--lt-ink); }
html[data-gms-ui="lite"] .lt-krit-b.is-on {
  background: var(--lt-navy);
  border-color: var(--lt-navy);
  color: #fff;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-krit-b.is-on {
  background: var(--lt-amber);
  border-color: var(--lt-amber-d);
  color: #0B1220;
}

/* --- 56E. Tombol yang dibuang dari bar filter (tanda biru) ---
   Sudah ada padanannya di kepala halaman, jadi tidak diulang.
   Elemennya tetap di DOM sebagai sasaran klik tombol kepala. */
html[data-gms-ui="lite"] #exportSummaryGroup,
html[data-gms-ui="lite"] #filtersBar #btnExportPdf,
html[data-gms-ui="lite"] #filtersBar #btnManageLane,
html[data-gms-ui="lite"] .filters-bar #btnExportPdf,
html[data-gms-ui="lite"] .filters-bar #btnManageLane {
  display: none !important;
}

/* --- 56F. Tombol tema gelap/terang --------------------------- */
html[data-gms-ui="lite"] .gms-theme-toggle,
html[data-gms-ui="lite"] #gmsThemeToggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
  box-shadow: none !important;
  color: var(--lt-ink-2) !important;
  cursor: pointer !important;
  font-size: 0 !important;
  overflow: hidden !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease !important;
}
html[data-gms-ui="lite"] .gms-theme-toggle svg,
html[data-gms-ui="lite"] #gmsThemeToggle svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  opacity: 1 !important;
}
html[data-gms-ui="lite"] .gms-theme-toggle:hover,
html[data-gms-ui="lite"] #gmsThemeToggle:hover {
  background: var(--lt-navy) !important;
  border-color: var(--lt-navy) !important;
  color: var(--lt-amber) !important;
  transform: rotate(-18deg) !important;
}
html[data-gms-ui="lite"] .gms-theme-toggle:focus-visible,
html[data-gms-ui="lite"] #gmsThemeToggle:focus-visible {
  outline: 2px solid var(--lt-amber) !important;
  outline-offset: 2px !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-theme-toggle,
html[data-gms-ui="lite"][data-gms-theme="dark"] #gmsThemeToggle {
  color: var(--lt-amber) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-theme-toggle:hover,
html[data-gms-ui="lite"][data-gms-theme="dark"] #gmsThemeToggle:hover {
  background: var(--lt-amber) !important;
  border-color: var(--lt-amber) !important;
  color: #0B1220 !important;
}

/* --- 56G. TIPE COIL / TIPE PLAT selalu terbaca ---------------
   Aturan lama memberi teks putih di atas latar sangat transparan
   -> hilang di mode terang. Di sini warnanya dipatok tegas ke
   token yang IKUT tema, jadi satu aturan benar untuk light dan
   dark sekaligus. Diberi bobot id agar menang atas gms-all. */
html[data-gms-ui="lite"] #dataContainer .coil-type,
html[data-gms-ui="lite"] #dataContainer .coil-type.s2d,
html[data-gms-ui="lite"] .lane-section .coil-type,
html[data-gms-ui="lite"] .lane-section .coil-type.s2d,
html[data-gms-ui="lite"] .lt-d-row .coil-type {
  display: inline-block !important;
  background: var(--lt-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line-2) !important;
  border-radius: var(--lt-r-xs) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  font-family: var(--lt-font) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 2px 8px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}
/* 1S2D / 2S2D tetap dibedakan, tapi lewat garis tepi kuning —
   bukan warna teks yang bisa hilang di salah satu tema. */
html[data-gms-ui="lite"] #dataContainer .coil-type.s2d,
html[data-gms-ui="lite"] .lane-section .coil-type.s2d {
  border-color: var(--lt-amber-d) !important;
  box-shadow: inset 2px 0 0 var(--lt-amber) !important;
}

/* --- 56H. Modal Export PDF di mode terang -------------------- */
/* Panel "Expand Ukuran LOT di PDF" disuntik js/color-board.js
   dengan warna inline bawaan tema gelap. Karena inline TANPA
   !important, aturan ber-!important di sini menang telak. */
html[data-gms-ui="lite"] #exportPdfModal .modal-box,
html[data-gms-ui="lite"] #exportPdfModal .modal-content,
html[data-gms-ui="lite"] #gms-pdf-exp {
  background: var(--lt-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r) !important;
  color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] #gms-pdf-exp {
  padding: var(--lt-s3) var(--lt-s4) !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] #gms-pdf-exp,
html[data-gms-ui="lite"] #gms-pdf-exp * {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] #gms-pdf-exp label > span:nth-child(2),
html[data-gms-ui="lite"] #gms-pdf-exp > label {
  color: var(--lt-navy) !important;
  -webkit-text-fill-color: var(--lt-navy) !important;
}
html[data-gms-ui="lite"] #gms-pdf-exp input[type="number"] {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line-2) !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"] #gpe-st {
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
}
/* baris centang di modal export: latar terang, teks gelap */
html[data-gms-ui="lite"] #exportPdfModal .modal-field,
html[data-gms-ui="lite"] #exportPdfModal .modal-check,
html[data-gms-ui="lite"] #exportPdfModal label {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  text-shadow: none !important;
}
html[data-gms-ui="lite"] #exportPdfModal .modal-field {
  background: var(--lt-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-xs) !important;
}
html[data-gms-ui="lite"] #exportPdfModal .modal-grid > .modal-field.full > label { font-weight: 700 !important; }

html[data-gms-ui="lite"][data-gms-theme="dark"] #gms-pdf-exp,
html[data-gms-ui="lite"][data-gms-theme="dark"] #gms-pdf-exp *,
html[data-gms-ui="lite"][data-gms-theme="dark"] #exportPdfModal .modal-field,
html[data-gms-ui="lite"][data-gms-theme="dark"] #exportPdfModal label {
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #gms-pdf-exp label > span:nth-child(2) {
  color: var(--lt-amber) !important;
  -webkit-text-fill-color: var(--lt-amber) !important;
}

/* --- 56I. Tabel riwayat: berhenti saling menimpa -------------
   AKAR MASALAH: aturan lama memaksa `white-space: nowrap` pada
   SEMUA sel, sementara sel LOT BEFORE / LOT AFTER berisi banyak
   chip. Isinya meluber keluar sel dan menindih kolom sebelahnya.
   Perbaikannya: sel lot boleh membungkus, punya lebar minimum,
   dan isinya ditata sebagai flex-wrap. */
html[data-gms-ui="lite"] .history-table td,
html[data-gms-ui="lite"] .history-table th {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: top !important;
}
html[data-gms-ui="lite"] .history-table .lot-before-cell,
html[data-gms-ui="lite"] .history-table .lot-after-cell {
  display: table-cell !important;
  white-space: normal !important;
  word-break: break-word !important;
  min-width: 210px !important;
  max-width: 320px !important;
  line-height: 1.75 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
html[data-gms-ui="lite"] .history-table .lot-before-cell > *,
html[data-gms-ui="lite"] .history-table .lot-after-cell > * {
  position: static !important;
  float: none !important;
  transform: none !important;
  max-width: 100% !important;
}
html[data-gms-ui="lite"] .history-table .lot-before-cell .lot-tag,
html[data-gms-ui="lite"] .history-table .lot-after-cell .lot-tag,
html[data-gms-ui="lite"] .history-table .lot-before-cell .gms-lotword,
html[data-gms-ui="lite"] .history-table .lot-after-cell .gms-lotword {
  display: inline-block !important;
  margin: 1px 3px 1px 0 !important;
  vertical-align: middle !important;
}
/* kolom sempit tetap satu baris supaya tabel enak dibaca */
html[data-gms-ui="lite"] .history-table td.qty-cell,
html[data-gms-ui="lite"] .history-table td.no-cell,
html[data-gms-ui="lite"] .history-table td.time-cell {
  white-space: nowrap !important;
}

























@media (max-width: 640px) {
  html[data-gms-ui="lite"] .history-table .lot-before-cell,
  html[data-gms-ui="lite"] .history-table .lot-after-cell { min-width: 160px !important; }
}

/* ============================================================
   57. DASHBOARD & GRAFIK
   Pasangan js/gms-lite-dash.js. Panel dari foto arsitektur
   dikelompokkan ke lima tab supaya tidak menumpuk satu layar.
   ============================================================ */

html[data-gms-ui="lite"] .lt-dash { display: block; margin: 0 0 var(--lt-s5); }
html[data-gms-ui="lite"] .lt-dash[hidden] { display: none; }

/* --- tab pemilih panel --------------------------------------- */
html[data-gms-ui="lite"] .lt-dtabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-pill);
  box-shadow: var(--lt-sh);
  padding: 5px;
  margin: var(--lt-s4) 0;
  width: fit-content;
  max-width: 100%;
}
html[data-gms-ui="lite"] .lt-dtab {
  background: transparent;
  border: 0;
  border-radius: var(--lt-pill);
  color: var(--lt-ink-3);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 17px;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
html[data-gms-ui="lite"] .lt-dtab:hover { background: var(--lt-surface-2); color: var(--lt-ink); }
html[data-gms-ui="lite"] .lt-dtab.is-on {
  background: var(--lt-navy);
  color: #fff;
  box-shadow: var(--lt-sh);
}
html[data-gms-ui="lite"] .lt-dtab:focus-visible { outline: 2px solid var(--lt-amber); outline-offset: 2px; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-dtab.is-on {
  background: var(--lt-amber);
  color: #0B1220;
}

/* --- kisi panel ---------------------------------------------- */
html[data-gms-ui="lite"] .lt-dgrid {
  display: grid;
  /* proporsi mengikuti foto arsitektur: grafik lebih lebar,
     donat paling sempit, daftar di kanan sedang */
  grid-template-columns: 1.35fr 1fr 1.15fr;
  gap: var(--lt-s4);
  align-items: start;
}
html[data-gms-ui="lite"] .lt-dc {
  display: flex;
  flex-direction: column;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r);
  box-shadow: var(--lt-sh);
  min-width: 0;
  overflow: hidden;
  animation: gmsLiteRise .34s cubic-bezier(.2, .7, .3, 1) both;
}
html[data-gms-ui="lite"] .lt-dc.is-wide { grid-column: span 2; }
html[data-gms-ui="lite"] .lt-dc.is-full { grid-column: 1 / -1; }
html[data-gms-ui="lite"] .lt-dc-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lt-s2);
  border-bottom: 1px solid var(--lt-line);
  padding: 14px 18px;
}
html[data-gms-ui="lite"] .lt-dc-h h3 {
  color: var(--lt-navy);
  font-family: var(--lt-font);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-dc-h h3 { color: var(--lt-ink); }
html[data-gms-ui="lite"] .lt-dc-a { color: var(--lt-ink-3); font-size: 11.5px; font-weight: 600; }
html[data-gms-ui="lite"] .lt-dc-b { padding: 16px 18px 18px; flex: 1 1 auto; min-width: 0; }
html[data-gms-ui="lite"] .lt-kosong {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 12px;
  margin: 0;
  padding: var(--lt-s4) 0;
  text-align: center;
}

/* --- warna seri grafik --------------------------------------- */
html[data-gms-ui="lite"] .lt-c-coil { color: #2563EB; }
html[data-gms-ui="lite"] .lt-c-plat { color: #16A34A; }
html[data-gms-ui="lite"] .lt-c-biru { color: #2563EB; }
html[data-gms-ui="lite"] .lt-c-hijau { color: #16A34A; }
html[data-gms-ui="lite"] .lt-c-kuning { color: #D9A100; }
html[data-gms-ui="lite"] .lt-c-ungu { color: #7C3AED; }
html[data-gms-ui="lite"] .lt-c-abu { color: #64748B; }
html[data-gms-ui="lite"] .lt-c-merah { color: #DC2626; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-c-coil,
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-c-biru { color: #60A5FA; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-c-plat,
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-c-hijau { color: #4ADE80; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-c-kuning { color: #FCD34D; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-c-ungu { color: #A78BFA; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-c-merah { color: #F87171; }

/* --- grafik SVG ---------------------------------------------- */
html[data-gms-ui="lite"] .lt-g { display: block; width: 100%; height: 210px; }
html[data-gms-ui="lite"] .lt-g-grid { stroke: var(--lt-line); stroke-width: 1; }
html[data-gms-ui="lite"] .lt-g-ax {
  fill: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 10px;
}
html[data-gms-ui="lite"] .lt-g-b { font-weight: 700; fill: var(--lt-ink-2); }
html[data-gms-ui="lite"] .lt-g-line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
html[data-gms-ui="lite"] .lt-g-dot { fill: currentColor; stroke: var(--lt-surface); stroke-width: 1.6; }
html[data-gms-ui="lite"] .lt-g-bar { fill: currentColor; }

html[data-gms-ui="lite"] .lt-legrow { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
html[data-gms-ui="lite"] .lt-lg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--lt-ink-2);
  font-family: var(--lt-font);
  font-size: 11.5px;
  font-weight: 600;
}
html[data-gms-ui="lite"] .lt-lg::before {
  content: "";
  width: 11px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

html[data-gms-ui="lite"] .lt-donatwrap {
  display: flex;
  align-items: center;
  gap: var(--lt-s4);
  flex-wrap: wrap;
}
html[data-gms-ui="lite"] .lt-donat { width: 150px; height: 150px; flex: 0 0 auto; }
html[data-gms-ui="lite"] .lt-donat-a {
  fill: var(--lt-navy);
  font-family: var(--lt-font);
  font-size: 24px;
  font-weight: 800;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-donat-a { fill: var(--lt-ink); }
html[data-gms-ui="lite"] .lt-donat-b { fill: var(--lt-ink-3); font-family: var(--lt-font); font-size: 10px; }

html[data-gms-ui="lite"] .lt-leg { list-style: none; margin: 0; padding: 0; flex: 1 1 150px; min-width: 0; }
html[data-gms-ui="lite"] .lt-leg li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lt-font);
  font-size: 11.5px;
  padding: 4px 0;
}
html[data-gms-ui="lite"] .lt-leg i {
  width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
html[data-gms-ui="lite"] .lt-leg span { color: var(--lt-ink-2); flex: 1 1 auto; min-width: 0; }
html[data-gms-ui="lite"] .lt-leg b { color: var(--lt-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-gms-ui="lite"] .lt-leg em { color: var(--lt-ink-3); font-style: normal; font-size: 10.5px; }

/* --- tabel bar dalam panel ----------------------------------- */
html[data-gms-ui="lite"] .lt-dt { width: 100%; border-collapse: collapse; font-family: var(--lt-font); }
html[data-gms-ui="lite"] .lt-dt th {
  color: var(--lt-ink-3);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--lt-line);
}
html[data-gms-ui="lite"] .lt-dt td {
  color: var(--lt-ink);
  font-size: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--lt-line);
}
html[data-gms-ui="lite"] .lt-dt tbody tr:last-child td { border-bottom: 0; }
html[data-gms-ui="lite"] .lt-dt .lt-dt-n { text-align: left; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-gms-ui="lite"] .lt-dt .lt-dt-p {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 118px;
}
html[data-gms-ui="lite"] .lt-dt .lt-dt-p i {
  display: block;
  height: 6px;
  min-width: 3px;
  max-width: 74px;
  border-radius: var(--lt-pill);
  background: var(--lt-navy);
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-dt .lt-dt-p i { background: var(--lt-amber); }
html[data-gms-ui="lite"] .lt-dt .lt-dt-p b {
  color: var(--lt-ink-2);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .lt-dt tfoot td {
  border-top: 1px solid var(--lt-line);
  border-bottom: 0;
  color: var(--lt-navy);
  font-weight: 800;
  padding-top: 11px;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-dt tfoot td { color: var(--lt-ink); }

/* --- daftar stok kritis -------------------------------------- */
html[data-gms-ui="lite"] .lt-krit { list-style: none; margin: 0 0 var(--lt-s3); padding: 0; }
html[data-gms-ui="lite"] .lt-krit li {
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--lt-line);
  padding: 10px 0;
}
html[data-gms-ui="lite"] .lt-krit li:last-child { border-bottom: 0; }
html[data-gms-ui="lite"] .lt-krit-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-radius: 9px;
  color: var(--lt-ink-3);
}
html[data-gms-ui="lite"] .lt-krit-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html[data-gms-ui="lite"] .lt-krit-t b {
  color: var(--lt-ink);
  font-family: var(--lt-font);
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-gms-ui="lite"] .lt-krit-t i {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}
html[data-gms-ui="lite"] .lt-krit-q {
  color: #b91c1c;
  font-family: var(--lt-font);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-krit-q { color: #FCA5A5; }

/* --- aktivitas ----------------------------------------------- */
html[data-gms-ui="lite"] .lt-ak { list-style: none; margin: 0; padding: 0; }
html[data-gms-ui="lite"] .lt-ak li {
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--lt-line);
  padding: 10px 0;
}
html[data-gms-ui="lite"] .lt-ak li:last-child { border-bottom: 0; }
html[data-gms-ui="lite"] .lt-ak-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 50%;
}
html[data-gms-ui="lite"] .lt-ak li.is-in .lt-ak-ic { background: var(--lt-ok-soft); color: #15803d; }
html[data-gms-ui="lite"] .lt-ak li.is-out .lt-ak-ic { background: var(--lt-bad-soft); color: #b91c1c; }
html[data-gms-ui="lite"] .lt-ak li.is-edit .lt-ak-ic { background: var(--lt-amber-soft); color: #92700a; }
html[data-gms-ui="lite"] .lt-ak-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html[data-gms-ui="lite"] .lt-ak-t b {
  color: var(--lt-ink);
  font-family: var(--lt-font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-gms-ui="lite"] .lt-ak-t i {
  color: var(--lt-ink-3);
  font-family: var(--lt-mono);
  font-size: 10.5px;
  font-style: normal;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-gms-ui="lite"] .lt-ak-q {
  font-family: var(--lt-font);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .lt-ak li.is-in .lt-ak-q { color: #15803d; }
html[data-gms-ui="lite"] .lt-ak li.is-out .lt-ak-q { color: #b91c1c; }
html[data-gms-ui="lite"] .lt-ak li.is-edit .lt-ak-q { color: var(--lt-ink-3); }

/* --- ringkasan in/out ---------------------------------------- */
html[data-gms-ui="lite"] .lt-io { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lt-s3); margin-bottom: var(--lt-s3); }
html[data-gms-ui="lite"] .lt-io-c {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  padding: 12px 14px;
}
html[data-gms-ui="lite"] .lt-io-c.is-in { background: var(--lt-ok-soft); border-color: rgba(34, 197, 94, .28); }
html[data-gms-ui="lite"] .lt-io-c.is-out { background: var(--lt-bad-soft); border-color: rgba(239, 68, 68, .28); }
html[data-gms-ui="lite"] .lt-io-c span {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--lt-font);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html[data-gms-ui="lite"] .lt-io-c.is-in span { color: #15803d; }
html[data-gms-ui="lite"] .lt-io-c.is-out span { color: #b91c1c; }
html[data-gms-ui="lite"] .lt-io-c b {
  color: var(--lt-ink);
  font-family: var(--lt-font);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"] .lt-io-c i { color: var(--lt-ink-3); font-family: var(--lt-font); font-size: 10.5px; font-style: normal; }

/* --- ringkasan keseluruhan ----------------------------------- */
html[data-gms-ui="lite"] .lt-ring { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
html[data-gms-ui="lite"] .lt-ring > div {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  padding: 11px 13px;
}
html[data-gms-ui="lite"] .lt-ring span {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html[data-gms-ui="lite"] .lt-ring b {
  color: var(--lt-navy);
  font-family: var(--lt-font);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-ring b { color: var(--lt-ink); }

/* --- notifikasi ---------------------------------------------- */
html[data-gms-ui="lite"] .lt-notif { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--lt-s3); }
html[data-gms-ui="lite"] .lt-notif-c {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-left: 3px solid var(--lt-line-2);
  border-radius: var(--lt-r-xs);
  padding: 13px 15px;
}
html[data-gms-ui="lite"] .lt-notif-c.is-bad { border-left-color: var(--lt-bad); }
html[data-gms-ui="lite"] .lt-notif-c.is-warn { border-left-color: var(--lt-warn); }
html[data-gms-ui="lite"] .lt-notif-c.is-info { border-left-color: var(--lt-info); }
html[data-gms-ui="lite"] .lt-notif-c.is-ok { border-left-color: var(--lt-ok); }
html[data-gms-ui="lite"] .lt-notif-ic { display: inline-flex; }
html[data-gms-ui="lite"] .lt-notif-c.is-bad .lt-notif-ic { color: #b91c1c; }
html[data-gms-ui="lite"] .lt-notif-c.is-warn .lt-notif-ic { color: #b45309; }
html[data-gms-ui="lite"] .lt-notif-c.is-info .lt-notif-ic { color: #1d4ed8; }
html[data-gms-ui="lite"] .lt-notif-c.is-ok .lt-notif-ic { color: #15803d; }
html[data-gms-ui="lite"] .lt-notif-c b { color: var(--lt-ink); font-family: var(--lt-font); font-size: 12.5px; font-weight: 800; }
html[data-gms-ui="lite"] .lt-notif-c i { color: var(--lt-ink-3); font-family: var(--lt-font); font-size: 11px; font-style: normal; line-height: 1.5; }

/* --- tab "Panel Penuh" --------------------------------------- */
html[data-gms-ui="lite"] .lt-penuh-nota {
  display: flex; align-items: center; gap: 10px;
  grid-column: 1 / -1;
  background: var(--lt-info-soft);
  border: 1px solid rgba(37, 99, 235, .22);
  border-radius: var(--lt-r);
  color: #1d4ed8;
  font-family: var(--lt-font);
  font-size: 12.5px;
  font-weight: 600;
  padding: 13px 17px;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-penuh-nota { color: #93C5FD; }
/* dashboard bawaan app.js hanya tampil di tab "Panel Penuh" */
html[data-gms-ui="lite"] body.gms-chartmode #dashboardPanel { display: none !important; }
html[data-gms-ui="lite"] body.gms-chartmode.lt-dash-penuh #dashboardPanel { display: block !important; }

@media (max-width: 1200px) {
  html[data-gms-ui="lite"] .lt-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-gms-ui="lite"] .lt-dc.is-wide { grid-column: span 2; }
}
@media (max-width: 760px) {
  html[data-gms-ui="lite"] .lt-dgrid { grid-template-columns: minmax(0, 1fr); }
  html[data-gms-ui="lite"] .lt-dc.is-wide { grid-column: span 1; }
  html[data-gms-ui="lite"] .lt-io,
  html[data-gms-ui="lite"] .lt-ring { grid-template-columns: 1fr; }
  html[data-gms-ui="lite"] .lt-dtabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] .lt-dc { animation: none !important; }
}

/* Tab bawaan dashboard app.js (Keseluruhan / Coil / Plat / Stok Kritis)
   hanya relevan untuk panel bawaan, jadi ikut tab "Panel Penuh". */
html[data-gms-ui="lite"] body.gms-chartmode #gmsDashTabs { display: none !important; }
html[data-gms-ui="lite"] body.gms-chartmode.lt-dash-penuh #gmsDashTabs { display: flex !important; }

/* ============================================================
   58. DASHBOARD: KONTROL PERIODE, PAGINASI PANEL, DETAIL KRITIS
   ============================================================ */

/* Tab bawaan app.js (Keseluruhan / Coil / Plat / Stok Kritis)
   TIDAK dipakai lagi di menu Dashboard & Grafik. */
html[data-gms-ui="lite"] body.gms-chartmode #gmsDashTabs,
html[data-gms-ui="lite"] body.gms-chartmode.lt-dash-penuh #gmsDashTabs {
  display: none !important;
}

html[data-gms-ui="lite"] .lt-dbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lt-s3);
  margin: var(--lt-s4) 0;
}
html[data-gms-ui="lite"] .lt-dtabs { margin: 0; }

/* kontrol periode */
html[data-gms-ui="lite"] .lt-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-pill);
  box-shadow: var(--lt-sh);
  padding: 5px 5px 5px 14px;
}
html[data-gms-ui="lite"] .lt-seg-l {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-right: 6px;
}
html[data-gms-ui="lite"] .lt-segb {
  background: transparent;
  border: 0;
  border-radius: var(--lt-pill);
  color: var(--lt-ink-3);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  transition: background .14s ease, color .14s ease;
}
html[data-gms-ui="lite"] .lt-segb:hover { background: var(--lt-surface-2); color: var(--lt-ink); }
html[data-gms-ui="lite"] .lt-segb.is-on { background: var(--lt-amber); color: var(--lt-navy); }
html[data-gms-ui="lite"] .lt-segb:focus-visible { outline: 2px solid var(--lt-navy); outline-offset: 2px; }
html[data-gms-ui="lite"] .lt-per {
  margin-left: auto;
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* paginasi di dalam panel */
html[data-gms-ui="lite"] .lt-pgbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lt-s2);
  border-top: 1px solid var(--lt-line);
  margin-top: var(--lt-s3);
  padding-top: var(--lt-s3);
  color: var(--lt-ink-3);
  font-family: var(--lt-mono);
  font-size: 10.5px;
}
html[data-gms-ui="lite"] .lt-pgb { display: flex; gap: 4px; flex-wrap: wrap; }
html[data-gms-ui="lite"] .lt-pg {
  min-width: 26px;
  height: 26px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: 7px;
  color: var(--lt-ink-2);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 11px;
  font-weight: 700;
  transition: all .14s ease;
}
html[data-gms-ui="lite"] .lt-pg:hover { background: var(--lt-surface-2); color: var(--lt-ink); }
html[data-gms-ui="lite"] .lt-pg.is-on {
  background: var(--lt-navy);
  border-color: var(--lt-navy);
  color: #fff;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-pg.is-on {
  background: var(--lt-amber);
  border-color: var(--lt-amber-d);
  color: #0B1220;
}

/* legenda memakai badge material standar */
html[data-gms-ui="lite"] .lt-leg li .mat-badge { flex: 1 1 auto; min-width: 0; }

/* stok kritis: detail lengkap */
html[data-gms-ui="lite"] .lt-krit-t b {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  white-space: normal;
}
html[data-gms-ui="lite"] .lt-krit-d,
html[data-gms-ui="lite"] .lt-krit-s,
html[data-gms-ui="lite"] .lt-krit-c {
  font-family: var(--lt-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--lt-ink-2);
}
html[data-gms-ui="lite"] .lt-krit-c {
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  padding: 1px 7px;
  font-size: 10px;
}

/* ============================================================
   59. TAMPILAN DESKTOP DIPERTAHANKAN LEBIH LAMA
   Sebelumnya kisi dashboard jatuh ke satu kolom terlalu cepat,
   sehingga di layar sedang tampilannya seperti aplikasi ponsel.
   Sekarang: tetap tiga kolom sampai 1180 px, dua kolom sampai
   860 px, dan panel yang isinya lebar digulir DI DALAM kartunya
   supaya kolomnya tidak runtuh.
   ============================================================ */
html[data-gms-ui="lite"] .lt-dgrid { grid-template-columns: 1.35fr 1fr 1.15fr; }
@media (max-width: 1180px) {
  html[data-gms-ui="lite"] .lt-dgrid { grid-template-columns: 1.2fr 1fr; }
  html[data-gms-ui="lite"] .lt-dc.is-wide,
  html[data-gms-ui="lite"] .lt-dc.is-full { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  html[data-gms-ui="lite"] .lt-dgrid { grid-template-columns: minmax(0, 1fr); }
}
html[data-gms-ui="lite"] .lt-dc-b { overflow-x: auto; }
html[data-gms-ui="lite"] .lt-dt { min-width: 280px; }
html[data-gms-ui="lite"] .lt-g { min-height: 190px; }
/* donat + legenda tetap bersanding, tidak menumpuk terlalu dini */
@media (min-width: 500px) {
  html[data-gms-ui="lite"] .lt-donatwrap { flex-wrap: nowrap; }
}

/* ============================================================
   60. PENGINGAT TIM PER KATEGORI
   Pasangan js/gms-lite-pengingat.js.
   ============================================================ */
html[data-gms-ui="lite"] .lt-pg-wrap {
  display: block;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-left: 4px solid var(--lt-amber);
  border-radius: var(--lt-r);
  box-shadow: var(--lt-sh);
  padding: var(--lt-s4);
  margin: 0 0 var(--lt-s4);
}
html[data-gms-ui="lite"] .lt-pg-wrap[hidden] { display: none; }

html[data-gms-ui="lite"] .lt-pg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lt-s3);
  margin-bottom: var(--lt-s3);
}
html[data-gms-ui="lite"] .lt-pg-h1 {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--lt-navy);
  font-family: var(--lt-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-pg-h1 { color: var(--lt-ink); }
html[data-gms-ui="lite"] .lt-pg-h1 em {
  background: var(--lt-amber-soft);
  border: 1px solid rgba(217, 161, 0, .3);
  border-radius: var(--lt-pill);
  color: #92700a;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  padding: 2px 9px;
  text-transform: none;
}
html[data-gms-ui="lite"] .lt-pg-tools { display: flex; align-items: center; gap: 6px; }
html[data-gms-ui="lite"] .lt-pg-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: 50%;
  color: var(--lt-ink-2);
  cursor: pointer;
  transition: all .14s ease;
}
html[data-gms-ui="lite"] .lt-pg-nav:hover { background: var(--lt-navy); border-color: var(--lt-navy); color: #fff; }
html[data-gms-ui="lite"] .lt-pg-add {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px;
  background: var(--lt-amber);
  border: 1px solid var(--lt-amber-d);
  border-radius: var(--lt-r-xs);
  color: var(--lt-navy);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 12px;
  font-weight: 700;
  padding: 0 13px;
  white-space: nowrap;
  transition: background .14s ease;
}
html[data-gms-ui="lite"] .lt-pg-add:hover { background: var(--lt-amber-d); }

html[data-gms-ui="lite"] .lt-pg-rel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 2px;
}
html[data-gms-ui="lite"] .lt-pg-rel::-webkit-scrollbar { display: none; }

html[data-gms-ui="lite"] .lt-pg-card {
  flex: 0 0 clamp(280px, 32%, 400px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-left: 3px solid var(--lt-line-2);
  border-radius: var(--lt-r);
  padding: 14px 16px 13px;
  min-width: 0;
  transition: box-shadow .16s ease, border-color .16s ease;
}
html[data-gms-ui="lite"] .lt-pg-card:hover { box-shadow: var(--lt-sh-2); }
html[data-gms-ui="lite"] .lt-pg-card.is-aktif { border-left-color: var(--lt-ok); }
html[data-gms-ui="lite"] .lt-pg-card.is-dekat { border-left-color: var(--lt-warn); }
html[data-gms-ui="lite"] .lt-pg-card.is-lewat,
html[data-gms-ui="lite"] .lt-pg-card.is-habis { border-left-color: var(--lt-bad); }
html[data-gms-ui="lite"] .lt-pg-card.is-selesai { border-left-color: var(--lt-ink-3); opacity: .72; }

html[data-gms-ui="lite"] .lt-pg-top { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
html[data-gms-ui="lite"] .lt-pg-kat {
  border-radius: var(--lt-r-xs);
  font-family: var(--lt-font);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 3px 9px;
  text-transform: uppercase;
}
html[data-gms-ui="lite"] .lt-pg-kat.is-coil {
  background: var(--lt-info-soft); border: 1px solid rgba(37, 99, 235, .26); color: #1d4ed8;
}
html[data-gms-ui="lite"] .lt-pg-kat.is-plat {
  background: #F5F3FF; border: 1px solid rgba(124, 58, 237, .26); color: #6D28D9;
}
html[data-gms-ui="lite"] .lt-pg-lane {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--lt-ink-2);
  font-family: var(--lt-mono);
  font-size: 10.5px;
  font-weight: 600;
}
html[data-gms-ui="lite"] .lt-pg-st {
  margin-left: auto;
  border-radius: var(--lt-pill);
  font-family: var(--lt-font);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 3px 9px;
  text-transform: uppercase;
}
html[data-gms-ui="lite"] .lt-pg-st.is-aktif { background: var(--lt-ok-soft); color: #15803d; }
html[data-gms-ui="lite"] .lt-pg-st.is-dekat { background: var(--lt-warn-soft); color: #b45309; }
html[data-gms-ui="lite"] .lt-pg-st.is-lewat,
html[data-gms-ui="lite"] .lt-pg-st.is-habis { background: var(--lt-bad-soft); color: #b91c1c; }
html[data-gms-ui="lite"] .lt-pg-st.is-selesai { background: var(--lt-surface); border: 1px solid var(--lt-line); color: var(--lt-ink-3); }

html[data-gms-ui="lite"] .lt-pg-j {
  color: var(--lt-ink);
  font-family: var(--lt-font);
  font-size: 13px;
  font-weight: 800;
  margin: 0;
}
html[data-gms-ui="lite"] .lt-pg-n {
  color: var(--lt-ink-2);
  font-family: var(--lt-font);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  max-height: 84px;
  overflow-y: auto;
  white-space: pre-line;
}
html[data-gms-ui="lite"] .lt-pg-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  padding: 8px 10px;
  color: var(--lt-ink-2);
  font-family: var(--lt-mono);
  font-size: 10.5px;
  line-height: 1.5;
}
html[data-gms-ui="lite"] .lt-pg-item svg { flex: 0 0 auto; margin-top: 2px; opacity: .7; }
html[data-gms-ui="lite"] .lt-pg-item span { flex: 1 1 auto; min-width: 0; }
html[data-gms-ui="lite"] .lt-pg-item b {
  flex: 0 0 auto;
  color: #15803d;
  font-family: var(--lt-font);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}
html[data-gms-ui="lite"] .lt-pg-item b.is-habis { color: #b91c1c; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-pg-item b { color: #6EE7B7; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-pg-item b.is-habis { color: #FCA5A5; }

html[data-gms-ui="lite"] .lt-pg-bot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  border-top: 1px dashed var(--lt-line);
  padding-top: 9px;
}
html[data-gms-ui="lite"] .lt-pg-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 10.5px;
  font-weight: 600;
}
html[data-gms-ui="lite"] .lt-pg-meta.is-due { color: var(--lt-ink-2); }

html[data-gms-ui="lite"] .lt-pg-act { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-gms-ui="lite"] .lt-pg-b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  justify-content: center;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  color: var(--lt-ink-2);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 11px;
  font-weight: 700;
  padding: 7px 10px;
  transition: all .14s ease;
}
html[data-gms-ui="lite"] .lt-pg-b:hover { background: var(--lt-navy); border-color: var(--lt-navy); color: #fff; }
html[data-gms-ui="lite"] .lt-pg-b.is-danger { color: #b91c1c; }
html[data-gms-ui="lite"] .lt-pg-b.is-danger:hover { background: var(--lt-bad); border-color: var(--lt-bad); color: #fff; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-pg-b:hover { background: var(--lt-amber); border-color: var(--lt-amber); color: #0B1220; }

html[data-gms-ui="lite"] .lt-pg-kosong {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 12.5px;
  margin: 0;
  padding: var(--lt-s4) 0;
  text-align: center;
}

@media (max-width: 760px) {
  html[data-gms-ui="lite"] .lt-pg-card { flex: 0 0 86%; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] .lt-pg-rel { scroll-behavior: auto; }
}

/* ============================================================
   61. UKURAN KONTROL: DESKTOP, BUKAN APLIKASI PONSEL
   Tombol dan tab dibuat serapat aplikasi web desktop — tinggi
   28-32 px, teks 11.5-12.5 px — bukan tombol besar bergaya
   aplikasi Android.
   ============================================================ */
html[data-gms-ui="lite"] .lt-dtabs {
  padding: 4px;
  gap: 3px;
  border-radius: 9px;
}
html[data-gms-ui="lite"] .lt-dtab {
  border-radius: 7px;
  font-size: 12px;
  padding: 6px 13px;
}
html[data-gms-ui="lite"] .lt-seg {
  padding: 4px 4px 4px 11px;
  border-radius: 9px;
}
html[data-gms-ui="lite"] .lt-segb {
  border-radius: 7px;
  font-size: 11.5px;
  padding: 5px 11px;
}
html[data-gms-ui="lite"] .lt-seg-l { font-size: 9.5px; margin-right: 4px; }
html[data-gms-ui="lite"] .lt-hbtn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 7px;
}
html[data-gms-ui="lite"] .lt-tab { font-size: 12px; padding: 8px 12px; }
html[data-gms-ui="lite"] .lt-refresh { font-size: 11px; }
html[data-gms-ui="lite"] .lt-dc-h { padding: 11px 15px; }
html[data-gms-ui="lite"] .lt-dc-h h3 { font-size: 12.5px; }
html[data-gms-ui="lite"] .lt-dc-b { padding: 13px 15px 15px; }
html[data-gms-ui="lite"] .lt-kpi { padding: 11px 14px 12px; }
html[data-gms-ui="lite"] .lt-kpi-ic { width: 27px; height: 27px; border-radius: 8px; }

/* ============================================================
   62. PAGINASI BERJENDELA + PERGANTIAN HALAMAN TANPA KEDIP
   ============================================================ */
html[data-gms-ui="lite"] .lt-pgbar {
  gap: 10px;
  padding-top: 11px;
  margin-top: 11px;
  font-size: 10px;
}
html[data-gms-ui="lite"] .lt-pgb { gap: 3px; align-items: center; }
html[data-gms-ui="lite"] .lt-pg {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11px;
}
html[data-gms-ui="lite"] .lt-pg.is-nav {
  padding: 0 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--lt-ink-3);
}
html[data-gms-ui="lite"] .lt-pg.is-nav:hover { color: var(--lt-navy); }
html[data-gms-ui="lite"] .lt-pg[disabled] {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
html[data-gms-ui="lite"] .lt-pg-el {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 11px;
  padding: 0 2px;
  user-select: none;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-pg.is-nav:hover { color: var(--lt-amber); }

/* ------------------------------------------------------------
   Geser halaman pada panel berpaginasi.
   Saat ganti halaman, kartu lain DIBUNGKAM animasinya (.is-diam)
   supaya yang terlihat benar-benar geseran, bukan semua kartu
   berkedip bersamaan.
   ------------------------------------------------------------ */
@keyframes gmsGeserKanan {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: none; }
}
@keyframes gmsGeserKiri {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: none; }
}
html[data-gms-ui="lite"] .lt-dgrid.is-diam > .lt-dc { animation: none !important; }
html[data-gms-ui="lite"] .lt-dc-b.lt-geser-kanan {
  animation: gmsGeserKanan .34s cubic-bezier(.22, .68, .3, 1) both;
}
html[data-gms-ui="lite"] .lt-dc-b.lt-geser-kiri {
  animation: gmsGeserKiri .34s cubic-bezier(.22, .68, .3, 1) both;
}
/* isi panel tidak boleh meluber saat sedang bergeser */
html[data-gms-ui="lite"] .lt-dc { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] .lt-dc-b.lt-geser-kanan,
  html[data-gms-ui="lite"] .lt-dc-b.lt-geser-kiri { animation: none !important; }
}

/* ============================================================
   63. TABEL TOP MASUK / KELUAR
   ============================================================ */
html[data-gms-ui="lite"] .lt-dt-gerak td { vertical-align: middle; }
html[data-gms-ui="lite"] .lt-gk-n {
  display: inline-block;
  margin-left: 7px;
  color: var(--lt-ink-2);
  font-family: var(--lt-mono);
  font-size: 11px;
}
html[data-gms-ui="lite"] .lt-gk-in { color: #15803d !important; }
html[data-gms-ui="lite"] .lt-gk-out { color: #b91c1c !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-gk-in { color: #6EE7B7 !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-gk-out { color: #FCA5A5 !important; }
html[data-gms-ui="lite"] .lt-gk-bar {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  min-width: 96px;
}
html[data-gms-ui="lite"] .lt-gk-bar i {
  display: block;
  height: 5px;
  min-width: 2px;
  border-radius: var(--lt-pill);
}
html[data-gms-ui="lite"] .lt-gk-bar i.is-in { background: var(--lt-ok); }
html[data-gms-ui="lite"] .lt-gk-bar i.is-out { background: var(--lt-bad); }

/* ============================================================
   64. PENGINGAT TIM — SATU KARTU SATU LAYAR PENUH
   Teks catatan tidak boleh terpotong, jadi kartunya selebar
   panel dan tinggi mengikuti isinya.
   ============================================================ */
html[data-gms-ui="lite"] .lt-pg-rel {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
html[data-gms-ui="lite"] .lt-pg-rel::-webkit-scrollbar { display: none; }
html[data-gms-ui="lite"] .lt-pg-card {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas:
    "top   top"
    "judul judul"
    "nota  item"
    "kaki  kaki"
    "hak   hak"
    "aksi  aksi";
  align-content: start;
  gap: 11px 18px;
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-left: 3px solid var(--lt-line-2);
  border-radius: var(--lt-r);
  padding: 15px 18px 16px;
  min-width: 0;
}
html[data-gms-ui="lite"] .lt-pg-top { grid-area: top; }
html[data-gms-ui="lite"] .lt-pg-j { grid-area: judul; }
html[data-gms-ui="lite"] .lt-pg-n { grid-area: nota; }
html[data-gms-ui="lite"] .lt-pg-item { grid-area: item; }
html[data-gms-ui="lite"] .lt-pg-bot { grid-area: kaki; }
html[data-gms-ui="lite"] .lt-pg-hak { grid-area: hak; }
html[data-gms-ui="lite"] .lt-pg-act { grid-area: aksi; }

/* catatan TAMPIL PENUH — tidak ada potongan, tidak ada gulir */
html[data-gms-ui="lite"] .lt-pg-n {
  max-height: none !important;
  overflow: visible !important;
  color: var(--lt-ink-2);
  font-family: var(--lt-font);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-line;
  word-break: break-word;
}
html[data-gms-ui="lite"] .lt-pg-j { font-size: 14px; line-height: 1.35; }

html[data-gms-ui="lite"] .lt-pg-item {
  display: block;
  align-self: start;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  padding: 10px 12px 11px;
}
html[data-gms-ui="lite"] .lt-pg-item.is-teks {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
html[data-gms-ui="lite"] .lt-pg-item-h {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px dashed var(--lt-line);
  padding-bottom: 8px;
  margin-bottom: 8px;
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html[data-gms-ui="lite"] .lt-pg-item-h b {
  margin-left: auto;
  color: #15803d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
html[data-gms-ui="lite"] .lt-pg-item-h b.is-habis { color: #b91c1c; }
html[data-gms-ui="lite"] .lt-pg-item-h b.is-hilang { color: var(--lt-ink-3); font-weight: 600; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-pg-item-h b { color: #6EE7B7; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-pg-item-h b.is-habis { color: #FCA5A5; }
html[data-gms-ui="lite"] .lt-pg-item-b {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 7px 14px;
}
html[data-gms-ui="lite"] .lt-pg-item-b > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--lt-ink);
  font-family: var(--lt-mono);
  font-size: 11.5px;
  min-width: 0;
  word-break: break-word;
}
html[data-gms-ui="lite"] .lt-pg-item-b i {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html[data-gms-ui="lite"] .lt-pg-hak {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--lt-surface);
  border: 1px dashed var(--lt-line-2);
  border-radius: var(--lt-r-xs);
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 10.5px;
  margin: 0;
  padding: 7px 10px;
}
html[data-gms-ui="lite"] .lt-pg-act { justify-content: flex-start; }
html[data-gms-ui="lite"] .lt-pg-b {
  flex: 0 0 auto;
  font-size: 11.5px;
  padding: 6px 13px;
  border-radius: 7px;
}
html[data-gms-ui="lite"] .lt-pg-add { height: 30px; font-size: 11.5px; padding: 0 12px; border-radius: 7px; }
html[data-gms-ui="lite"] .lt-pg-nav { width: 28px; height: 28px; }

html[data-gms-ui="lite"] .lt-pg-dots { display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; }
html[data-gms-ui="lite"] .lt-pg-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  background: var(--lt-line-2);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .16s ease, width .16s ease;
}
html[data-gms-ui="lite"] .lt-pg-dot.is-on { width: 18px; border-radius: 4px; background: var(--lt-navy); }
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-pg-dot.is-on { background: var(--lt-amber); }

@media (max-width: 900px) {
  html[data-gms-ui="lite"] .lt-pg-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "judul" "nota" "item" "kaki" "hak" "aksi";
  }
}

/* ============================================================
   65. PEMILIH ITEM DI MODAL PENGINGAT
   ============================================================ */
html[data-gms-ui="lite"] .lt-taut {
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  margin-top: 8px;
  padding: 10px 12px 11px;
}
html[data-gms-ui="lite"] .lt-taut-h {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: var(--lt-ink) !important;
  font-family: var(--lt-font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin: 0 !important;
}
html[data-gms-ui="lite"] .lt-taut-h input { width: 14px; height: 14px; accent-color: var(--lt-amber); }
html[data-gms-ui="lite"] .lt-taut-body { margin-top: 10px; }
html[data-gms-ui="lite"] .lt-taut-body[hidden] { display: none; }
html[data-gms-ui="lite"] .lt-taut-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 9px;
}
html[data-gms-ui="lite"] .lt-taut-row label,
html[data-gms-ui="lite"] .lt-taut-lbl {
  display: block;
  color: var(--lt-ink-3) !important;
  font-family: var(--lt-font);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
html[data-gms-ui="lite"] .lt-taut-row select {
  display: block;
  width: 100%;
  height: 30px;
  margin-top: 4px;
  font-size: 12px;
}
html[data-gms-ui="lite"] .lt-taut-lot { margin-top: 10px; }
html[data-gms-ui="lite"] .lt-taut-lots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 96px;
  overflow-y: auto;
}
html[data-gms-ui="lite"] .lt-taut-lotc {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: 6px;
  color: var(--lt-ink) !important;
  cursor: pointer;
  font-family: var(--lt-mono);
  font-size: 10.5px;
  margin: 0 !important;
  padding: 4px 8px;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html[data-gms-ui="lite"] .lt-taut-lotc input { width: 12px; height: 12px; accent-color: var(--lt-amber); }
html[data-gms-ui="lite"] .lt-taut-info,
html[data-gms-ui="lite"] .lt-taut-kosong {
  color: var(--lt-ink-3) !important;
  font-family: var(--lt-font);
  font-size: 10.5px;
  line-height: 1.5;
  margin: 9px 0 0;
}

/* pesan singkat dari modul pengingat */
.lt-pg-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 300;
  background: #0B1D33;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .28);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 15px;
  animation: gmsToastMasuk .2s ease both;
}
.lt-pg-toast.is-ok { background: #15803d; }
.lt-pg-toast.is-bad { background: #b91c1c; }
@keyframes gmsToastMasuk {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] .lt-pg-rel { scroll-behavior: auto; }
}

/* ============================================================
   66. PEMBERITAHUAN MASTER DATA & JAM REALTIME
   Pasangan js/gms-lite-notif.js.
   ============================================================ */

/* Banner master data TIDAK lagi melayang menutupi layar. */
html[data-gms-ui="lite"] #gms-ms-bar {
  display: none !important;
}
/* Di halaman Master Data banner tampil sebagai baris pertama. */
html[data-gms-ui="lite"] #gms-ms-bar.lt-ms-inline {
  display: flex !important;
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  max-width: none !important;
  width: 100% !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--lt-info-soft) !important;
  background-image: none !important;
  border: 1px solid rgba(37, 99, 235, .26) !important;
  border-radius: var(--lt-r-xs) !important;
  box-shadow: none !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  font-family: var(--lt-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 9px 13px !important;
  margin: 0 0 var(--lt-s3) !important;
}
html[data-gms-ui="lite"] #gms-ms-bar.lt-ms-inline b {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
html[data-gms-ui="lite"] #gms-ms-bar.lt-ms-inline .gms-ms-ic { display: inline-flex !important; opacity: .8; }
html[data-gms-ui="lite"] #gms-ms-bar.lt-ms-inline button {
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  font-family: var(--lt-font) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
html[data-gms-ui="lite"] #gms-ms-bar.lt-ms-inline .gms-ms-ok {
  margin-left: auto !important;
  background: var(--lt-navy) !important;
  border: 1px solid var(--lt-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html[data-gms-ui="lite"] #gms-ms-bar.lt-ms-inline .gms-ms-no {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-2) !important;
  -webkit-text-fill-color: var(--lt-ink-2) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #gms-ms-bar.lt-ms-inline {
  color: #93C5FD !important;
  -webkit-text-fill-color: #93C5FD !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #gms-ms-bar.lt-ms-inline .gms-ms-ok {
  background: var(--lt-amber) !important;
  border-color: var(--lt-amber-d) !important;
  color: #0B1220 !important;
  -webkit-text-fill-color: #0B1220 !important;
}

/* Selagi ada pemberitahuan yang belum dibuka, menu Master Data
   di sidebar diberi titik supaya sinyalnya tidak hilang. */
html[data-gms-ui="lite"] body.lt-ms-ada #gmsSidebar .sb-item[data-route="material"] .lbl::after,
html[data-gms-ui="lite"] body.lt-ms-ada #gmsSidebar .sb-item[data-route="supplier"] .lbl::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--lt-amber);
  vertical-align: middle;
}

/* Jam realtime hanya di paling atas Dashboard & Grafik, tidak
   mengikuti ke setiap menu. */
html[data-gms-ui="lite"] #gmsDashHero { display: none !important; }
html[data-gms-ui="lite"] body.gms-chartmode #gmsDashHero {
  display: flex !important;
  margin-bottom: var(--lt-s3) !important;
}

/* ============================================================
   67. PENGATUR GESER OTOMATIS KARTU LANE
   ============================================================ */
html[data-gms-ui="lite"] .lt-lanes-atur {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: var(--lt-s3);
}
html[data-gms-ui="lite"] .lt-lanes-atur > span {
  color: var(--lt-ink-3);
  font-family: var(--lt-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
html[data-gms-ui="lite"] .lt-lanes-sel {
  height: 26px !important;
  min-width: 92px;
  padding: 0 8px !important;
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: 6px !important;
  color: var(--lt-ink) !important;
  -webkit-text-fill-color: var(--lt-ink) !important;
  cursor: pointer;
  font-family: var(--lt-font) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}
html[data-gms-ui="lite"] .lt-lanes-sel:hover { border-color: var(--lt-line-2) !important; }
html[data-gms-ui="lite"] .lt-lanes-sel:focus-visible {
  outline: 2px solid var(--lt-amber);
  outline-offset: 1px;
}
/* keterangan lama "geser otomatis tiap 3 detik" digantikan
   pemilih di atas, jadi tidak ditempel lagi ke teks bantuan */
html[data-gms-ui="lite"] .lt-lanes-hint::after { content: "" !important; }

@media (max-width: 700px) {
  html[data-gms-ui="lite"] .lt-lanes-atur { margin-left: 0; }
  html[data-gms-ui="lite"] .lt-lanes-atur > span { display: none; }
}

/* ============================================================
   57. PENGALIHAN OTOMATIS KE LANE FIFO  (1 Sep 2026)
   Layar dibawa ke lane pemilik lot terlama begitu saringan
   identitas lengkap — perilaku yang sama dengan aplikasi
   Android. Sorotan singkat hanya menegaskan lane mana yang
   dituju; tidak ada data yang berubah.
   ============================================================ */
html[data-gms-ui="lite"] .lane-section.lt-fifo-sorot {
  animation: ltFifoSorot 2.6s ease-out 1;
}
@keyframes ltFifoSorot {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, .0); }
  12%  { box-shadow: 0 0 0 3px rgba(245, 158, 11, .55); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .0); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] .lane-section.lt-fifo-sorot { animation: none; }
}

/* ============================================================
   58. PANEL "SEDANG AKTIF" DI RIWAYAT LOGIN  (1 Sep 2026)
   Menampilkan siapa yang sedang membuka aplikasi dan dari
   mana — web atau Android. Isinya digambar
   `js/gms-sesi-aktif.js`; di sini hanya gayanya.
   ============================================================ */
html[data-gms-ui="lite"] .gms-sesi-aktif {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--lt-line);
  border-radius: 14px;
  background: var(--lt-surface-2, rgba(148, 163, 184, .08));
}
html[data-gms-ui="lite"] .gms-sesi-aktif .gsa-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: .3px; margin-bottom: 10px;
}
html[data-gms-ui="lite"] .gms-sesi-aktif .gsa-head em {
  font-style: normal; opacity: .68; font-size: 11.5px; margin-left: auto;
}
html[data-gms-ui="lite"] .gms-sesi-aktif .gsa-titik {
  width: 9px; height: 9px; border-radius: 50%;
  background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
}
html[data-gms-ui="lite"] .gms-sesi-aktif .gsa-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
html[data-gms-ui="lite"] .gms-sesi-aktif .gsa-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; border-radius: 11px;
  border: 1px solid var(--lt-line);
  background: var(--lt-surface, rgba(255, 255, 255, .55));
}
html[data-gms-ui="lite"] .gms-sesi-aktif .gsa-ident { min-width: 0; }
html[data-gms-ui="lite"] .gms-sesi-aktif .gsa-nama { font-weight: 800; font-size: 13px; }
html[data-gms-ui="lite"] .gms-sesi-aktif .gsa-role { font-size: 10.5px; opacity: .62; }
html[data-gms-ui="lite"] .gms-sesi-aktif .gsa-plat {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2px;
  border: 1px solid currentColor; opacity: .85;
}
html[data-gms-ui="lite"] .gsa-plat.is-web { color: #2563EB; }
html[data-gms-ui="lite"] .gsa-plat.is-android,
html[data-gms-ui="lite"] .gsa-plat.is-ios { color: #16A34A; }

/* Kolom "Perangkat" pada tabel riwayat login — chip yang sama dipakai
   ulang, jadi lencananya terbaca seragam dengan panel di atasnya. */
html[data-gms-ui="lite"] .gsa-plat {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2px;
  border: 1px solid currentColor; opacity: .85; white-space: nowrap;
}
html[data-gms-ui="lite"] .gsa-plat.is-tak {
  border-color: transparent; opacity: .45; font-weight: 600;
}
html[data-gms-ui="lite"] .history-table th.gsa-th { white-space: nowrap; }
html[data-gms-ui="lite"] .history-table td.gsa-td { white-space: nowrap; }
html[data-gms-ui="lite"] .gms-sesi-aktif .gsa-kosong {
  margin: 0; font-size: 12px; line-height: 1.55; opacity: .68;
}

/* ============================================================
   59. PENDAFTARAN AKUN BARU  (1 Sep 2026)
   Formulir "Daftar" di layar login + panel keputusan Foreman.
   Isinya digambar `js/gms-pendaftaran.js`; di sini hanya gayanya.
   ============================================================ */

/* --- 59A. tautan & formulir di layar login ------------------ */
html[data-gms-ui="lite"] .gms-daftar-taut {
  display: block; width: 100%; margin-top: 14px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--lt-accent, #F5B301); letter-spacing: .2px;
  text-decoration: underline; text-underline-offset: 3px;
}
html[data-gms-ui="lite"] .gms-daftar-taut:hover { opacity: .82; }
html[data-gms-ui="lite"] .gms-daftar-taut:focus-visible {
  outline: 2px solid var(--lt-accent, #F5B301); outline-offset: 3px; border-radius: 6px;
}

html[data-gms-ui="lite"] .gms-daftar-form .gd-judul {
  font-size: 17px; font-weight: 800; letter-spacing: .3px; margin-bottom: 6px;
}
html[data-gms-ui="lite"] .gms-daftar-form .gd-info {
  margin: 0 0 16px; font-size: 12px; line-height: 1.6; opacity: .78;
}
html[data-gms-ui="lite"] .gms-daftar-form .gd-info b { font-weight: 800; opacity: 1; }
html[data-gms-ui="lite"] .gms-daftar-form .gd-pesan { min-height: 0; margin-top: 10px; font-size: 12.5px; line-height: 1.5; }
html[data-gms-ui="lite"] .gms-daftar-form .gd-pesan.is-bad { color: #EF4444; font-weight: 700; }
html[data-gms-ui="lite"] .gms-daftar-form .gd-pesan.is-ok { color: #16A34A; font-weight: 700; }
html[data-gms-ui="lite"] .gms-daftar-form .gd-kirim { margin-top: 14px; }

/* --- 59B. panel keputusan Foreman --------------------------- */
html[data-gms-ui="lite"] .gms-daftar-panel {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
html[data-gms-ui="lite"] .gms-daftar-panel[hidden] { display: none; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-tirai {
  position: absolute; inset: 0; background: rgba(8, 15, 28, .58); backdrop-filter: blur(2px);
}
/* Token yang dipakai HARUS yang benar-benar ada: `--lt-surface` dan
   `--lt-ink` (lihat definisinya di awal berkas, terang & gelap).
   Versi pertama blok ini memakai `--lt-card`/`--lt-text` yang tidak
   pernah didefinisikan, sehingga warnanya jatuh ke nilai cadangan
   putih/`#0F172A`. Di mode gelap kartunya tetap memakai
   `--lt-surface` yang gelap sementara teksnya mewarisi `#0F172A`
   yang juga gelap — itulah yang membuat "Sudah diproses" tidak
   terbaca. */
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-kotak {
  position: relative; width: min(760px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--lt-surface); color: var(--lt-ink);
  border: 1px solid var(--lt-line);
  border-radius: 18px; box-shadow: 0 24px 60px rgba(8, 15, 28, .3); overflow: hidden;
}
/* Setiap tulisan di dalam panel mewarisi warna kotaknya, apa pun
   tema yang sedang aktif — tidak ada lagi warna gelap tertanam. */
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-kotak :where(h4, p, div, dt, dd, b, span, article, header) {
  color: inherit;
}
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid var(--lt-line);
  font-size: 14.5px; letter-spacing: .3px;
}
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-tutup {
  margin-left: auto; width: 32px; height: 32px; border-radius: 9px;
  background: none; border: 1px solid var(--lt-line);
  color: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-isi { padding: 18px; overflow: auto; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-judul { margin: 0 0 4px; font-size: 13.5px; letter-spacing: .2px; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-judul2 { margin-top: 22px; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-penjelas { margin: 0 0 14px; font-size: 12px; line-height: 1.6; opacity: .7; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-kosong { margin: 0 0 6px; font-size: 12.5px; opacity: .65; }

html[data-gms-ui="lite"] .gms-daftar-panel .gdp-kartu {
  border: 1px solid var(--lt-line);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
  background: var(--lt-surface-2);
  color: var(--lt-ink);
}
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-kartu.is-menunggu { border-left: 4px solid #F59E0B; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-kartu.is-diterima { border-left: 4px solid #22C55E; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-kartu.is-ditolak { border-left: 4px solid #EF4444; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-kartu header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
}
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-nama { font-weight: 800; font-size: 14.5px; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-id { font-size: 12px; opacity: .62; margin-top: 1px; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-st {
  margin-left: auto; padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .4px; white-space: nowrap;
}
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-st.is-menunggu { background: rgba(245, 158, 11, .16); color: #B45309; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-st.is-diterima { background: rgba(34, 197, 94, .16); color: #15803D; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-st.is-ditolak { background: rgba(239, 68, 68, .16); color: #B91C1C; }

html[data-gms-ui="lite"] .gms-daftar-panel .gdp-kartu dl {
  display: grid; gap: 6px 18px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-kartu dl div { display: flex; gap: 8px; font-size: 12.5px; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-kartu dt { opacity: .6; min-width: 92px; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-kartu dd { margin: 0; font-weight: 600; word-break: break-word; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-jejak { margin: 10px 0 0; font-size: 11.5px; font-style: italic; opacity: .6; }

html[data-gms-ui="lite"] .gms-daftar-panel .gdp-aksi { display: flex; gap: 10px; margin-top: 14px; }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-b {
  flex: 1; padding: 10px 14px; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .3px;
  border: 1px solid currentColor; background: none;
}
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-b.is-ok { color: #15803D; background: rgba(34, 197, 94, .1); }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-b.is-no { color: #B91C1C; background: rgba(239, 68, 68, .1); }
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-b:disabled { opacity: .55; cursor: default; }

html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-daftar-panel .gdp-st.is-menunggu { color: #FCD34D; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-daftar-panel .gdp-st.is-diterima { color: #4ADE80; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-daftar-panel .gdp-st.is-ditolak { color: #FCA5A5; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-daftar-panel .gdp-b.is-ok { color: #4ADE80; }
html[data-gms-ui="lite"][data-gms-theme="dark"] .gms-daftar-panel .gdp-b.is-no { color: #FCA5A5; }

@media (max-width: 560px) {
  html[data-gms-ui="lite"] .gms-daftar-panel .gdp-aksi { flex-direction: column; }
}

/* ============================================================
   60. KELOLA LANE — DERET KOLOM ALA APLIKASI ANDROID  (1 Sep 2026)
   Isinya digambar `js/gms-kelola-lane.js`; di sini hanya gayanya.
   ============================================================ */
html[data-gms-ui="lite"] .gms-lane-kolom { margin-top: 12px; }
html[data-gms-ui="lite"] .gms-lane-kolom .glk-bantu {
  margin: 0 0 12px; font-size: 12px; line-height: 1.6; opacity: .72;
}
html[data-gms-ui="lite"] .gms-lane-kolom .glk-list { display: grid; gap: 8px; }
html[data-gms-ui="lite"] .gms-lane-kolom .glk-baris {
  display: flex; align-items: center; gap: 8px;
}
html[data-gms-ui="lite"] .gms-lane-kolom .glk-no {
  width: 22px; text-align: right; font-size: 11.5px; font-weight: 800; opacity: .5;
  font-variant-numeric: tabular-nums; flex: none;
}
html[data-gms-ui="lite"] .gms-lane-kolom .glk-baris input {
  flex: 1; min-width: 0;
  background: var(--bg-dark, rgba(148, 163, 184, .1));
  border: 1px solid var(--border, rgba(148, 163, 184, .34));
  border-radius: 8px; padding: 9px 12px;
  color: inherit; font: inherit; font-size: 13px; outline: 0;
}
html[data-gms-ui="lite"] .gms-lane-kolom .glk-baris input:focus-visible {
  border-color: var(--lt-accent, #F5B301);
}
html[data-gms-ui="lite"] .gms-lane-kolom .glk-buang {
  flex: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid var(--border, rgba(148, 163, 184, .34));
  color: inherit; font-size: 17px; line-height: 1; opacity: .7;
}
html[data-gms-ui="lite"] .gms-lane-kolom .glk-buang:hover { opacity: 1; }
html[data-gms-ui="lite"] .gms-lane-kolom .glk-alat {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
html[data-gms-ui="lite"] .gms-lane-kolom .glk-b {
  flex: 1 1 auto; padding: 9px 14px; border-radius: 9px; cursor: pointer;
  background: none; border: 1px dashed var(--border, rgba(148, 163, 184, .45));
  color: inherit; font: inherit; font-size: 12px; font-weight: 700; opacity: .85;
}
html[data-gms-ui="lite"] .gms-lane-kolom .glk-b:hover { opacity: 1; }
html[data-gms-ui="lite"] .gms-lane-kolom .glk-pratinjau {
  margin-top: 12px; font-size: 12px; line-height: 1.6; opacity: .8;
}
html[data-gms-ui="lite"] .gms-lane-kolom .glk-pratinjau:empty { display: none; }
html[data-gms-ui="lite"] .gms-lane-kolom .glk-galat {
  margin-top: 8px; font-size: 12px; font-weight: 700; color: #EF4444; line-height: 1.55;
}
html[data-gms-ui="lite"] .gms-lane-kolom .glk-galat:empty { display: none; }
html[data-gms-ui="lite"] .gms-lane-kolom .glk-simpan { width: 100%; margin-top: 14px; }
html[data-gms-ui="lite"] .gms-lane-kolom .glk-simpan:disabled { opacity: .5; cursor: default; }

/* ============================================================
   61. KESEJAJARAN KOLOM TABEL LANE  (1 Sep 2026)

   Keluhan: kolom kanan pada daftar Semua Lane tidak simetris —
   chip STATUS mulai di titik yang berbeda-beda, tombol aksi
   bergeser naik-turun mengikuti lebar isi baris di sebelahnya,
   dan tepi kanan tabel jadi bergerigi.

   Penyebabnya kolom STATUS dan kolom AKSI ikut menyesuaikan
   lebar isinya: "AMAN" jauh lebih pendek dari "SANGAT KRITIS",
   jadi tiap baris melebar berbeda dan seluruh kolom di kanannya
   ikut bergeser. Kedua kolom itu sekarang diberi LEBAR TETAP,
   dan chip status dibuat selebar kolomnya supaya keempat status
   menempati kotak yang sama persis.

   Hanya lebar & perataan yang diatur — tidak ada kolom yang
   ditambah, dipindah, atau dihapus.
   ============================================================ */

/* --- 61A. kolom STATUS: satu lebar untuk keempat tingkat ----- */
html[data-gms-ui="lite"] .lane-section th.lt-th-status,
html[data-gms-ui="lite"] .lane-section td.lt-td-status {
  width: 138px !important;
  min-width: 138px !important;
  text-align: center !important;
  white-space: nowrap !important;
}
html[data-gms-ui="lite"] .lane-section td.lt-td-status .lt-st {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  padding: 4px 8px;
  text-align: center;
  letter-spacing: .06em;
}

/* --- 61B. kolom AKSI: lebar tetap, isinya terkunci di kanan -- */
html[data-gms-ui="lite"] .lane-section th:last-child,
html[data-gms-ui="lite"] .lane-section td.actions-cell {
  width: 84px !important;
  min-width: 84px !important;
  text-align: right !important;
  white-space: nowrap !important;
}
html[data-gms-ui="lite"] .lane-section td.actions-cell .lt-act {
  justify-content: flex-end;
}

/* --- 61C. kolom ukuran: jangan patah jadi dua baris ----------
   "∅ 11.70 mm" yang terpotong jadi "∅ 11.70" + "mm" membuat
   tinggi baris melompat-lompat dan barisnya terlihat miring.  */
html[data-gms-ui="lite"] .lane-section tbody td:nth-child(2),
html[data-gms-ui="lite"] .lane-section thead th:nth-child(2) {
  white-space: nowrap !important;
  min-width: 104px;
}

/* --- 61D. kolom bahan & supplier: lebar dasar yang sama ------ */
html[data-gms-ui="lite"] .lane-section tbody td:first-child,
html[data-gms-ui="lite"] .lane-section thead th:first-child {
  min-width: 132px;
}
html[data-gms-ui="lite"] .lane-section tbody td:nth-child(3),
html[data-gms-ui="lite"] .lane-section thead th:nth-child(3) {
  white-space: nowrap !important;
  min-width: 84px;
}

/* --- 61E. tepi kanan rata --------------------------------------
   Tabel selalu memenuhi lebar kartunya; bila isinya memang lebih
   lebar dari layar, yang menggulir adalah pembungkusnya — bukan
   tabelnya yang menjulur keluar kartu.                          */
html[data-gms-ui="lite"] .lane-section .table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
html[data-gms-ui="lite"] .lane-section table {
  min-width: 100% !important;
}

/* --- 61F. tinggi baris konsisten ------------------------------
   Semua sel diratakan ke tengah secara vertikal, jadi kolom yang
   isinya satu baris tetap segaris dengan kolom yang isinya dua.  */
html[data-gms-ui="lite"] .lane-section tbody td,
html[data-gms-ui="lite"] .lane-section thead th {
  vertical-align: middle !important;
}

@media (max-width: 900px) {
  html[data-gms-ui="lite"] .lane-section th.lt-th-status,
  html[data-gms-ui="lite"] .lane-section td.lt-td-status {
    width: 120px !important; min-width: 120px !important;
  }
  html[data-gms-ui="lite"] .lane-section td.lt-td-status .lt-st { min-width: 102px; }
}

/* ============================================================
   62. LAYAR LOGIN v2  (1 Sep 2026)

   Mengikuti `referensi/referensi-login-screen.png` — mode terang
   dan gelap, tata letak lanskap. Susunan elemennya dibangun
   `js/gms-login-v2.js`; berkas ini hanya rupanya.

   Latar industri dibuat MURNI CSS (lapisan gradien + garis
   diagonal emas), bukan foto: tidak ada aset foto gudang di repo
   ini, dan memuat foto besar hanya untuk layar login menambah
   beban muat pertama tanpa menambah kejelasan.
   ============================================================ */

html[data-gms-ui="lite"] #loginScreen.gl-v2 {
  --glc-emas: #F5B301;
  --glc-emas-2: #FFD25A;
  --glc-kartu: rgba(255, 255, 255, .82);
  --glc-kartu-line: rgba(15, 23, 42, .10);
  --glc-ink: #16233B;
  --glc-ink-2: #4A5B76;
  --glc-ink-3: #6B7A93;
  --glc-isian: rgba(255, 255, 255, .9);
  --glc-isian-line: rgba(15, 23, 42, .13);

  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px 24px 76px;
  overflow: auto;
  color: var(--glc-ink);
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(203, 213, 225, .55) 0%, rgba(203, 213, 225, 0) 60%),
    radial-gradient(90% 70% at 8% 88%, rgba(148, 163, 184, .38) 0%, rgba(148, 163, 184, 0) 62%),
    linear-gradient(152deg, #FDFEFF 0%, #EEF2F7 42%, #DCE3EC 100%);
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #loginScreen.gl-v2 {
  --glc-kartu: rgba(17, 28, 48, .74);
  --glc-kartu-line: rgba(148, 178, 226, .16);
  --glc-ink: #EAF1FB;
  --glc-ink-2: #A9BAD4;
  --glc-ink-3: #8D9DB6;
  --glc-isian: rgba(9, 17, 32, .62);
  --glc-isian-line: rgba(148, 178, 226, .2);
  color: var(--glc-ink);
  background:
    radial-gradient(120% 90% at 78% 16%, rgba(37, 60, 99, .55) 0%, rgba(37, 60, 99, 0) 62%),
    radial-gradient(90% 70% at 6% 90%, rgba(23, 38, 66, .8) 0%, rgba(23, 38, 66, 0) 60%),
    linear-gradient(152deg, #0A1220 0%, #0D1A2E 45%, #060C16 100%);
}

/* --- 62A. garis miring emas di sudut ------------------------- */
html[data-gms-ui="lite"] #loginScreen.gl-v2::before,
html[data-gms-ui="lite"] #loginScreen.gl-v2::after {
  content: "";
  position: absolute;
  width: 46vmax; height: 46vmax;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      135deg,
      var(--glc-emas) 0 8px,
      transparent 8px 26px,
      var(--glc-emas-2) 26px 31px,
      transparent 31px 62px
    );
  opacity: .5;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2::before {
  top: -22vmax; left: -20vmax;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 46%);
  mask-image: linear-gradient(135deg, #000 0%, transparent 46%);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2::after {
  bottom: -22vmax; right: -20vmax;
  -webkit-mask-image: linear-gradient(315deg, #000 0%, transparent 46%);
  mask-image: linear-gradient(315deg, #000 0%, transparent 46%);
}

/* --- 62B. lockup merek di atas kartu ------------------------- */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .login-logo { display: none !important; }

html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-merek {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 18px;
  width: min(430px, 100%); margin: 0 auto 22px;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-merek-logo {
  width: 72px; height: 72px; object-fit: contain; flex: none;
  filter: drop-shadow(0 4px 14px rgba(180, 132, 0, .32));
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-merek-1 {
  font-size: clamp(21px, 2.4vw, 27px); font-weight: 800;
  letter-spacing: .06em; line-height: 1.1; color: var(--glc-ink);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-merek-2 {
  margin-top: 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .17em; color: var(--glc-ink-2);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-merek-3 {
  margin-top: 3px; font-size: 10px; font-weight: 600;
  letter-spacing: .28em; color: var(--glc-ink-3);
}

/* --- 62C. kartu ---------------------------------------------- */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .login-box {
  position: relative; z-index: 2;
  width: min(430px, 100%);
  margin: 0 auto;
  padding: 26px 30px 22px;
  border-radius: 18px;
  background: var(--glc-kartu) !important;
  border: 1px solid var(--glc-kartu-line) !important;
  box-shadow: 0 26px 60px rgba(12, 22, 40, .13) !important;
  backdrop-filter: blur(10px);
}
/* Tepi emas di sisi atas & kiri, seperti pada referensi. */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .login-box::before {
  content: "";
  position: absolute; top: -1px; left: -1px;
  width: 62%; height: 3px; border-radius: 18px 0 0 0;
  background: linear-gradient(90deg, var(--glc-emas), rgba(245, 179, 1, 0));
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .login-box::after {
  content: "";
  position: absolute; top: -1px; left: -1px;
  width: 3px; height: 46%; border-radius: 18px 0 0 0;
  background: linear-gradient(180deg, var(--glc-emas), rgba(245, 179, 1, 0));
}

/* --- 62D. kepala kartu --------------------------------------- */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-eyebrow {
  font-size: 13px; font-weight: 600; color: var(--glc-ink-2); letter-spacing: .01em;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-judul {
  margin: 5px 0 6px; font-size: clamp(19px, 2vw, 23px); font-weight: 800;
  letter-spacing: -.01em; color: var(--glc-ink); line-height: 1.2;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-sub {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--glc-ink-2);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-rule {
  display: block; width: 46px; height: 3px; border-radius: 3px;
  margin: 14px 0 16px; background: var(--glc-emas);
}

/* --- 62E. isian ---------------------------------------------- */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .login-box > label {
  display: flex !important; align-items: center; gap: 8px;
  margin: 0 0 7px !important;
  font-size: 12.5px !important; font-weight: 700 !important;
  letter-spacing: .01em !important; text-transform: none !important;
  color: var(--glc-ink) !important;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-ik {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--glc-ink-2); flex: none;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginUser,
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginPass {
  width: 100% !important; box-sizing: border-box;
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border-radius: 11px !important;
  background: var(--glc-isian) !important;
  border: 1px solid var(--glc-isian-line) !important;
  color: var(--glc-ink) !important;
  font-size: 13.5px !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginUser::placeholder,
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginPass::placeholder { color: var(--glc-ink-3) !important; }
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginUser:focus,
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginPass:focus {
  outline: 0 !important;
  border-color: var(--glc-emas) !important;
  box-shadow: 0 0 0 3px rgba(245, 179, 1, .2) !important;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .pass-wrap { position: relative; margin-bottom: 0; }
html[data-gms-ui="lite"] #loginScreen.gl-v2 .pass-wrap #loginPass {
  padding-right: 44px !important; margin-bottom: 0 !important;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 #btnEye {
  position: absolute !important; top: 50%; right: 8px; transform: translateY(-50%);
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: none !important; border: 0 !important; cursor: pointer;
  color: var(--glc-ink-2) !important; opacity: .8;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 #btnEye:hover { opacity: 1; }

/* --- 62F. ingat saya + lupa password ------------------------- */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-bantu {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 20px;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-ingat {
  display: inline-flex !important; align-items: center; gap: 9px; cursor: pointer;
  margin: 0 !important; font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--glc-ink) !important; text-transform: none !important; letter-spacing: 0 !important;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-ingat input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-kotak {
  width: 18px; height: 18px; flex: none; border-radius: 5px;
  border: 1.6px solid var(--glc-isian-line);
  background: var(--glc-isian);
  position: relative; transition: background .16s ease, border-color .16s ease;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-ingat input:checked + .gl-kotak {
  background: #1E3A63; border-color: #1E3A63;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #loginScreen.gl-v2 .gl-ingat input:checked + .gl-kotak {
  background: var(--glc-emas); border-color: var(--glc-emas);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-ingat input:checked + .gl-kotak::after {
  content: ""; position: absolute; left: 5.4px; top: 2px;
  width: 4.5px; height: 9px; border: solid #fff; border-width: 0 2.2px 2.2px 0;
  transform: rotate(42deg);
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #loginScreen.gl-v2 .gl-ingat input:checked + .gl-kotak::after {
  border-color: #10203A;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-ingat input:focus-visible + .gl-kotak {
  outline: 2px solid var(--glc-emas); outline-offset: 2px;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-lupa {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--glc-emas); letter-spacing: .01em;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-lupa:hover {
  text-decoration: underline; text-underline-offset: 3px;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-lupa:focus-visible {
  outline: 2px solid var(--glc-emas); outline-offset: 3px; border-radius: 5px;
}

/* --- 62G. tombol --------------------------------------------- */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .btn-login {
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  width: 100% !important; margin: 0 !important;
  padding: 13px 18px !important;
  border: 0 !important; border-radius: 11px !important;
  background: linear-gradient(180deg, var(--glc-emas-2), var(--glc-emas)) !important;
  color: #16233B !important;
  font-size: 13px !important; font-weight: 800 !important; letter-spacing: .1em !important;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(245, 179, 1, .3) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .btn-login:hover {
  filter: brightness(1.04); box-shadow: 0 11px 26px rgba(245, 179, 1, .38) !important;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .btn-login:active { transform: translateY(1px); }
html[data-gms-ui="lite"] #loginScreen.gl-v2 .btn-login:focus-visible {
  outline: 2px solid #16233B; outline-offset: 2px;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .btn-login .gl-ik { color: #16233B; }

html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-atau {
  display: flex; align-items: center; gap: 14px;
  margin: 15px 0; color: var(--glc-ink-3);
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-atau::before,
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-atau::after {
  content: ""; flex: 1; height: 1px; background: var(--glc-kartu-line);
}

html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-daftar {
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 0 !important; padding: 13px 18px;
  border: 1.5px solid var(--glc-isian-line) !important; border-radius: 11px;
  background: none; color: var(--glc-ink) !important;
  font-size: 13px; font-weight: 800; letter-spacing: .1em;
  text-decoration: none !important; cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-daftar:hover {
  border-color: var(--glc-emas) !important; color: var(--glc-emas) !important;
  background: rgba(245, 179, 1, .07);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-daftar:focus-visible {
  outline: 2px solid var(--glc-emas); outline-offset: 2px;
}

html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-nota {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0; padding-top: 13px;
  border-top: 1px solid var(--glc-kartu-line);
  font-size: 11.5px; line-height: 1.5; color: var(--glc-ink-3);
}

/* --- 62H. pesan galat / info --------------------------------- */
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginErr {
  margin: 0 0 14px !important; min-height: 0 !important;
  font-size: 12.5px !important; line-height: 1.5 !important; font-weight: 600 !important;
  color: #DC2626 !important;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginErr:empty { display: none !important; }
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginErr.is-ok { color: #15803D !important; }
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginErr.is-info { color: var(--glc-ink-2) !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] #loginScreen.gl-v2 #loginErr { color: #FCA5A5 !important; }
html[data-gms-ui="lite"][data-gms-theme="dark"] #loginScreen.gl-v2 #loginErr.is-ok { color: #6EE7B7 !important; }

/* --- 62I. sakelar tema + kaki halaman ------------------------ */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-tema {
  position: absolute; top: 20px; right: 22px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glc-kartu); color: var(--glc-ink-2);
  border: 1px solid var(--glc-kartu-line); cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-tema:hover {
  color: var(--glc-emas); border-color: var(--glc-emas);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-tema:focus-visible {
  outline: 2px solid var(--glc-emas); outline-offset: 2px;
}

html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-kaki {
  position: absolute; left: 26px; bottom: 22px; z-index: 2;
  font-size: 11.5px; line-height: 1.6; color: var(--glc-ink-3);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-kaki-v { opacity: .8; }

/* --- 62J. formulir daftar mengikuti rupa kartu --------------- */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gms-daftar-form input {
  width: 100%; box-sizing: border-box; margin: 0 0 14px;
  padding: 12px 14px; border-radius: 11px;
  background: var(--glc-isian); border: 1px solid var(--glc-isian-line);
  color: var(--glc-ink); font: inherit; font-size: 13.5px; outline: 0;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gms-daftar-form input:focus {
  border-color: var(--glc-emas); box-shadow: 0 0 0 3px rgba(245, 179, 1, .2);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gms-daftar-form label {
  display: block; margin: 0 0 7px; font-size: 12.5px; font-weight: 700; color: var(--glc-ink);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gms-daftar-form .gd-judul { color: var(--glc-ink); }
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gms-daftar-form .gd-info { color: var(--glc-ink-2); }
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gms-daftar-taut { color: var(--glc-emas); }

/* --- 62K. layar pendek & telepon ----------------------------- */
@media (max-height: 720px) {
  html[data-gms-ui="lite"] #loginScreen.gl-v2 { place-items: start center; padding-top: 24px; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-merek-logo { width: 58px; height: 58px; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .login-box { padding: 24px 26px 22px; }
}
@media (max-width: 520px) {
  html[data-gms-ui="lite"] #loginScreen.gl-v2 { padding: 22px 16px 66px; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-merek { gap: 13px; margin-bottom: 18px; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-merek-logo { width: 52px; height: 52px; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .login-box { padding: 22px 20px 20px; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-kaki { left: 18px; bottom: 16px; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] #loginScreen.gl-v2 * { transition: none !important; }
}

/* --- 62L. PENGAMBILALIHAN DARI GAYA LAMA -----------------------
   Tiga aturan tema lama masih menang di layar login dan merusak
   susunan barunya. Diperbaiki di sini, sesudahnya, dengan
   `!important` seperlunya — bukan dengan mengubah aturan lamanya,
   yang masih dipakai layar lain.

   1. #loginScreen adalah flex `align-items:start`, sehingga
      `place-items:center` milik 62 tidak pernah terpakai dan
      lockup merek terpotong di tepi atas saat layar pendek.
      Dipakai pola margin-auto: memusatkan bila muat, dan runtuh
      sendiri (tanpa memotong) bila isinya lebih tinggi dari layar.
   2. `label::before` tema lama menyisipkan wajik emas "◆" di depan
      setiap label — tidak ada pada referensi.
   3. Isian login membawa bayangan dalam gelap dari tema lama,
      yang terbaca sebagai cincin tebal di atas kartu terang.
   --------------------------------------------------------------- */

/* `display` SENGAJA tanpa !important: app.js menyembunyikan layar
   login dengan `style.display="none"` inline setelah berhasil masuk.
   Deklarasi ber-!important di stylesheet MENGALAHKAN gaya inline
   yang tidak ber-!important, jadi layar login tetap tergambar di
   belakang aplikasi. Nilai non-important di bawah kalah oleh inline
   `none` (sembunyi) maupun inline `flex` (tampil lagi saat keluar),
   dan tetap dipakai pada muat pertama ketika belum ada gaya inline.
   Arah & perataannya boleh !important — app.js tidak pernah
   menyetel keduanya inline. */
html[data-gms-ui="lite"] #loginScreen.gl-v2 {
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: auto !important;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-merek { margin-top: auto !important; }
html[data-gms-ui="lite"] #loginScreen.gl-v2 .login-box { margin: 0 auto auto !important; }

/* wajik "◆" bawaan tema lama */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .login-box > label::before,
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-bantu label::before,
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gms-daftar-form label::before {
  content: none !important;
  display: none !important;
}

/* cincin gelap pada isian */
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginUser,
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginPass,
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gms-daftar-form input {
  box-shadow: none !important;
  border-width: 1.5px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginUser:focus,
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginPass:focus,
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gms-daftar-form input:focus {
  box-shadow: 0 0 0 3px rgba(245, 179, 1, .22) !important;
}

/* garis miring emas di sudut — aturan lama memakai ::before yang sama */
html[data-gms-ui="lite"] #loginScreen.gl-v2::before,
html[data-gms-ui="lite"] #loginScreen.gl-v2::after {
  content: "" !important;
  /* `fixed`, BUKAN `absolute`: #loginScreen adalah wadah bergulir
     (overflow:auto), dan anak absolut yang ditaruh di luar tepinya
     ikut terpotong — ornamennya jadi tidak pernah terlihat. Elemen
     fixed lepas dari pemotongan itu dan tetap menempel ke sudut
     layar, yang memang tujuannya. */
  position: fixed !important;
  z-index: 0 !important;
  width: 44vmax !important;
  height: 44vmax !important;
  inset: auto !important;
  pointer-events: none !important;
  opacity: .42 !important;
  background:
    repeating-linear-gradient(
      135deg,
      #F5B301 0 9px,
      transparent 9px 28px,
      #FFD25A 28px 34px,
      transparent 34px 66px
    ) !important;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2::before {
  top: -20vmax !important; left: -18vmax !important;
  -webkit-mask-image: radial-gradient(circle at 78% 78%, #000 0%, transparent 62%) !important;
  mask-image: radial-gradient(circle at 78% 78%, #000 0%, transparent 62%) !important;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2::after {
  bottom: -20vmax !important; right: -18vmax !important;
  -webkit-mask-image: radial-gradient(circle at 22% 22%, #000 0%, transparent 62%) !important;
  mask-image: radial-gradient(circle at 22% 22%, #000 0%, transparent 62%) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #loginScreen.gl-v2::before,
html[data-gms-ui="lite"][data-gms-theme="dark"] #loginScreen.gl-v2::after { opacity: .5 !important; }

/* isi tetap di atas ornamen */
html[data-gms-ui="lite"] #loginScreen.gl-v2 > * { position: relative; z-index: 2; }

/* --- 62M. ORNAMEN SUDUT SEBAGAI ELEMEN NYATA ------------------
   Pseudo-elemen #loginScreen sudah dipakai tema lama, dan layar
   login adalah wadah bergulir yang memotong anak absolutnya.
   Ornamennya karena itu dibuat sebagai elemen sendiri oleh
   `js/gms-login-v2.js`.
   --------------------------------------------------------------- */
html[data-gms-ui="lite"] #loginScreen.gl-v2::before,
html[data-gms-ui="lite"] #loginScreen.gl-v2::after { display: none !important; }

html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-ornamen {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-orn {
  position: absolute; width: 52vmax; height: 52vmax; display: block;
  background: repeating-linear-gradient(
    135deg,
    #F5B301 0 10px,
    transparent 10px 30px,
    #FFD25A 30px 37px,
    transparent 37px 72px
  );
  opacity: .38;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-orn-1 {
  top: -26vmax; left: -24vmax;
  -webkit-mask-image: radial-gradient(circle at 72% 72%, #000 0%, rgba(0,0,0,.55) 34%, transparent 60%);
  mask-image: radial-gradient(circle at 72% 72%, #000 0%, rgba(0,0,0,.55) 34%, transparent 60%);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-orn-2 {
  bottom: -26vmax; right: -24vmax;
  -webkit-mask-image: radial-gradient(circle at 28% 28%, #000 0%, rgba(0,0,0,.55) 34%, transparent 60%);
  mask-image: radial-gradient(circle at 28% 28%, #000 0%, rgba(0,0,0,.55) 34%, transparent 60%);
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #loginScreen.gl-v2 .gl-orn { opacity: .46; }

/* ============================================================
   63. BARIS TABEL LANE: IKON SEJAJAR DENGAN ISI BARIS
       (2 Sep 2026)

   Keluhan: baris ke-1 dan ke-2 rapi, tetapi mulai baris ke-3 ke
   bawah ikon MATA dan TITIK-TIGA melayang lebih tinggi daripada
   isi barisnya.

   Sebabnya bukan perataan sel — §61F sudah menyetel semua sel ke
   `vertical-align: middle`. Sebabnya isi sel aksi masih berupa
   kotak SEBARIS: `.lt-act` ber-`display:inline-flex`, jadi ia
   duduk di atas GARIS DASAR sebuah line box bersama strut teks
   milik selnya. Pada baris pendek (isi satu baris) tinggi line
   box dan tinggi tombol kebetulan hampir sama, sehingga tidak
   kelihatan. Begitu ada sel lain yang isinya dua baris, sel aksi
   ikut meninggi, tombol 30px tetap menggantung di garis dasar
   baris pertama, dan selisihnya jadi terlihat sebagai ikon miring.

   Perbaikannya: jadikan pembungkus ikon kotak TINGKAT BLOK
   (`display:flex`) yang setinggi selnya. Kotak blok tidak ikut
   line box, jadi tidak ada garis dasar yang menariknya ke atas,
   dan `align-items:center` memusatkannya pada tinggi baris yang
   sebenarnya. Perlakuan yang sama diberikan ke chip STATUS.

   Hanya perataan — tidak ada kolom, tombol, atau perilaku klik
   yang ditambah, dipindah, atau dihapus.
   ============================================================ */

/* --- 63A. kelompok ikon aksi jadi kotak blok setinggi sel ---- */
html[data-gms-ui="lite"] .lane-section td.actions-cell .lt-act {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  min-height: 30px;
}

/* --- 63B. chip status ditengahkan dengan cara yang sama ------ */
html[data-gms-ui="lite"] .lane-section td.lt-td-status {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
html[data-gms-ui="lite"] .lane-section td.lt-td-status .lt-st {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  margin: 0 auto;
}

/* --- 63C. bintang favorit + chip bahan tetap satu baris ------
   Sel bahan kerap patah jadi dua baris ("bintang" di baris satu,
   chip S45C di baris dua). Itu menambah tinggi baris tanpa alasan
   dan membuat kolom pertama terlihat paling berantakan. */
html[data-gms-ui="lite"] .lane-section tbody td:first-child {
  white-space: nowrap !important;
}
html[data-gms-ui="lite"] .lane-section tbody td:first-child > * {
  vertical-align: middle !important;
}

/* --- 63D. tinggi baris minimum yang sama ---------------------
   Menyamakan ritme baris pendek dengan baris panjang, sehingga
   deretan ikon di kanan terbaca sebagai satu kolom lurus.      */
html[data-gms-ui="lite"] .lane-section tbody td {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* --- 64. PENDAFTARAN: HAPUS RIWAYAT --------------------------
   Tombol hapus dibedakan dari Terima/Tolak: netral, bukan merah,
   karena yang dibuang hanya CATATAN — pengguna yang sudah
   diterima tetap terdaftar.                                    */
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-judul-baris {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px;
}
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-judul-baris .gdp-judul2 {
  margin-top: 0; flex: 1 1 auto;
}
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-b.is-hapus {
  color: var(--lt-ink-2);
  background: transparent;
  border-color: var(--lt-line);
}
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-b.is-hapus:hover:not(:disabled) {
  color: var(--lt-ink);
  border-color: var(--lt-line-2);
  background: var(--lt-surface);
}
html[data-gms-ui="lite"] .gms-daftar-panel .gdp-sapu {
  flex: 0 0 auto; padding: 6px 12px; font-size: 11.5px;
}

/* ============================================================
   65. KELOLA PENGGUNA & AKSES ROLE  (2 Sep 2026)

   Memakai kembali kerangka panel `.gms-daftar-panel` milik
   Pendaftaran Akun — bentuk, warna, dan perilaku tirainya sudah
   sama; yang ditambah di sini hanya isian khas layar ini.
   ============================================================ */

html[data-gms-ui="lite"] .gms-akses-panel .gdp-kotak { width: min(880px, 100%); }

/* --- tab --- */
html[data-gms-ui="lite"] .gms-akses-panel .gak-tab {
  display: flex; gap: 6px; margin: 0 0 16px;
  border-bottom: 1px solid var(--lt-line);
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-tabb {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--lt-ink-2); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-tabb.is-on {
  color: var(--lt-ink); border-bottom-color: var(--lt-amber, #F5B301);
}

/* --- pil role --- */
html[data-gms-ui="lite"] .gms-akses-panel .gak-label {
  margin: 14px 0 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .7px; text-transform: uppercase; color: var(--lt-ink-3);
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-pil {
  display: flex; flex-wrap: wrap; gap: 8px;
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-pil-role { margin-bottom: 4px; }
html[data-gms-ui="lite"] .gms-akses-panel .gak-p {
  appearance: none; cursor: pointer; font: inherit; font-size: 12.5px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--lt-line); background: var(--lt-surface-2);
  color: var(--lt-ink-2);
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-p b {
  margin-left: 5px; font-size: 11px; opacity: .75;
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-p.is-on {
  border-color: var(--lt-amber, #F5B301);
  background: rgba(245, 179, 1, .14);
  color: var(--lt-ink); font-weight: 800;
}

/* --- pintasan massal --- */
html[data-gms-ui="lite"] .gms-akses-panel .gak-pintas {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 4px;
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-pintas button {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700;
  color: var(--lt-amber-d, #B45309); text-decoration: underline;
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-pintas span {
  color: var(--lt-ink-3); font-size: 12px;
}

/* --- daftar centang --- */
html[data-gms-ui="lite"] .gms-akses-panel .gak-grup { margin-top: 18px; }
html[data-gms-ui="lite"] .gms-akses-panel .gak-grup-judul {
  font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--lt-ink-3); margin-bottom: 6px;
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-baris {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--lt-line); border-radius: 11px;
  background: var(--lt-surface-2); margin-bottom: 7px;
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-baris:hover {
  border-color: var(--lt-line-2);
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-baris input {
  margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 auto;
  accent-color: var(--lt-amber, #F5B301);
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-baris span { display: block; }
html[data-gms-ui="lite"] .gms-akses-panel .gak-baris b {
  display: block; font-size: 13px; font-weight: 700; color: var(--lt-ink);
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-baris i {
  display: block; font-style: normal; font-size: 11.5px;
  line-height: 1.5; color: var(--lt-ink-3); margin-top: 2px;
}
html[data-gms-ui="lite"] .gms-akses-panel .gak-anda {
  font-size: 11.5px; font-weight: 600; color: var(--lt-ink-3);
}

/* ============================================================
   66. PENAJAMAN LAYAR LOGIN v2  (2 Sep 2026)

   Menggantikan sebagian §62 setelah dibandingkan langsung dengan
   `referensi/referensi-login-screen.png`. Yang diubah hanya rupa;
   susunan elemennya tetap milik §62 + `js/gms-login-v2.js`.

   TIGA HAL YANG MASIH BERBEDA DARI FOTO

   1. LATAR. Foto acuan memakai foto gudang sungguhan yang di-blur.
      Repo ini tidak punya aset foto gudang, dan menambah foto besar
      hanya untuk layar login membebani muat pertama. Yang dipakai
      di sini: tiruan CSS dari kesan fotonya — bidang kabur besar
      seperti ujung gulungan coil di sisi kiri, garis perspektif
      lantai/langit-langit yang menjauh, dan vignette. Lebih dekat
      ke foto daripada gradien polos §62, tanpa satu byte gambar.

   2. ORNAMEN SUDUT. Pada foto garisnya TAJAM dan terpisah jelas —
      beberapa garis tipis diselingi satu pita tebal. Versi §62
      terlalu banyak garis dengan opasitas rendah, sehingga terbaca
      sebagai arsiran kabur, bukan ornamen. Di sini jumlah garisnya
      dikurangi, kontrasnya dinaikkan, dan pudarnya hanya di ujung.

   3. TEPI EMAS KARTU. Pada foto tepi atas kartu emas PENUH selebar
      kartu, lalu turun sedikit di kiri dan kanan — bukan 62% saja.
      ============================================================ */

/* --- 66A. latar: gulungan coil & rak gudang ------------------

   Foto acuan memakai foto aula gudang sungguhan. Repo ini tidak
   punya aset foto gudang, dan menambah foto besar hanya untuk
   layar login membebani muat pertama — jadi adegannya DIGAMBAR:
   `latar-gudang.svg` berisi tumpukan ujung gulungan coil di kiri,
   rak bertingkat yang menjauh di kanan, kuda-kuda atap, dan garis
   lantai menuju satu titik hilang. Di bawah 20 KB, tajam pada
   resolusi berapa pun, dan tidak menambah permintaan gambar besar.

   Dua berkas karena SVG yang dimuat lewat `background-image` tidak
   bisa mewarisi `currentColor`: yang terang bergaris gelap, yang
   gelap bergaris biru pucat.

   Lapisannya dari atas ke bawah: vignette -> cahaya atap ->
   gambar gudang -> gradien dasar. Gambar gudang sengaja di bawah
   vignette supaya tepinya meredup dan kartu login tetap menang. */
html[data-gms-ui="lite"] #loginScreen.gl-v2 {
  background:
    radial-gradient(140% 120% at 50% 46%, rgba(15, 23, 42, 0) 46%, rgba(15, 23, 42, .30) 100%),
    radial-gradient(115% 82% at 72% 6%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 62%),
    url("../latar-gudang.svg") center center / cover no-repeat,
    linear-gradient(152deg, #FBFDFF 0%, #EAEFF6 44%, #D6DEE9 100%) !important;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #loginScreen.gl-v2 {
  background:
    radial-gradient(140% 120% at 50% 46%, rgba(2, 6, 14, 0) 40%, rgba(2, 6, 14, .74) 100%),
    radial-gradient(115% 82% at 72% 6%, rgba(64, 100, 158, .55) 0%, rgba(64, 100, 158, 0) 62%),
    url("../latar-gudang-gelap.svg") center center / cover no-repeat,
    linear-gradient(152deg, #0A1322 0%, #0C1A2E 45%, #050B15 100%) !important;
}

/* --- 66B. ornamen sudut: garis tegas, bukan arsiran ----------

   Topeng WAJIB dipusatkan pada SUDUT LAYAR, bukan pada tepi kotak
   ornamennya. Versi pertama memakai `linear-gradient` searah garis:
   karena kotaknya sebagian besar berada di luar layar, bagian yang
   justru terlihat jatuh di ujung yang sudah transparan — ornamennya
   dihitung dengan benar oleh peramban (posisi, warna, opasitas semua
   wajar bila diperiksa) tetapi tergambar kosong.

   Sekarang kotaknya diperkecil, digeser sedikit saja ke luar layar,
   dan ditopengi `radial-gradient` yang titik pusatnya persis di
   sudut layar. Jadi bagian yang pekat memang bagian yang terlihat. */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-orn {
  /* Pada foto acuan ornamennya MEMELUK SUDUT — kira-kira seperempat
     lebar layar, bukan sepanjang seluruh sisi. Ukuran di bawah
     diambil dari perbandingan langsung dengan fotonya. */
  width: 25vmax; height: 25vmax;
  background: repeating-linear-gradient(
    128deg,
    var(--glc-emas) 0 3px,
    transparent 3px 17px,
    var(--glc-emas) 17px 20px,
    transparent 20px 44px,
    var(--glc-emas-2) 44px 55px,
    transparent 55px 96px
  );
  opacity: .55;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-orn-1 {
  top: -6vmax; left: -7vmax; bottom: auto; right: auto;
  -webkit-mask-image: radial-gradient(circle at 34% 30%, #000 0%, #000 22%, transparent 64%);
  mask-image: radial-gradient(circle at 34% 30%, #000 0%, #000 22%, transparent 64%);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-orn-2 {
  bottom: -6vmax; right: -7vmax; top: auto; left: auto;
  -webkit-mask-image: radial-gradient(circle at 66% 70%, #000 0%, #000 22%, transparent 64%);
  mask-image: radial-gradient(circle at 66% 70%, #000 0%, #000 22%, transparent 64%);
}
html[data-gms-ui="lite"][data-gms-theme="dark"] #loginScreen.gl-v2 .gl-orn { opacity: .68; }

/* --- 66B2. rapatkan ritme tegak supaya muat di layar lanskap --
   Pada jendela ~800px, kartu versi §62 menjulur melewati tepi
   bawah sehingga catatan kaki terpotong. Foto acuan menunjukkan
   seluruhnya muat sekaligus.                                    */
@media (max-height: 900px) {
  html[data-gms-ui="lite"] #loginScreen.gl-v2 { padding: 18px 24px 52px; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-merek {
    gap: 14px; margin-bottom: 14px;
  }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-merek-logo { width: 58px; height: 58px; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .login-box { padding: 20px 26px 18px; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-rule { margin: 11px 0 13px; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-bantu { margin: 12px 0 14px; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-atau { margin: 12px 0; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-nota { margin-top: 13px; }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginUser,
  html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginPass { padding-top: 10px; padding-bottom: 10px; }
}

/* --- 66C. tepi emas kartu selebar kartu ---------------------- */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .login-box::before {
  left: -1px; right: -1px; width: auto;
  height: 2.5px; border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg,
    var(--glc-emas) 0%, var(--glc-emas-2) 42%, var(--glc-emas) 78%, rgba(245, 179, 1, .55) 100%);
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .login-box::after {
  width: 2.5px; height: 34%;
  background: linear-gradient(180deg, var(--glc-emas), rgba(245, 179, 1, 0));
}
/* Mode gelap: tepi kanan ikut menyala, seperti pada foto. */
html[data-gms-ui="lite"][data-gms-theme="dark"] #loginScreen.gl-v2 .login-box {
  box-shadow:
    0 26px 64px rgba(2, 6, 14, .55),
    inset -2.5px 0 0 -0.5px rgba(245, 179, 1, .55) !important;
}

/* --- 66D. ikon gembok di dalam isian sandi ------------------- */
html[data-gms-ui="lite"] #loginScreen.gl-v2 .pass-wrap #loginPass,
html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginUser.gl-ada-ikon {
  padding-left: 38px !important;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-ik-dalam {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; pointer-events: none;
  color: var(--glc-ink-3); opacity: .85;
}
html[data-gms-ui="lite"] #loginScreen.gl-v2 .gl-bungkus-isian { position: relative; }

/* --- 66E. gerak halus (Soft UI): 200-300ms, hormati reduced-motion --- */
@media (prefers-reduced-motion: no-preference) {
  html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginUser,
  html[data-gms-ui="lite"] #loginScreen.gl-v2 #loginPass,
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .btn-login,
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .gms-daftar-taut {
    transition: border-color .22s ease, box-shadow .22s ease,
                background-color .22s ease, transform .22s ease;
  }
  html[data-gms-ui="lite"] #loginScreen.gl-v2 .btn-login:hover {
    transform: translateY(-1px);
  }
}

/* ============================================================
   67. LAYAR LOGIN: MASUK <-> DAFTAR ADALAH DUA LAYAR
       (2 Sep 2026)

   Menekan "Daftar di sini" dulu MENAMBAH formulir di bawah
   formulir masuk, jadi kartunya memanjang jauh ke bawah dan
   harus digulir. Sekarang kartunya berganti layar: yang tersisa
   hanya lambang GMS, ornamen sudut, dan formulir pendaftaran.

   Satu kelas (`.gd-mode`) yang memutuskan, bukan daftar pemilih
   di JavaScript — apa pun yang ditambahkan modul lain ke kartu
   ini ikut tersembunyi dengan sendirinya. Semua elemen milik
   app.js tetap ada di DOM, hanya tidak digambar.
   ============================================================ */

html[data-gms-ui="lite"] #loginScreen .login-box.gd-mode > *:not(.login-logo):not(#gmsLoginKepala):not(#gmsDaftarForm):not(.fv-corner-bolt) {
  display: none !important;
}

/* Kepala kartu tetap ada, tetapi hanya barisnya yang berlaku untuk
   kedua layar: "Akses terbatas. Hanya untuk pengguna yang
   berwenang." Judul & sub milik layar MASUK disembunyikan supaya
   tidak bertabrakan dengan judul "Daftar Akun Baru". */
html[data-gms-ui="lite"] #loginScreen .login-box.gd-mode #gmsLoginKepala .gl-judul,
html[data-gms-ui="lite"] #loginScreen .login-box.gd-mode #gmsLoginKepala .gl-sub,
html[data-gms-ui="lite"] #loginScreen .login-box.gd-mode #gmsLoginKepala .gl-rule {
  display: none !important;
}
html[data-gms-ui="lite"] #loginScreen .login-box.gd-mode #gmsLoginKepala {
  margin-bottom: 2px;
}

/* Pemisah "ATAU" milik tautan daftar ikut hilang bersama tautannya. */
html[data-gms-ui="lite"] #loginScreen .login-box.gd-mode .gms-daftar-taut[hidden] {
  display: none !important;
}

/* Formulir daftar mengisi kartu, bukan menempel sebagai lampiran. */
html[data-gms-ui="lite"] #loginScreen .login-box.gd-mode #gmsDaftarForm {
  margin-top: 14px;
  border-top: 0;
  padding-top: 0;
}

/* Tombol "Kembali ke halaman masuk" tetap terlihat sebagai tautan. */
html[data-gms-ui="lite"] #loginScreen .login-box.gd-mode #gdBatal {
  display: block !important;
  margin-top: 12px;
}

/* ============================================================
   68. RIWAYAT IN/OUT & RIWAYAT SWITCH LANE — ROMBAK TAMPILAN
       (2 Sep 2026) — mengikuti
       `referensi/redesign-untuk-tampilan-riwayat-in-out.png` dan
       `referensi/redesign-untuk-tampilan-switchlane.png`.

   Susunannya: kepala halaman (judul + pencarian tanggal) ·
   kartu ringkasan · satu baris saringan · tabel rapat yang muat
   tanpa gulir samping · pager di atas dan di bawah tabel.

   Semua elemen milik app.js tetap di tempatnya — yang berubah
   hanya rupanya. Yang ditambahkan (batang tanggal, pager, baris
   detail) milik `js/gms-lite-riwayat.js`.
   ============================================================ */

html[data-gms-ui="lite"] #historyPage .page-card,
html[data-gms-ui="lite"] #switchLanePage .page-card {
  padding: 0 !important;
  overflow: hidden;
}

/* --- 68A. kepala halaman ------------------------------------- */
html[data-gms-ui="lite"] #historyPage .page-head,
html[data-gms-ui="lite"] #switchLanePage .page-head {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 16px 18px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--lt-line);
  background: var(--lt-surface-2);
}
html[data-gms-ui="lite"] #historyPage .page-head > div:first-child,
html[data-gms-ui="lite"] #switchLanePage .page-head > div:first-child {
  flex: 1 1 260px;
  min-width: 0;
}
html[data-gms-ui="lite"] #historyPage .page-title,
html[data-gms-ui="lite"] #switchLanePage .page-title {
  font-size: 19px !important;
  line-height: 1.2 !important;
  margin: 0 0 3px !important;
}
html[data-gms-ui="lite"] #historyPage .page-subtitle,
html[data-gms-ui="lite"] #switchLanePage .page-subtitle {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--lt-ink-3) !important;
  margin: 0 !important;
}

/* --- 68B. batang pencarian tanggal --------------------------- */
html[data-gms-ui="lite"] .lt-rw-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
html[data-gms-ui="lite"] .lt-rw-tgl {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-sm);
}
html[data-gms-ui="lite"] .lt-rw-tglic {
  display: flex;
  color: var(--lt-amber);
}
html[data-gms-ui="lite"] .lt-rw-tgl input[type="date"] {
  width: 128px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--lt-ink);
  font-family: var(--lt-font);
  font-size: 12px;
}
html[data-gms-ui="lite"] .lt-rw-tgl input[type="date"]:focus-visible {
  outline: 2px solid var(--lt-amber);
  outline-offset: 2px;
  border-radius: 4px;
}
html[data-gms-ui="lite"][data-gms-theme="dark"] .lt-rw-tgl input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.65);
}
html[data-gms-ui="lite"] .lt-rw-strip { color: var(--lt-ink-3); }

html[data-gms-ui="lite"] .lt-rw-pintas {
  display: flex;
  gap: 4px;
}
html[data-gms-ui="lite"] .lt-rw-pintas button,
html[data-gms-ui="lite"] .lt-rw-segar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-sm);
  color: var(--lt-ink-2);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
html[data-gms-ui="lite"] .lt-rw-pintas button:hover,
html[data-gms-ui="lite"] .lt-rw-segar:hover {
  background: var(--lt-surface-2);
  border-color: var(--lt-amber);
  color: var(--lt-ink);
}
html[data-gms-ui="lite"] .lt-rw-pintas button.is-on {
  background: var(--lt-amber);
  border-color: var(--lt-amber);
  color: #1B1200;
}

/* --- 68C. kartu ringkasan ------------------------------------ */
html[data-gms-ui="lite"] #historyPage .history-summary,
html[data-gms-ui="lite"] #switchLanePage .history-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  background: transparent !important;
}
html[data-gms-ui="lite"] #historyPage .history-pill,
html[data-gms-ui="lite"] #switchLanePage .history-pill {
  display: block !important;
  padding: 12px 14px !important;
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-left: 3px solid var(--lt-amber) !important;
  border-radius: var(--lt-r-sm) !important;
}
html[data-gms-ui="lite"] #historyPage .history-pill:nth-child(2),
html[data-gms-ui="lite"] #switchLanePage .history-pill:nth-child(2) {
  border-left-color: #22C55E !important;
}
html[data-gms-ui="lite"] #historyPage .history-pill:nth-child(3),
html[data-gms-ui="lite"] #switchLanePage .history-pill:nth-child(3) {
  border-left-color: #60A5FA !important;
}
html[data-gms-ui="lite"] #historyPage .history-pill .lbl,
html[data-gms-ui="lite"] #switchLanePage .history-pill .lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--lt-ink-3) !important;
}
html[data-gms-ui="lite"] #historyPage .history-pill .val,
html[data-gms-ui="lite"] #switchLanePage .history-pill .val {
  margin-top: 4px !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: var(--lt-ink) !important;
}

/* --- 68D. penunjuk kategori jadi lencana tenang -------------- */
html[data-gms-ui="lite"] #historyPage .history-toolbar,
html[data-gms-ui="lite"] #switchLanePage .history-toolbar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 18px !important;
  margin: 0 !important;
}
html[data-gms-ui="lite"] .gms-hist-cat-indicator {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 4px 10px !important;
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-pill) !important;
  color: var(--lt-ink-2) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
html[data-gms-ui="lite"] .gms-hist-cat-ic {
  padding: 1px 6px;
  background: var(--lt-amber);
  border-radius: var(--lt-r-xs);
  color: #1B1200;
  font-size: 9px;
  letter-spacing: .1em;
}
html[data-gms-ui="lite"] #historyPage .history-tools { margin-left: auto; }

/* --- 68E. baris aksi (pilih / hapus / export) ----------------- */
html[data-gms-ui="lite"] #historyPage .page-card > div:nth-of-type(4),
html[data-gms-ui="lite"] #switchLanePage .page-card > div:nth-of-type(3) {
  padding: 0 18px 12px !important;
}

/* --- 68F. saringan jadi SATU baris ---------------------------- */
html[data-gms-ui="lite"] #historyPage .gms-fr,
html[data-gms-ui="lite"] #switchLanePage .gms-fr {
  margin: 0 18px 12px !important;
  padding: 12px 14px !important;
  background: var(--lt-surface-2) !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: var(--lt-r-sm) !important;
}
html[data-gms-ui="lite"] #historyPage .gms-fr-grid,
html[data-gms-ui="lite"] #switchLanePage .gms-fr-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)) !important;
  gap: 8px 10px !important;
}
html[data-gms-ui="lite"] #historyPage .gms-fr-grid label,
html[data-gms-ui="lite"] #switchLanePage .gms-fr-grid label {
  font-size: 9px !important;
  letter-spacing: .12em !important;
  color: var(--lt-ink-3) !important;
}
html[data-gms-ui="lite"] #historyPage .gms-fr select,
html[data-gms-ui="lite"] #historyPage .gms-fr input,
html[data-gms-ui="lite"] #switchLanePage .gms-fr select,
html[data-gms-ui="lite"] #switchLanePage .gms-fr input {
  padding: 6px 9px !important;
  font-size: 12px !important;
}

/* --- 68G. tabel: rapat, muat tanpa gulir samping -------------- */
html[data-gms-ui="lite"] #historyPage table.history-table,
html[data-gms-ui="lite"] #switchLanePage table.history-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
  font-size: 11.5px !important;
}
html[data-gms-ui="lite"] #historyPage table.history-table thead th,
html[data-gms-ui="lite"] #switchLanePage table.history-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 8px !important;
  background: var(--lt-surface-2) !important;
  border-bottom: 1px solid var(--lt-line) !important;
  color: var(--lt-ink-3) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  white-space: normal !important;
  vertical-align: middle !important;
}
html[data-gms-ui="lite"] #historyPage table.history-table tbody td,
html[data-gms-ui="lite"] #switchLanePage table.history-table tbody td {
  padding: 8px !important;
  border-bottom: 1px solid var(--lt-line) !important;
  vertical-align: middle !important;
  line-height: 1.35 !important;
  word-break: break-word;
}
html[data-gms-ui="lite"] #historyPage table.history-table tbody tr:hover td,
html[data-gms-ui="lite"] #switchLanePage table.history-table tbody tr:hover td {
  background: var(--lt-surface-2) !important;
}

/* Kolom "Bulan/Tahun" mengulang isi kolom "Waktu" — dibuang dari
   tampilan supaya tabelnya muat selebar kartu. Selnya tetap ada di
   DOM, jadi Export PDF & penyaring app.js tidak terpengaruh. */
html[data-gms-ui="lite"] .lt-rw-kol-bulan { display: none !important; }

/* Kolom lot panjang boleh membungkus, bukan memaksa tabel melebar. */
html[data-gms-ui="lite"] #historyPage table.history-table td,
html[data-gms-ui="lite"] #switchLanePage table.history-table td {
  max-width: 210px;
}

/* Baris di luar rentang tanggal / di luar halaman aktif. */
html[data-gms-ui="lite"] tr.lt-rw-luar,
html[data-gms-ui="lite"] tr.lt-rw-lain { display: none !important; }

html[data-gms-ui="lite"] tr.lt-rw-row.is-dipilih > td {
  background: rgba(245, 179, 1, .12) !important;
}

/* --- 68H. tombol detail --------------------------------------- */
html[data-gms-ui="lite"] .lt-rw-th { width: 54px; text-align: center !important; }
html[data-gms-ui="lite"] td.lt-rw-td { text-align: center !important; }
html[data-gms-ui="lite"] .lt-rw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--lt-r-xs);
  color: var(--lt-ink-3);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
html[data-gms-ui="lite"] .lt-rw-btn:hover {
  background: var(--lt-surface-2);
  border-color: var(--lt-amber);
  color: var(--lt-amber);
}
html[data-gms-ui="lite"] .lt-rw-btn:focus-visible {
  outline: 2px solid var(--lt-amber);
  outline-offset: 1px;
}

/* --- 68I. baris detail sebaris -------------------------------- */
html[data-gms-ui="lite"] tr.lt-rw-det > td {
  padding: 0 !important;
  border-bottom: 1px solid var(--lt-line) !important;
  background: var(--lt-surface-2) !important;
}
html[data-gms-ui="lite"] .lt-rw-detbox {
  padding: 14px 16px;
  border-left: 3px solid var(--lt-amber);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .22s ease, transform .22s ease;
}
html[data-gms-ui="lite"] tr.lt-rw-det.is-on .lt-rw-detbox {
  opacity: 1;
  transform: none;
}
html[data-gms-ui="lite"] .lt-rw-dethead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
html[data-gms-ui="lite"] .lt-rw-dettitle {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--lt-ink);
  font-size: 13px;
  font-weight: 800;
}
html[data-gms-ui="lite"] .lt-rw-detsub {
  margin-left: 8px;
  color: var(--lt-ink-3);
  font-size: 11px;
  font-weight: 600;
}
html[data-gms-ui="lite"] .lt-rw-detclose {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-sm);
  color: var(--lt-ink-2);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 11px;
  font-weight: 700;
}
html[data-gms-ui="lite"] .lt-rw-detclose:hover {
  border-color: var(--lt-amber);
  color: var(--lt-ink);
}
html[data-gms-ui="lite"] .lt-rw-detgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 18px;
}
html[data-gms-ui="lite"] .lt-rw-f {
  padding: 8px 10px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
}
html[data-gms-ui="lite"] .lt-rw-fl {
  display: block;
  margin-bottom: 3px;
  color: var(--lt-ink-3);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html[data-gms-ui="lite"] .lt-rw-fv {
  color: var(--lt-ink);
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}
html[data-gms-ui="lite"] .lt-rw-kosong { color: var(--lt-ink-3); font-style: normal; }

/* --- 68J. pager atas & bawah ---------------------------------- */
html[data-gms-ui="lite"] .lt-rw-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
}
html[data-gms-ui="lite"] .lt-rw-pager.is-atas {
  border-top: 1px solid var(--lt-line);
  border-bottom: 1px solid var(--lt-line);
  background: var(--lt-surface-2);
}
html[data-gms-ui="lite"] .lt-rw-info {
  color: var(--lt-ink-3);
  font-size: 11px;
  font-weight: 600;
}
html[data-gms-ui="lite"] .lt-rw-pgs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
html[data-gms-ui="lite"] .lt-rw-pg {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-xs);
  color: var(--lt-ink-2);
  cursor: pointer;
  font-family: var(--lt-font);
  font-size: 11px;
  font-weight: 700;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
html[data-gms-ui="lite"] .lt-rw-pg:hover:not(:disabled) {
  border-color: var(--lt-amber);
  color: var(--lt-ink);
}
html[data-gms-ui="lite"] .lt-rw-pg.is-on {
  background: var(--lt-amber);
  border-color: var(--lt-amber);
  color: #1B1200;
}
html[data-gms-ui="lite"] .lt-rw-pg:disabled { opacity: .35; cursor: default; }
html[data-gms-ui="lite"] .lt-rw-dots { color: var(--lt-ink-3); padding: 0 2px; }

/* --- 68K. animasi geser antar halaman ------------------------- */
@keyframes ltRwKiri  { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes ltRwKanan { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
html[data-gms-ui="lite"] tbody.lt-rw-geser-kiri  { animation: ltRwKiri  .26s ease both; }
html[data-gms-ui="lite"] tbody.lt-rw-geser-kanan { animation: ltRwKanan .26s ease both; }

@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="lite"] tbody.lt-rw-geser-kiri,
  html[data-gms-ui="lite"] tbody.lt-rw-geser-kanan { animation: none; }
  html[data-gms-ui="lite"] .lt-rw-detbox { transition: none; }
}

@media (max-width: 1100px) {
  html[data-gms-ui="lite"] #historyPage table.history-table,
  html[data-gms-ui="lite"] #switchLanePage table.history-table { font-size: 11px !important; }
  html[data-gms-ui="lite"] #historyPage table.history-table tbody td,
  html[data-gms-ui="lite"] #switchLanePage table.history-table tbody td { padding: 7px 6px !important; }
}

/* ============================================================
   68L. LEBAR KOLOM TABEL RIWAYAT — MUAT TANPA GULIR SAMPING

   Tabel ini punya 19-20 kolom. Dengan `table-layout: auto`, kolom
   Lot / Lot Before / Lot After melebar mengikuti isinya (sampai
   320px masing-masing) dan tabelnya menjadi 2.100px — jauh lebih
   lebar dari kartunya, jadi harus digulir ke samping.

   `table-layout: fixed` membalik aturannya: lebar ditentukan lebih
   dulu, isi yang panjang MEMBUNGKUS. Indeks kolom berbeda antara
   In/Out dan Switch Lane, jadi lebarnya dipasang lewat kelas
   `lt-rw-k-*` yang ditempelkan `js/gms-lite-riwayat.js` berdasarkan
   NAMA kolomnya, bukan `nth-child`.
   ============================================================ */

html[data-gms-ui="lite"] #historyPage table.history-table,
html[data-gms-ui="lite"] #switchLanePage table.history-table {
  table-layout: fixed !important;
}

/* Lebarnya PERSEN, bukan piksel. Pada `table-layout: fixed` piksel
   dijumlahkan apa adanya — 19 kolom x lebar tetap selalu melebihi
   lebar kartu begitu sidebar terbuka, dan tabelnya menjulur lagi.
   Persen dinormalkan browser terhadap lebar tabel, jadi kolomnya
   ikut menyempit bersama kartunya dan tidak pernah menjulur. */
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-pilih,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-pilih    { width: 2.4% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-no,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-no       { width: 2.6% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-waktu,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-waktu    { width: 6.5% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-aksi,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-aksi     { width: 7.6% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-lane,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-lane     { width: 4.5% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-bahan,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-bahan    { width: 6.0% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-dim,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-dim      { width: 6.2% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-tipe,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-tipe     { width: 4.0% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-supplier,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-supplier { width: 4.5% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-lot,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-lot      { width: 7.4% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-lotb,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-lotb     { width: 8.0% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-lota,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-lota     { width: 8.0% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-qtyb,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-qtyb     { width: 4.2% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-qtya,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-qtya     { width: 4.2% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-qty,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-qty      { width: 3.6% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-operator,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-operator { width: 5.0% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-supir,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-supir    { width: 4.9% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-ket,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-ket      { width: 8.0% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-hapus,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-hapus    { width: 4.5% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-detail,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-detail   { width: 3.5% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-bulan,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-bulan    { display: none !important; }

/* Nama bulan di belakang chip lot — masih di DOM (biar pencarian
   bebas tetap menemukannya), hanya tidak digambar. */
html[data-gms-ui="lite"] .lt-rw-bln { display: none !important; }

/* Waktu ditumpuk dua baris seperti foto acuan: tanggal lalu jam. */
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-waktu,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-waktu {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}

/* Chip lot dirapatkan supaya beberapa lot muat dalam satu sel. */
html[data-gms-ui="lite"] #historyPage .gms-lotword,
html[data-gms-ui="lite"] #switchLanePage .gms-lotword {
  display: inline-block;
  margin: 1px 2px 1px 0;
  padding: 1px 5px !important;
  font-size: 10px !important;
}

/* Lencana aksi (BARANG MASUK / BARANG KELUAR) dikecilkan. */
html[data-gms-ui="lite"] #historyPage .history-tag,
html[data-gms-ui="lite"] #switchLanePage .history-tag {
  display: inline-block;
  padding: 2px 7px !important;
  font-size: 9px !important;
  letter-spacing: .06em !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}

/* Kolom angka dirapatkan ke kanan seperti acuan. */
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-qty,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-qty,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-qtyb,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-qtyb,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-qtya,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-qtya,
html[data-gms-ui="lite"] #historyPage table.history-table th.lt-rw-k-qty,
html[data-gms-ui="lite"] #switchLanePage table.history-table th.lt-rw-k-qty,
html[data-gms-ui="lite"] #historyPage table.history-table th.lt-rw-k-qtyb,
html[data-gms-ui="lite"] #switchLanePage table.history-table th.lt-rw-k-qtyb,
html[data-gms-ui="lite"] #historyPage table.history-table th.lt-rw-k-qtya,
html[data-gms-ui="lite"] #switchLanePage table.history-table th.lt-rw-k-qtya { text-align: right !important; }

/* Kartu jumlah catatan tambahan. */
html[data-gms-ui="lite"] .history-pill.lt-rw-kkeluar { border-left-color: #F87171 !important; }
html[data-gms-ui="lite"] .history-pill.lt-rw-kmasuk  { border-left-color: #22C55E !important; }

/* Kartu "Periode" digantikan pencarian tanggal di kepala halaman. */
html[data-gms-ui="lite"] #historyPage .history-summary .history-pill:nth-child(3) {
  display: none !important;
}

/* Jaring pengaman: bila layar benar-benar sempit, kartunya yang
   menggulir — bukan halamannya. */
@media (max-width: 900px) {
  html[data-gms-ui="lite"] #historyPage table.history-table,
  html[data-gms-ui="lite"] #switchLanePage table.history-table {
    table-layout: auto !important;
    min-width: 900px;
  }
  html[data-gms-ui="lite"] #historyPage .page-card,
  html[data-gms-ui="lite"] #switchLanePage .page-card { overflow-x: auto; }
}

/* ============================================================
   68M. MELEPAS ATURAN "TABEL SELEBAR ISINYA"

   §49 memasang `min-width: max-content` dan `white-space: nowrap`
   pada `.history-table` — dari masa halaman riwayat memang
   digulir ke samping. Dua aturan itu MENGALAHKAN `table-layout:
   fixed`: berapa pun lebar kolom yang disetel, tabelnya tetap
   melebar mengikuti baris terpanjang. Keduanya dilepas KHUSUS di
   dua halaman riwayat; halaman lain (QC Dashboard, `.cls-table`)
   tidak ikut berubah.
   ============================================================ */

html[data-gms-ui="lite"] #historyPage table.history-table,
html[data-gms-ui="lite"] #switchLanePage table.history-table {
  min-width: 0 !important;
}
html[data-gms-ui="lite"] #historyPage table.history-table td,
html[data-gms-ui="lite"] #historyPage table.history-table th,
html[data-gms-ui="lite"] #switchLanePage table.history-table td,
html[data-gms-ui="lite"] #switchLanePage table.history-table th,
html[data-gms-ui="lite"] #historyPage .lot-before-cell,
html[data-gms-ui="lite"] #historyPage .lot-after-cell,
html[data-gms-ui="lite"] #switchLanePage .lot-before-cell,
html[data-gms-ui="lite"] #switchLanePage .lot-after-cell {
  white-space: normal !important;
  overflow-wrap: anywhere;
}
html[data-gms-ui="lite"] #historyPage table.history-table td.note-cell,
html[data-gms-ui="lite"] #historyPage table.history-table td.keterangan-cell,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.note-cell,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.keterangan-cell {
  max-width: none !important;
}

/* Kartu tidak perlu lagi menggulir ke samping di layar biasa. */
html[data-gms-ui="lite"] #historyPage .page-card,
html[data-gms-ui="lite"] #switchLanePage .page-card {
  overflow-x: hidden;
}
@media (max-width: 900px) {
  html[data-gms-ui="lite"] #historyPage .page-card,
  html[data-gms-ui="lite"] #switchLanePage .page-card { overflow-x: auto; }
  html[data-gms-ui="lite"] #historyPage table.history-table,
  html[data-gms-ui="lite"] #switchLanePage table.history-table { min-width: 880px !important; }
}

/* Pemenggalan kata: HANYA kolom lot yang boleh dipatah di tengah
   kode. Tanpa batasan ini "SWRCH10A" ikut terpotong jadi "SWRCH1 /
   0A" dan nomor baris 10 jadi "1 / 0". */
html[data-gms-ui="lite"] #historyPage table.history-table td,
html[data-gms-ui="lite"] #historyPage table.history-table th,
html[data-gms-ui="lite"] #switchLanePage table.history-table td,
html[data-gms-ui="lite"] #switchLanePage table.history-table th {
  overflow-wrap: break-word;
}
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-lot,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-lot,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-lotb,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-lotb,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-lota,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-lota,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-ket,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-ket {
  overflow-wrap: anywhere;
}
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-no,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-no,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-qty,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-qty,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-qtyb,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-qtyb,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-qtya,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-qtya,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-bahan,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-bahan,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-lane,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-lane,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-dim,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-dim,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-tipe,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-tipe,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-supplier,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-supplier,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-operator,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-operator {
  white-space: nowrap !important;
}

/* ============================================================
   68N. KOLOM YANG MENYINGKIR SAAT KARTUNYA MENYEMPIT

   19 kolom tidak akan pernah terbaca pada kartu selebar 800px —
   dipaksakan, "BARANG KELUAR" berdiri tegak satu huruf per baris.
   Menggulir ke samping juga bukan jawabannya (justru yang diminta
   hilang), jadi kolom yang paling tidak penting MENYINGKIR lebih
   dulu. Tidak ada data yang hilang: seluruh kolom tetap lengkap di
   panel "Lihat Detail" dan di Export PDF.

   Ukurannya dibaca dari LEBAR KARTU (`@container`), bukan lebar
   layar — kartunya menyempit drastis begitu sidebar dipaku, dan
   `@media` tidak melihat itu sama sekali.
   ============================================================ */

html[data-gms-ui="lite"] #historyPage .page-card,
html[data-gms-ui="lite"] #switchLanePage .page-card {
  container-type: inline-size;
  container-name: gmsriw;
}

@container gmsriw (max-width: 1240px) {
  html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-lotb,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-lotb,
  html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-lota,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-lota { display: none !important; }
}
@container gmsriw (max-width: 1020px) {
  html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-qtyb,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-qtyb,
  html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-qtya,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-qtya { display: none !important; }
}
@container gmsriw (max-width: 880px) {
  html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-tipe,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-tipe,
  html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-supplier,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-supplier { display: none !important; }
}
@container gmsriw (max-width: 740px) {
  html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-dim,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-dim,
  html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-operator,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-operator { display: none !important; }
}

/* Lencana aksi tidak boleh berdiri tegak walau kolomnya sempit. */
html[data-gms-ui="lite"] #historyPage .history-tag,
html[data-gms-ui="lite"] #switchLanePage .history-tag {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-aksi,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-aksi { overflow-wrap: normal !important; }

/* Batas bawah: di bawah ini barulah kartunya boleh digulir. */
@container gmsriw (max-width: 620px) {
  html[data-gms-ui="lite"] #historyPage table.history-table,
  html[data-gms-ui="lite"] #switchLanePage table.history-table {
    table-layout: auto !important;
    min-width: 620px !important;
  }
  html[data-gms-ui="lite"] #historyPage .page-card,
  html[data-gms-ui="lite"] #switchLanePage .page-card { overflow-x: auto; }
}

/* ============================================================
   68O. SATU PAGINASI SAJA UNTUK TABEL RIWAYAT

   `js/pagination.js` juga memaginasi kedua tabel ini (10 baris)
   dengan menulis `style.display="none"` INLINE pada tiap baris di
   luar halamannya. Penanda `data-gms-noauto` sudah dipasang, tetapi
   app.js membuat ulang <table>-nya setiap kali saringan berubah —
   penandanya ikut hilang, dan modul lama sempat memaginasi lagi
   sebelum penanda dipasang ulang. Hasilnya: 20 baris yang dipilih
   modul ini tinggal 10 yang benar-benar tergambar.

   Dua baris CSS ini yang memutuskan, bukan perlombaan waktu:
   baris yang LOLOS saringan modul ini dipaksa tergambar (gaya
   inline tanpa `!important` kalah), dan pager lama disembunyikan.
   ============================================================ */

html[data-gms-ui="lite"] #historyPage tr.lt-rw-row:not(.lt-rw-luar):not(.lt-rw-lain),
html[data-gms-ui="lite"] #switchLanePage tr.lt-rw-row:not(.lt-rw-luar):not(.lt-rw-lain) {
  display: table-row !important;
}
html[data-gms-ui="lite"] #historyPage .gms-pager,
html[data-gms-ui="lite"] #historyPage .gms-custom-pager,
html[data-gms-ui="lite"] #switchLanePage .gms-pager,
html[data-gms-ui="lite"] #switchLanePage .gms-custom-pager {
  display: none !important;
}

/* Judul kolom tidak boleh dipatah di tengah kata ("PT/SUP PLIER",
   "OPERATO R"). Patahannya hanya boleh di spasi atau garis miring. */
html[data-gms-ui="lite"] #historyPage table.history-table thead th,
html[data-gms-ui="lite"] #switchLanePage table.history-table thead th {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none;
  font-size: 9px !important;
  letter-spacing: .06em !important;
  padding: 9px 6px !important;
}

/* Kolom "Action" (tombol Hapus) di Switch Lane butuh ruang supaya
   tulisannya tidak jadi "Ha / pu / s". */
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-hapus,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-hapus { width: 6.0% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-hapus,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-hapus { white-space: nowrap !important; }
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-hapus button {
  padding: 3px 8px !important;
  font-size: 10px !important;
}

/* ============================================================
   68P. SWITCH LANE PUNYA ISI YANG JAUH LEBIH PANJANG

   Di Riwayat In/Out, "Lot Before" berisi satu rangkaian lot.
   Di Switch Lane, sel yang sama berisi DUA sisi lane sekaligus —
   "NO.45: (4-26)138 + (5-26)364 | NO.51: (6-26)366" — begitu pula
   Qty Before/After. Dengan lebar kolom yang sama, isinya patah
   satu-dua huruf per baris dan barisnya jadi setinggi satu layar.

   Maka di halaman ini keempat kolom itu menyingkir lebih awal.
   Tidak ada yang hilang: semuanya tetap lengkap di "Lihat Detail".
   ============================================================ */

@container gmsriw (max-width: 1400px) {
  html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-lotb,
  html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-lota { display: none !important; }
}
@container gmsriw (max-width: 1150px) {
  html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-qtyb,
  html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-qtya { display: none !important; }
}

/* Lane asal/tujuan pada Switch Lane berisi dua nama lane + panah. */
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-lane { width: 7.0% !important; }
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-lane { white-space: normal !important; }
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-ket { width: 10.0% !important; }

/* "penyesuaian lane" tidak boleh dipatah huruf per huruf —
   `anywhere` memotong di mana saja, `break-word` hanya memotong
   kata yang memang lebih panjang dari kolomnya. */
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-ket,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-ket { overflow-wrap: break-word !important; }

/* Kolom Detail cukup lebar untuk tombolnya; tanpa ini sel yang
   kesempitan memunculkan "…" milik aturan text-overflow lama. */
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-k-detail,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-k-detail { width: 4.6% !important; }
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-detail,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-detail {
  overflow: visible !important;
  text-overflow: clip !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

/* ============================================================
   68Q. JANGAN PERLIHATKAN TABEL YANG BELUM DIRAPIKAN

   app.js menggambar tabelnya lebih dulu; modul lite baru
   menyusulkan kelas kolom, saringan tanggal, dan paginasi
   beberapa puluh milidetik kemudian. Yang terlihat pengguna:
   tampilan lama berkelebat, lalu berganti. Isi tabel ditahan
   sampai penanda `lt-rw-siap` terpasang — dengan batas waktu 1,2
   detik, supaya tabelnya tetap muncul seandainya modulnya gagal.
   ============================================================ */

@keyframes ltRwPaksaTampil { to { opacity: 1; } }
html[data-gms-ui="lite"] #historyPage table.history-table:not(.lt-rw-siap) tbody,
html[data-gms-ui="lite"] #switchLanePage table.history-table:not(.lt-rw-siap) tbody {
  opacity: 0;
  animation: ltRwPaksaTampil 0s linear 1.2s forwards;
}
html[data-gms-ui="lite"] #historyPage table.history-table.lt-rw-siap tbody,
html[data-gms-ui="lite"] #switchLanePage table.history-table.lt-rw-siap tbody {
  opacity: 1;
  transition: opacity .18s ease;
}

/* Sel tabel riwayat tidak boleh memotong isinya dengan "…".
   §49 memberi seluruh `.history-table td/th` `overflow:hidden` +
   `text-overflow:ellipsis` — masuk akal ketika tabelnya digulir ke
   samping, tetapi pada tata letak tetap yang sekarang setiap kolom
   yang pas-pasan berakhir dengan titik-titik. Isinya membungkus
   atau kolomnya menyingkir (§68N), bukan dipotong diam-diam. */
html[data-gms-ui="lite"] #historyPage table.history-table td,
html[data-gms-ui="lite"] #historyPage table.history-table th,
html[data-gms-ui="lite"] #switchLanePage table.history-table td,
html[data-gms-ui="lite"] #switchLanePage table.history-table th {
  overflow: hidden !important;
  text-overflow: clip !important;
}

/* Kolom yang isinya bisa berupa kalimat ("data tidak tersedia" pada
   riwayat PLAT, yang tidak punya Tipe Coil maupun Diameter coil)
   HARUS boleh membungkus. Dengan `nowrap` kalimat itu meluber ke
   kolom sebelahnya dan tulisannya saling menimpa. */
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-tipe,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-dim,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-supplier,
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-lane,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-tipe,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-dim,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-supplier,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-lane {
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* Kolom Detail tetap boleh meluap sedikit untuk tombolnya. */
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-k-detail,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-k-detail {
  overflow: visible !important;
}

/* Kolom yang seluruh isinya kosong disembunyikan (§5c di
   js/gms-lite-riwayat.js) — mis. "Tipe Coil" pada riwayat PLAT. */
html[data-gms-ui="lite"] #historyPage table.history-table .lt-rw-hampa,
html[data-gms-ui="lite"] #switchLanePage table.history-table .lt-rw-hampa {
  display: none !important;
}

/* Sel "kosong" ("data tidak tersedia" yang dipendekkan jadi "–"). */
html[data-gms-ui="lite"] #historyPage table.history-table td.lt-rw-nihil,
html[data-gms-ui="lite"] #switchLanePage table.history-table td.lt-rw-nihil {
  color: var(--lt-ink-3) !important;
  text-align: center !important;
}

/* ============================================================
   §69  "AMBIL DARI DATA" — Kelola Item & Kelola Supplier
   ------------------------------------------------------------
   Tombol yang dipasang js/gms-master-impor.js di samping kotak
   isian tiap kartu master. Bentuknya mengikuti .btn-small milik
   app.js; yang ditambah di sini hanya ikon + jarak, supaya tetap
   satu keluarga dengan tombol "+Tambah" di sebelahnya.
   ============================================================ */

.gms-impor-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.gms-impor-btn svg { flex: 0 0 auto; }

/* Kotak isian pada kartu katalog memakai flex; tombol impor tidak
   boleh ikut memanjang mengisi sisa ruang. */
.catalog-tools .gms-impor-btn,
.supplier-tools .gms-impor-btn { flex: 0 0 auto; }

/* Di layar sempit, tombolnya turun ke baris sendiri agar kotak
   isian tetap selebar mungkin. */
@media (max-width: 560px) {
  .catalog-tools,
  .supplier-tools { flex-wrap: wrap; }
  .catalog-tools .gms-impor-btn,
  .supplier-tools .gms-impor-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   §70  LAPORAN TEMUAN — bagian baru (js/gms-laporan.js)
   ------------------------------------------------------------
   Kartu, lencana, tombol, dan modalnya memakai kelas yang SUDAH
   ada (.laporan-card, .laporan-badge, .btn-status, .modal-grid,
   …) supaya halamannya tetap terlihat sebagai bagian dari
   website ini. Yang ditambah di sini hanya bagian yang memang
   belum pernah ada: baris tag, panel detail sebaris, daftar
   kerusakan hoist, dan chip pemilih.
   ============================================================ */

/* ---- baris tag di kartu (jumlah, lot, hoist error) ---- */
html[data-gms-ui="lite"] .gl-lap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

html[data-gms-ui="lite"] .gl-lap-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--lt-pill);
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  color: var(--lt-ink-2);
  font-family: var(--lt-font);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

html[data-gms-ui="lite"] .gl-lap-tag.is-bahaya {
  background: var(--lt-bad-soft);
  border-color: rgba(239, 68, 68, .28);
  color: #b91c1c;
}

/* ---- tombol Lihat Detail ---- */
html[data-gms-ui="lite"] .gl-lap-lihat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---- panel detail: muncul DI DALAM kartunya sendiri, tepat di
        bawah barisnya — pola yang sama dengan Riwayat In/Out. ---- */
html[data-gms-ui="lite"] .gl-lap-detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--lt-line-2);
  animation: glLapBuka .18s ease-out both;
}

@keyframes glLapBuka {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

html[data-gms-ui="lite"] .gl-lap-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 18px;
  margin-bottom: 12px;
}

html[data-gms-ui="lite"] .gl-lap-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--lt-line);
}

html[data-gms-ui="lite"] .gl-lap-info-l {
  font-family: var(--lt-font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lt-ink-3);
  white-space: nowrap;
}

html[data-gms-ui="lite"] .gl-lap-info-v {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lt-ink);
  text-align: right;
  overflow-wrap: break-word;
}

html[data-gms-ui="lite"] .gl-lap-info.is-bahaya .gl-lap-info-v { color: #b91c1c; }

/* ---- rincian kerusakan hoist di panel detail ---- */
html[data-gms-ui="lite"] .gl-lap-hoist {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--lt-r-xs);
  background: var(--lt-bad-soft);
  border: 1px solid rgba(239, 68, 68, .22);
}

html[data-gms-ui="lite"] .gl-lap-hoist-baris {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 3px 0;
  font-size: 12.5px;
  color: #b91c1c;
}

html[data-gms-ui="lite"] .gl-lap-hoist-baris svg { flex: 0 0 auto; margin-top: 2px; }

/* ---- keterangan ---- */
html[data-gms-ui="lite"] .gl-lap-detail-lbl {
  font-family: var(--lt-font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lt-ink-3);
  margin: 12px 0 6px;
}

html[data-gms-ui="lite"] .gl-lap-detail-box {
  padding: 10px 12px;
  border-radius: var(--lt-r-xs);
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  font-size: 13px;
  line-height: 1.6;
  color: var(--lt-ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ---- chip pemilih (Ubah Status, hoist Ya/Tidak) ---- */
html[data-gms-ui="lite"] .gl-lap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html[data-gms-ui="lite"] .gl-lap-chip {
  padding: 6px 16px;
  border-radius: var(--lt-pill);
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  color: var(--lt-ink-2);
  font-family: var(--lt-font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

html[data-gms-ui="lite"] .gl-lap-chip:hover {
  background: var(--lt-surface-2);
  border-color: var(--lt-line-2);
}

html[data-gms-ui="lite"] .gl-lap-chip.is-on {
  background: var(--lt-navy);
  border-color: var(--lt-navy);
  color: #fff;
}

html[data-gms-ui="lite"] .gl-lap-chip.is-bahaya.is-on {
  background: var(--lt-bad);
  border-color: var(--lt-bad);
}

/* ---- daftar centang kerusakan hoist di formulir ---- */
html[data-gms-ui="lite"] .gl-lap-ceklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
}

html[data-gms-ui="lite"] .gl-lap-cek {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--lt-r-xs);
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  font-size: 12.5px;
  color: var(--lt-ink-2);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

html[data-gms-ui="lite"] .gl-lap-cek:hover { background: var(--lt-surface-2); }

html[data-gms-ui="lite"] .gl-lap-cek.is-on {
  background: var(--lt-bad-soft);
  border-color: rgba(239, 68, 68, .28);
  color: #b91c1c;
  font-weight: 600;
}

html[data-gms-ui="lite"] .gl-lap-cek input {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  accent-color: var(--lt-bad);
  cursor: pointer;
}

/* ---- catatan kecil (izin, syarat hapus, pelapor) ---- */
html[data-gms-ui="lite"] .gl-lap-nota {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--lt-ink-3);
}

html[data-gms-ui="lite"] .gl-lap-hapus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

/* Kartu yang detailnya terbuka ditandai supaya mudah dilacak mata
   setelah halaman digambar ulang. */
html[data-gms-ui="lite"] .laporan-card.gl-lap-buka {
  border-color: var(--lt-line-2) !important;
  box-shadow: var(--lt-sh-2) !important;
}

@media (max-width: 560px) {
  html[data-gms-ui="lite"] .laporan-header-bar { flex-wrap: wrap; gap: 10px; }
  html[data-gms-ui="lite"] .gl-lap-detail-grid { grid-template-columns: 1fr; }
  html[data-gms-ui="lite"] .gl-lap-ceklist { grid-template-columns: 1fr; }
}