/* =============================================================================
   app.css — Lapisan JEMBATAN & primitif aplikasi
   Tema: "EXECUTIVE CONSTRUCTION ERP" (Navy + Gold + White).

   Berkas ini SENGAJA tidak lagi memuat satu pun nilai hex. Seluruh warna,
   radius, bayangan & tipografi berasal dari assets/css/design-system.css
   (dimuat tepat sebelum berkas ini).

   Isinya dua hal saja:
   1) PETA ALIAS  — nama token LAMA (--teal, --amber, --paper, --ink, dst)
      dipetakan ke token BARU. Ratusan referensi var(--teal) dkk. yang sudah
      tersebar di seluruh view/CSS/JS otomatis ikut tema baru tanpa perlu
      disunting satu per satu. Alias ini adalah lapisan kompatibilitas —
      kode/halaman BARU harap langsung memakai nama kanonik (--brand,
      --accent, --surface, --text, dst).
   2) PRIMITIF   — kartu, badge status, chip, skeleton: komponen kecil yang
      dipakai lintas modul dan tidak punya berkas sendiri.
   ========================================================================== */

/* =============================================================================
   1. PETA ALIAS (kompatibilitas nama token lama)
   ========================================================================== */
:root {
  /* Teks & permukaan */
  --ink:        var(--text);
  --ink-soft:   var(--text-muted);
  --paper:      var(--bg);
  --card:       var(--surface);
  --line:       var(--border);
  --slate:      var(--shell);
  --slate-2:    var(--shell-2);

  /* Merk. CATATAN: nama "--teal" murni warisan sejarah — nilainya sekarang
     NAVY. Jangan menambah pemakaian baru; pakai --brand. */
  --teal:       var(--brand);
  --teal-600:   var(--brand-strong);
  --teal-050:   var(--brand-tint);
  --teal-text:        var(--brand-soft);
  --teal-text-strong: var(--brand);

  /* Aksen finansial/emas */
  --amber:      var(--accent);
  --amber-050:  var(--accent-tint);

  /* Aksen lama "aurora" (violet/magenta/cyan) dinetralkan ke navy/gold
     supaya sisa referensi di berkas lain tidak pernah lagi memunculkan
     warna di luar identitas Navy+Gold. */
  --violet-2:   var(--brand-soft);
  --cyan:       var(--accent);

  /* Status. CATATAN: --danger / --info / --danger-bg / --info-bg SENGAJA
     TIDAK diulang di sini — namanya sudah sama persis dengan token kanonik
     di design-system.css. Menuliskan `--danger: var(--danger)` akan membuat
     rujukan melingkar (cyclic custom property) yang menurut spesifikasi CSS
     membuat token itu INVALID, sehingga seluruh tombol/badge merah & biru
     kehilangan warnanya. Hanya nama LAMA yang berbeda yang dipetakan. */
  --ok:     var(--success);  --ok-bg:     var(--success-bg);
  --warn:   var(--warning);  --warn-bg:   var(--warning-bg);

  /* Tipografi */
  --font-display: var(--font-heading);
  --font-body:    var(--font-text);
  --font-mono:    var(--font-numeric);

  /* Bentuk & bayangan */
  --r:      var(--radius-card);
  --r-sm:   var(--radius-button);
  --r-lg:   var(--radius-modal);
  --shadow:    var(--shadow-md);
  --shadow-xl: var(--shadow-lg);

  /* Gradasi merk — DISENGAJA dibuat nyaris rata (navy pekat -> navy),
     bukan gradasi warna-warni seperti tema lama. Dipertahankan hanya karena
     beberapa berkas masih merujuknya. */
  --brand-gradient: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  --shell-gradient: linear-gradient(180deg, var(--shell) 0%, var(--shell-2) 100%);
}

[data-theme="dark"] {
  --teal-text:        var(--gold-400);
  --teal-text-strong: var(--gold-300);
  --shell-gradient:   linear-gradient(180deg, var(--shell) 0%, var(--shell-2) 100%);
}

/* =============================================================================
   2. UTILITAS DASAR
   ========================================================================== */
