/*
  ESTAMA — Typography Layer
  Load PALING AKHIR, setelah estama-borderless.css:
    <link rel="stylesheet" href="./estama-design-system.css">
    <link rel="stylesheet" href="./estama-borderless.css">
    <link rel="stylesheet" href="./estama-typography.css">

  Prinsip: satu perbedaan cukup untuk menandai satu perbedaan makna.
  Di banyak tempat aplikasi ini memakai tiga sinyal sekaligus (ukuran
  turun + bobot naik + warna pudar + letter-spacing) untuk membedakan
  satu hal, sehingga teksnya terasa "ramai" padahal isinya sedikit.
  Lapisan ini merapikan itu tanpa mengubah ukuran dasar yang sudah
  dipakai 500+ kali di modul — jadi tata letak tidak bergeser.
*/

/* ==================================================================
   1. TOKEN — satu nama per ukuran, plus token yang selama ini hilang

   Sebelumnya ada 12 token ukuran untuk 8 nilai nyata: --fs-sm dan
   --fs-caption sama-sama 12px, --fs-base dan --fs-secondary sama-sama
   13px, --fs-md dan --fs-body sama-sama 14px, --fs-lg dan --fs-section
   sama-sama 16px. Dua nama untuk satu nilai artinya saat nilainya mau
   diubah, yang keubah cuma separuh tempat.

   Di sini alias diarahkan ke token intinya (bukan ditulis ulang
   angkanya), jadi tidak ada perubahan visual sama sekali — tapi mulai
   sekarang mengubah satu angka benar-benar mengubah semua tempat.

   Line-height dan letter-spacing juga belum pernah punya token, jadi
   selama ini ditulis manual per komponen dan hasilnya tidak seragam
   (1.15 / 1.2 / 1.25 / 1.3 / 1.35 / 1.45 / 1.5 tersebar tanpa pola).
================================================================== */
:root {
  /* alias → token inti */
  --fs-caption: var(--fs-sm);       /* 12px */
  --fs-secondary: var(--fs-base);   /* 12px (dulu 13px; ubah --fs-base di design-system untuk mengembalikan) */
  --fs-body: var(--fs-md);          /* 14px */
  --fs-section: var(--fs-lg);       /* 16px */

  /* tinggi baris */
  --lh-display: 1.15;  /* angka besar KPI */
  --lh-tight: 1.25;    /* judul */
  --lh-snug: 1.35;     /* subjudul, teks satu-dua baris */
  --lh-normal: 1.5;    /* teks mengalir */

  /* jarak huruf */
  --tracking-display: -.02em;  /* >=20px: rapatkan sedikit */
  --tracking-title: -.01em;    /* 16-19px */
  --tracking-normal: 0;        /* <=14px: jangan diutak-atik */
}

/* ==================================================================
   2. ANGKA — hapus aturan yang menduplikasi aturan global

   estama-design-system.css sudah menyetel `font-variant-numeric:
   tabular-nums` di html/body, jadi SELURUH aplikasi sudah memakai
   angka selebar sama. Artinya `.tabular-nums` yang ditulis manual di
   modul dan `font-variant-numeric` yang diulang di .metric-value /
   .kpi-value / td / .font-mono semuanya tidak menambah apa pun —
   aman dibiarkan, tapi tidak perlu ditambah lagi ke depannya.

   Yang benar-benar kurang: angka di dalam tombol, badge, dan chip
   tidak ikut karena sebagian komponen itu me-reset font-variant.
   Ditegaskan di sini supaya angka di semua tempat tetap sejajar.
================================================================== */
.btn, .chip, .badge, .dev-badge, .dt-toolbtn-badge,
.dt-count, .dt-page, .kbd-hint {
  font-variant-numeric: tabular-nums;
}

/* Angka besar (KPI/statistik) — satu definisi untuk empat kelas yang
   selama ini beda-beda: .metric-value dan .ui-kpi-value punya
   letter-spacing -.025em, sementara .stat-value dan .kpi-value tidak
   punya letter-spacing sama sekali, padahal ukurannya sama-sama 24px.
   Akibatnya dua KPI bersebelahan bisa terlihat beda lebar. */
