/* Antarmuka Aplikasi Monitoring JPL 190 Titik
 * PT Transmikons Brahmanakurda
 *
 * IDENTITAS VISUAL
 * Warna diambil langsung dari logo perusahaan (diekstrak dari kop dokumen
 * resmi Transmikons): hitam-hangat #1F1A17 dan jingga #E6781A. Jingga
 * dipakai TERBATAS — hanya untuk hal yang menuntut tindakan atau perhatian —
 * supaya tetap berarti saat muncul, bukan sekadar hiasan.
 *
 * NADA RANCANGAN
 * Ini alat kerja pengawasan infrastruktur, bukan aplikasi konsumen. Acuannya
 * instrumen teknik: padat, presisi, tanpa hiasan. Angka lapangan (KM+HM,
 * nomor JPL, persentase) diset dengan angka bertabulasi agar sejajar rapi
 * antar baris dan mudah dibandingkan sekilas — cara data teknik memang
 * seharusnya disajikan.
 *
 * PRIORITAS PERANGKAT
 * Disusun mobile-first. Site Inspector memakai aplikasi ini di lapangan,
 * lewat ponsel, sering sambil berdiri di dekat perlintasan. Tampilan lebar
 * untuk KW/TL menyesuaikan di atas 760px.
 *
 * Berkas ini tertanam di dalam binary — tidak ada permintaan ke CDN luar,
 * jadi aplikasi tetap utuh di jaringan terbatas.
 */

:root {
  /* Warna merek */
  --tinta: #1f1a17;          /* hitam-hangat dari logo */
  --tinta-2: #3a322d;
  --tinta-3: #6b615a;
  --jingga: #e6781a;         /* jingga dari logo */
  --jingga-tua: #c2620f;
  --jingga-samar: #fdf1e6;

  /* Netral hangat, diselaraskan dengan hitam-hangat di atas */
  --kertas: #f7f5f3;
  --permukaan: #ffffff;
  --garis: #e3ded9;
  --garis-tegas: #cdc5bd;

  /* Warna status — sengaja diredam supaya tidak bersaing dengan jingga merek */
  --hijau: #2f6b3f;
  --hijau-samar: #eaf2ec;
  --amber: #96660d;
  --amber-samar: #fbf1de;
  --merah: #a33327;
  --merah-samar: #f8ebe9;

  --lengkung: 3px;           /* sudut nyaris siku: nada teknik, bukan konsumen */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--kertas);
}

/* Angka bertabulasi: kunci keterbacaan data teknik */
.num, td.num, th.num, .angka .nilai, .bilah-nilai, table td:where(.num) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: var(--jingga-tua); text-underline-offset: 2px; }
a:hover { color: var(--jingga); }

/* ============ Kepala ============ */

.kepala {
  background: var(--tinta);
  color: #fff;
  /* Dua garis sejajar di bawah kepala — profil rel, dibuat dari border,
     bukan gambar. Struktural, bukan tempelan. */
  border-bottom: 3px solid var(--jingga);
  box-shadow: inset 0 -6px 0 -3px rgba(255, 255, 255, .16);
  position: sticky;
  top: 0;
  z-index: 20;
}

