/* ================================================================
   GMS — REDESIGN v4  "CONCRETE & SIGNAL"
   File: css/gms-brutal-v4.css
   Versi: 1.0  |  4 Agustus 2026

   Tampilan ini SENGAJA dibuat berbeda total dari redesign v3
   (baja biru langit, sudut membulat 6–8px, garis rambut, tombol
   senyap). Fungsi dan seluruh fitur TIDAK berubah — hanya bahasa
   visualnya yang diganti.

   LIMA KEPUTUSAN YANG MEMBUATNYA BEDA TOTAL
   1. NOL LENGKUNGAN. Semua sudut 0px. Silhouette layar langsung
      berubah sebelum satu warna pun terbaca.
   2. GRAFIT NETRAL, BUKAN NAVY. Semua semu biru dicabut dari
      latar. Layar jadi abu mesin, bukan malam biru.
   3. WARNA PERINTAH: BIRU LANGIT #38BDF8. Dipakai untuk aksi
      utama dan penanda posisi. Kuning hazard #FFC400 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
      dan 12.
   4. KEPALA SEKSI DIBALIK. Judul panel = balok pekat dengan
      teks terang (rambu pabrik), bukan teks abu kecil.
   5. TIPOGRAFI TERKOMPRESI. Oswald (judul) + Barlow Semi
      Condensed (UI) + IBM Plex Mono (angka). Lebih banyak data
      per baris, terbaca dari jarak berdiri.

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

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

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ================================================================
   1. TOKEN
   ================================================================ */

html[data-gms-ui="brutal"],
html[data-gms-ui="brutal"] :root {
  /* permukaan — grafit netral, saturasi biru nol */
  --v4-void: #08090a;
  --v4-slab: #101113;
  --v4-slab2: #16181b;
  --v4-raise: #1d1f23;
  --v4-sunken: #050506;

  /* garis */
  --v4-rule: #26282c;
  --v4-rule2: #3a3d43;
  --v4-rule3: #55595f;

  /* teks — putih hangat, tiga tingkat, semua lolos WCAG AA
     terhadap --v4-slab #101113:
       ink  #F3F2EF  17,4:1
       ink2 #B4B3AE   8,6:1
       ink3 #85847F   5,0:1 */
  --v4-ink: #f3f2ef;
  --v4-ink2: #b4b3ae;
  --v4-ink3: #85847f;

  /* warna perintah — BIRU LANGIT (dikembalikan 4 Agu 2026 atas
     permintaan pemilik sistem; bentuk & tata letak v4 tetap) */
  --v4-signal: #38bdf8;
  --v4-signal-hi: #7dd3fc;
  --v4-signal-dim: rgba(56, 189, 248, 0.14);
  --v4-signal-line: rgba(56, 189, 248, 0.42);
  --v4-on-signal: #04202e;

  /* semantik */
  --v4-hazard: #ffc400;
  --v4-ok: #3ddc84;
  --v4-ng: #ff3b30;
  --v4-cool: #8fa8c8;

  /* huruf */
  --v4-display: "Oswald", "Rajdhani", system-ui, sans-serif;
  --v4-ui: "Barlow Semi Condensed", "Rajdhani", system-ui, sans-serif;
  --v4-mono: "IBM Plex Mono", "Share Tech Mono", ui-monospace, monospace;

  /* irama */
  --v4-row: 40px;
  --v4-tick: cubic-bezier(0.2, 0, 0, 1);

  /* pita hazard — dipakai di kepala panel & baris kritis */
  --v4-tape: repeating-linear-gradient(
    45deg,
    var(--v4-hazard) 0 8px,
    #0a0a0a 8px 16px
  );

  /* menimpa token lama supaya komponen yang belum disebut
     satu per satu ikut berubah */
  --bg-dark: #08090a;
  --bg-card: #101113;
  --bg-card2: #16181b;
  --bg-sunken: #050506;
  --border: #26282c;
  --line-2: #3a3d43;
  --line-hair: #1c1e21;
  --text: #f3f2ef;
  --text-dim: #b4b3ae;
  --text-mute: #85847f;
  --accent: #38bdf8;
  --accent2: #0284c7;
  --accent-soft: rgba(56, 189, 248, 0.14);
  --gold-hi: #7dd3fc;
  --steel: #8fa8c8;
  --danger: #ff3b30;
  --success: #3ddc84;
  --warning: #ffc400;
  --r-card: 0px;
  --r-ctl: 0px;
  --r-chip: 0px;
  --row-h: 40px;
}

/* ================================================================
   2. NOL LENGKUNGAN — berlaku menyeluruh, termasuk seluruh modul
      js/ yang menyuntik CSS-nya sendiri saat runtime.
   ================================================================ */

html[data-gms-ui="brutal"] *,
html[data-gms-ui="brutal"] *::before,
html[data-gms-ui="brutal"] *::after {
  border-radius: 0 !important;
}

/* satu-satunya pengecualian: titik warna material & indikator bulat
   yang memang harus bulat supaya terbaca sebagai titik, bukan kotak */
html[data-gms-ui="brutal"] .mat-dot,
html[data-gms-ui="brutal"] .notif-badge,
html[data-gms-ui="brutal"] .gms-cs-sw {
  border-radius: 50% !important;
}
html[data-gms-ui="brutal"] .notif-badge {
  border-radius: 999px !important;
}

/* ================================================================
   3. DASAR
   ================================================================ */

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

/* garis grid halus di latar — kesan lantai pabrik yang ditandai */
html[data-gms-ui="brutal"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.016) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
  background-size: 56px 56px;
}
/* JANGAN pernah menyebut #gmsSidebar di sini.
   Sidebar aslinya `position:fixed` dan digeser keluar layar dengan
   translateX(-100%). Begitu posisinya dijadikan `relative`, elemen
   itu kembali masuk aliran dokumen: tingginya (±1100 px) mendorong
   #appShell turun, sehingga isi halaman baru terlihat setelah
   di-scroll jauh ke bawah, dan panelnya tampak mengambang di kiri
   atas saat dibuka. z-index sidebar sudah 90 dari CSS dasar. */
