/*
  ESTAMA — Elevation Layer (border + kontras + shadow, dikombinasikan)
  Load SETELAH estama-design-system.css:
    <link rel="stylesheet" href="./estama-design-system.css">
    <link rel="stylesheet" href="./estama-borderless.css">

  Prinsip: satu garis tegas per permukaan lebih baik dari border+shadow
  yang saling tumpuk tanpa tujuan. Tiga alat dipakai bersama, porsinya
  digeser sesuai level:
    - --edge      : garis rambut sangat tipis, untuk ketegasan tepi
                     (shadow saja sering terlihat kabur di layar non-retina)
    - kontras bg  : pembeda utama antar permukaan (bg vs surface vs muted)
    - shadow      : penanda kedalaman/hover, bukan pengganti garis
  Garis yang membawa makna (focus ring, error, KPI accent, empty state,
  anomali) tetap dipertahankan sepenuhnya.
*/

/* ------------------------------------------------------------------
   1. Token dasar: kanvas dinaikkan kontrasnya. --border/--border-strong
      DIARAHKAN ke nilai edge (bukan cuma didefinisikan ulang sebagai
      warna solid baru) — supaya SEMUA komponen di estama-design-
      system.css yang masih memakai var(--border) langsung (ui-kpi,
      dash-context-bar, ui-drawer-panel, onb-step, rows-summary,
      dt-pop, dt-page, seg-group, card-row, dan lainnya) otomatis ikut
      selaras, tanpa perlu ditambal satu-satu. Ini penyebab kenapa
      sebagian komponen masih terlihat "lebih keras" bordernya
      sebelumnya — mereka tidak pernah tersentuh override per-selector.
------------------------------------------------------------------ */
:root {
  --bg: #EFF2F0;
  --surface-subtle: #F6F8F7;
  --surface-muted: #EDF1EF;

  /* nilai mentah sebelum dibuat semi-transparan */
  --border-raw: #D3D8DC;

  /* garis rambut — dipakai di tepi kartu, input idle, header tabel,
     DAN sekarang jadi nilai --border / --border-strong publik */
  --edge: color-mix(in srgb, var(--border-raw) 55%, transparent);
  --edge-strong: color-mix(in srgb, var(--border-raw) 90%, transparent);
  --hairline: color-mix(in srgb, var(--border-raw) 38%, transparent);

  --border: var(--edge);
  --border-strong: var(--edge-strong);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .045);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 6px -2px rgba(15, 23, 42, .06);
  --shadow-md: 0 2px 10px -3px rgba(15, 23, 42, .10);
}

html.dark {
  --bg: #1A1E24;
  --surface: #22272F;
  --surface-subtle: #2A3038;
  --surface-muted: #1E232A;
  --border-raw: #6A737A;
  --edge: color-mix(in srgb, var(--border-raw) 38%, transparent);
  --edge-strong: color-mix(in srgb, var(--border-raw) 62%, transparent);
  --hairline: color-mix(in srgb, var(--border-raw) 26%, transparent);
  --border: var(--edge);
  --border-strong: var(--edge-strong);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .12);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .14);
  --shadow-md: 0 2px 10px -3px rgba(0, 0, 0, .18);
}

/* ------------------------------------------------------------------
   2. Kartu — edge tipis + shadow kecil. Bukan salah satu, dua-duanya
      dalam porsi kecil supaya tepi tegas tanpa terasa "berbingkai".
------------------------------------------------------------------ */
.card,
.hero-card {
  border: 1px solid var(--edge) !important;
  box-shadow: var(--shadow-xs) !important;
}
/* Hover: hanya shadow + latar yang berubah, garis tepi tetap diam.
   Konsisten dengan aturan umum — border tidak dipakai sebagai sinyal hover. */
.card-row:hover,
.card:hover {
  box-shadow: var(--shadow-sm) !important;
}
.card-row:hover { background: var(--surface-subtle) !important; }

/* KPI accent kiri — garis bermakna, tetap penuh seperti semula */
.kpi-card {
  border: 1px solid var(--edge) !important;
  box-shadow: var(--shadow-xs) !important;
}

/* Header kartu: pembeda dari body lewat kontras bg tipis, bukan garis
   tebal. Edge rambut disisakan supaya tidak menyatu total dengan body
   saat kontrasnya rendah (mis. dark mode). */
.card-header {
  border-bottom: 1px solid var(--edge) !important;
  background: var(--surface) !important;
}
.card-header-muted { background: var(--surface-subtle) !important; }