.text-muted   { color: var(--text-muted) !important; }
.text-end     { text-align: right; }
.text-center  { text-align: center; }
.fw-600       { font-weight: var(--fw-semibold); }
.mt-0 { margin-top: 0 } .mb-0 { margin-bottom: 0 }

/* =============================================================================
   3. KARTU
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-tl) var(--radius-card-tr) var(--radius-card-br) var(--radius-card-bl);
  box-shadow: var(--shadow-sm);
}
.card-body  { padding: var(--pad-card); }
.card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
}

/* =============================================================================
   4. BADGE STATUS  (satu skema warna untuk SELURUH aplikasi — brief §10)
   Aktif=Hijau · Selesai=Biru · Menunggu Approval=Gold · Belum Dibayar=Orange
   Ditolak=Merah · Draft=Abu
   ========================================================================== */
.badge-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px;
  border-radius: var(--radius-badge);
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  line-height: 1.55;
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Varian semantik kanonik */
.badge-aktif,    .badge-lunas,  .badge-selesai-bayar {
  background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border);
}
.badge-selesai,  .badge-pending {
  background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-border);
}
.badge-approval, .badge-menunggu {
  background: var(--gold-bg);    color: var(--gold-fg); border-color: var(--gold-border);
}
.badge-belum,    .badge-sebagian {
  background: var(--st-belum-bg); color: var(--st-belum); border-color: var(--st-belum-border);
}
.badge-tolak,    .badge-utang {
  background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger-border);
}
.badge-draft {
  background: var(--neutral-bg); color: var(--neutral-fg); border-color: var(--neutral-border);
}
.badge-baru {
  background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border);
}

/* Badge identitas divisi — warna mengikuti models/Divisi.php::warna() */
.badge-divisi-proyek {
  background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-border);
}
.badge-divisi-reklamasi {
  background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border);
}

/* Nama + badge dalam satu baris rata (kolom "Nama Pekerjaan", dst) */
.tbl-nama-flex { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.tbl-nama-flex > .tbl-ellipsis { flex: 1 1 auto; min-width: 0; }
.tbl-nama-flex > .badge-status { flex-shrink: 0; }

/* Penanda "diinput oleh" di Laporan */
.badge-input {
  display: inline-block; vertical-align: middle; white-space: nowrap;
  padding: 1px 8px;
  border-radius: var(--radius-badge);
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  background: var(--bg-sunken); color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge-input-you {
  background: var(--accent-tint); color: var(--gold-fg); border-color: var(--gold-border);
}

/* =============================================================================
   5. TOMBOL MERK  (varian penuh ada di theme.css)
   ========================================================================== */
.btn-brand {
  background: var(--accent); border-color: var(--accent); color: var(--brand-foreground);
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--accent-strong); border-color: var(--accent-strong); color: var(--brand-foreground);
}
.btn-brand:focus-visible { box-shadow: var(--ring-accent); outline: none; }

/* =============================================================================
   6. STATE: LOADING (skeleton)
   ========================================================================== */
.skel {
  position: relative; overflow: hidden;
  background: var(--border-subtle);
  border-radius: var(--radius-sm);
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: skel 1.3s var(--ease) infinite;
}
[data-theme="dark"] .skel::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
}
@keyframes skel { 100% { transform: translateX(100%); } }

/* =============================================================================
   7. CHIP LAMPIRAN (form transaksi)
   ========================================================================== */
.lamp-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
  font-size: var(--fs-caption);
}
.lamp-chip a { color: var(--text); text-decoration: none; }
.lamp-chip a:hover { color: var(--brand-soft); text-decoration: underline; }
.btn-lamp-del {
  border: 0; background: transparent; color: var(--danger);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.money-input { text-align: right; font-family: var(--font-numeric); }

/* =============================================================================
   8. PENANDA BARIS DANA MASUK (arus_kas = 'masuk')
   ========================================================================== */
.table > tbody > tr.row-masuk > td { background: var(--success-bg) !important; }
.table > tbody > tr.row-masuk > td:first-child { box-shadow: inset 3px 0 0 var(--success); }
.table > tbody > tr.row-masuk .nom-masuk { color: var(--success); font-weight: var(--fw-bold); }