html[data-gms-ui="brutal"] #appShell,
html[data-gms-ui="brutal"] #loginScreen {
  position: relative;
  z-index: 1;
}

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

html[data-gms-ui="brutal"] ::selection {
  background: var(--v4-signal);
  color: var(--v4-on-signal);
}

html[data-gms-ui="brutal"] *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-gms-ui="brutal"] *::-webkit-scrollbar-track {
  background: var(--v4-sunken);
}
html[data-gms-ui="brutal"] *::-webkit-scrollbar-thumb {
  background: var(--v4-rule2);
  border: 2px solid var(--v4-sunken);
}
html[data-gms-ui="brutal"] *::-webkit-scrollbar-thumb:hover {
  background: var(--v4-signal);
}

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

/* ================================================================
   4. TIPOGRAFI
   ================================================================ */

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

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

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

/* ================================================================
   5. TOPBAR — balok padat + pita hazard tipis di bawahnya
   ================================================================ */

html[data-gms-ui="brutal"] .topbar {
  background: var(--v4-sunken) !important;
  border-bottom: 2px solid var(--v4-rule2) !important;
  box-shadow: none !important;
  position: relative;
  padding: 12px 18px !important;
}
html[data-gms-ui="brutal"] .topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--v4-signal);
}
html[data-gms-ui="brutal"] .topbar-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: var(--v4-ink) !important;
}
html[data-gms-ui="brutal"] .topbar-logo img {
  filter: none !important;
}
html[data-gms-ui="brutal"] .user-name {
  color: var(--v4-ink) !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html[data-gms-ui="brutal"] .role-badge {
  background: var(--v4-signal) !important;
  color: var(--v4-on-signal) !important;
  border: none !important;
  font-family: var(--v4-ui) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 4px 9px !important;
}
html[data-gms-ui="brutal"] .session-chip {
  background: transparent !important;
  border: 1px solid var(--v4-rule) !important;
  color: var(--v4-ink3) !important;
  font-family: var(--v4-mono) !important;
  font-size: 10.5px !important;
  padding: 4px 9px !important;
}

/* ================================================================
   6. SIDEBAR — kolom hitam, penanda posisi 4px signal
   ================================================================ */

html[data-gms-ui="brutal"] #gmsSidebar {
  background: var(--v4-sunken) !important;
  border-right: 2px solid var(--v4-rule2) !important;
}
html[data-gms-ui="brutal"] .sb-head {
  border-bottom: 2px solid var(--v4-rule2) !important;
  background: var(--v4-void) !important;
}
html[data-gms-ui="brutal"] .sb-head-mark {
  background: var(--v4-signal) !important;
  color: var(--v4-on-signal) !important;
  font-family: var(--v4-display) !important;
  font-weight: 700 !important;
  border: none !important;
}
html[data-gms-ui="brutal"] .sb-head-text .t {
  font-family: var(--v4-display) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v4-ink) !important;
}
html[data-gms-ui="brutal"] .sb-head-text .s {
  color: var(--v4-ink3) !important;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
html[data-gms-ui="brutal"] .sb-group {
  border-bottom: 1px solid var(--v4-rule);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
html[data-gms-ui="brutal"] .sb-group-label {
  padding: 12px 14px 6px !important;
  color: var(--v4-ink3) !important;
}
html[data-gms-ui="brutal"] .sb-item {
  color: var(--v4-ink2) !important;
  border-left: 4px solid transparent !important;
  padding: 10px 14px !important;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: background 0.1s var(--v4-tick), color 0.1s var(--v4-tick),
    border-color 0.1s var(--v4-tick);
}
html[data-gms-ui="brutal"] .sb-item:hover {
  background: var(--v4-raise) !important;
  color: var(--v4-ink) !important;
  border-left-color: var(--v4-rule3) !important;
}
html[data-gms-ui="brutal"] .sb-item.active {
  background: var(--v4-slab2) !important;
  color: var(--v4-ink) !important;
  border-left-color: var(--v4-signal) !important;
  box-shadow: none !important;
}
html[data-gms-ui="brutal"] .sb-item.danger {
  color: #ff8078 !important;
}
html[data-gms-ui="brutal"] .sb-foot {
  border-top: 2px solid var(--v4-rule2) !important;
  background: var(--v4-void) !important;
}
html[data-gms-ui="brutal"] .sb-foot .user {
  font-family: var(--v4-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--v4-ink) !important;
}
html[data-gms-ui="brutal"] #sbUserRole {
  color: var(--v4-signal) !important;
}
html[data-gms-ui="brutal"] #sbBackdrop {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: none !important;
}

/* ================================================================
   7. TOMBOL — persegi, garis 1px, bayangan keras saat ditekan
   ================================================================ */

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

/* primer — blok warna penuh.
   `.btn-add` SENGAJA tidak ada di sini: Tambah Item punya warna
   identitasnya sendiri (hijau), lihat bagian 11. */