/* ------------------------------------------------------------------
   3. Input — bisa diisi vs tidak bisa diisi dibedakan lewat terang/
      gelap latar, bukan cuma border. Ditarget lewat CLASS
      (.input/.select/.textarea), bukan dibatasi ke #app/#modal —
      supaya field di luar situ (mis. #loginCard) ikut selaras juga.
------------------------------------------------------------------ */
/* Bisa diisi: latar terang (putih), edge tipis. */
.input, .select, .textarea, textarea.input {
  background: var(--surface) !important;
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
}
/* Hover: latar sedikit meredup, garis tepi tidak ikut berubah.
   Tidak berlaku untuk field yang tidak bisa diisi (lihat di bawah). */
.input:hover:not(:focus):not(.input-error):not(:disabled):not([readonly]):not(.input-readonly):not(.input-muted),
.select:hover:not(:focus):not(.input-error):not(:disabled):not(.input-readonly):not(.input-muted),
.textarea:hover:not(:focus):not(.input-error):not(:disabled):not([readonly]):not(.input-readonly):not(.input-muted) {
  background: var(--surface-subtle) !important;
}
.input:focus:not(:disabled):not([readonly]),
.select:focus:not(:disabled),
.textarea:focus:not(:disabled):not([readonly]) {
  background: var(--surface) !important;
  border-color: var(--primary) !important;
  box-shadow: var(--focus-ring) !important;
  outline: none !important;
}
.input-error,
.input-error:focus {
  background: var(--danger-soft) !important;
  border-color: var(--danger) !important;
}

/* Tidak bisa diisi (readonly/disabled/.input-muted): latar lebih
   gelap dari field aktif, teks pudar, tanpa reaksi hover/focus —
   supaya langsung kelihatan beda dari field yang bisa diketik. */
.input:disabled, .select:disabled, .textarea:disabled,
.input[readonly], .textarea[readonly],
.input-readonly, .input-muted {
  background: var(--surface-muted) !important;
  border-color: var(--edge) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.input-error:focus {
  background: var(--danger-soft) !important;
  border-color: var(--danger) !important;
}

/* Tombol trigger toolbar tabel (Sort/Filter/Kolom): satu keluarga
   dengan .btn-outline — border tipis 'edge' saat diam, hover hanya
   mengubah latar. Sebelumnya memakai var(--border-strong) sendiri,
   jadi terlihat lebih pekat dari tombol sekunder lain. */
.dt-toolbtn {
  background: var(--surface) !important;
  border-color: var(--edge) !important;
}
.dt-toolbtn:hover {
  background: var(--surface-muted) !important;
  border-color: var(--edge) !important;
}

/* Tombol sekunder (.btn-outline, .btn-soft, .btn-ghost): satu keluarga
   dengan kartu/input — border tipis 'edge' saat diam. Hover hanya
   mengubah latar, garis tepi tidak ikut bergerak. */
.btn-outline {
  background: var(--surface) !important;
  border-color: var(--edge) !important;
}
.btn-outline:hover {
  background: var(--surface-muted) !important;
  color: var(--text) !important;
}
.btn-soft {
  background: var(--surface-muted) !important;
  border-color: var(--edge) !important;
}
.btn-soft:hover {
  background: var(--surface-subtle) !important;
  color: var(--text) !important;
}
.btn-ghost:hover,
.icon-btn:hover {
  background: var(--surface-muted) !important;
}

/* Search bar (topbar & toolbar tabel): selector gabungan
   `.search-bar > .input` di base punya spesifisitas lebih tinggi dari
   `.input` polos, jadi menang saat idle kalau tidak dilawan eksplisit
   — field ini tetap bisa diisi, jadi harus ikut terang juga. */
.search-bar > .input,
.header-search {
  background: var(--surface) !important;
  border-color: var(--edge) !important;
}
.header-search:focus-within {
  border-color: var(--primary) !important;
}
.header-search .kbd-hint {
  border-color: var(--edge) !important;
}

/* ------------------------------------------------------------------
   4. Tabel — header dipisah lewat kontras bg + shadow tipis (bukan
      garis tebal), baris dipisah garis rambut (tetap perlu untuk
      baris angka padat). Kolom aksi sticky pakai border-left tipis
      (bukan shadow) — batas antar konten yang tetap terlihat jelas
      saat tabel di-scroll horizontal.
------------------------------------------------------------------ */
#app table thead th,
#modal table thead th {
  border-bottom: 0 !important;
  background: var(--surface-subtle) !important;
  box-shadow: 0 1px 0 var(--edge) !important;
}
#app table tbody td,
#modal table tbody td {
  border-bottom: 1px solid var(--hairline) !important;
}
.sticky-col {
  border-left: 1px solid var(--edge) !important;
  box-shadow: none !important;
}
.ui-activity-table { border-top: 1px solid var(--edge) !important; }

/* Kalender: gap grid berperan sebagai garis, tepi luar cukup shadow */
.cal-grid {
  border: 0 !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--border) !important;
}
.cal-evt a,
.cal-evt .cal-evt-link {
  border: 0 !important;
  background: var(--surface-muted) !important;
}