.metric-value,
.stat-value,
.kpi-value,
.ui-kpi-value,
.kpi-card .kpi-value {
  font-size: var(--fs-2xl) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--tracking-display) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ==================================================================
   3. BOBOT — 700 dikembalikan ke fungsi aslinya

   700 dipakai 30+ kali, hampir semuanya pada teks 11-12px. Pada
   ukuran sekecil itu 700 tidak terbaca sebagai "lebih penting",
   hanya sebagai "lebih tebal dan lebih rapat" — huruf saling
   menempel dan justru lebih susah dibaca dari 600.

   Aturan: 700 hanya untuk >=16px. Di bawah itu maksimal 600.
================================================================== */
.ui-drawer-section-title,
.ui-form-section-title,
.rows-summary b,
.rows-summary .rows-summary-val,
.card-row-title {
  font-weight: var(--fw-semibold) !important;
}

/* Kelas utilitas: font-bold pada teks kecil diturunkan otomatis,
   jadi modul tidak perlu disisir satu per satu. */
/* Skala bobot UI: 400 / 500 / 600 saja. 700 tidak dimuat dari Google Fonts
   (600 dan 700 hampir tak terbedakan pada Inter di 11-14px).
   .font-bold, <b>, <strong> dipetakan ke semibold di seluruh UI. */
.font-bold,
b,
strong {
  font-weight: var(--fw-semibold);
}

/* Lembar cetak (Arial, hitam-putih) tetap bold asli. Spesifisitas lebih tinggi
   daripada aturan di atas, jadi tidak perlu !important. */
.fb-sheet b, .fb-sheet strong, .fb-sheet .font-bold,
.inv-sheet b, .inv-sheet strong, .inv-sheet .font-bold,
.coa-print-sheet b, .coa-print-sheet strong, .coa-print-sheet .font-bold,
.print-doc-sheet b, .print-doc-sheet strong, .print-doc-sheet .font-bold,
.print-label-sheet b, .print-label-sheet strong, .print-label-sheet .font-bold {
  font-weight: bold;
}

/* ==================================================================
   4. LETTER-SPACING — sisa dari era huruf kapital

   `letter-spacing: .02em` dipasang bersama `text-transform: none` di
   .stat-label, .card-title-xs, .ui-drawer-section-title, dan
   .ui-form-section-title. Pasangan itu adalah jejak: dulu label-label
   ini HURUF KAPITAL (yang memang butuh diregangkan), lalu kapitalnya
   dimatikan tapi regangannya lupa dikembalikan. Pada huruf kecil,
   regangan positif bikin kata jadi terurai dan sulit dibaca sebagai
   satu kesatuan.

   Regangan sekarang hanya dipakai di tempat yang butuh: angka besar
   dan judul dirapatkan sedikit, teks kecil dibiarkan normal.
================================================================== */
.stat-label,
.card-title-xs,
.ui-drawer-section-title,
.ui-form-section-title,
.label,
.label-xs,
.form-hint,
.field-msg,
.chip,
.badge,
.dev-badge {
  letter-spacing: var(--tracking-normal) !important;
}

/* ==================================================================
   5. JUDUL — hierarki dari ukuran, bukan dari tumpukan sinyal
================================================================== */
.page-title {
  font-size: var(--fs-title) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--tracking-display) !important;
  text-wrap: balance;
}
.page-sub {
  font-size: var(--fs-secondary) !important;
  font-weight: var(--fw-regular) !important;
  line-height: var(--lh-normal) !important;
  text-wrap: pretty;
}
.section-title,
.ui-section-title,
.modal-title,
.ui-drawer-title {
  font-size: var(--fs-section) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--tracking-title) !important;
  line-height: var(--lh-tight) !important;
}
.card-title {
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: var(--lh-snug) !important;
}
/* Heading polos (h1-h6) yang dipakai langsung di modul tanpa kelas:
   tanpa ini mereka jatuh ke ukuran bawaan browser (h1 = 32px) yang
   tidak ada di skala mana pun. */
h1, h2, h3, h4, h5, h6 { letter-spacing: var(--tracking-title); text-wrap: balance; }
h1 { font-size: var(--fs-title); font-weight: var(--fw-semibold); }
h2 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-section); font-weight: var(--fw-semibold); }
h4, h5, h6 { font-size: var(--fs-body); font-weight: var(--fw-semibold); }