html[data-gms-ui="brutal"] .btn-login,
html[data-gms-ui="brutal"] .btn-save,
html[data-gms-ui="brutal"] .btn-export,
html[data-gms-ui="brutal"] .btn-primary,
html[data-gms-ui="brutal"] .gms-mbtn.primary,
html[data-gms-ui="brutal"] .gms-ai-btn.primary {
  background: var(--v4-signal) !important;
  background-image: none !important;
  color: var(--v4-on-signal) !important;
  border: 1px solid var(--v4-signal) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
html[data-gms-ui="brutal"] .btn-login:hover,
html[data-gms-ui="brutal"] .btn-save:hover,
html[data-gms-ui="brutal"] .btn-export:hover {
  background: var(--v4-signal-hi) !important;
  box-shadow: 3px 3px 0 var(--v4-sunken) !important;
  transform: translate(-1px, -1px);
}
html[data-gms-ui="brutal"] .btn-login:active,
html[data-gms-ui="brutal"] .btn-save:active {
  transform: translate(1px, 1px);
  box-shadow: none !important;
}

/* sekunder — outline */
html[data-gms-ui="brutal"] .btn-secondary,
html[data-gms-ui="brutal"] .btn-cancel,
html[data-gms-ui="brutal"] .btn-reset,
html[data-gms-ui="brutal"] .btn-manage-lane,
html[data-gms-ui="brutal"] .btn-filter,
html[data-gms-ui="brutal"] .gms-mbtn,
html[data-gms-ui="brutal"] .gms-ai-btn,
html[data-gms-ui="brutal"] .gms-akt-btn,
html[data-gms-ui="brutal"] .cls-btn {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--v4-rule2) !important;
  color: var(--v4-ink2) !important;
  box-shadow: none !important;
}
html[data-gms-ui="brutal"] .btn-secondary:hover,
html[data-gms-ui="brutal"] .btn-cancel:hover,
html[data-gms-ui="brutal"] .btn-reset:hover,
html[data-gms-ui="brutal"] .btn-manage-lane:hover,
html[data-gms-ui="brutal"] .btn-filter:hover,
html[data-gms-ui="brutal"] .gms-mbtn:hover,
html[data-gms-ui="brutal"] .gms-ai-btn:hover,
html[data-gms-ui="brutal"] .gms-akt-btn:hover,
html[data-gms-ui="brutal"] .cls-btn:hover {
  border-color: var(--v4-signal) !important;
  color: var(--v4-ink) !important;
  background: var(--v4-signal-dim) !important;
}

/* keluar / logout */
html[data-gms-ui="brutal"] .btn-logout {
  background: transparent !important;
  border: 1px solid rgba(255, 59, 48, 0.5) !important;
  color: #ff8078 !important;
  box-shadow: none !important;
}
html[data-gms-ui="brutal"] .btn-logout:hover {
  background: var(--v4-ng) !important;
  border-color: var(--v4-ng) !important;
  color: #fff !important;
}

/* ================================================================
   8. TAB — sakelar panel kontrol, penanda blok penuh
   ================================================================ */

html[data-gms-ui="brutal"] .nav-tabs,
html[data-gms-ui="brutal"] .admin-tabs-actions {
  gap: 0 !important;
  background: var(--v4-sunken) !important;
  border-bottom: 1px solid var(--v4-rule) !important;
}
html[data-gms-ui="brutal"] .nav-tab,
html[data-gms-ui="brutal"] .admin-tab {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-right: 1px solid var(--v4-rule) !important;
  color: var(--v4-ink3) !important;
  font-family: var(--v4-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  font-size: 12px !important;
  padding: 12px 18px !important;
  box-shadow: none !important;
  position: relative;
}
html[data-gms-ui="brutal"] .nav-tab:hover,
html[data-gms-ui="brutal"] .admin-tab:hover {
  color: var(--v4-ink) !important;
  background: var(--v4-raise) !important;
}
html[data-gms-ui="brutal"] .nav-tab.active,
html[data-gms-ui="brutal"] .admin-tab.active {
  background: var(--v4-signal) !important;
  color: var(--v4-on-signal) !important;
  font-weight: 700 !important;
}
html[data-gms-ui="brutal"] .admin-tabs {
  background: var(--v4-void) !important;
  border-bottom: 1px solid var(--v4-rule) !important;
}
html[data-gms-ui="brutal"] .admin-tabs-label {
  color: var(--v4-ink3) !important;
  border-left: 3px solid var(--v4-signal);
  padding-left: 8px !important;
}

/* ================================================================
   9. PANEL — kepala terbalik, tanpa bayangan, garis 1px pekat
   ================================================================ */

html[data-gms-ui="brutal"] .filters-bar,
html[data-gms-ui="brutal"] .table-wrap,
html[data-gms-ui="brutal"] .stat-card,
html[data-gms-ui="brutal"] .chart-card,
html[data-gms-ui="brutal"] .lane-card,
html[data-gms-ui="brutal"] .summary-card,
html[data-gms-ui="brutal"] .qc-card,
html[data-gms-ui="brutal"] .history-card,
html[data-gms-ui="brutal"] .panel-card,
html[data-gms-ui="brutal"] .gms-ai-card,
html[data-gms-ui="brutal"] .reminder-panel,
html[data-gms-ui="brutal"] .gms-pager,
html[data-gms-ui="brutal"] .gms-lanenav,
html[data-gms-ui="brutal"] .dashboard-section,
html[data-gms-ui="brutal"] .analytics-group,
html[data-gms-ui="brutal"] .dashboard-table-card,
html[data-gms-ui="brutal"] .analytics-chart-card,
html[data-gms-ui="brutal"] .analytics-side-card,
html[data-gms-ui="brutal"] .movement-card {
  background: var(--v4-slab) !important;
  background-image: none !important;
  border: 1px solid var(--v4-rule2) !important;
  box-shadow: none !important;
}

/* kartu statistik: nomor urut mesin di pojok + garis signal di atas */
html[data-gms-ui="brutal"] .stat-card,
html[data-gms-ui="brutal"] .dash-card {
  background: var(--v4-slab2) !important;
  background-image: none !important;
  border: 1px solid var(--v4-rule2) !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  padding: 16px 16px 14px !important;
}
html[data-gms-ui="brutal"] .stat-card::before,
html[data-gms-ui="brutal"] .dash-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  height: 100%;
  background: var(--v4-signal);
}
html[data-gms-ui="brutal"] .stat-value,
html[data-gms-ui="brutal"] .dash-value {
  color: var(--v4-ink) !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
html[data-gms-ui="brutal"] .dash-meta,
html[data-gms-ui="brutal"] .stat-meta {
  color: var(--v4-ink3) !important;
  font-family: var(--v4-mono) !important;
  font-size: 10.5px !important;
}
html[data-gms-ui="brutal"] .dash-card.up .dash-value,
html[data-gms-ui="brutal"] .movement-delta.plus,
html[data-gms-ui="brutal"] .table-positive {
  color: var(--v4-ok) !important;
}
html[data-gms-ui="brutal"] .dash-card.down .dash-value,
html[data-gms-ui="brutal"] .movement-delta.minus,
html[data-gms-ui="brutal"] .table-negative {
  color: var(--v4-ng) !important;
}

/* judul seksi = balok terbalik */
html[data-gms-ui="brutal"] .dashboard-section-title,
html[data-gms-ui="brutal"] .dashboard-title,
html[data-gms-ui="brutal"] .panel-head,
html[data-gms-ui="brutal"] .analytics-mini-head,
html[data-gms-ui="brutal"] .dashboard-table-head,
html[data-gms-ui="brutal"] [id$="Page"] .page-title,
html[data-gms-ui="brutal"] [id$="Page"] h2,
html[data-gms-ui="brutal"] [id$="Page"] h3,
html[data-gms-ui="brutal"] [id$="Page"] h4 {
  font-family: var(--v4-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--v4-ink) !important;
  background: var(--v4-raise) !important;
  border-left: 4px solid var(--v4-signal) !important;
  padding: 9px 14px !important;
  margin: 0 0 14px !important;
  display: block;
}
html[data-gms-ui="brutal"] .dashboard-kicker,
html[data-gms-ui="brutal"] .dashboard-section-sub,
html[data-gms-ui="brutal"] .dashboard-subtitle,
html[data-gms-ui="brutal"] .table-muted {
  color: var(--v4-ink3) !important;
  font-family: var(--v4-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.04em;
}

/* chip ringkasan */
html[data-gms-ui="brutal"] .dash-badge,
html[data-gms-ui="brutal"] .history-pill {
  background: var(--v4-void) !important;
  background-image: none !important;
  border: 1px solid var(--v4-rule2) !important;
  color: var(--v4-ink2) !important;
  box-shadow: none !important;
  padding: 7px 12px !important;
}
html[data-gms-ui="brutal"] .dash-badge b,
html[data-gms-ui="brutal"] .dash-badge strong,
html[data-gms-ui="brutal"] .history-pill .val {
  color: var(--v4-ink) !important;
  font-family: var(--v4-mono) !important;
}

/* ================================================================
   10. TABEL — instrumen baca padat
   ================================================================ */

html[data-gms-ui="brutal"] table {
  border-collapse: collapse !important;
  width: 100%;
}
html[data-gms-ui="brutal"] th,
html[data-gms-ui="brutal"] [id$="Page"] th,
html[data-gms-ui="brutal"] .dashboard-data-table th {
  background: var(--v4-void) !important;
  color: var(--v4-ink3) !important;
  border: none !important;
  border-bottom: 2px solid var(--v4-rule3) !important;
  border-right: 1px solid var(--v4-rule) !important;
  padding: 9px 11px !important;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 2;
}
html[data-gms-ui="brutal"] th:last-child {
  border-right: none !important;
}
html[data-gms-ui="brutal"] td {
  border: none !important;
  border-bottom: 1px solid var(--v4-rule) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.028) !important;
  padding: 7px 11px !important;
  height: var(--v4-row);
  color: var(--v4-ink) !important;
  font-size: 13px;
  line-height: 1.4;
}
html[data-gms-ui="brutal"] td:last-child {
  border-right: none !important;
}
html[data-gms-ui="brutal"] tbody tr {
  transition: background 0.08s var(--v4-tick);
}
html[data-gms-ui="brutal"] tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.018);
}
html[data-gms-ui="brutal"] tbody tr:hover {
  background: var(--v4-signal-dim) !important;
}

