/* ================================================================
   GMS — REDESIGN v5  "GOLD GEAR MACHINE"
   File: css/gms-gear-v5.css
   Versi: 1.0  |  10 Agustus 2026

   Tampilan kelima GMS: mesin gerigi emas. Dibuat BEDA TOTAL dari
   v4 "Concrete & Signal" (0px, grafit dingin, biru langit) dan
   dari v3 (baja biru). Fungsi dan seluruh fitur TIDAK berubah —
   hanya bahasa visualnya yang diganti.

   LIMA KEPUTUSAN YANG MEMBUATNYA BEDA TOTAL
   1. OBSIDIAN HANGAT, BUKAN GRAFIT DINGIN. Semua permukaan
      direntangkan ke keluarga cokelat-hitam (warna besi tua dan
      asap mesin), bukan abu atau biru malam. Layar terasa
      seperti ruang mesin yang diterangi api tungku.
   2. CHAMPAGNE GOLD #E8B34B, BUKAN BIRU LANGIT. Satu-satunya
      aksen perintah. Emas tua yang sudah digosok — berani tapi
      tidak menyala. Platinum di tepi, tembaga hanya untuk
      peringatan.
      CATATAN: warna identitas fungsi TIDAK ikut diseragamkan —
      Edit biru, Masuk hijau, Keluar merah muda, Hapus merah,
      Pindah teal, Cek Data Lot oranye, Tambah Item hijau. Begitu
      juga standar warna material pada nama bahan. Lihat bagian 11.
   3. SUDUT MESIN BUBUT, BUKAN NOL LENGKUNGAN. Kartu 10px,
      kontrol 6px, chip 4px — seperti champfer yang dipoles di
      mesin bubut, bukan kotak stempel.
   4. LOGAM TEMPA. Kepala panel & topbar dilapisi gradasi
      sikat-silang tipis dengan garis cahaya di tepi atas (bevel
      1px) dan garis emas rambut di tepi bawah. Semua panel
      terlihat diukir, bukan dicat.
   5. RODA GERIGI SEBAGAI JIWA. Roda gigi besar berputar pelan
      di belakang layar login, lambang gigi di baris perintah
      topbar, dan pola heksa-mesin halus di latar seluruh layar.

   CARA MEMATIKAN (tanpa deploy ulang)
     ?ui=brutal  -> kembali ke redesign v4 (concrete & signal)
     ?ui=steel   -> kembali ke redesign v3 (baja biru)
     ?classic=1  -> kembali ke tampilan paling lama
     ?ui=gear    -> paksa tampilan v5 ini (bawaan)

   ATURAN PROJECT (DOKUMENTASI_GMS.md §13)
   - app.js tidak disentuh.
   - Tanpa emoji sebagai icon.
   - Seluruh aturan diawali html[data-gms-ui="gear"] supaya
     spesifisitasnya selalu menang atas lapisan v3/v4 tanpa perlu
     mematikan lapisan itu.
   ================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&family=Exo+2:wght@400;500;600;700&family=Share+Tech+Mono&display=swap");

/* ================================================================
   1. TOKEN — obsidian hangat + champagne gold
   ================================================================ */

html[data-gms-ui="gear"],
html[data-gms-ui="gear"] :root {
  /* permukaan — besi tua hangat, ke arah cokelat-hitam */
  --v5-void: #0b0908;
  --v5-slab: #131009;
  --v5-slab2: #18150e;
  --v5-raise: #201c13;
  --v5-sunken: #070504;

  /* garis — tembaga gelap */
  --v5-rule: #2b2519;
  --v5-rule2: #3d3524;
  --v5-rule3: #5a4e33;

  /* teks — krem hangat, tiga tingkat, semua lolos WCAG AA
     terhadap --v5-slab #131009:
       ink  #F6EFE0  16,9:1
       ink2 #C4BBA6   8,3:1
       ink3 #94896F   5,0:1 */
  --v5-ink: #f6efe0;
  --v5-ink2: #c4bba6;
  --v5-ink3: #94896f;

  /* warna perintah — CHAMPAGNE GOLD (emosi: mewah, presisi,
     mesin yang dirawat). Dipakai untuk aksi utama, penanda
     posisi, dan seluruh perhatian visual. */
  --v5-gold: #e8b34b;
  --v5-gold-hi: #ffd98a;
  --v5-gold-deep: #b47e1e;
  --v5-gold-dim: rgba(232, 179, 75, 0.13);
  --v5-gold-line: rgba(232, 179, 75, 0.42);
  --v5-on-gold: #201303;

  /* semantik */
  --v5-hazard: #ffc400;
  --v5-ok: #3ddc84;
  --v5-ng: #ff3b30;
  --v5-copper: #e07b39;

  /* huruf — semua sudah dimuat index.html, tanpa beban font baru */
  --v5-display: "Orbitron", "Exo 2", system-ui, sans-serif;
  --v5-ui: "Exo 2", system-ui, sans-serif;
  --v5-mono: "Share Tech Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* irama */
  --v5-row: 42px;
  --v5-tick: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* pita tembaga — dipakai di baris kritis */
  --v5-tape: repeating-linear-gradient(
    45deg,
    rgba(232, 179, 75, 0.85) 0 7px,
    #0b0908 7px 14px
  );

  /* sikat logam — lapisan halus yang dipakai kartu & pelat */
  --v5-brush: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.045) 0%,
    rgba(255, 255, 255, 0.012) 14%,
    rgba(0, 0, 0, 0.28) 100%
  );
  --v5-plate: linear-gradient(
    180deg,
    #221d12 0%,
    #1a1610 55%,
    #14110b 100%
  );

  /* menimpa token lama supaya komponen yang belum disebut
     satu per satu ikut berubah */
  --bg-dark: #0b0908;
  --bg-card: #131009;
  --bg-card2: #18150e;
  --bg-sunken: #070504;
  --border: #2b2519;
  --line-2: #3d3524;
  --line-hair: #1d1910;
  --text: #f6efe0;
  --text-dim: #c4bba6;
  --text-mute: #94896f;
  --accent: #e8b34b;
  --accent2: #b47e1e;
  --accent-soft: rgba(232, 179, 75, 0.13);
  --gold-hi: #ffd98a;
  --steel: #d9c47e;
  --danger: #ff3b30;
  --success: #3ddc84;
  --warning: #ffc400;
  --r-card: 10px;
  --r-ctl: 6px;
  --r-chip: 4px;
  --row-h: 42px;
  --f-display: var(--v5-display);
  --f-data: var(--v5-mono);
}

/* ================================================================
   2. MESIN BUBUT — semua sudut champfer lembut
   ================================================================ */

html[data-gms-ui="gear"] .stat-card,
html[data-gms-ui="gear"] .dash-card,
html[data-gms-ui="gear"] .lane-card,
html[data-gms-ui="gear"] .summary-card,
html[data-gms-ui="gear"] .qc-card,
html[data-gms-ui="gear"] .history-card,
html[data-gms-ui="gear"] .panel-card,
html[data-gms-ui="gear"] .gms-ai-card,
html[data-gms-ui="gear"] .modal,
html[data-gms-ui="gear"] .login-box,
html[data-gms-ui="gear"] .card,
html[data-gms-ui="gear"] [class$="-card"],
html[data-gms-ui="gear"] [class$="-panel"],
html[data-gms-ui="gear"] [class$="-box"] {
  border-radius: 10px !important;
}
html[data-gms-ui="gear"] input,
html[data-gms-ui="gear"] select,
html[data-gms-ui="gear"] textarea,
html[data-gms-ui="gear"] button,
html[data-gms-ui="gear"] .btn,
html[data-gms-ui="gear"] .btn-small,
html[data-gms-ui="gear"] .gms-pg-btn,
html[data-gms-ui="gear"] .gms-ln-btn,
html[data-gms-ui="gear"] .gms-akt-pg,
html[data-gms-ui="gear"] .history-tab-btn,
html[data-gms-ui="gear"] .analytics-btn,
html[data-gms-ui="gear"] .nav-tab,
html[data-gms-ui="gear"] .admin-tab,
html[data-gms-ui="gear"] .cls-tab,
html[data-gms-ui="gear"] .gms-mclose,
html[data-gms-ui="gear"] .cls-btn-close,
html[data-gms-ui="gear"] .sb-close {
  border-radius: 6px !important;
}
html[data-gms-ui="gear"] .lot-tag,
html[data-gms-ui="gear"] .mat-badge,
html[data-gms-ui="gear"] .badge,
html[data-gms-ui="gear"] .chip,
html[data-gms-ui="gear"] .status-chip,
html[data-gms-ui="gear"] .qc-status,
html[data-gms-ui="gear"] .history-pill,
html[data-gms-ui="gear"] .dash-badge,
html[data-gms-ui="gear"] .gms-akt-tag,
html[data-gms-ui="gear"] .critical-inline-tag {
  border-radius: 4px !important;
}
/* satu-satunya pengecualian: yang memang harus bulat */
html[data-gms-ui="gear"] .mat-dot,
html[data-gms-ui="gear"] .notif-badge,
html[data-gms-ui="gear"] .gms-cs-sw {
  border-radius: 50% !important;
}