/* ------------------------------------------------------------------
   5. Box bertumpuk (info/warn/danger/success/mini/muted) → tint warna
      sebagai pembeda utama + edge tipis senada warnanya, tanpa garis
      abu-abu generik.
------------------------------------------------------------------ */
.mini-box  { background: var(--surface-muted) !important; border-color: var(--edge) !important; }
.muted-box { background: var(--surface-muted) !important; border: 1px solid var(--edge) !important; }
.info-box    { background: var(--tone-info-bg) !important;    border: 1px solid color-mix(in srgb, var(--info-border) 55%, transparent) !important; }
.warn-box    { background: var(--tone-warning-bg) !important; border: 1px solid color-mix(in srgb, var(--warning-border) 55%, transparent) !important; }
.danger-box  { background: var(--tone-danger-bg) !important;  border: 1px solid color-mix(in srgb, var(--danger-border) 55%, transparent) !important; }
.success-box { background: var(--tone-success-bg) !important; border: 1px solid color-mix(in srgb, var(--success-border) 55%, transparent) !important; }
.brand-box   { background: var(--tone-primary-bg) !important; border: 1px solid var(--primary-soft-strong) !important; }
.legend-bar  { background: var(--surface-muted) !important; border: 1px solid var(--edge) !important; }

.step-chip {
  background: var(--surface-muted) !important;
  border-color: var(--edge) !important;
}
.step-chip.step-active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

.kbd-hint { background: var(--surface-muted) !important; border-color: var(--edge) !important; }

/* ------------------------------------------------------------------
   6. Shell: sidebar putih, senada dengan konten utama. Karena bg-nya
      sama, pembatasnya HARUS garis tipis (bukan shadow, bukan kontras
      bg yang sudah tidak ada) — border tipis di sini justru yang benar.
      Topbar dipisah lewat shadow tipis (bukan garis) karena letaknya
      sticky di atas konten yang scroll.
------------------------------------------------------------------ */
#sidebar, aside.sidebar {
  background: var(--surface) !important;
  border-right: 1px solid var(--edge) !important;
  box-shadow: none !important;
}
.sidebar-header {
  border-bottom: 1px solid var(--edge) !important;
}
#mainWrap > header {
  background: var(--surface) !important;
  border-bottom: 0 !important;
  box-shadow: var(--shadow-xs) !important;
}
.um-divider { background: var(--edge) !important; }

/* ------------------------------------------------------------------
   7. Overlay (modal/dropdown/menu) — shadow besar untuk kedalaman,
      edge tipis untuk ketegasan tepi di atas bg apa pun.
------------------------------------------------------------------ */
#userMenu, #cmdPanel, #modal .modal-panel, .dropdown-list {
  border: 1px solid var(--edge) !important;
  box-shadow: var(--shadow-overlay) !important;
}

