/* ============================================================================
   Gaya Odoo — satu sumber untuk seluruh aplikasi.
   ============================================================================
   Sebelumnya tiap template menempelkan <style> sendiri berisi aturan isian yang
   hampir sama. Salinan seperti itu pasti menyimpang: satu template dirapikan,
   yang lain tertinggal, dan layar jadi tak seragam. Semua aturan tampilan
   sekarang di sini.

   Ciri khas Odoo yang ditiru:
     - Isian BERGARIS BAWAH saja, bukan kotak penuh. Form jadi terbaca seperti
       dokumen, bukan seperti borang isian.
     - Lembar (sheet) gelap menjorok di atas latar teal, dengan bayangan tipis.
     - Bilah status berbentuk anak panah (Draft -> Diposting).
     - Nomor dokumen sebagai judul besar; saat masih baru ditampilkan pucat
       sebagai bayangan nomor yang akan didapat.
     - Tab (notebook) bergaris bawah teal saat aktif.
   ========================================================================= */

/* ---- PALET TERANG PROFESIONAL ----
   Nama variabel sengaja dipertahankan (--o-ungu dst.) supaya seluruh aturan di
   bawah tidak perlu ditulis ulang; yang berganti hanya NILAINYA. Mengubah nama
   berarti menyentuh ratusan baris tanpa alasan.
   Arah: latar abu sangat muda, kartu putih, teks slate gelap, aksen teal yang
   sedikit lebih dalam agar kontras di atas putih. Nyaman dipandang lama —
   permukaan bersih, garis tipis, bukan kotak tebal. */
:root {
  --o-ungu: #0E8C90;            /* aksen: tombol utama, tautan, keadaan aktif */
  --o-ungu-gelap: #0A6E71;      /* aksen saat disentuh kursor */
  --o-ungu-muda: #E6F4F4;       /* tint teal samar untuk keadaan aktif */
  --o-aksen: #0E8C90;

  --o-latar: #F3F5F7;           /* latar halaman — abu sangat muda */
  --o-panel: #FFFFFF;           /* lembar & kartu — putih bersih di atas latar */
  --o-panel-naik: #F1F5F9;      /* kepala tabel, permukaan sedikit terangkat */
  --o-panel-aktif: #E6F4F4;     /* baris aktif / disentuh kursor — tint teal */

  --o-garis: #E2E8F0;           /* garis tipis (slate-200) */
  --o-garis-tegas: #CBD5E1;     /* garis lebih tegas (slate-300) */
  --o-teks: #1E293B;            /* teks utama (slate-800) */
  --o-teks-redup: #64748B;      /* teks redup (slate-500) */
}

/* ---------------------------------------------------------------- LEMBAR */
/* Lembar dokumen MEMENUHI ruang kerja yang tersedia (elastis), tidak dikunci
   78rem seperti dulu. Di layar lebar, batas tetap itu menyisakan ruang kosong
   lebar di kanan sementara grid baris barang justru harus di-scroll — ruang
   yang ada lebih berguna dipakai isinya. Lebar ikut ukuran jendela; sidebar
   yang diciutkan pun langsung menambah ruang lembar. */
.o-lembar {
  background: var(--o-panel);
  border: 1px solid var(--o-garis);
  border-radius: .5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  width: 100%;
}
.o-lembar-isi { padding: 1.25rem 1.75rem 1.75rem; }

/* ----------------------------------------------------------- BILAH STATUS */
/* Anak panah dibuat dengan clip-path, bukan gambar — tetap tajam di layar
   beresolusi tinggi dan warnanya ikut tema tanpa perlu aset terpisah. */