/* ================================================================
   3. DASAR — ruang mesin yang diterangi api tungku
   ================================================================ */

html[data-gms-ui="gear"] body {
  background: var(--v5-void) !important;
  background-image: none !important;
  color: var(--v5-ink) !important;
  font-family: var(--v5-ui) !important;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* tiga lapis: cahaya tungku di kiri-bawah, lapis emas samar di
   kanan-atas, lalu pola heksa-mesin yang sangat halus */
html[data-gms-ui="gear"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      900px 500px at 8% 108%,
      rgba(232, 179, 75, 0.055),
      transparent 60%
    ),
    radial-gradient(
      700px 400px at 94% -6%,
      rgba(232, 179, 75, 0.035),
      transparent 55%
    ),
    linear-gradient(
      to right,
      rgba(246, 239, 224, 0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgba(246, 239, 224, 0.012) 1px,
      transparent 1px
    );
  background-size: auto, auto, 64px 64px, 64px 64px;
}

html[data-gms-ui="gear"] #appShell,
html[data-gms-ui="gear"] #loginScreen {
  position: relative;
  z-index: 1;
}

html[data-gms-ui="gear"] body,
html[data-gms-ui="gear"] input,
html[data-gms-ui="gear"] select,
html[data-gms-ui="gear"] textarea,
html[data-gms-ui="gear"] button,
html[data-gms-ui="gear"] td,
html[data-gms-ui="gear"] th {
  font-family: var(--v5-ui) !important;
}

html[data-gms-ui="gear"] ::selection {
  background: var(--v5-gold);
  color: var(--v5-on-gold);
}

html[data-gms-ui="gear"] *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-gms-ui="gear"] *::-webkit-scrollbar-track {
  background: var(--v5-sunken);
}
html[data-gms-ui="gear"] *::-webkit-scrollbar-thumb {
  background: var(--v5-rule2);
  border: 2px solid var(--v5-sunken);
  border-radius: 5px;
}
html[data-gms-ui="gear"] *::-webkit-scrollbar-thumb:hover {
  background: var(--v5-gold-deep);
}

/* teks yang dikunci lewat -webkit-text-fill-color dikembalikan
   supaya `color` kembali berkuasa */
html[data-gms-ui="gear"] body *:not(.login-title):not(.v5-brand-mark) {
  -webkit-text-fill-color: currentColor !important;
}

/* ================================================================
   4. TIPOGRAFI — Orbitron untuk gelar, Exo 2 untuk baca,
      Share Tech Mono untuk angka mesin
   ================================================================ */