/* stok kritis — pita hazard di tepi kiri, bukan baris dicat */
html[data-gms-ui="brutal"] tr.critical > td,
html[data-gms-ui="brutal"] tr.low-stock > td,
html[data-gms-ui="brutal"] tr.critical-stock-row > td {
  background: transparent !important;
}
html[data-gms-ui="brutal"] tr.critical > td:first-child,
html[data-gms-ui="brutal"] tr.low-stock > td:first-child,
html[data-gms-ui="brutal"] 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(--v4-tape) 5 !important;
  border-image-slice: 1 !important;
}
html[data-gms-ui="brutal"] .critical-inline-tag {
  background: var(--v4-ng) !important;
  color: #fff !important;
  border: none !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="brutal"] .lane-section {
  border: 1px solid var(--v4-rule2) !important;
  box-shadow: none !important;
  background: var(--v4-slab) !important;
  background-image: none !important;
}
html[data-gms-ui="brutal"] .lane-card > h3,
html[data-gms-ui="brutal"] .lane-title,
html[data-gms-ui="brutal"] [class*="lane-head"] {
  font-family: var(--v4-display) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  font-size: 13px !important;
  color: var(--v4-ink) !important;
  background: var(--v4-raise) !important;
  border-left: 4px solid var(--v4-signal) !important;
  padding: 9px 14px !important;
}

/* ================================================================
   11. KOLOM AKSI — satu baris, persegi, warna hanya saat disentuh
   ================================================================ */

html[data-gms-ui="brutal"] td.actions-cell {
  white-space: nowrap !important;
  text-align: right !important;
  width: 1% !important;
  vertical-align: middle;
}
/* Bentuk seragam: persegi, 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="brutal"] .actions-cell .btn-small,
html[data-gms-ui="brutal"] .actions-cell .btn-cek-lot,
html[data-gms-ui="brutal"] .btn-small,
html[data-gms-ui="brutal"] .btn-cek-lot {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  height: 26px !important;
  min-height: 26px !important;
  min-width: 0 !important;
  padding: 0 9px !important;
  margin: 0 0 0 3px !important;
  font-family: var(--v4-ui) !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.11em;
  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="brutal"] .actions-cell .btn-small.gms-icon,
html[data-gms-ui="brutal"] .btn-small.gms-icon {
  width: 26px !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 & persegi (tanpa gradasi, tanpa glow) —
   yang dikembalikan hanya warnanya. */