.kepala-baris {
  max-width: 1240px;
  margin: 0 auto;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.merek { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; min-width: 0; }
/* Logo memakai varian TERANG (logo-transmikons-terang.png) di sini dan di
   halaman Masuk, karena keduanya berlatar hitam-hangat. Logo asli berwarna
   gelap di atas transparan: di latar gelap, bentuk utama dan tulisan
   "TRANSMIKONS" ikut hilang dan yang tersisa hanya dua bilah jingga.
   Varian terang dibuat dari logo resmi dengan membalik bagian gelapnya
   menjadi putih-hangat; jingga merek tidak diubah. Bila nanti tersedia
   berkas logo "reverse" resmi dari tim, cukup timpa berkasnya — tanpa
   mengubah kode. */
.merek img { height: 34px; width: auto; display: block; flex: 0 0 auto; }
.merek-teks { min-width: 0; display: flex; flex-direction: column; }
.merek-nama {
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.2; white-space: nowrap;
}
.merek-sub {
  font-size: 11px; color: rgba(255, 255, 255, .62); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pengguna { text-align: right; font-size: 11.5px; color: rgba(255, 255, 255, .62); line-height: 1.35; flex: 0 0 auto; }
.pengguna b { display: block; font-size: 13px; color: #fff; font-weight: 600; }
.pengguna a { color: rgba(255, 255, 255, .78); }
.pengguna a:hover { color: var(--jingga); }

/* Layar ponsel: kepala hanya boleh memuat yang benar-benar perlu. Anak
   kalimat merek dilepas dan identitas pengguna diringkas jadi satu baris,
   supaya kedua blok tidak pernah saling menimpa di lebar sempit — layar
   inilah yang dipakai pengawas di lapangan. */
@media (max-width: 640px) {
  .kepala-baris { padding: 8px 12px; gap: 8px; }
  .merek img { height: 30px; }
  .merek-nama { font-size: 12px; }
  .merek-sub { display: none; }
  .pengguna { font-size: 11px; max-width: 46%; }
  .pengguna b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============ Navigasi ============ */

.nav { background: var(--tinta-2); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-dalam { display: flex; max-width: 1240px; margin: 0 auto; padding: 0 6px; }
.nav a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  padding: 10px 13px 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.nav a.aktif { color: #fff; font-weight: 600; border-bottom-color: var(--jingga); }
.nav .lencana {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  background: var(--jingga); color: #fff; border-radius: 2px;
  font-size: 10.5px; font-weight: 700; vertical-align: 1px;
}

/* ============ Kerangka ============ */

main { max-width: 1240px; margin: 0 auto; padding: 18px 14px 56px; }

h1 { font-size: 19px; font-weight: 650; margin: 0 0 3px; letter-spacing: -.01em; }
h2 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3); margin: 26px 0 9px;
  padding-bottom: 5px; border-bottom: 1px solid var(--garis);
}
.sub { color: var(--tinta-3); font-size: 13px; margin: 0 0 16px; }

.kartu {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--lengkung);
  padding: 14px;
  margin-bottom: 14px;
}
.kartu.rapat { padding: 0; overflow: hidden; }
.kartu h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3);
}

/* ============ Kartu angka ============ */

.angka-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 6px; }
@media (min-width: 760px) { .angka-grid { grid-template-columns: repeat(4, 1fr); } }

.angka {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--garis-tegas);
  border-radius: var(--lengkung);
  padding: 11px 13px;
}
.angka .label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-3);
}
.angka .nilai { font-size: 25px; font-weight: 650; line-height: 1.22; letter-spacing: -.02em; }
.angka .nilai.kecil { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.angka .ket { font-size: 11.5px; color: var(--tinta-3); margin-top: 1px; }

.angka.sorot { border-left-color: var(--jingga); }
.angka.sorot .nilai { color: var(--jingga-tua); }
.angka.baik { border-left-color: var(--hijau); }
.angka.perhatian { border-left-color: var(--amber); }
.angka.perhatian .nilai { color: var(--amber); }

/* ============ Tabel ============ */

.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  background: var(--kertas);
  color: var(--tinta-3);
  text-align: left;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  border-bottom: 1px solid var(--garis-tegas);
  position: sticky;
  top: 0;
}
tbody td { padding: 7px 10px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--jingga-samar); }
td.num, th.num { text-align: right; white-space: nowrap; }
td.no { font-weight: 650; }
table a { font-weight: 500; }

/* ============ Bilah progres ============ */

.bilah { background: var(--garis); border-radius: 1px; height: 6px; min-width: 62px; overflow: hidden; }
.bilah > i { display: block; height: 100%; background: var(--tinta-3); }
.bilah.baik > i { background: var(--hijau); }
.bilah.perhatian > i { background: var(--amber); }
.bilah.bahaya > i { background: var(--merah); }