html[data-gms-ui="gear"] h1,
html[data-gms-ui="gear"] h2,
html[data-gms-ui="gear"] h3,
html[data-gms-ui="gear"] h4,
html[data-gms-ui="gear"] .topbar-title {
  font-family: var(--v5-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

/* label mikro — plakat terukir */
html[data-gms-ui="gear"] th,
html[data-gms-ui="gear"] .sb-group-label,
html[data-gms-ui="gear"] .filter-group > label,
html[data-gms-ui="gear"] .modal-field > label,
html[data-gms-ui="gear"] .admin-tabs-label,
html[data-gms-ui="gear"] .stat-label,
html[data-gms-ui="gear"] .dash-label,
html[data-gms-ui="gear"] .login-box label {
  font-family: var(--v5-ui) !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--v5-ink3) !important;
}

/* angka & kode selalu mono, selalu rata angka */
html[data-gms-ui="gear"] .stat-value,
html[data-gms-ui="gear"] .dash-value,
html[data-gms-ui="gear"] .lot-tag,
html[data-gms-ui="gear"] .gms-pg-info,
html[data-gms-ui="gear"] .gms-ln-info,
html[data-gms-ui="gear"] .notif-badge,
html[data-gms-ui="gear"] .coil-type,
html[data-gms-ui="gear"] .history-pill .val,
html[data-gms-ui="gear"] .movement-delta,
html[data-gms-ui="gear"] .rank-value,
html[data-gms-ui="gear"] td:nth-child(2) {
  font-family: var(--v5-mono) !important;
}
html[data-gms-ui="gear"] td,
html[data-gms-ui="gear"] .dash-value,
html[data-gms-ui="gear"] .stat-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ================================================================
   5. TOPBAR — pelat baja terukir + baris perintah emas
   ================================================================ */

html[data-gms-ui="gear"] .topbar {
  background: var(--v5-plate) !important;
  border-bottom: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(232, 179, 75, 0.16) !important;
  position: relative;
  padding: 12px 18px !important;
}
/* baris perintah emas: garis rambut + gigi gerigi kecil di kiri */
html[data-gms-ui="gear"] .topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--v5-gold) 0%,
    var(--v5-gold-deep) 22%,
    rgba(232, 179, 75, 0.25) 55%,
    var(--v5-gold) 100%
  );
}
html[data-gms-ui="gear"] .topbar-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--v5-ink) !important;
}
html[data-gms-ui="gear"] .topbar-logo img {
  filter: none !important;
  opacity: 0.95;
}
html[data-gms-ui="gear"] .user-name {
  color: var(--v5-ink) !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html[data-gms-ui="gear"] .role-badge {
  background: var(--v5-gold) !important;
  color: var(--v5-on-gold) !important;
  border: 1px solid var(--v5-gold-hi) !important;
  border-radius: 4px !important;
  font-family: var(--v5-ui) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  padding: 4px 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html[data-gms-ui="gear"] .session-chip {
  background: transparent !important;
  border: 1px solid var(--v5-rule) !important;
  color: var(--v5-ink3) !important;
  border-radius: 4px !important;
  font-family: var(--v5-mono) !important;
  font-size: 10.5px !important;
  padding: 4px 9px !important;
}

/* ================================================================
   6. SIDEBAR — logam gelap, penanda posisi mekanik 4px emas
   ================================================================ */

html[data-gms-ui="gear"] #gmsSidebar {
  background: var(--v5-sunken) !important;
  border-right: 1px solid var(--v5-rule2) !important;
}
html[data-gms-ui="gear"] .sb-head {
  border-bottom: 1px solid var(--v5-rule2) !important;
  background: var(--v5-plate) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html[data-gms-ui="gear"] .sb-head-mark {
  background: var(--v5-gold) !important;
  color: var(--v5-on-gold) !important;
  font-family: var(--v5-display) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
html[data-gms-ui="gear"] .sb-head-text .t {
  font-family: var(--v5-display) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v5-ink) !important;
}
html[data-gms-ui="gear"] .sb-head-text .s {
  color: var(--v5-ink3) !important;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
html[data-gms-ui="gear"] .sb-group {
  border-bottom: 1px solid var(--v5-rule);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
html[data-gms-ui="gear"] .sb-group-label {
  padding: 12px 14px 6px !important;
  color: var(--v5-ink3) !important;
}
html[data-gms-ui="gear"] .sb-item {
  color: var(--v5-ink2) !important;
  border-left: 4px solid transparent !important;
  padding: 10px 14px !important;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: background 0.18s var(--v5-tick), color 0.18s var(--v5-tick),
    border-color 0.18s var(--v5-tick);
}
html[data-gms-ui="gear"] .sb-item:hover {
  background: var(--v5-raise) !important;
  color: var(--v5-ink) !important;
  border-left-color: var(--v5-rule3) !important;
}
html[data-gms-ui="gear"] .sb-item.active {
  background: linear-gradient(90deg, var(--v5-gold-dim), transparent 70%) !important;
  color: var(--v5-gold-hi) !important;
  border-left-color: var(--v5-gold) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
html[data-gms-ui="gear"] .sb-item.danger {
  color: #ff9b8a !important;
}
html[data-gms-ui="gear"] .sb-foot {
  border-top: 1px solid var(--v5-rule2) !important;
  background: var(--v5-plate) !important;
}
html[data-gms-ui="gear"] .sb-foot .user {
  font-family: var(--v5-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--v5-ink) !important;
}
html[data-gms-ui="gear"] #sbUserRole {
  color: var(--v5-gold) !important;
}
html[data-gms-ui="gear"] #sbBackdrop {
  background: rgba(5, 4, 3, 0.78) !important;
  backdrop-filter: blur(2px) !important;
}

/* ================================================================
   7. TOMBOL — emas tempa untuk primer, pelat untuk sekunder
   ================================================================ */

html[data-gms-ui="gear"] button,
html[data-gms-ui="gear"] .btn {
  font-family: var(--v5-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  transition: background-color 0.18s var(--v5-tick),
    border-color 0.18s var(--v5-tick), color 0.18s var(--v5-tick),
    transform 0.06s var(--v5-tick), box-shadow 0.18s var(--v5-tick);
}

/* primer — emas tempa dengan bevel atas menyala */
html[data-gms-ui="gear"] .btn-login,
html[data-gms-ui="gear"] .btn-save,
html[data-gms-ui="gear"] .btn-export,
html[data-gms-ui="gear"] .btn-primary,
html[data-gms-ui="gear"] .gms-mbtn.primary,
html[data-gms-ui="gear"] .gms-ai-btn.primary {
  background: linear-gradient(180deg, #f3c96f 0%, #e8b34b 45%, #cf9a30 100%) !important;
  background-image: linear-gradient(180deg, #f3c96f 0%, #e8b34b 45%, #cf9a30 100%) !important;
  color: var(--v5-on-gold) !important;
  border: 1px solid #a97c1e !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.5) !important;
  font-weight: 700 !important;
}
html[data-gms-ui="gear"] .btn-login:hover,
html[data-gms-ui="gear"] .btn-save:hover,
html[data-gms-ui="gear"] .btn-export:hover {
  background: linear-gradient(180deg, #ffe2a3 0%, #f3c96f 50%, #dfa83c 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 10px rgba(232, 179, 75, 0.25) !important;
  transform: translateY(-1px);
}
html[data-gms-ui="gear"] .btn-login:active,
html[data-gms-ui="gear"] .btn-save:active,
html[data-gms-ui="gear"] .btn-export:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* sekunder — pelat baja terukir, garis emas saat disentuh */
html[data-gms-ui="gear"] .btn-secondary,
html[data-gms-ui="gear"] .btn-cancel,
html[data-gms-ui="gear"] .btn-reset,
html[data-gms-ui="gear"] .btn-manage-lane,
html[data-gms-ui="gear"] .btn-filter,
html[data-gms-ui="gear"] .gms-mbtn,
html[data-gms-ui="gear"] .gms-ai-btn,
html[data-gms-ui="gear"] .gms-akt-btn,
html[data-gms-ui="gear"] .cls-btn {
  background: linear-gradient(180deg, #1d1911 0%, #15120c 100%) !important;
  background-image: linear-gradient(180deg, #1d1911 0%, #15120c 100%) !important;
  border: 1px solid var(--v5-rule2) !important;
  color: var(--v5-ink2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
html[data-gms-ui="gear"] .btn-secondary:hover,
html[data-gms-ui="gear"] .btn-cancel:hover,
html[data-gms-ui="gear"] .btn-reset:hover,
html[data-gms-ui="gear"] .btn-manage-lane:hover,
html[data-gms-ui="gear"] .btn-filter:hover,
html[data-gms-ui="gear"] .gms-mbtn:hover,
html[data-gms-ui="gear"] .gms-ai-btn:hover,
html[data-gms-ui="gear"] .gms-akt-btn:hover,
html[data-gms-ui="gear"] .cls-btn:hover {
  border-color: var(--v5-gold-deep) !important;
  color: var(--v5-ink) !important;
  background: linear-gradient(180deg, #26201400, #262014) !important;
  background: #262014 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* keluar / logout — tembaga */
html[data-gms-ui="gear"] .btn-logout {
  background: transparent !important;
  border: 1px solid rgba(255, 99, 71, 0.45) !important;
  color: #ff9b8a !important;
  box-shadow: none !important;
}
html[data-gms-ui="gear"] .btn-logout:hover {
  background: var(--v5-ng) !important;
  border-color: var(--v5-ng) !important;
  color: #fff !important;
}

/* ================================================================
   8. TAB — sakelar panel, aktif = plakat emas
   ================================================================ */

html[data-gms-ui="gear"] .nav-tabs,
html[data-gms-ui="gear"] .admin-tabs-actions {
  gap: 6px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--v5-rule) !important;
  padding-bottom: 8px !important;
}
html[data-gms-ui="gear"] .nav-tab,
html[data-gms-ui="gear"] .admin-tab {
  background: linear-gradient(180deg, #1d1911 0%, #14110b 100%) !important;
  background-image: linear-gradient(180deg, #1d1911 0%, #14110b 100%) !important;
  border: 1px solid var(--v5-rule) !important;
  color: var(--v5-ink3) !important;
  font-family: var(--v5-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  font-size: 12px !important;
  padding: 10px 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: all 0.18s var(--v5-tick);
}
html[data-gms-ui="gear"] .nav-tab:hover,
html[data-gms-ui="gear"] .admin-tab:hover {
  color: var(--v5-ink) !important;
  border-color: var(--v5-rule3) !important;
}
html[data-gms-ui="gear"] .nav-tab.active,
html[data-gms-ui="gear"] .admin-tab.active {
  background: linear-gradient(180deg, #f3c96f 0%, #e0a93c 90%) !important;
  color: var(--v5-on-gold) !important;
  border-color: #d8a942 !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 8px rgba(232, 179, 75, 0.2) !important;
}
html[data-gms-ui="gear"] .admin-tabs {
  background: transparent !important;
  border-bottom: 1px solid var(--v5-rule) !important;
}
html[data-gms-ui="gear"] .admin-tabs-label {
  color: var(--v5-ink3) !important;
  border-left: 3px solid var(--v5-gold);
  padding-left: 8px !important;
}

/* ================================================================
   9. PANEL — logam tempa dengan bevel & garis emas rambut
   ================================================================ */

html[data-gms-ui="gear"] .filters-bar,
html[data-gms-ui="gear"] .table-wrap,
html[data-gms-ui="gear"] .chart-card,
html[data-gms-ui="gear"] .lane-card,
html[data-gms-ui="gear"] .summary-card,
html[data-gms-ui="gear"] .qc-card,
html[data-gms-ui="gear"] .history-card,
html[data-gms-ui="gear"] .panel-card,
html[data-gms-ui="gear"] .gms-ai-card,
html[data-gms-ui="gear"] .reminder-panel,
html[data-gms-ui="gear"] .gms-pager,
html[data-gms-ui="gear"] .gms-lanenav,
html[data-gms-ui="gear"] .dashboard-section,
html[data-gms-ui="gear"] .analytics-group,
html[data-gms-ui="gear"] .dashboard-table-card,
html[data-gms-ui="gear"] .analytics-chart-card,
html[data-gms-ui="gear"] .analytics-side-card,
html[data-gms-ui="gear"] .movement-card {
  background: var(--v5-brush), var(--v5-slab) !important;
  background-image: var(--v5-brush), linear-gradient(180deg, var(--v5-slab2), var(--v5-slab)) !important;
  border: 1px solid var(--v5-rule) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(232, 179, 75, 0.05) !important;
}

/* kartu statistik: nomor urut mesin di pojok + penanda emas di kiri */
html[data-gms-ui="gear"] .stat-card,
html[data-gms-ui="gear"] .dash-card {
  background: var(--v5-brush), linear-gradient(180deg, #1b1710 0%, #15120c 100%) !important;
  background-image: var(--v5-brush), linear-gradient(180deg, #1b1710 0%, #15120c 100%) !important;
  border: 1px solid var(--v5-rule) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(232, 179, 75, 0.09) !important;
  position: relative;
  overflow: hidden;
  padding: 16px 16px 14px !important;
}
html[data-gms-ui="gear"] .stat-card::before,
html[data-gms-ui="gear"] .dash-card::before {
  content: "";
  position: absolute;
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    var(--v5-gold) 0%,
    rgba(232, 179, 75, 0.35) 60%,
    transparent 100%);
}
html[data-gms-ui="gear"] .stat-value,
html[data-gms-ui="gear"] .dash-value {
  color: var(--v5-ink) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
html[data-gms-ui="gear"] .dash-meta,
html[data-gms-ui="gear"] .stat-meta {
  color: var(--v5-ink3) !important;
  font-family: var(--v5-mono) !important;
  font-size: 10.5px !important;
}
html[data-gms-ui="gear"] .dash-card.up .dash-value,
html[data-gms-ui="gear"] .movement-delta.plus,
html[data-gms-ui="gear"] .table-positive {
  color: var(--v5-ok) !important;
}
html[data-gms-ui="gear"] .dash-card.down .dash-value,
html[data-gms-ui="gear"] .movement-delta.minus,
html[data-gms-ui="gear"] .table-negative {
  color: var(--v5-ng) !important;
}

/* judul seksi = pelat tempa dengan takik emas 4px */
html[data-gms-ui="gear"] .dashboard-section-title,
html[data-gms-ui="gear"] .dashboard-title,
html[data-gms-ui="gear"] .panel-head,
html[data-gms-ui="gear"] .analytics-mini-head,
html[data-gms-ui="gear"] .dashboard-table-head,
html[data-gms-ui="gear"] [id$="Page"] .page-title,
html[data-gms-ui="gear"] [id$="Page"] h2,
html[data-gms-ui="gear"] [id$="Page"] h3,
html[data-gms-ui="gear"] [id$="Page"] h4 {
  font-family: var(--v5-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--v5-gold-hi) !important;
  background: var(--v5-plate) !important;
  border-left: 4px solid var(--v5-gold) !important;
  border-radius: 4px 4px 0 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  padding: 9px 14px !important;
  margin: 0 0 14px !important;
  display: block;
}
html[data-gms-ui="gear"] .dashboard-kicker,
html[data-gms-ui="gear"] .dashboard-section-sub,
html[data-gms-ui="gear"] .dashboard-subtitle,
html[data-gms-ui="gear"] .table-muted {
  color: var(--v5-ink3) !important;
  font-family: var(--v5-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.04em;
}

/* chip ringkasan */
html[data-gms-ui="gear"] .dash-badge,
html[data-gms-ui="gear"] .history-pill {
  background: var(--v5-void) !important;
  background-image: var(--v5-brush), linear-gradient(180deg, #16130d, #0f0d09) !important;
  border: 1px solid var(--v5-rule) !important;
  color: var(--v5-ink2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  padding: 7px 12px !important;
}
html[data-gms-ui="gear"] .dash-badge b,
html[data-gms-ui="gear"] .dash-badge strong,
html[data-gms-ui="gear"] .history-pill .val {
  color: var(--v5-gold-hi) !important;
  font-family: var(--v5-mono) !important;
}

/* ================================================================
   10. TABEL — instrumen baca di atas pelat kuningan
   ================================================================ */

html[data-gms-ui="gear"] table {
  border-collapse: collapse !important;
  width: 100%;
}
html[data-gms-ui="gear"] th,
html[data-gms-ui="gear"] [id$="Page"] th,
html[data-gms-ui="gear"] .dashboard-data-table th {
  background: linear-gradient(180deg, rgba(232, 179, 75, 0.09), rgba(232, 179, 75, 0.04)) !important;
  color: var(--v5-ink2) !important;
  border: none !important;
  border-bottom: 2px solid var(--v5-gold-deep) !important;
  border-right: 1px solid var(--v5-rule) !important;
  padding: 9px 11px !important;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 2;
}
html[data-gms-ui="gear"] th:last-child {
  border-right: none !important;
}
html[data-gms-ui="gear"] td {
  border: none !important;
  border-bottom: 1px solid var(--v5-rule) !important;
  border-right: 1px solid rgba(246, 239, 224, 0.03) !important;
  padding: 7px 11px !important;
  height: var(--v5-row);
  color: var(--v5-ink) !important;
  font-size: 13px;
  line-height: 1.4;
}
html[data-gms-ui="gear"] td:last-child {
  border-right: none !important;
}
html[data-gms-ui="gear"] tbody tr {
  transition: background 0.12s var(--v5-tick);
}
html[data-gms-ui="gear"] tbody tr:nth-child(even) {
  background: rgba(246, 239, 224, 0.015);
}
html[data-gms-ui="gear"] tbody tr:hover {
  background: rgba(232, 179, 75, 0.06) !important;
}

/* stok kritis — pita tembaga di tepi kiri */
html[data-gms-ui="gear"] tr.critical > td,
html[data-gms-ui="gear"] tr.low-stock > td,
html[data-gms-ui="gear"] tr.critical-stock-row > td {
  background: transparent !important;
}
html[data-gms-ui="gear"] tr.critical > td:first-child,
html[data-gms-ui="gear"] tr.low-stock > td:first-child,
html[data-gms-ui="gear"] tr.critical-stock-row > td:first-child {
  box-shadow: inset 5px 0 0 0 transparent !important;
  border-left: 5px solid transparent !important;
  border-image: var(--v5-tape) 5 !important;
  border-image-slice: 1 !important;
}
html[data-gms-ui="gear"] .critical-inline-tag {
  background: rgba(255, 59, 48, 0.14) !important;
  color: #ff9b8a !important;
  border: 1px solid rgba(255, 59, 48, 0.4) !important;
  box-shadow: none !important;
  font-size: 9.5px !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 7px !important;
}

/* pembungkus lane */
html[data-gms-ui="gear"] .lane-section {
  border: 1px solid var(--v5-rule) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 30px rgba(0, 0, 0, 0.3) !important;
  background: var(--v5-slab) !important;
  background-image: var(--v5-brush), linear-gradient(180deg, var(--v5-slab2), var(--v5-slab)) !important;
}
html[data-gms-ui="gear"] .lane-card > h3,
html[data-gms-ui="gear"] .lane-title,
html[data-gms-ui="gear"] [class*="lane-head"] {
  font-family: var(--v5-display) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  font-size: 12px !important;
  color: var(--v5-gold-hi) !important;
  background: var(--v5-plate) !important;
  border-left: 4px solid var(--v5-gold) !important;
  border-radius: 4px 4px 0 0 !important;
  padding: 9px 14px !important;
}

/* ================================================================
   11. KOLOM AKSI — satu baris, champfer, warna tetap identitas
   ================================================================ */

html[data-gms-ui="gear"] td.actions-cell {
  white-space: nowrap !important;
  text-align: right !important;
  width: 1% !important;
  vertical-align: middle;
}
/* Bentuk seragam: champfer 26 px, satu baris. Bentuknya saja yang
   diseragamkan — WARNANYA tetap warna identitas fungsi masing-masing
   (lihat blok berikutnya), supaya tombol bisa dikenali dari warnanya
   tanpa perlu dibaca dulu. */
html[data-gms-ui="gear"] .actions-cell .btn-small,
html[data-gms-ui="gear"] .actions-cell .btn-cek-lot,
html[data-gms-ui="gear"] .btn-small,
html[data-gms-ui="gear"] .btn-cek-lot {
  background-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  text-shadow: none !important;
  height: 27px !important;
  min-height: 27px !important;
  min-width: 0 !important;
  padding: 0 9px !important;
  margin: 0 0 0 3px !important;
  font-family: var(--v5-ui) !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  vertical-align: middle;
  float: none !important;
  transform: none !important;
}
html[data-gms-ui="gear"] .actions-cell .btn-small.gms-icon,
html[data-gms-ui="gear"] .btn-small.gms-icon {
  width: 27px !important;
  padding: 0 !important;
}

/* ---------- WARNA IDENTITAS FUNGSI ----------
   Dipakai persis seperti sebelum redesign:
     Edit         biru   #2979FF
     Masuk        hijau  #2F9F55
     Keluar       merah muda #C0445C
     Hapus        merah  #C0392B
     Pindah       teal   #26A69A
     Cek Data Lot oranye #FF6D00
   Bentuknya tetap datar berchampfer (tanpa gradasi mencolok),
   warna hanya lebih cerah sedikit agar terasa "terawat". */
html[data-gms-ui="gear"] .btn-small.edit {
  background: rgba(41, 121, 255, 0.15) !important;
  border: 1px solid rgba(41, 121, 255, 0.6) !important;
  color: #a8ccff !important;
}
html[data-gms-ui="gear"] .btn-small.edit:hover {
  background: rgba(41, 121, 255, 0.3) !important;
  border-color: #2979ff !important;
  color: #ffffff !important;
}
html[data-gms-ui="gear"] .btn-small.gms-in {
  background: rgba(47, 159, 85, 0.16) !important;
  border: 1px solid rgba(47, 159, 85, 0.65) !important;
  color: #8ae8ac !important;
}
html[data-gms-ui="gear"] .btn-small.gms-in:hover {
  background: rgba(47, 159, 85, 0.32) !important;
  border-color: #5fe08a !important;
  color: #eafff0 !important;
}
html[data-gms-ui="gear"] .btn-small.gms-out {
  background: rgba(192, 68, 92, 0.16) !important;
  border: 1px solid rgba(192, 68, 92, 0.65) !important;
  color: #ffa3b5 !important;
}
html[data-gms-ui="gear"] .btn-small.gms-out:hover {
  background: rgba(192, 68, 92, 0.32) !important;
  border-color: #ff7591 !important;
  color: #ffffff !important;
}
html[data-gms-ui="gear"] .btn-small.transfer {
  background: rgba(38, 166, 154, 0.16) !important;
  border: 1px solid rgba(38, 166, 154, 0.65) !important;
  color: #75e6da !important;
}
html[data-gms-ui="gear"] .btn-small.transfer:hover {
  background: rgba(38, 166, 154, 0.32) !important;
  border-color: #64ffda !important;
  color: #e0f7f4 !important;
}
html[data-gms-ui="gear"] .btn-cek-lot {
  background: rgba(255, 109, 0, 0.16) !important;
  border: 1px solid rgba(255, 109, 0, 0.65) !important;
  color: #ffb87a !important;
}
html[data-gms-ui="gear"] .btn-cek-lot:hover {
  background: rgba(255, 109, 0, 0.32) !important;
  border-color: #ffab40 !important;
  color: #fff3e0 !important;
}
/* Hapus: merah. Warna akhirnya dipasang js/hapus-riwayat-fix.js
   sebagai inline style — aturan di sini menyamakan nilainya supaya
   hasilnya konsisten di tombol hapus yang tidak tersentuh modul itu. */
html[data-gms-ui="gear"] .btn-small.danger,
html[data-gms-ui="gear"] .btn-danger,
html[data-gms-ui="gear"] .btn-status-del,
html[data-gms-ui="gear"] .history-action-btn.danger,
html[data-gms-ui="gear"] .lane-del-btn {
  background: rgba(255, 90, 90, 0.14) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 90, 90, 0.55) !important;
  color: #ff8d85 !important;
}
html[data-gms-ui="gear"] .btn-small.danger:hover,
html[data-gms-ui="gear"] .btn-danger:hover,
html[data-gms-ui="gear"] .btn-status-del:hover,
html[data-gms-ui="gear"] .history-action-btn.danger:hover,
html[data-gms-ui="gear"] .lane-del-btn:hover {
  background: rgba(255, 90, 90, 0.32) !important;
  border-color: #ff5a5a !important;
  color: #ffffff !important;
}

/* Tombol di bawah tabel lane: Tambah Item = hijau, Pindah = amber emas */
html[data-gms-ui="gear"] .btn-add {
  background: rgba(44, 198, 83, 0.15) !important;
  background-image: linear-gradient(180deg, rgba(44, 198, 83, 0.22), rgba(44, 198, 83, 0.1)) !important;
  border: 1px solid rgba(44, 198, 83, 0.55) !important;
  color: #7cefa4 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
html[data-gms-ui="gear"] .btn-add:hover {
  background: rgba(44, 198, 83, 0.3) !important;
  border-color: #2cc653 !important;
  color: #eafff0 !important;
  transform: none;
}
html[data-gms-ui="gear"] .btn-transfer {
  background: rgba(232, 179, 75, 0.14) !important;
  background-image: linear-gradient(180deg, rgba(232, 179, 75, 0.22), rgba(232, 179, 75, 0.08)) !important;
  border: 1px solid rgba(232, 179, 75, 0.5) !important;
  color: #ffd98a !important;
  box-shadow: none !important;
}
html[data-gms-ui="gear"] .btn-transfer:hover {
  background: rgba(232, 179, 75, 0.3) !important;
  border-color: #e8b34b !important;
  color: #fff6dc !important;
}

/* ================================================================
   12. CHIP & BADGE
   ================================================================ */

/* NAMA BAHAN — teksnya WAJIB berwarna sesuai standar material,
   bukan hanya titik bulat di kiri. Di sini bentuknya tetap gaya v5
   (champfer, mono) tetapi warna per material dikembalikan utuh:
   teks, alas, dan garis dari keluarga warna yang sama. */
html[data-gms-ui="gear"] .mat-badge {
  font-family: var(--v5-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 2px 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html[data-gms-ui="gear"] .mat-badge.mat-yellow {
  background: rgba(255, 214, 10, 0.13) !important;
  color: #ffd60a !important;
  border: 1px solid rgba(255, 214, 10, 0.4) !important;
}
html[data-gms-ui="gear"] .mat-badge.mat-green {
  background: rgba(118, 196, 66, 0.13) !important;
  color: #76c442 !important;
  border: 1px solid rgba(118, 196, 66, 0.4) !important;
}
html[data-gms-ui="gear"] .mat-badge.mat-blue {
  background: rgba(72, 202, 228, 0.13) !important;
  color: #48cae4 !important;
  border: 1px solid rgba(72, 202, 228, 0.4) !important;
}
html[data-gms-ui="gear"] .mat-badge.mat-black-mat {
  background: rgba(96, 96, 160, 0.16) !important;
  color: #b3bad4 !important;
  border: 1px solid rgba(96, 96, 160, 0.5) !important;
}
html[data-gms-ui="gear"] .mat-badge.mat-white {
  background: rgba(240, 240, 240, 0.1) !important;
  color: #e8e8f0 !important;
  border: 1px solid rgba(200, 200, 220, 0.38) !important;
}
html[data-gms-ui="gear"] .mat-badge.mat-babyblue {
  background: rgba(144, 224, 239, 0.12) !important;
  color: #90e0ef !important;
  border: 1px solid rgba(144, 224, 239, 0.4) !important;
}
/* titik warna tetap ada sebagai penegas, bukan pengganti */
html[data-gms-ui="gear"] .mat-dot {
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 auto;
  box-shadow: none !important;
}
html[data-gms-ui="gear"] .mat-yellow .mat-dot { background: #ffd60a !important; }
html[data-gms-ui="gear"] .mat-green .mat-dot { background: #76c442 !important; }
html[data-gms-ui="gear"] .mat-blue .mat-dot { background: #48cae4 !important; }
html[data-gms-ui="gear"] .mat-black-mat .mat-dot { background: #6060a0 !important; }
html[data-gms-ui="gear"] .mat-white .mat-dot { background: #d0d8e8 !important; }
html[data-gms-ui="gear"] .mat-babyblue .mat-dot { background: #90e0ef !important; }
html[data-gms-ui="gear"] .coil-type {
  background: transparent !important;
  border: none !important;
  color: var(--v5-ink3) !important;
  padding: 0 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* chip lot TETAP berwarna — standar warna bulan itu fungsional */
html[data-gms-ui="gear"] .lot-tag {
  font-size: 11px !important;
  padding: 2px 6px !important;
  font-weight: 600;
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.45) !important;
}
html[data-gms-ui="gear"] .lot-month {
  color: var(--v5-ink3) !important;
  font-style: normal !important;
  font-size: 10.5px !important;
}
html[data-gms-ui="gear"] .badge,
html[data-gms-ui="gear"] .chip,
html[data-gms-ui="gear"] .status-chip,
html[data-gms-ui="gear"] .qc-status,
html[data-gms-ui="gear"] [id$="Page"] [class*="badge"]:not(.notif-badge),
html[data-gms-ui="gear"] [id$="Page"] [class*="pill"],
html[data-gms-ui="gear"] [id$="Page"] [class*="chip"] {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 9.5px !important;
  padding: 3px 7px !important;
  box-shadow: none !important;
}
html[data-gms-ui="gear"] .badge-ok,
html[data-gms-ui="gear"] .status-ok,
html[data-gms-ui="gear"] .qc-ok,
html[data-gms-ui="gear"] .gms-qc-ok {
  background: rgba(61, 220, 132, 0.12) !important;
  color: var(--v5-ok) !important;
  border: 1px solid rgba(61, 220, 132, 0.35) !important;
}
html[data-gms-ui="gear"] .badge-ng,
html[data-gms-ui="gear"] .status-ng,
html[data-gms-ui="gear"] .qc-ng,
html[data-gms-ui="gear"] .gms-qc-ng {
  background: rgba(255, 59, 48, 0.12) !important;
  color: #ff8d85 !important;
  border: 1px solid rgba(255, 59, 48, 0.35) !important;
}
html[data-gms-ui="gear"] .gms-qc-hold {
  background: rgba(255, 196, 0, 0.12) !important;
  color: var(--v5-hazard) !important;
  border: 1px solid rgba(255, 196, 0, 0.35) !important;
}
html[data-gms-ui="gear"] .notif-badge {
  background: var(--v5-gold) !important;
  color: var(--v5-on-gold) !important;
  font-family: var(--v5-mono) !important;
  font-weight: 600;
  font-size: 9.5px !important;
  padding: 1px 6px !important;
}

/* ================================================================
   13. FORM
   ================================================================ */

html[data-gms-ui="gear"] .filters-bar {
  padding: 14px 16px !important;
  border-left: 4px solid var(--v5-rule3) !important;
}
html[data-gms-ui="gear"] input,
html[data-gms-ui="gear"] select,
html[data-gms-ui="gear"] textarea {
  background: var(--v5-sunken) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent) !important;
  border: 1px solid var(--v5-rule2) !important;
  color: var(--v5-ink) !important;
  font-family: var(--v5-ui) !important;
  font-weight: 500;
  font-size: 13px !important;
  min-height: 34px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  transition: border-color 0.18s var(--v5-tick), box-shadow 0.18s var(--v5-tick);
}
html[data-gms-ui="gear"] input[type="number"],
html[data-gms-ui="gear"] .gms-op-input,
html[data-gms-ui="gear"] .gms-lot-in-inp,
html[data-gms-ui="gear"] .gms-lot-out-inp {
  font-family: var(--v5-mono) !important;
}
html[data-gms-ui="gear"] input::placeholder,
html[data-gms-ui="gear"] textarea::placeholder {
  color: #6f6654 !important;
}
html[data-gms-ui="gear"] input:focus,
html[data-gms-ui="gear"] select:focus,
html[data-gms-ui="gear"] textarea:focus {
  border-color: var(--v5-gold) !important;
  box-shadow: inset 0 0 0 1px var(--v5-gold),
    0 0 0 3px rgba(232, 179, 75, 0.12) !important;
  outline: none !important;
}
html[data-gms-ui="gear"] :focus-visible {
  outline: 2px solid var(--v5-gold) !important;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(232, 179, 75, 0.15) !important;
}
html[data-gms-ui="gear"] input[type="checkbox"] {
  accent-color: var(--v5-gold);
  min-height: 0;
  width: 15px;
  height: 15px;
}

/* ================================================================
   14. MODAL — panel mesin, kepala plakat emas
   ================================================================ */

html[data-gms-ui="gear"] .modal-overlay,
html[data-gms-ui="gear"] .gms-ai-ov,
html[data-gms-ui="gear"] .gms-ch-overlay {
  background: rgba(7, 5, 4, 0.85) !important;
  backdrop-filter: blur(3px) !important;
}
html[data-gms-ui="gear"] .modal,
html[data-gms-ui="gear"] .gms-addon-modal .gms-mbox,
html[data-gms-ui="gear"] .gms-ai-modal,
html[data-gms-ui="gear"] .cls-modal,
html[data-gms-ui="gear"] .gms-ch-panel {
  background: var(--v5-brush), linear-gradient(180deg, #171410 0%, #110f0b 100%) !important;
  background-image: var(--v5-brush), linear-gradient(180deg, #171410 0%, #110f0b 100%) !important;
  border: 1px solid var(--v5-rule2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 2px 0 rgba(232, 179, 75, 0.22) !important;
  animation: v5In 0.22s var(--v5-tick);
}
@keyframes v5In {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html[data-gms-ui="gear"] .modal h3,
html[data-gms-ui="gear"] .gms-mhead,
html[data-gms-ui="gear"] .gms-ai-hd,
html[data-gms-ui="gear"] .cls-header {
  font-family: var(--v5-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--v5-on-gold) !important;
  background: linear-gradient(180deg, #f3c96f 0%, #dfa93c 95%) !important;
  background-image: linear-gradient(180deg, #f3c96f 0%, #dfa93c 95%) !important;
  border: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  padding: 10px 14px !important;
  margin: 0 0 16px !important;
}
html[data-gms-ui="gear"] .modal-actions {
  border-top: 1px solid var(--v5-rule2) !important;
  padding-top: 14px !important;
}

/* ================================================================
   15. PAGINASI, NAVIGASI LANE, FILTER RIWAYAT
   ================================================================ */

html[data-gms-ui="gear"] .gms-pg-btn,
html[data-gms-ui="gear"] .gms-ln-btn,
html[data-gms-ui="gear"] .gms-akt-pg,
html[data-gms-ui="gear"] .history-tab-btn,
html[data-gms-ui="gear"] [id$="Page"] .history-tab-btn,
html[data-gms-ui="gear"] [id$="Page"] .btn-export-qc,
html[data-gms-ui="gear"] .analytics-btn,
html[data-gms-ui="gear"] .analytics-export,
html[data-gms-ui="gear"] .dashboard-section-toggle,
html[data-gms-ui="gear"] .cls-tab {
  background: linear-gradient(180deg, #1d1911 0%, #14110b 100%) !important;
  background-image: linear-gradient(180deg, #1d1911 0%, #14110b 100%) !important;
  border: 1px solid var(--v5-rule) !important;
  color: var(--v5-ink2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  font-family: var(--v5-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
}
html[data-gms-ui="gear"] .gms-pg-btn:hover:not(:disabled),
html[data-gms-ui="gear"] .gms-ln-btn:hover:not(:disabled),
html[data-gms-ui="gear"] .gms-akt-pg:hover:not(:disabled),
html[data-gms-ui="gear"] .history-tab-btn:hover,
html[data-gms-ui="gear"] [id$="Page"] .history-tab-btn:hover,
html[data-gms-ui="gear"] .analytics-btn:hover,
html[data-gms-ui="gear"] .analytics-export:hover,
html[data-gms-ui="gear"] .dashboard-section-toggle:hover,
html[data-gms-ui="gear"] .cls-tab:hover {
  border-color: var(--v5-gold-deep) !important;
  color: var(--v5-ink) !important;
  background: #262014 !important;
}
html[data-gms-ui="gear"] .gms-pg-btn.active,
html[data-gms-ui="gear"] .gms-ln-btn.primary,
html[data-gms-ui="gear"] .analytics-btn.active,
html[data-gms-ui="gear"] .dashboard-section-toggle.active,
html[data-gms-ui="gear"] [id$="Page"] .history-tab-btn.active,
html[data-gms-ui="gear"] .history-tab-btn.active,
html[data-gms-ui="gear"] .cls-tab.active {
  background: linear-gradient(180deg, #f3c96f 0%, #dfa93c 95%) !important;
  border-color: #d8a942 !important;
  color: var(--v5-on-gold) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
html[data-gms-ui="gear"] .gms-fr,
html[data-gms-ui="gear"] .gms-akt-head,
html[data-gms-ui="gear"] .gms-mtoolbar,
html[data-gms-ui="gear"] .cls-tabs {
  background: var(--v5-void) !important;
  background-image: var(--v5-brush), linear-gradient(180deg, #16130d, #0f0d09) !important;
  border: 1px solid var(--v5-rule) !important;
}
html[data-gms-ui="gear"] .gms-fr-head,
html[data-gms-ui="gear"] .gms-akt-title {
  font-family: var(--v5-display) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--v5-gold-hi) !important;
}

/* ================================================================
   16. DAFTAR RIWAYAT & PERINGKAT
   ================================================================ */

html[data-gms-ui="gear"] .movement-row,
html[data-gms-ui="gear"] .rank-row,
html[data-gms-ui="gear"] .gms-akt-row {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--v5-rule) !important;
  box-shadow: none !important;
}
html[data-gms-ui="gear"] .gms-akt-row:hover {
  background: rgba(232, 179, 75, 0.05) !important;
}
html[data-gms-ui="gear"] .movement-label,
html[data-gms-ui="gear"] .rank-name,
html[data-gms-ui="gear"] .gms-akt-t {
  color: var(--v5-ink) !important;
  font-size: 13px !important;
  font-weight: 500;
}
html[data-gms-ui="gear"] .movement-time,
html[data-gms-ui="gear"] .gms-akt-time,
html[data-gms-ui="gear"] .gms-akt-who,
html[data-gms-ui="gear"] .gms-akt-meta {
  color: var(--v5-ink3) !important;
  font-family: var(--v5-mono) !important;
  font-size: 10.5px !important;
}
html[data-gms-ui="gear"] .rank-bar {
  background: var(--v5-sunken) !important;
  border: 1px solid var(--v5-rule) !important;
  height: 8px !important;
  border-radius: 4px !important;
  overflow: hidden;
}
html[data-gms-ui="gear"] .rank-fill {
  background: linear-gradient(90deg, var(--v5-gold-deep), var(--v5-gold)) !important;
  box-shadow: none !important;
}
html[data-gms-ui="gear"] .rank-top .rank-name {
  color: var(--v5-gold) !important;
}
html[data-gms-ui="gear"] .gms-akt-tag,
html[data-gms-ui="gear"] [id$="Page"] .history-tag {
  background: var(--v5-void) !important;
  border: 1px solid var(--v5-rule) !important;
  color: var(--v5-ink2) !important;
  box-shadow: none !important;
  font-size: 9.5px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ================================================================
   17. HALAMAN SIDEBAR — sapuan umum
   ================================================================ */

html[data-gms-ui="gear"] [id$="Page"] .card,
html[data-gms-ui="gear"] [id$="Page"] [class$="-card"],
html[data-gms-ui="gear"] [id$="Page"] [class$="-panel"],
html[data-gms-ui="gear"] [id$="Page"] [class$="-box"],
html[data-gms-ui="gear"] [id$="Page"] [class$="-section"] {
  background: var(--v5-brush), linear-gradient(180deg, #171410 0%, #110f0b 100%) !important;
  background-image: var(--v5-brush), linear-gradient(180deg, #171410 0%, #110f0b 100%) !important;
  border: 1px solid var(--v5-rule) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 30px rgba(0, 0, 0, 0.32) !important;
}
html[data-gms-ui="gear"] [id$="Page"] .stat-value,
html[data-gms-ui="gear"] [id$="Page"] .qcdash-value {
  color: var(--v5-ink) !important;
  font-family: var(--v5-mono) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
}
html[data-gms-ui="gear"] .laporan-card {
  border-left: 4px solid var(--v5-rule3) !important;
}
html[data-gms-ui="gear"] .laporan-card.open,
html[data-gms-ui="gear"] .laporan-card.baru {
  border-left-color: var(--v5-gold) !important;
}

/* ================================================================
   18. LOGIN — kamar mesin: obsidian, roda gigi raksasa berputar,
       kotak kaca emas
   ================================================================ */

html[data-gms-ui="gear"] #loginScreen {
  background: #0b0908 !important;
  background-image:
    radial-gradient(
      1100px 600px at 72% 30%,
      rgba(232, 179, 75, 0.07),
      transparent 60%
    ),
    radial-gradient(
      800px 500px at 15% 90%,
      rgba(224, 123, 57, 0.045),
      transparent 55%
    ),
    linear-gradient(to right, rgba(246, 239, 224, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(246, 239, 224, 0.015) 1px, transparent 1px) !important;
  background-size: auto, auto, 56px 56px, 56px 56px !important;
}
/* roda gerigi raksasa berputar pelan — gambar SVG data-URI: cincin
   bergigi (dash), badan gear, hub, dan 6 jari-jari */
html[data-gms-ui="gear"] #loginScreen::before {
  content: "";
  position: absolute;
  inset: auto;
  right: -140px;
  top: 50%;
  width: 620px;
  height: 620px;
  margin-top: -310px;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><g fill='none' stroke='%23e8b34b'><circle cx='100' cy='100' r='62' stroke-width='18' stroke-dasharray='16 9'/><circle cx='100' cy='100' r='52' stroke-width='4'/><circle cx='100' cy='100' r='30' stroke-width='3'/><circle cx='100' cy='100' r='12' stroke-width='5'/><g stroke-width='10'><line x1='100' y1='38' x2='100' y2='72'/><line x1='100' y1='128' x2='100' y2='162'/><line x1='38' y1='100' x2='72' y2='100'/><line x1='128' y1='100' x2='162' y2='100'/><line x1='56' y1='56' x2='80' y2='80'/><line x1='120' y1='120' x2='144' y2='144'/><line x1='56' y1='144' x2='80' y2='120'/><line x1='120' y1='80' x2='144' y2='56'/></g></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  animation: v5GearSpin 90s linear infinite;
}
/* gerigi kecil kedua di kiri-bawah, arah putaran berlawanan */
html[data-gms-ui="gear"] #loginScreen::after {
  content: "";
  position: absolute;
  inset: auto;
  left: -90px;
  bottom: -90px;
  width: 280px;
  height: 280px;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><g fill='none' stroke='%23e8b34b'><circle cx='100' cy='100' r='62' stroke-width='18' stroke-dasharray='16 9'/><circle cx='100' cy='100' r='52' stroke-width='4'/><circle cx='100' cy='100' r='30' stroke-width='3'/><circle cx='100' cy='100' r='12' stroke-width='5'/><g stroke-width='10'><line x1='100' y1='38' x2='100' y2='72'/><line x1='100' y1='128' x2='100' y2='162'/><line x1='38' y1='100' x2='72' y2='100'/><line x1='128' y1='100' x2='162' y2='100'/><line x1='56' y1='56' x2='80' y2='80'/><line x1='120' y1='120' x2='144' y2='144'/><line x1='56' y1='144' x2='80' y2='120'/><line x1='120' y1='80' x2='144' y2='56'/></g></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  animation: v5GearSpinRev 120s linear infinite;
}
@keyframes v5GearSpin {
  to { transform: rotate(360deg); }
}
@keyframes v5GearSpinRev {
  to { transform: rotate(-360deg); }
}
html[data-gms-ui="gear"] .login-box {
  background: linear-gradient(180deg, rgba(24, 21, 14, 0.92), rgba(14, 12, 8, 0.95)) !important;
  background-image: linear-gradient(180deg, rgba(24, 21, 14, 0.92), rgba(14, 12, 8, 0.95)) !important;
  border: 1px solid var(--v5-rule2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 70px rgba(0, 0, 0, 0.65),
    0 2px 0 rgba(232, 179, 75, 0.3) !important;
  padding: 30px 30px 26px !important;
  animation: none !important;
}
html[data-gms-ui="gear"] .login-title {
  font-family: var(--v5-display) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  background: linear-gradient(180deg, #ffe2a3 0%, #e8b34b 55%, #c08c24 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--v5-gold) !important;
  filter: none !important;
  line-height: 1.1;
}
html[data-gms-ui="gear"] .gms-login-img {
  filter: none !important;
}
html[data-gms-ui="gear"] .login-sub {
  color: var(--v5-ink3) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  font-size: 9.5px !important;
  border-top: 1px solid var(--v5-rule2);
  padding-top: 10px;
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
html[data-gms-ui="gear"] .login-box input {
  background: var(--v5-sunken) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent) !important;
  border: 1px solid var(--v5-rule2) !important;
  color: var(--v5-ink) !important;
  min-height: 42px;
}
html[data-gms-ui="gear"] .btn-login {
  width: 100%;
  min-height: 46px;
  font-size: 13px !important;
  letter-spacing: 0.26em !important;
}
html[data-gms-ui="gear"] .login-err {
  border-left: 4px solid var(--v5-ng);
  background: rgba(255, 59, 48, 0.09);
  padding: 8px 10px;
  color: #ff9b8a !important;
}

/* ================================================================
   19. OPNAME, RINGKASAN LINTAS-LANE, AI, COLOR BOARD
      (CSS-nya disuntik modul saat runtime — bentuknya diseragamkan
       di sini, warnanya oleh mesin remap di js/gms-gear-v5.js)
   ================================================================ */

html[data-gms-ui="gear"] .gms-addon-modal .gms-mbody,
html[data-gms-ui="gear"] .cls-body,
html[data-gms-ui="gear"] .gms-ai-bd {
  background: transparent !important;
  background-image: none !important;
}
html[data-gms-ui="gear"] .gms-opname-table th,
html[data-gms-ui="gear"] .cls-table th {
  background: linear-gradient(180deg, rgba(232, 179, 75, 0.09), rgba(232, 179, 75, 0.04)) !important;
  border-bottom: 2px solid var(--v5-gold-deep) !important;
}
html[data-gms-ui="gear"] .gms-opname-stat,
html[data-gms-ui="gear"] .cls-stats,
html[data-gms-ui="gear"] .gms-ai-pill,
html[data-gms-ui="gear"] .cls-lane-chip {
  background: var(--v5-void) !important;
  background-image: linear-gradient(180deg, #16130d, #0f0d09) !important;
  border: 1px solid var(--v5-rule) !important;
  color: var(--v5-ink2) !important;
}
html[data-gms-ui="gear"] .gms-mclose,
html[data-gms-ui="gear"] .cls-btn-close,
html[data-gms-ui="gear"] .sb-close {
  background: transparent !important;
  border: 1px solid var(--v5-rule2) !important;
  color: var(--v5-ink2) !important;
}
html[data-gms-ui="gear"] .gms-mclose:hover,
html[data-gms-ui="gear"] .cls-btn-close:hover,
html[data-gms-ui="gear"] .sb-close:hover {
  background: var(--v5-ng) !important;
  border-color: var(--v5-ng) !important;
  color: #fff !important;
}
html[data-gms-ui="gear"] .gms-ai-fab,
html[data-gms-ui="gear"] .gms-ai-mini {
  background: linear-gradient(180deg, #f3c96f 0%, #dfa93c 95%) !important;
  background-image: linear-gradient(180deg, #f3c96f 0%, #dfa93c 95%) !important;
  color: var(--v5-on-gold) !important;
  border: 1px solid #b4861f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 18px rgba(232, 179, 75, 0.28) !important;
}

/* ================================================================
   20. ICON SVG (pasangan js/gms-icons.js) — tetap dipakai,
       tanpa emoji, hanya diperbesar sedikit & disamakan tebalnya
   ================================================================ */

html[data-gms-ui="gear"] .gi {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -2.5px;
  stroke-width: 2;
  color: inherit;
}
html[data-gms-ui="gear"] .gi-sm {
  width: 13px;
  height: 13px;
}
html[data-gms-ui="gear"] .gi-lg {
  width: 19px;
  height: 19px;
}
html[data-gms-ui="gear"] .sb-item .ic .gi,
html[data-gms-ui="gear"] .sb-group-label .ic .gi {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* ================================================================
   21. SYNC STATUS & PENANDA SISTEM
   ================================================================ */

html[data-gms-ui="gear"] #syncStatus {
  background: var(--v5-plate) !important;
  border-bottom: 1px solid var(--v5-rule2) !important;
  border-left: 4px solid var(--v5-gold) !important;
  color: var(--v5-ink2) !important;
  font-family: var(--v5-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
}

/* ================================================================
   22. RESPONSIF
   ================================================================ */

@media (max-width: 900px) {
  html[data-gms-ui="gear"] td.actions-cell {
    white-space: normal !important;
  }
  html[data-gms-ui="gear"] .actions-cell .btn-small,
  html[data-gms-ui="gear"] .actions-cell .btn-cek-lot {
    margin: 2px 0 2px 3px !important;
  }
  html[data-gms-ui="gear"] #loginScreen::before {
    right: -220px;
    width: 430px;
    height: 430px;
    margin-top: -215px;
    opacity: 0.1;
  }
}
@media (max-width: 640px) {
  html[data-gms-ui="gear"] {
    --v5-row: 38px;
  }
  html[data-gms-ui="gear"] th {
    font-size: 9px !important;
    padding: 8px !important;
  }
  html[data-gms-ui="gear"] td {
    padding: 6px 8px !important;
    font-size: 12.5px;
  }
  html[data-gms-ui="gear"] .nav-tab,
  html[data-gms-ui="gear"] .admin-tab {
    font-size: 11px !important;
    padding: 9px 12px !important;
  }
  html[data-gms-ui="gear"] .login-title {
    font-size: 21px !important;
  }
  html[data-gms-ui="gear"] #loginScreen::after {
    display: none;
  }
}

/* ================================================================
   23. AKSESIBILITAS GERAK
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  html[data-gms-ui="gear"] *,
  html[data-gms-ui="gear"] *::before,
  html[data-gms-ui="gear"] *::after {
    animation: none !important;
    transition: none !important;
  }
}