/* =====================================================================
   tnc-gaya.css — nilai rupa bersama tiga aplikasi TNC
   ---------------------------------------------------------------------
   Sebelum berkas ini ada, 48 halaman menuliskan nilai yang sama dengan
   angka berbeda-beda: warna garis punya 8 versi, teks redup 6 versi,
   sudut tombol 5 versi. Tiap halamannya sendiri baik-baik saja, tetapi
   berpindah antar halaman terasa berpindah antar aplikasi.

   Sekarang nilainya tinggal satu tempat. Ganti di sini, seluruh halaman
   ikut.

   CARA KERJANYA. Berkas ini dimuat SEBELUM gaya tiap halaman, jadi
   halaman yang memang perlu tampil beda tetap bisa menimpanya. Itu
   disengaja: /bukusaya dan /labarugi memakai palet krem menyerupai buku
   kas kertas, dan itu keputusan rancangan, bukan kelalaian. Berkas ini
   menyeragamkan yang tidak sengaja berbeda, bukan memaksa semuanya sama.
   ===================================================================== */

:root {
  /* ---------- warna merek ---------- */
  --navy:      #1E2B6A;   /* warna utama: kop, tombol utama, judul */
  --yellow:    #FFD700;   /* aksen merek */
  --kuning:    #FFD700;   /* nama lain yang terlanjur dipakai beberapa halaman */
  --red:       #E32227;   /* merah merek: bahaya, tolak, hapus */
  --merah:     #E32227;
  --green:     #1B7A2F;   /* setuju, berhasil */
  --ok:        #137a4b;   /* hijau tua untuk teks berhasil */
  --teal:      #2E8F92;

  /* ---------- permukaan & teks ---------- */
  --bg:        #f4f5f9;   /* latar halaman */
  --kertas:    #f7f8fc;   /* kartu di atas latar */
  --ink:       #1a1d29;   /* teks utama */
  --muted:     #6b7280;   /* teks penjelas, keterangan */
  --redup:     #6b7280;
  --line:      #e6e8ef;   /* garis pemisah, tepi kotak isian */
  --garis:     #e6e8ef;

  /* ---------- peringatan ----------
     Kuning kecokelatan untuk hal yang perlu diperhatikan tetapi belum
     salah. SENGAJA berbeda dari kuning merek: kuning merek dipakai untuk
     menarik perhatian ke hal yang baik, yang ini untuk hal yang perlu
     diperiksa. Kalau disamakan, staf kehilangan bedanya. */
  --awas:      #b45309;
  --awas-bg:   #fff8e6;

  /* ---------- bentuk ----------
     Satu tangga sudut, bukan angka yang dikarang tiap halaman. */
  --bulat-kecil:  8px;    /* lencana, kotak kecil */
  --bulat:       10px;    /* tombol, kotak isian */
  --bulat-besar: 14px;    /* kartu */
  --bulat-kartu: 16px;    /* modal, kartu besar */

  /* ---------- jarak ---------- */
  --sela-kecil:  6px;
  --sela:       11px;
  --sela-besar: 16px;

  /* ---------- bayangan ---------- */
  --bayang:       0 1px 3px rgba(30,43,106,.06);
  --bayang-naik:  0 8px 24px rgba(30,43,106,.12);

  /* ---------- huruf ----------
     Lima nama berbeda pernah dipakai untuk dua huruf yang sama.
     Semuanya dipertahankan supaya halaman lama tidak rusak, tetapi
     semuanya kini menunjuk ke tempat yang sama. */
  --serif:         'Fraunces', Georgia, serif;
  --disp:          'Fraunces', Georgia, serif;
  --font-fraunces: 'Fraunces', Georgia, serif;
  --sans:          'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-jakarta:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Sebagian orang menyetel peramban ke gerakan minimal karena animasi
   berulang benar-benar membuat mereka pusing. Dihormati di seluruh
   aplikasi, bukan hanya di layar tunggu. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   LENCANA STATUS
   ---------------------------------------------------------------------
   Sebelumnya tiap halaman menulis sendiri warna lencananya: 19 kelas
   tersebar di 13 halaman, warnanya dipilih seadanya. Akibatnya "Ditolak"
   di satu halaman abu-abu, di halaman lain merah, dan staf tidak bisa
   memindai satu layar lalu langsung tahu mana yang mendesak.

   Sekarang warnanya BERMAKNA, bukan sekadar berbeda:
     hijau  = beres, tidak perlu tindakan
     kuning = menunggu tindakan KAMU
     biru   = sedang berjalan, menunggu pihak lain
     merah  = bermasalah, perlu diperiksa
     abu    = sudah lewat, tidak aktif
     ungu   = keadaan khusus di luar alur biasa

   TIAP LENCANA PUNYA IKON. Bukan hiasan: sekitar satu dari dua belas
   laki-laki sulit membedakan merah dan hijau. Dengan warna saja mereka
   tidak bisa membedakan "Lunas" dari "Ditolak"; ikonnya memberi petunjuk
   kedua yang tidak bergantung warna.

   Tanpa garis tepi, latar pastel lembut, ikon segaris warna dengan
   teksnya. Ikonnya ditanam sebagai mask sehingga warnanya mengikuti warna
   teks dan tidak perlu berkas gambar terpisah.
   ===================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 12px 4px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  border: none;
}
.tag::before {
  content: '';
  width: 14px; height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ikon) center/contain no-repeat;
          mask: var(--ikon) center/contain no-repeat;
}
/* Lencana tanpa keluarga: tidak ada ikon, supaya tidak muncul kotak kosong. */
.tag:not([class*="t-"]):not([class~="ok"]):not([class~="tunggu"]):not([class~="proses"]):not([class~="bahaya"]):not([class~="diam"]):not([class~="khusus"])::before {
  display: none;
}