/* ==================================================================
   6. TEKS PENUNJANG — dikasih ruang baris yang cukup

   Tailwind memasang line-height mati pada .text-xs (12px/16px = 1.33)
   dan .text-sm (14px/20px = 1.43). Untuk teks satu baris itu pas,
   tapi hint, catatan, dan isi kotak info sering membungkus jadi 2-3
   baris — di situ 1.33 terasa sesak. Yang dilonggarkan hanya elemen
   yang memang teks mengalir, bukan .text-xs secara global (karena
   banyak dipakai di dalam flex satu baris yang tingginya bergantung
   pada line-height).
================================================================== */
.form-hint,
.field-msg,
.card-note,
.empty-state,
.page-sub-xs,
.info-box, .warn-box, .danger-box, .success-box, .brand-box, .muted-box,
.dropdown-empty,
.ui-drawer-kv dd {
  line-height: var(--lh-normal) !important;
  text-wrap: pretty;
}

/* Label form: satu-satunya pembeda dari isian adalah ukuran + warna.
   Bobot 500 sudah cukup; tidak perlu ditambah regangan atau kapital. */
.label {
  font-size: var(--fs-caption) !important;
  font-weight: var(--fw-medium) !important;
  line-height: var(--lh-snug) !important;
}

/* Teks kosong/placeholder: miring dipakai satu kali saja di seluruh
   aplikasi (.dropdown-empty), jadi malah terlihat seperti kesalahan.
   Disamakan dengan gaya empty-state lain: tegak, warna pudar. */
.dropdown-empty { font-style: normal !important; }

/* Placeholder input dibedakan lewat warna, bukan bobot/gaya —
   supaya tidak tertukar dengan isian yang sudah diketik. */
.input::placeholder,
.textarea::placeholder,
textarea.input::placeholder {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  opacity: 1;
}

/* ==================================================================
   7. TABEL — kepala tabel harus terbaca sebagai kepala

   Sebelumnya: 11px + font-weight 400 + warna --text-muted, sedangkan
   isi selnya 13px + warna --text. Artinya kepala tabel lebih kecil,
   lebih tipis, DAN lebih pudar dari isinya — tiga tingkat di bawah,
   sehingga saat men-scroll tabel panjang kepala tabelnya "hilang"
   dan kolom jadi susah dilacak.

   Perbaikan: ukuran dan warna tetap (itu yang bikin kepala tidak
   berebut perhatian dengan data), tapi bobotnya dinaikkan ke 500
   supaya tetap berdiri sebagai judul kolom.
================================================================== */
#app table thead th,
#modal table thead th {
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--tracking-normal) !important;
}
#app table tbody td,
#modal table tbody td {
  line-height: var(--lh-snug) !important;
}

/* Kolom angka: rata kanan sudah diatur di modul, di sini dipastikan
   angkanya tidak ikut melar saat selnya sempit. */
#app table td.text-right,
#app table td.dt-right,
#modal table td.text-right,
#modal table td.dt-right {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Kode batch / nomor dokumen sering lebih panjang dari kolomnya dan
   tidak punya spasi untuk dipenggal, jadi dibolehkan patah di mana
   saja daripada menjebol lebar tabel. */
.code-text, .batch-text, td .font-mono {
  overflow-wrap: anywhere;
}