html[data-gms-ui="brutal"] .btn-small.edit {
  background: rgba(41, 121, 255, 0.16) !important;
  border: 1px solid rgba(41, 121, 255, 0.65) !important;
  color: #9ec6ff !important;
}
html[data-gms-ui="brutal"] .btn-small.edit:hover {
  background: rgba(41, 121, 255, 0.32) !important;
  border-color: #2979ff !important;
  color: #ffffff !important;
}
html[data-gms-ui="brutal"] .btn-small.gms-in {
  background: rgba(47, 159, 85, 0.18) !important;
  border: 1px solid rgba(47, 159, 85, 0.7) !important;
  color: #7fe3a4 !important;
}
html[data-gms-ui="brutal"] .btn-small.gms-in:hover {
  background: rgba(47, 159, 85, 0.34) !important;
  border-color: #5fe08a !important;
  color: #eafff0 !important;
}
html[data-gms-ui="brutal"] .btn-small.gms-out {
  background: rgba(192, 68, 92, 0.18) !important;
  border: 1px solid rgba(192, 68, 92, 0.7) !important;
  color: #ff9db0 !important;
}
html[data-gms-ui="brutal"] .btn-small.gms-out:hover {
  background: rgba(192, 68, 92, 0.34) !important;
  border-color: #ff7591 !important;
  color: #ffffff !important;
}
html[data-gms-ui="brutal"] .btn-small.transfer {
  background: rgba(38, 166, 154, 0.18) !important;
  border: 1px solid rgba(38, 166, 154, 0.7) !important;
  color: #6fe3d6 !important;
}
html[data-gms-ui="brutal"] .btn-small.transfer:hover {
  background: rgba(38, 166, 154, 0.34) !important;
  border-color: #64ffda !important;
  color: #e0f7f4 !important;
}
html[data-gms-ui="brutal"] .btn-cek-lot {
  background: rgba(255, 109, 0, 0.18) !important;
  border: 1px solid rgba(255, 109, 0, 0.7) !important;
  color: #ffb067 !important;
}
html[data-gms-ui="brutal"] .btn-cek-lot:hover {
  background: rgba(255, 109, 0, 0.34) !important;
  border-color: #ffab40 !important;
  color: #fff3e0 !important;
}
/* Hapus: merah. Warna akhirnya dipasang js/hapus-riwayat-fix.js
   sebagai inline style (mengalahkan stylesheet apa pun) — aturan di
   sini menyamakan nilainya supaya hasilnya konsisten di tombol hapus
   yang tidak tersentuh modul itu. */
html[data-gms-ui="brutal"] .btn-small.danger,
html[data-gms-ui="brutal"] .btn-danger,
html[data-gms-ui="brutal"] .btn-status-del,
html[data-gms-ui="brutal"] .history-action-btn.danger,
html[data-gms-ui="brutal"] .lane-del-btn {
  background: rgba(255, 90, 90, 0.16) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 90, 90, 0.6) !important;
  color: #ff8078 !important;
}
html[data-gms-ui="brutal"] .btn-small.danger:hover,
html[data-gms-ui="brutal"] .btn-danger:hover,
html[data-gms-ui="brutal"] .btn-status-del:hover,
html[data-gms-ui="brutal"] .history-action-btn.danger:hover,
html[data-gms-ui="brutal"] .lane-del-btn:hover {
  background: rgba(255, 90, 90, 0.34) !important;
  border-color: #ff5a5a !important;
  color: #ffffff !important;
}

/* Tombol di bawah tabel lane: Tambah Item = hijau, Pindah = amber */
html[data-gms-ui="brutal"] .btn-add {
  background: rgba(44, 198, 83, 0.16) !important;
  background-image: none !important;
  border: 1px solid rgba(44, 198, 83, 0.6) !important;
  color: #6ee79a !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
html[data-gms-ui="brutal"] .btn-add:hover {
  background: rgba(44, 198, 83, 0.32) !important;
  border-color: #2cc653 !important;
  color: #eafff0 !important;
  transform: none;
}
html[data-gms-ui="brutal"] .btn-transfer {
  background: rgba(255, 183, 3, 0.16) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 183, 3, 0.55) !important;
  color: #ffc94d !important;
  box-shadow: none !important;
}
html[data-gms-ui="brutal"] .btn-transfer:hover {
  background: rgba(255, 183, 3, 0.32) !important;
  border-color: #ffb703 !important;
  color: #fff6dc !important;
}

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

/* NAMA BAHAN — teksnya WAJIB berwarna sesuai standar material (§3.5),
   bukan hanya titik bulat di kiri. Lapisan v3 dan v4 sebelumnya
   memaksa `.mat-badge` jadi teks putih di kotak transparan sehingga
   standar warnanya hilang. Di sini bentuknya tetap gaya v4 (persegi,
   monospace) tetapi warna per material dikembalikan utuh: teks,
   alas, dan garis dari keluarga warna yang sama. */