/* ---------- hijau: beres ---------- */
.tag.ok, .t-terkonfirmasi, .t-disetujui, .t-disetujui_hrd, .t-lunas,
.t-aktif, .t-selesai-ok {
  background: #e6f6ec; color: #1a7f47;
  --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath d='m8 12.2 2.7 2.7L16 9.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- kuning: menunggu tindakan kamu ---------- */
.tag.tunggu, .t-menunggu_penawaran, .t-ditinjau, .t-ini, .t-manual,
.t-diajukan, .t-disetujui_mnj, .t-perlu {
  background: #fdf3dd; color: #9a6a09;
  --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath d='M12 7.2v5.4' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.3' r='1.15' fill='%23000'/%3E%3C/svg%3E");
}

/* ---------- biru: berjalan, menunggu pihak lain ---------- */
.tag.proses, .t-menunggu_pembayaran, .t-dikerjakan, .t-otomatis,
.t-jadi_surat, .t-siap {
  background: #e7effd; color: #2b57ad;
  --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.9-6.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M20.6 4.4v4.8h-4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- merah: bermasalah ---------- */
.tag.bahaya, .t-baru, .t-bl, .t-dibayar, .t-tutup, .t-ulang {
  background: #fdeaea; color: #b3322c;
  --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath d='m9.2 9.2 5.6 5.6M14.8 9.2l-5.6 5.6' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- abu: sudah lewat ---------- */
.tag.diam, .t-kedaluwarsa, .t-ditolak, .t-selesai, .t-batal,
.t-dibatalkan, .t-dicabut {
  background: #eef0f4; color: #626879;
  --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12S6.9 5.8 12 5.8c1.5 0 2.8.5 4 1.3M20.5 12S17.1 18.2 12 18.2c-1.6 0-3-.5-4.2-1.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath d='M4 20 20 4' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- ungu: keadaan khusus ---------- */
.tag.khusus, .t-minat {
  background: #f4ecfd; color: #6b3fa8;
  --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c2.6 3.1 5.6 5.2 5.6 9a5.6 5.6 0 0 1-11.2 0c0-3.8 3-5.9 5.6-9Z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M12 17.4a2.6 2.6 0 0 0 2.6-2.6c0-1.6-1.3-2.5-2.6-4-1.3 1.5-2.6 2.4-2.6 4a2.6 2.6 0 0 0 2.6 2.6Z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Merah pekat untuk yang benar-benar mendesak. Dipakai hemat \u2014 kalau
   semuanya mendesak, tidak ada yang mendesak. */
.tag.mendesak { background: var(--red); color: #fff; }

/* =====================================================================
   TOMBOL BERWARNA
   ---------------------------------------------------------------------
   Sebelumnya .btn-green dan .btn-red cuma ada di /pesanan. Halaman lain
   yang memakainya diam-diam mendapat tombol tanpa warna — terlihat
   seperti tombol biasa, padahal maksudnya menegaskan pilihan.

   Hijau selalu berarti melanjutkan, merah selalu berarti menghentikan.
   Konsisten di seluruh aplikasi, bukan per halaman.
   ===================================================================== */
.btn-green { background: var(--green); color: #fff; }
.btn-red   { background: var(--red);   color: #fff; }