/* Bilah + angka berdampingan */
.capaian { display: flex; align-items: center; gap: 8px; }
.capaian .bilah { flex: 1 1 auto; }
.capaian .bilah-nilai { flex: 0 0 auto; font-size: 12px; color: var(--tinta-3); min-width: 46px; text-align: right; }

/* ============ Tanda status ============ */

.tanda {
  display: inline-block; padding: 1px 7px; border-radius: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  border: 1px solid transparent;
}
.tanda.baik { background: var(--hijau-samar); color: var(--hijau); border-color: #cfe0d4; }
.tanda.perhatian { background: var(--amber-samar); color: var(--amber); border-color: #ecdcb8; }
.tanda.bahaya { background: var(--merah-samar); color: var(--merah); border-color: #eccdc8; }
.tanda.netral { background: var(--kertas); color: var(--tinta-3); border-color: var(--garis-tegas); }
.tanda.merek { background: var(--jingga-samar); color: var(--jingga-tua); border-color: #f2d7bb; }

/* ============ Tombol & isian ============ */

.tombol {
  display: inline-block;
  background: var(--tinta);
  color: #fff;
  border: 1px solid var(--tinta);
  padding: 8px 15px;
  border-radius: var(--lengkung);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.tombol:hover { background: var(--tinta-2); border-color: var(--tinta-2); color: #fff; }
.tombol:disabled { opacity: .45; cursor: not-allowed; }
.tombol.utama { background: var(--jingga); border-color: var(--jingga); }
.tombol.utama:hover { background: var(--jingga-tua); border-color: var(--jingga-tua); }
.tombol.sekunder { background: var(--permukaan); color: var(--tinta); border-color: var(--garis-tegas); }
.tombol.sekunder:hover { background: var(--kertas); color: var(--tinta); }
.tombol.kecil { padding: 4px 10px; font-size: 12px; }

label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); margin: 13px 0 4px; }
input[type=text], input[type=password], input[type=date], input[type=month], input[type=file], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--lengkung);
  font-size: 16px; /* 16px mencegah iOS memperbesar layar saat mengetik */
  font-family: inherit;
  color: var(--tinta);
  background: var(--permukaan);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--jingga); outline-offset: -1px; border-color: var(--jingga); }
textarea { min-height: 64px; resize: vertical; }
@media (min-width: 760px) {
  input[type=text], input[type=password], input[type=date], input[type=month], select { font-size: 14px; }
}

.saring { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.saring > div { flex: 1 1 150px; }
.saring label { margin-top: 0; }
.centang { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tinta); }
.centang input { width: auto; }

/* ============ Pesan ============ */

.pesan { padding: 10px 12px; border-radius: var(--lengkung); font-size: 13px; margin-bottom: 14px; border: 1px solid; border-left-width: 3px; }
.pesan.sukses { background: var(--hijau-samar); color: #1e4a2b; border-color: #cfe0d4; border-left-color: var(--hijau); }
.pesan.galat { background: var(--merah-samar); color: #7a251b; border-color: #eccdc8; border-left-color: var(--merah); }
.pesan.info { background: var(--permukaan); color: var(--tinta-2); border-color: var(--garis); border-left-color: var(--tinta-3); }
.pesan.perhatian { background: var(--amber-samar); color: #6d4a09; border-color: #ecdcb8; border-left-color: var(--amber); }

/* ============ Butir checklist lapangan ============ */

.item {
  border: 1px solid var(--garis);
  border-left: 3px solid var(--garis-tegas);
  border-radius: var(--lengkung);
  padding: 12px;
  margin-bottom: 9px;
  background: var(--permukaan);
}
.item.selesai { border-left-color: var(--hijau); }
.item.sop { border-left-color: var(--amber); }
.item-kepala { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.item-nomor {
  display: inline-block; min-width: 21px; height: 21px; line-height: 21px; text-align: center;
  background: var(--kertas); border: 1px solid var(--garis-tegas); border-radius: 2px;
  font-size: 11.5px; font-weight: 700; color: var(--tinta-3); margin-right: 7px;
}
.item-nama { font-weight: 600; font-size: 14px; }
.item-meta { font-size: 11.5px; color: var(--tinta-3); margin-top: 3px; }

/* ============ Peta sebaran ============ */

.peta { width: 100%; height: auto; display: block; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--lengkung); }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--tinta-3); margin-top: 10px; }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.titik-legenda { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ============ Halaman masuk ============ */

.masuk-badan { background: var(--tinta); min-height: 100vh; display: flex; align-items: center; }
.masuk-bungkus { max-width: 372px; margin: 0 auto; padding: 32px 18px; width: 100%; }
.masuk-merek { text-align: center; margin-bottom: 22px; }
.masuk-merek img { height: 72px; width: auto; margin-bottom: 16px; }
.masuk-merek h1 { color: #fff; font-size: 16px; font-weight: 650; margin: 0 0 3px; }
.masuk-merek p { color: rgba(255, 255, 255, .55); font-size: 12.5px; margin: 0; line-height: 1.45; }
.masuk-bungkus .kartu { margin-bottom: 14px; }
.masuk-kaki { text-align: center; color: rgba(255, 255, 255, .38); font-size: 11px; line-height: 1.6; }

/* ============ Lain-lain ============ */

.baris-aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kosong { text-align: center; color: var(--tinta-3); padding: 30px 14px; font-size: 13px; }
.catatan-kaki { color: var(--tinta-3); font-size: 11.5px; margin-top: 7px; }
.dua-kolom { display: grid; gap: 14px; }
@media (min-width: 940px) { .dua-kolom { grid-template-columns: 1fr 1fr; } }

/* Pita peringatan data sementara — memakai jingga merek karena memang
   menuntut perhatian, bukan sekadar informasi. */
.pita-dummy {
  background: var(--jingga); color: #fff;
  font-size: 11.5px; font-weight: 600; text-align: center; padding: 5px 14px;
  letter-spacing: .01em;
}
.pita-dummy a { color: #fff; text-decoration: underline; }

.kaki-halaman {
  max-width: 1240px; margin: 0 auto; padding: 22px 14px 34px;
  border-top: 1px solid var(--garis); color: var(--tinta-3); font-size: 11.5px; line-height: 1.65;
}
.kaki-halaman b { color: var(--tinta-2); font-weight: 650; }

.jalur-remah { font-size: 12px; color: var(--tinta-3); margin-bottom: 8px; }
.jalur-remah a { color: var(--tinta-3); }

/* Kurva-S di beranda — digambar server sebagai SVG, tanpa pustaka grafik. */
.kurva-s { width: 100%; height: auto; display: block; }
.kurva-bantu { stroke: var(--garis); stroke-width: 1; }
.kurva-sumbu { fill: var(--tinta-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.kurva-rencana { stroke: var(--tinta-3); stroke-width: 2; stroke-dasharray: 5 4; }
.kurva-realisasi { stroke: var(--jingga); stroke-width: 2.5; }
.kurva-kini { fill: var(--jingga); }
.tanda-kurva { display: inline-block; width: 18px; height: 3px; vertical-align: middle; }
.tanda-kurva.rencana { background: var(--tinta-3); }
.tanda-kurva.realisasi { background: var(--jingga); }


/* --- Baki foto: jepretan kamera dikumpulkan sebelum dikirim --------------- */
.baki { margin: 4px 0 8px; }
.baki-aksi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.baki-daftar { display: flex; flex-wrap: wrap; gap: 6px; }
.baki-item { position: relative; width: 72px; height: 72px; }
.baki-item img { width: 100%; height: 100%; object-fit: cover;
                 border-radius: 4px; border: 1px solid var(--garis); }
.baki-buang { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
              border-radius: 50%; border: none; cursor: pointer; line-height: 18px;
              font-size: 15px; background: var(--merah); color: #fff; padding: 0; }
.baki-hitung { font-size: 12.5px; margin-top: 5px; }