/* ============================================================
   TMS HILLCON — TEMA VISUAL "HEAVY-EQUIPMENT CONSOLE"
   ------------------------------------------------------------
   File ini TIDAK mengubah app.min.js sama sekali. Aplikasi
   aslinya sudah dibangun dengan sistem CSS custom properties
   (--bg, --panel, --blue, dst) — file ini meng-override nilai
   variabel tersebut lewat selector #root, yang secara spesifisitas
   CSS selalu menang dibanding aturan :root bawaan aplikasi,
   apapun urutan pemuatan skripnya. Aman & tidak berisiko merusak
   logic aplikasi.

   Konsep: sidebar gelap ala panel kontrol alat berat tambang,
   kanvas konten abu-abu baja (bukan putih polos), kartu data
   tetap terang supaya angka & tabel gampang dibaca, dengan aksen
   oranye rust/safety-orange (terinspirasi livery alat berat &
   rambu tambang) sebagai satu elemen ciri khas, dipakai secukupnya.
============================================================ */

#root {
  /* -- kanvas utama aplikasi (dulu putih polos #FFFFFF) -- */
  --bg: #EDF1F3;
  --panel-2: #E2E8EB;

  /* -- kartu & permukaan data tetap terang supaya tabel/angka
        gampang dibaca — sengaja TIDAK digelapkan -- */
  --panel: #FFFFFF;
  --elevated: #FFFFFF;

  /* -- font judul: font kondensasi tegas ala rambu/panel alat berat,
        menggantikan fallback Arial Narrow yang polos -- */
  --cond: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", var(--sans);

  /* -- variabel baru: aksen signature oranye rust -- */
  --accent-rust: #C1541F;
  --accent-rust-dim: #F3E1D6;
}

/* ---------- Bingkai halaman: kanvas gelap ala ruang kontrol ----------
   (warna latar body diatur langsung di index.html, di sini cukup
   beri efek "melayang" pada bingkai aplikasinya) ---------- */
#root .tms {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ---------- Sidebar navigasi: panel gelap, bukan putih ---------- */
#root .tms-nav {
  background: linear-gradient(180deg, #17222C 0%, #121B23 100%);
  border-right: 1px solid #0C1318;
}

#root .tms-brand-company,
#root .tms-navfoot {
  color: #7C8E9B;
}

#root .tms-brand-title,
#root .tms-brand-sub {
  color: #F1F4F6;
}

#root .tms-navitem {
  color: #9FB0BC;
}

#root .tms-navitem:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #F1F4F6;
}

#root .tms-navitem.active {
  background: rgba(193, 84, 31, 0.16);
  color: #F1F4F6;
  border-left-color: var(--accent-rust);
}

#root .tms-navitem.active .tms-navnum {
  color: var(--accent-rust);
}

#root .tms-navgap,
#root .tms-navfoot {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* -- signature: garis strip diagonal ala rambu peringatan alat
      berat, satu-satunya elemen "berani" di desain ini -- */
#root .tms-brand {
  position: relative;
  border-bottom: none;
  padding-bottom: 22px;
}
#root .tms-brand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: repeating-linear-gradient(
    135deg,
    var(--accent-rust) 0px, var(--accent-rust) 9px,
    #0F171D 9px, #0F171D 18px
  );
}

/* ---------- Kartu KPI: aksen tepi atas rust, ala panel gauge ---------- */
#root .tms-kpi-card {
  border-top: 3px solid var(--accent-rust);
}

/* ---------- Login: overlay dua-warna graphite ke rust ---------- */
#root .tms-login-wrap::before {
  background: linear-gradient(
    160deg,
    rgba(16, 22, 28, 0.90) 0%,
    rgba(16, 22, 28, 0.78) 55%,
    rgba(97, 47, 24, 0.55) 100%
  );
}
#root .tms-login-card {
  border-color: rgba(255, 255, 255, 0.22);
}

/* ---------- Badge & tab tetap pakai warna semantik asli
      (hijau=baik, amber=peringatan, merah=urgent, biru=info) —
      hanya dipertegas sedikit kontrasnya di atas kanvas baru ---------- */
#root table.tms-table tr:hover td {
  background: var(--panel-2);
}

/* ---------- Tabel pilih unit (pengganti dropdown) — baris bisa diklik ---------- */
#root table.tms-table-clickable tbody tr {
  cursor: pointer;
}
#root table.tms-table-clickable tbody tr.tms-row-selected td {
  background: var(--blue-dim);
  color: var(--blue);
  font-weight: 600;
}
#root table.tms-table-clickable tbody tr.tms-row-selected:hover td {
  background: var(--blue-dim);
}

/* ---------- Cetak (print): kembalikan semuanya ke putih bersih ---------- */
@media print {
  html, body { background: #fff !important; }
  #root .tms { box-shadow: none; }
  #root .tms-nav { background: #fff; }
}

/* ---------- Layar sempit: sidebar mendatar tetap gelap, aman ---------- */
@media (max-width: 860px) {
  #root .tms-brand::after { display: none; }
}

/* KPI Command Center animation */
.pulse-status{animation:tmspulse 2.5s ease-in-out infinite;}
@keyframes tmspulse{0%,100%{opacity:1;}50%{opacity:.72;}}


/* Live Operation Status - Command Center */
.live-status{
  transition:transform .25s ease, box-shadow .25s ease;
}
.live-status:hover{
  transform:translateY(-3px);
}
.pulse-status{
  animation:livePulse 2.5s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{opacity:1}
  50%{opacity:.72}
}
.refresh-indicator.refreshing{
  animation:refreshSpin .6s ease;
}
@keyframes refreshSpin{
  from{opacity:.4;transform:rotate(-20deg)}
  to{opacity:1;transform:rotate(0)}
}