/* ==================================================================
   8. .font-mono — namanya bohong, isinya bukan monospace

   estama-design-system.css menimpa .font-mono jadi var(--font-sans)
   + tabular-nums. Keputusannya benar (Inter dengan angka tabular
   lebih rapi dari monospace untuk angka produksi), tapi kelasnya
   jadi menyesatkan saat dibaca di modul. Dibiarkan berfungsi, dan
   diberi nama yang jujur untuk dipakai selanjutnya.
================================================================== */
.font-num,
.font-mono {
  font-family: var(--font-sans) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ==================================================================
   9. DETAIL KECIL
================================================================== */
/* Teks di dalam tombol tidak pernah boleh membungkus jadi dua baris —
   tinggi tombol sudah dikunci 32/38px, teks yang membungkus akan
   terpotong. */
.btn, .dt-toolbtn, .seg-btn { white-space: nowrap; }

/* Angka dan satuan jangan terpisah baris ("250" / "gram"). */
.unit, .satuan { white-space: nowrap; }

/* Judul panjang di kartu dan baris tabel dipotong dengan elipsis,
   bukan dibiarkan menjebol lebar kolom. */
.card-row-title,
.ui-kpi-label,
.stat-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==================================================================
   10. WARNA TEKS — tambal lubang mode gelap

   index.html sudah memetakan .text-slate-400/500/600 ke token, TAPI
   pemetaannya belum lengkap dan masih ada teks yang jatuh ke warna
   mentah Tailwind:

     .text-slate-700  (1x)  di mode gelap -> #334155 di atas #080C13
                            = kontras ~1.7:1, praktis tidak terbaca.
     .text-slate-300  (6x)  di mode terang -> #CBD5E1 di atas putih
                            = kontras ~1.6:1, jauh di bawah WCAG 4.5:1.
     .text-rose-600   (43x)
     .text-emerald-600(21x)
     .text-amber-600/700 (11x)
                            tidak pernah dipetakan untuk mode gelap.
                            Warna-warna ini justru yang membawa makna
                            (selisih minus, hasil lulus, peringatan),
                            jadi paling tidak boleh sampai kabur.

   Pemetaan lama juga dibatasi ke #app/#modal/header/aside, sehingga
   teks di luar itu (command palette, layar login, toast) tidak ikut.
   Di sini ruang lingkupnya dibuka supaya berlaku menyeluruh.
================================================================== */
.text-slate-300 { color: var(--text-muted) !important; }
.text-slate-400 { color: var(--text-muted) !important; }
.text-slate-500 { color: var(--text-muted) !important; }
.text-slate-600 { color: var(--text-secondary) !important; }
.text-slate-700 { color: var(--text-secondary) !important; }

/* Warna bermakna diarahkan ke token status yang sudah punya padanan
   terang/gelap, jadi teksnya ikut menyesuaikan saat tema berganti. */
.text-rose-300, .text-rose-400, .text-rose-600, .text-rose-700 { color: var(--danger) !important; }
.text-emerald-600, .text-emerald-700 { color: var(--success) !important; }
.text-amber-600, .text-amber-700 { color: var(--warning) !important; }

/* Kecuali di atas latar berwarna penuh, teksnya harus tetap putih. */
.step-chip.step-active .text-slate-400,
.step-chip.step-active .text-slate-500,
.btn-primary .text-slate-400,
.btn-primary .text-slate-500 { color: rgba(255,255,255,.85) !important; }

/* ==================================================================
   11. UKURAN YANG LOLOS DARI SKALA

   Beberapa komponen menulis ukuran langsung dalam px dan kebetulan
   tidak sama dengan token mana pun (15px di satu tempat), atau sama
   nilainya tapi tidak ikut berubah kalau tokennya diubah.
================================================================== */
.chart-tip { font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.dropdown-item { font-size: var(--fs-secondary); }
.dropdown-empty { font-size: var(--fs-caption); }
.form-hint, .field-msg, .label-xs { font-size: var(--fs-xs); }
.toast-item, .toast-action { font-size: var(--fs-secondary); }

/* ==================================================================
   12. PEMENGGALAN BARIS

   Bahasa Indonesia banyak kata panjang tanpa titik potong alami
   ("pertanggungjawaban", "penyimpanan"), dan aplikasi ini penuh kode
   dokumen tanpa spasi (INV-2026-0001, BTH-SVC-240915). Keduanya
   menjebol lebar kolom sempit kalau tidak diberi izin patah.
================================================================== */
.card-note, .form-hint, .field-msg, .empty-state,
.info-box, .warn-box, .danger-box, .success-box, .brand-box, .muted-box {
  overflow-wrap: break-word;
}
/* Satuan tidak boleh terpisah dari angkanya saat baris patah. */
.metric-value + .stat-label, .kpi-unit { white-space: nowrap; }

/* ==================================================================
   13. TEKS TERPOTONG HARUS PUNYA JUDUL PENUH

   Elemen yang dipotong elipsis kehilangan isinya secara visual.
   Ini tidak bisa diperbaiki dari CSS (butuh atribut title di HTML),
   jadi dicatat di sini sebagai pengingat, bukan sebagai aturan.
   Sebagian besar sudah benar: .ui-drawer-title, .card-row-title,
   dan kolom tabel panjang sudah membawa title=".
================================================================== */

/* ==================================================================
   14. RENDER HURUF
================================================================== */
html, body {
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
/* Angka yang sedang berubah (hitung mundur, total berjalan) jangan
   bikin tata letak bergeser. */
.metric-value, .stat-value, .kpi-value, .ui-kpi-value,
.rows-summary .rows-summary-val { font-variant-numeric: tabular-nums; }

/* Cetakan (invoice/COA) sengaja TIDAK disentuh: di sana huruf kapital,
   bobot bold, dan ukuran pt memang mengikuti format dokumen resmi,
   bukan gaya aplikasi. */