html[data-gms-ui="brutal"] .mat-badge {
  font-family: var(--v4-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 2px 8px !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html[data-gms-ui="brutal"] .mat-badge.mat-yellow {
  background: rgba(255, 214, 10, 0.14) !important;
  color: #ffd60a !important;
  border: 1px solid rgba(255, 214, 10, 0.45) !important;
}
html[data-gms-ui="brutal"] .mat-badge.mat-green {
  background: rgba(118, 196, 66, 0.14) !important;
  color: #76c442 !important;
  border: 1px solid rgba(118, 196, 66, 0.45) !important;
}
html[data-gms-ui="brutal"] .mat-badge.mat-blue {
  background: rgba(72, 202, 228, 0.14) !important;
  color: #48cae4 !important;
  border: 1px solid rgba(72, 202, 228, 0.45) !important;
}
html[data-gms-ui="brutal"] .mat-badge.mat-black-mat {
  background: rgba(96, 96, 160, 0.18) !important;
  color: #b3bad4 !important;
  border: 1px solid rgba(96, 96, 160, 0.55) !important;
}
html[data-gms-ui="brutal"] .mat-badge.mat-white {
  background: rgba(240, 240, 240, 0.12) !important;
  color: #e8e8f0 !important;
  border: 1px solid rgba(200, 200, 220, 0.42) !important;
}
html[data-gms-ui="brutal"] .mat-badge.mat-babyblue {
  background: rgba(144, 224, 239, 0.14) !important;
  color: #90e0ef !important;
  border: 1px solid rgba(144, 224, 239, 0.45) !important;
}
/* titik warna tetap ada sebagai penegas, bukan pengganti */
html[data-gms-ui="brutal"] .mat-dot {
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 auto;
  box-shadow: none !important;
}
html[data-gms-ui="brutal"] .mat-yellow .mat-dot { background: #ffd60a !important; }
html[data-gms-ui="brutal"] .mat-green .mat-dot { background: #76c442 !important; }
html[data-gms-ui="brutal"] .mat-blue .mat-dot { background: #48cae4 !important; }
html[data-gms-ui="brutal"] .mat-black-mat .mat-dot { background: #6060a0 !important; }
html[data-gms-ui="brutal"] .mat-white .mat-dot { background: #d0d8e8 !important; }
html[data-gms-ui="brutal"] .mat-babyblue .mat-dot { background: #90e0ef !important; }
html[data-gms-ui="brutal"] .coil-type {
  background: transparent !important;
  border: none !important;
  color: var(--v4-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="brutal"] .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="brutal"] .lot-month {
  color: var(--v4-ink3) !important;
  font-style: normal !important;
  font-size: 10.5px !important;
}
html[data-gms-ui="brutal"] .badge,
html[data-gms-ui="brutal"] .chip,
html[data-gms-ui="brutal"] .status-chip,
html[data-gms-ui="brutal"] .qc-status,
html[data-gms-ui="brutal"] [id$="Page"] [class*="badge"]:not(.notif-badge),
html[data-gms-ui="brutal"] [id$="Page"] [class*="pill"],
html[data-gms-ui="brutal"] [id$="Page"] [class*="chip"] {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 9.5px !important;
  padding: 3px 7px !important;
  box-shadow: none !important;
}
html[data-gms-ui="brutal"] .badge-ok,
html[data-gms-ui="brutal"] .status-ok,
html[data-gms-ui="brutal"] .qc-ok,
html[data-gms-ui="brutal"] .gms-qc-ok {
  background: rgba(61, 220, 132, 0.14) !important;
  color: var(--v4-ok) !important;
  border: 1px solid rgba(61, 220, 132, 0.4) !important;
}
html[data-gms-ui="brutal"] .badge-ng,
html[data-gms-ui="brutal"] .status-ng,
html[data-gms-ui="brutal"] .qc-ng,
html[data-gms-ui="brutal"] .gms-qc-ng {
  background: rgba(255, 59, 48, 0.14) !important;
  color: #ff8078 !important;
  border: 1px solid rgba(255, 59, 48, 0.4) !important;
}
html[data-gms-ui="brutal"] .gms-qc-hold {
  background: rgba(255, 196, 0, 0.14) !important;
  color: var(--v4-hazard) !important;
  border: 1px solid rgba(255, 196, 0, 0.4) !important;
}
html[data-gms-ui="brutal"] .notif-badge {
  background: var(--v4-signal) !important;
  color: var(--v4-on-signal) !important;
  font-family: var(--v4-mono) !important;
  font-weight: 600;
  font-size: 9.5px !important;
  padding: 1px 6px !important;
}

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

html[data-gms-ui="brutal"] .filters-bar {
  padding: 14px 16px !important;
  border-left: 4px solid var(--v4-rule3) !important;
}
html[data-gms-ui="brutal"] input,
html[data-gms-ui="brutal"] select,
html[data-gms-ui="brutal"] textarea {
  background: var(--v4-sunken) !important;
  background-image: none !important;
  border: 1px solid var(--v4-rule2) !important;
  color: var(--v4-ink) !important;
  font-family: var(--v4-ui) !important;
  font-weight: 500;
  font-size: 13px !important;
  min-height: 34px;
  box-shadow: none !important;
  transition: border-color 0.1s var(--v4-tick), box-shadow 0.1s var(--v4-tick);
}
html[data-gms-ui="brutal"] input[type="number"],
html[data-gms-ui="brutal"] .gms-op-input,
html[data-gms-ui="brutal"] .gms-lot-in-inp,
html[data-gms-ui="brutal"] .gms-lot-out-inp {
  font-family: var(--v4-mono) !important;
}
html[data-gms-ui="brutal"] input::placeholder,
html[data-gms-ui="brutal"] textarea::placeholder {
  color: #55565a !important;
}
html[data-gms-ui="brutal"] input:focus,
html[data-gms-ui="brutal"] select:focus,
html[data-gms-ui="brutal"] textarea:focus {
  border-color: var(--v4-signal) !important;
  box-shadow: inset 0 0 0 1px var(--v4-signal) !important;
  outline: none !important;
}
html[data-gms-ui="brutal"] :focus-visible {
  outline: 2px solid var(--v4-signal) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}
html[data-gms-ui="brutal"] input[type="checkbox"] {
  accent-color: var(--v4-signal);
  min-height: 0;
  width: 15px;
  height: 15px;
}

/* ================================================================
   14. MODAL — kotak keras, kepala terbalik, tanpa blur lembut
   ================================================================ */

html[data-gms-ui="brutal"] .modal-overlay,
html[data-gms-ui="brutal"] .gms-ai-ov,
html[data-gms-ui="brutal"] .gms-ch-overlay {
  background: rgba(0, 0, 0, 0.86) !important;
  backdrop-filter: none !important;
}
html[data-gms-ui="brutal"] .modal,
html[data-gms-ui="brutal"] .gms-addon-modal .gms-mbox,
html[data-gms-ui="brutal"] .gms-ai-modal,
html[data-gms-ui="brutal"] .cls-modal,
html[data-gms-ui="brutal"] .gms-ch-panel {
  background: var(--v4-slab) !important;
  background-image: none !important;
  border: 2px solid var(--v4-rule3) !important;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.6) !important;
  animation: v4In 0.1s var(--v4-tick);
}
@keyframes v4In {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html[data-gms-ui="brutal"] .modal h3,
html[data-gms-ui="brutal"] .gms-mhead,
html[data-gms-ui="brutal"] .gms-ai-hd,
html[data-gms-ui="brutal"] .cls-header {
  font-family: var(--v4-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--v4-on-signal) !important;
  background: var(--v4-signal) !important;
  background-image: none !important;
  border: none !important;
  padding: 10px 14px !important;
  margin: -1px -1px 16px !important;
}
html[data-gms-ui="brutal"] .modal-actions {
  border-top: 1px solid var(--v4-rule2) !important;
  padding-top: 14px !important;
}

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

html[data-gms-ui="brutal"] .gms-pg-btn,
html[data-gms-ui="brutal"] .gms-ln-btn,
html[data-gms-ui="brutal"] .gms-akt-pg,
html[data-gms-ui="brutal"] .history-tab-btn,
html[data-gms-ui="brutal"] [id$="Page"] .history-tab-btn,
html[data-gms-ui="brutal"] [id$="Page"] .btn-export-qc,
html[data-gms-ui="brutal"] .analytics-btn,
html[data-gms-ui="brutal"] .analytics-export,
html[data-gms-ui="brutal"] .dashboard-section-toggle,
html[data-gms-ui="brutal"] .cls-tab {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--v4-rule2) !important;
  color: var(--v4-ink2) !important;
  box-shadow: none !important;
  font-family: var(--v4-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}
html[data-gms-ui="brutal"] .gms-pg-btn:hover:not(:disabled),
html[data-gms-ui="brutal"] .gms-ln-btn:hover:not(:disabled),
html[data-gms-ui="brutal"] .gms-akt-pg:hover:not(:disabled),
html[data-gms-ui="brutal"] .history-tab-btn:hover,
html[data-gms-ui="brutal"] [id$="Page"] .history-tab-btn:hover,
html[data-gms-ui="brutal"] .analytics-btn:hover,
html[data-gms-ui="brutal"] .analytics-export:hover,
html[data-gms-ui="brutal"] .dashboard-section-toggle:hover,
html[data-gms-ui="brutal"] .cls-tab:hover {
  border-color: var(--v4-signal) !important;
  color: var(--v4-ink) !important;
  background: var(--v4-signal-dim) !important;
}
html[data-gms-ui="brutal"] .gms-pg-btn.active,
html[data-gms-ui="brutal"] .gms-ln-btn.primary,
html[data-gms-ui="brutal"] .analytics-btn.active,
html[data-gms-ui="brutal"] .dashboard-section-toggle.active,
html[data-gms-ui="brutal"] [id$="Page"] .history-tab-btn.active,
html[data-gms-ui="brutal"] .history-tab-btn.active,
html[data-gms-ui="brutal"] .cls-tab.active {
  background: var(--v4-signal) !important;
  border-color: var(--v4-signal) !important;
  color: var(--v4-on-signal) !important;
  font-weight: 700 !important;
}
html[data-gms-ui="brutal"] .gms-fr,
html[data-gms-ui="brutal"] .gms-akt-head,
html[data-gms-ui="brutal"] .gms-mtoolbar,
html[data-gms-ui="brutal"] .cls-tabs {
  background: var(--v4-void) !important;
  background-image: none !important;
  border: 1px solid var(--v4-rule2) !important;
}
html[data-gms-ui="brutal"] .gms-fr-head,
html[data-gms-ui="brutal"] .gms-akt-title {
  font-family: var(--v4-display) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--v4-ink) !important;
}

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

html[data-gms-ui="brutal"] .movement-row,
html[data-gms-ui="brutal"] .rank-row,
html[data-gms-ui="brutal"] .gms-akt-row {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--v4-rule) !important;
  box-shadow: none !important;
}
html[data-gms-ui="brutal"] .gms-akt-row:hover {
  background: var(--v4-signal-dim) !important;
}
html[data-gms-ui="brutal"] .movement-label,
html[data-gms-ui="brutal"] .rank-name,
html[data-gms-ui="brutal"] .gms-akt-t {
  color: var(--v4-ink) !important;
  font-size: 13px !important;
  font-weight: 500;
}
html[data-gms-ui="brutal"] .movement-time,
html[data-gms-ui="brutal"] .gms-akt-time,
html[data-gms-ui="brutal"] .gms-akt-who,
html[data-gms-ui="brutal"] .gms-akt-meta {
  color: var(--v4-ink3) !important;
  font-family: var(--v4-mono) !important;
  font-size: 10.5px !important;
}
html[data-gms-ui="brutal"] .rank-bar {
  background: var(--v4-sunken) !important;
  border: 1px solid var(--v4-rule) !important;
  height: 8px !important;
}
html[data-gms-ui="brutal"] .rank-fill {
  background: var(--v4-signal) !important;
  box-shadow: none !important;
}
html[data-gms-ui="brutal"] .rank-top .rank-name {
  color: var(--v4-signal) !important;
}
html[data-gms-ui="brutal"] .gms-akt-tag,
html[data-gms-ui="brutal"] [id$="Page"] .history-tag {
  background: var(--v4-void) !important;
  border: 1px solid var(--v4-rule2) !important;
  color: var(--v4-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="brutal"] [id$="Page"] .card,
html[data-gms-ui="brutal"] [id$="Page"] [class$="-card"],
html[data-gms-ui="brutal"] [id$="Page"] [class$="-panel"],
html[data-gms-ui="brutal"] [id$="Page"] [class$="-box"],
html[data-gms-ui="brutal"] [id$="Page"] [class$="-section"] {
  background: var(--v4-slab) !important;
  background-image: none !important;
  border: 1px solid var(--v4-rule2) !important;
  box-shadow: none !important;
}
html[data-gms-ui="brutal"] [id$="Page"] .stat-value,
html[data-gms-ui="brutal"] [id$="Page"] .qcdash-value {
  color: var(--v4-ink) !important;
  font-family: var(--v4-mono) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
}
html[data-gms-ui="brutal"] .laporan-card {
  border-left: 4px solid var(--v4-rule3) !important;
}
html[data-gms-ui="brutal"] .laporan-card.open,
html[data-gms-ui="brutal"] .laporan-card.baru {
  border-left-color: var(--v4-signal) !important;
}

/* ================================================================
   18. LOGIN — layar terbelah, tipografi stensil raksasa
   ================================================================ */

html[data-gms-ui="brutal"] #loginScreen {
  background: var(--v4-void) !important;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}
html[data-gms-ui="brutal"] #loginScreen::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 10px;
  background: var(--v4-tape);
  opacity: 0.85;
}
html[data-gms-ui="brutal"] .login-box {
  background: var(--v4-slab) !important;
  background-image: none !important;
  border: 2px solid var(--v4-rule3) !important;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.65) !important;
  padding: 30px 30px 26px !important;
  animation: none !important;
}
html[data-gms-ui="brutal"] .login-title {
  font-family: var(--v4-display) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--v4-ink) !important;
  color: var(--v4-ink) !important;
  filter: none !important;
  line-height: 1;
}
html[data-gms-ui="brutal"] .gms-login-img {
  filter: none !important;
}
html[data-gms-ui="brutal"] .login-sub {
  color: var(--v4-ink3) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  font-size: 9.5px !important;
  border-top: 1px solid var(--v4-rule2);
  padding-top: 10px;
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
html[data-gms-ui="brutal"] .login-box input {
  background: var(--v4-sunken) !important;
  background-image: none !important;
  border: 1px solid var(--v4-rule2) !important;
  color: var(--v4-ink) !important;
  min-height: 42px;
}
html[data-gms-ui="brutal"] .btn-login {
  width: 100%;
  min-height: 46px;
  font-size: 14px !important;
  letter-spacing: 0.3em !important;
}
html[data-gms-ui="brutal"] .login-err {
  border-left: 4px solid var(--v4-ng);
  background: rgba(255, 59, 48, 0.1);
  padding: 8px 10px;
  color: #ff8078 !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-brutal-v4.js)
   ================================================================ */

html[data-gms-ui="brutal"] .gms-addon-modal .gms-mbody,
html[data-gms-ui="brutal"] .cls-body,
html[data-gms-ui="brutal"] .gms-ai-bd {
  background: var(--v4-slab) !important;
  background-image: none !important;
}
html[data-gms-ui="brutal"] .gms-opname-table th,
html[data-gms-ui="brutal"] .cls-table th {
  background: var(--v4-void) !important;
  border-bottom: 2px solid var(--v4-rule3) !important;
}
html[data-gms-ui="brutal"] .gms-opname-stat,
html[data-gms-ui="brutal"] .cls-stats,
html[data-gms-ui="brutal"] .gms-ai-pill,
html[data-gms-ui="brutal"] .cls-lane-chip {
  background: var(--v4-void) !important;
  background-image: none !important;
  border: 1px solid var(--v4-rule2) !important;
  color: var(--v4-ink2) !important;
}
html[data-gms-ui="brutal"] .gms-mclose,
html[data-gms-ui="brutal"] .cls-btn-close,
html[data-gms-ui="brutal"] .sb-close {
  background: transparent !important;
  border: 1px solid var(--v4-rule2) !important;
  color: var(--v4-ink2) !important;
}
html[data-gms-ui="brutal"] .gms-mclose:hover,
html[data-gms-ui="brutal"] .cls-btn-close:hover,
html[data-gms-ui="brutal"] .sb-close:hover {
  background: var(--v4-ng) !important;
  border-color: var(--v4-ng) !important;
  color: #fff !important;
}
html[data-gms-ui="brutal"] .gms-ai-fab,
html[data-gms-ui="brutal"] .gms-ai-mini {
  background: var(--v4-signal) !important;
  background-image: none !important;
  color: var(--v4-on-signal) !important;
  border: 1px solid var(--v4-signal) !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55) !important;
}

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

html[data-gms-ui="brutal"] .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="brutal"] .gi-sm {
  width: 13px;
  height: 13px;
}
html[data-gms-ui="brutal"] .gi-lg {
  width: 19px;
  height: 19px;
}
html[data-gms-ui="brutal"] .sb-item .ic .gi,
html[data-gms-ui="brutal"] .sb-group-label .ic .gi {
  width: 16px;
  height: 16px;
  margin: 0;
}

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

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

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

@media (max-width: 900px) {
  html[data-gms-ui="brutal"] td.actions-cell {
    white-space: normal !important;
  }
  html[data-gms-ui="brutal"] .actions-cell .btn-small,
  html[data-gms-ui="brutal"] .actions-cell .btn-cek-lot {
    margin: 2px 0 2px 3px !important;
  }
}
@media (max-width: 640px) {
  html[data-gms-ui="brutal"] {
    --v4-row: 36px;
  }
  html[data-gms-ui="brutal"] th {
    font-size: 9px !important;
    padding: 8px !important;
  }
  html[data-gms-ui="brutal"] td {
    padding: 6px 8px !important;
    font-size: 12.5px;
  }
  html[data-gms-ui="brutal"] .nav-tab,
  html[data-gms-ui="brutal"] .admin-tab {
    font-size: 11px !important;
    padding: 10px 12px !important;
  }
  html[data-gms-ui="brutal"] .login-title {
    font-size: 24px !important;
  }
  html[data-gms-ui="brutal"] .modal,
  html[data-gms-ui="brutal"] .login-box {
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6) !important;
  }
}

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

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