/* ------------------------------------------------------------------
   8. Scrollbar — overlay tanpa kolom.
      Native lebar 0 / scrollbar-width none. Tidak ada gutter.
      Batang terlihat = satu [data-sb] menimpa tepi.
------------------------------------------------------------------ */
* {
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent !important;
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
*::-webkit-scrollbar-track {
  background: transparent !important;
  border: none !important;
}
*::-webkit-scrollbar-thumb {
  background: transparent !important;
}

/* ==================================================================
   9. PENGURANGAN BORDER — "satu garis per tingkat permukaan"

   Aturannya bukan "border dihapus", tapi "border hanya dipakai satu
   kali per tingkat kedalaman". Permukaan terluar (kartu, modal,
   drawer, sidebar, tabel, input) TETAP bergaris seperti sebelumnya.
   Yang dikurangi adalah garis KEDUA — kotak yang hidup di dalam
   permukaan yang sudah bergaris, sehingga sebelumnya tampak sebagai
   bingkai di dalam bingkai.

   Dua cara mengurangi, dipilih sesuai fungsinya:
     a. Kotak yang sudah punya latar berbeda  → garis dilepas,
        pembedanya cukup kontras latar (yang memang sudah ada).
     b. Kotak yang perlu penanda/pengelompokan → garis 4 sisi
        disusutkan jadi SATU sisi (aksen kiri / garis atas), jadi
        bordernya tetap ada tapi tidak lagi mengurung.

   Catatan teknis: untuk elemen yang tingginya sensitif (tombol,
   kontrol) dipakai `border-color: transparent`, bukan `border: 0`,
   supaya tinggi dan perataannya tidak bergeser.
================================================================== */

/* --- 9a. Kotak notifikasi/tone: bingkai penuh → aksen satu sisi ---
   Tint latar sudah cukup membedakan kotak ini dari sekitarnya, jadi
   garis kelilingnya mubazir. Aksen kiri dipertahankan (dan justru
   dipertegas jadi 3px) supaya warna maknanya tetap terbaca cepat
   bahkan saat tint latarnya tipis.                                  */
.info-box,
.warn-box,
.danger-box,
.success-box,
.brand-box {
  border: 0 !important;
  border-left: 3px solid transparent !important;
}
.info-box    { border-left-color: var(--info) !important; }
.warn-box    { border-left-color: var(--warning) !important; }
.danger-box  { border-left-color: var(--danger) !important; }
.success-box { border-left-color: var(--success) !important; }
.brand-box   { border-left-color: var(--primary) !important; }

/* --- 9b. Kotak netral di dalam kartu: cukup kontras latar ---
   Tidak ada makna warna yang perlu dibawa, jadi garisnya dilepas
   penuh dan pembedanya murni latar yang lebih gelap dari kartu.     */
.mini-box,
.muted-box,
.legend-bar,
.dash-context-bar,
.dash-control-pane {
  border: 0 !important;
}

/* --- 9c. Baris item dinamis (.card-row) ---
   Ini komponen yang paling sering muncul (dipakai di 100+ tempat di
   form/drawer), jadi paling terasa efeknya. Bingkai penuh diganti
   aksen kiri: baris tetap terbaca sebagai satu kesatuan saat
   ditumpuk, tapi tidak lagi jadi kotak-dalam-kotak bersama input
   di dalamnya yang juga bergaris.                                   */
.card-row {
  border: 0 !important;
  background: var(--surface-subtle) !important;
}
.card-row:hover {
  background: var(--surface-muted) !important;
  box-shadow: none !important;
}

/* --- 9d. Bar ringkasan sticky: garis atas saja ---
   Yang perlu dipisahkan hanya sisi yang menempel ke konten yang
   ter-scroll di atasnya; tiga sisi lain tidak memisahkan apa pun.   */
.rows-summary {
  border: 0 !important;
}
.rows-summary.is-valid   { border: 0 !important; }
.rows-summary.is-invalid { border: 0 !important; }

/* --- 9e. Elemen kecil/inline: tidak perlu bingkai sendiri ---
   Ukurannya kecil dan sudah berlatar beda; garis di sekelilingnya
   hanya menambah kepadatan visual tanpa menambah informasi.         */
.kbd-hint,
.header-search .kbd-hint,
.um-avatar,
.ui-issue-quick,
.step-chip:not(.step-active),
.onb-step {
  border-color: transparent !important;
  background: var(--surface-muted) !important;
}
.step-chip.step-active {
  border-color: var(--primary) !important;
}

/* --- 9f. Tombol sekunder berlatar: latar sudah jadi batasnya ---
   .btn-soft punya latar sendiri, jadi border-nya menggandakan fungsi
   yang sama. .btn-outline TIDAK ikut — di sana garis justru satu-
   satunya bentuk tombolnya.                                         */
.btn-soft {
  border-color: transparent !important;
}
.btn-soft:hover {
  border-color: transparent !important;
  background: var(--surface-subtle) !important;
}

/* --- 9g. Kartu bersarang: hanya kartu terluar yang bergaris ---
   Kartu di dalam kartu turun jadi panel berlatar. Kartu KPI
   dikecualikan karena aksen kirinya adalah penanda status.          */
.card .card:not(.kpi-card):not([class*="kpi"]),
.card .hero-card {
  border: 0 !important;
  box-shadow: none !important;
  background: var(--surface-subtle) !important;
}

/* --- 9h. Pembatas dalam grup segmen: dihaluskan, tidak dihapus ---
   Garis luar grup tetap tegas (itu bentuk kontrolnya), tapi sekat
   antar tombol di dalamnya cukup garis rambut.                      */
.seg-group { border-color: var(--edge) !important; }
.seg-group > * + * { border-left-color: var(--hairline) !important; }

/* --- 9i. Pembatas toolbar tabel: garis rambut ---
   Sekat internal di dalam kartu tabel yang sudah bergaris luar.     */
.dt-chipbar { border-bottom-color: var(--hairline) !important; }

/* ------------------------------------------------------------------
   TIDAK DIUBAH (garis yang membawa makna):
   .empty-state.empty-active  — dashed, menandai area kosong
   :focus-visible / --focus-ring
   .card.penimbangan-anomali  — penanda anomali
   .btn spinner border

   Dan permukaan terluar yang garisnya memang jadi batas nyata:
   .card / .kpi-card, .card-header, .input/.select/.textarea,
   .btn-outline, .dt-toolbtn, #sidebar, overlay (modal/drawer/
   dropdown/menu), baris & header tabel, .sticky-col.
------------------------------------------------------------------ */