.o-statusbar {
  display: flex;
  align-items: stretch;
  background: var(--o-panel-naik);
  border-bottom: 1px solid var(--o-garis);
  border-radius: .5rem .5rem 0 0;
  overflow: hidden;
  font-size: .8125rem;
  font-weight: 500;
}
.o-status {
  display: flex;
  align-items: center;
  padding: .55rem 1.75rem .55rem 1.25rem;
  color: var(--o-teks-redup);
  background: var(--o-panel-naik);
  clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% 50%, calc(100% - .7rem) 100%, 0 100%);
  margin-right: -.35rem;
  white-space: nowrap;
}
.o-status:first-child { padding-left: 1rem; }
.o-status-aktif { background: var(--o-ungu-muda); color: var(--o-ungu); }
.o-status-batal { background: #FEE2E2; color: #B91C1C; }
.o-status-sisa { flex: 1; background: var(--o-panel-naik); }

/* ---------------------------------------------------------------- JUDUL */
.o-judul {
  font-size: 1.75rem;
  font-weight: 400;
  color: #0F172A;
  line-height: 1.2;
}
/* Nomor belum ada: tampilkan pucat, jelas sebagai bayangan bukan nilai asli. */
.o-judul-bayangan { color: #CBD5E1; }
.o-judul-label {
  font-size: .8125rem;
  color: var(--o-teks-redup);
  font-weight: 500;
  margin-bottom: .1rem;
}

/* ------------------------------------------------------------- REMAH ROTI */
.o-remah { color: var(--o-teks-redup); font-size: .8125rem; }
.o-remah a:hover { color: var(--o-ungu); }
.o-remah-kini { color: var(--o-teks); font-weight: 500; }

/* ---------------------------------------------------------------- ISIAN */
/* Bergaris bawah, bukan kotak. Sengaja memakai `.o-form` sebagai induk supaya
   layar yang belum diubah tidak ikut berubah tanpa diperiksa. */
.o-form input[type="text"],
.o-form input[type="number"],
.o-form input[type="email"],
.o-form input[type="url"],
.o-form input[type="password"],
.o-form input[type="search"],
.o-form select,
.o-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--o-garis-tegas);
  border-radius: 0;
  padding: .3rem .15rem;
  background: transparent;
  color: var(--o-teks);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.o-form input:focus,
.o-form select:focus,
.o-form textarea:focus {
  outline: none;
  border-bottom-color: var(--o-ungu);
  box-shadow: 0 1px 0 0 var(--o-ungu);
}
.o-form input::placeholder, .o-form textarea::placeholder { color: #94A3B8; }
.o-form input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
/* angka.js mengubah <input type="number"> menjadi type="text" (+ kelas .angka-id)
 * agar bisa menampilkan "1.234.567,89"; itu MENGHAPUS rata-kanan bawaan number di
 * atas. Kembalikan di sini supaya SEMUA isian angka tetap rata kanan di mana pun
 * (grid jurnal/kas, dokumen transaksi, dsb), bukan cuma sebelum angka.js jalan. */
.angka-id { text-align: right; font-variant-numeric: tabular-nums; }
.o-form textarea { min-height: 4.5rem; resize: vertical; }
.o-form input[type="checkbox"], .o-form input[type="radio"] {
  width: 1rem; height: 1rem; accent-color: var(--o-ungu);
}
/* Isian hanya-baca (nama barang, sub total): rata dengan yang lain tapi
   jelas tak bisa disunting — tanpa garis, sedikit redup. */
.o-form input[readonly] {
  border-bottom-color: transparent;
  color: var(--o-teks-redup);
  background: transparent;
}
.o-form input[readonly]:focus { box-shadow: none; border-bottom-color: transparent; }

.o-label {
  color: var(--o-teks-redup);
  font-weight: 500;
  font-size: .8125rem;
}
.o-wajib { color: #FF8A80; }
.o-bantuan { font-size: .75rem; color: #7E969C; margin-top: .15rem; }
.o-galat { font-size: .75rem; color: #FF8A80; margin-top: .15rem; }

/* ----------------------------------------------------------------- TAB */
.o-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--o-garis);
  margin-bottom: 1rem;
}
.o-tab {
  padding: .5rem .9rem;
  font-size: .875rem;
  color: var(--o-teks-redup);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  background: none;
}
.o-tab:hover { color: var(--o-ungu); }
.o-tab-aktif { color: var(--o-ungu); border-bottom-color: var(--o-ungu); font-weight: 500; }

/* -------------------------------------------------------------- TOMBOL */
.o-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .9rem;
  border-radius: .25rem;
  font-size: .875rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
  white-space: nowrap;
}
.o-btn-utama { background: var(--o-ungu); color: #FFFFFF; font-weight: 500; }
.o-btn-utama:hover { background: var(--o-ungu-gelap); }
.o-btn-kedua { background: #FFFFFF; color: var(--o-teks); border-color: var(--o-garis-tegas); }
.o-btn-kedua:hover { background: #F1F5F9; }
.o-btn-bahaya { background: transparent; color: #DC2626; border-color: rgba(220, 38, 38, .40); }
.o-btn-bahaya:hover { background: rgba(220, 38, 38, .08); }
.o-btn-teks { color: var(--o-ungu); background: none; padding: .4rem .5rem; }
.o-btn-teks:hover { background: var(--o-ungu-muda); }

/* --------------------------------------------------------------- TABEL */
.o-tabel { width: 100%; border-collapse: collapse; }
.o-tabel thead th {
  background: var(--o-panel-naik);
  border-bottom: 1px solid var(--o-garis);
  padding: .5rem .75rem;
  font-weight: 500;
  font-size: .8125rem;
  color: var(--o-teks-redup);
  text-align: left;
  white-space: nowrap;
}
/* Header o-tabel default rata-kiri (di atas). Tapi bila sebuah <th> diberi
   utility text-right/text-center, itu harus MENANG — `.o-tabel thead th` lebih
   spesifik dari `.text-right` polos sehingga tanpa aturan ini header kolom
   angka terpaksa rata-kiri (tak sejajar dengan selnya). Berlaku juga untuk
   tabel detail yang bersarang di dalam .o-tabel (mis. Kartu Hutang Supplier). */
.o-tabel thead th.text-right { text-align: right; }
.o-tabel thead th.text-center { text-align: center; }
.o-tabel tbody td { padding: .4rem .75rem; border-bottom: 1px solid var(--o-garis); }
/* Baris selang-seling (zebra) — memudahkan mata menyusuri baris panjang.
   Diletakkan SEBELUM aturan :hover supaya hover tetap menang saat disorot.
   `.o-zebra` dipakai tabel yang TAK memakai .o-tabel penuh (mis. tabel laporan
   yang header kolom angkanya rata-kanan) agar tetap dapat zebra tanpa mewarisi
   gaya thead .o-tabel. */
.o-tabel tbody tr:nth-child(even),
.o-zebra tbody tr:nth-child(even) { background: rgba(15, 23, 42, .025); }
.o-tabel tbody tr:hover,
.o-zebra tbody tr:hover { background: var(--o-panel-aktif); }
.o-tabel-klik tbody tr { cursor: pointer; }
/* Saat dicetak (kertas putih), zebra dibuat abu sangat muda agar tetap hemat
   tinta tapi bergaris. */
@media print {
  .o-tabel tbody tr:nth-child(even),
  .o-zebra tbody tr:nth-child(even) { background: #f3f3f3 !important; }
}

/* Grid baris barang: isiannya rapat, tanpa garis bawah per sel supaya
   tabelnya sendiri yang memberi struktur. */
.o-grid input[type="text"], .o-grid input[type="number"], .o-grid select {
  border-bottom-color: transparent;
  padding: .25rem .35rem;
}
.o-grid input:focus, .o-grid select:focus { border-bottom-color: var(--o-ungu); }
.o-grid tbody tr:hover input:not([readonly]) { border-bottom-color: var(--o-garis-tegas); }

/* Semua isian, termasuk yang di luar .o-form (kotak cari di list view, filter
   laporan, dsb). Tanpa ini peramban memakai latar PUTIH bawaannya dan kotak
   isian menyala terang di tengah layar gelap.
   Checkbox & radio dikecualikan — keduanya digambar peramban sendiri dan diatur
   lewat accent-color, bukan background. */
/* :where() berbobot NOL. Ini aturan dasar, jadi ia harus kalah dari aturan
   mana pun yang lebih spesifik — tanpa :where(), tiga :not() di bawah membuat
   bobotnya melampaui `.o-form input[...]` dan isian bergaris bawah pun rusak. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
       select, textarea) {
  background-color: transparent;
  color: var(--o-teks);
}

/* Dropdown di kepala dokumen (supplier/pelanggan/CV) perlu lebar wajar. */
.grid select { min-width: 12rem; }
/* Daftar pilihan <select> dirender sistem operasi, bukan halaman — tanpa ini
   teks terang bertemu latar terang dan pilihannya tak terbaca. */
option { background-color: var(--o-panel); color: var(--o-teks); }
::placeholder { color: #94A3B8; }

/* Kotak cari di list view — tetap berbingkai (bukan bergaris bawah) karena
   ini kendali, bukan isian dokumen. */
.o-cari {
  width: 16rem;
  border: 1px solid var(--o-garis-tegas);
  border-radius: .25rem;
  padding: .35rem .6rem;
  font-size: .875rem;
  color: var(--o-teks);
}
.o-cari:focus {
  outline: none;
  border-color: var(--o-ungu);
  box-shadow: 0 0 0 3px rgba(22, 169, 173, .25);
}

/* --------------------------------------------------------------- TOTAL */
.o-total { display: flex; justify-content: flex-end; padding-top: 1rem; }
.o-total-kotak { min-width: 18rem; }
.o-total-baris {
  display: flex; justify-content: space-between; gap: 2rem;
  padding: .3rem 0; font-size: .875rem;
}
.o-total-akhir {
  border-top: 1px solid var(--o-garis);
  margin-top: .3rem; padding-top: .5rem;
  font-size: 1.05rem; font-weight: 600; color: #0F172A;
}

/* ------------------------------------------------- PERMUKAAN & PERINGATAN */
/* Latar kartu `bg-white` dipetakan ke --o-panel (putih di tema terang) agar
   satu variabel mengatur seluruh permukaan. Selector diawali `body` (bobot
   0,1,1) supaya menang atas `.bg-white` bawaan Tailwind. */
body .bg-white { background-color: var(--o-panel); }

/* Kotak pesan (bg-red-50 / text-red-800 dsb.) TAK lagi dipetakan ulang: di
   tema terang, warna Tailwind bawaannya sudah pas — latar pastel muda dengan
   teks pekat. Cukup pastikan garisnya tak terlalu tebal. */

/* --------------------------------------------------------------- CETAK */
/* Kertas selalu putih. Mencetak tema gelap menghabiskan toner dan hasilnya
   sulit dibaca, jadi seluruh laporan dipaksa kembali terang saat dicetak —
   tampilan layar dan tampilan cetak memang tak harus sama. */
@media print {
  body, body .bg-white, body .bg-gray-50, .o-lembar, .o-tabel thead th {
    background: #fff !important;
    color: #000 !important;
  }
  body .o-judul, body .o-remah-kini, body .o-total-akhir { color: #000 !important; }
  body .o-label, body .o-bantuan, .o-tabel thead th { color: #333 !important; }
  .o-tabel tbody td, .o-tabel thead th { border-color: #ccc !important; }
  .o-lembar { border: 0; box-shadow: none; max-width: none; }
  .o-statusbar, .o-btn, .o-tabs { display: none !important; }
}