/* ================================================================
   05-akun-piutang-hutang.css
   Toggle password, dropdown cari akun, piutang & hutang, aging, edit inline, ringkasan wizard, setup dropdown nav, modal import error, input kode COA
   ================================================================ */

  /* PASSWORD TOGGLE */
  .pass-wrap { position: relative; }
  .pass-wrap .form-control { padding-right: 42px; }
  .pass-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--muted);
    font-size: 16px; padding: 2px; line-height: 1; transition: color .2s;
    display: flex; align-items: center; justify-content: center;
  }
  .pass-toggle:hover { color: var(--navy); }

  /* ACCOUNT SEARCH DROPDOWN (journal entry) */
  .akun-search-wrap { position: relative; }
  /* PERBAIKAN TUMPANG TINDIH: elemen lain yang punya "will-change"/transform
     sendiri (tombol .btn, wrap search akun lain di baris jurnal, dst) membentuk
     stacking context baru dengan z-index:auto. Karena z-index:9999 milik
     .akun-dropdown hanya berlaku DI DALAM konteks stacking .akun-search-wrap
     ini, dropdown yang terbuka tetap bisa "kalah" ditimpa elemen lain yang
     posisinya lebih belakangan di DOM (mis. tombol "+ Tambah Baris" atau
     kolom akun baris jurnal berikutnya). Menaikkan z-index WRAP itu sendiri
     saat dropdown-nya terbuka memastikan seluruh wrap (bukan cuma dropdown-nya)
     tampil di lapisan paling atas dibanding wrap/tombol lain di sekitarnya. */
  .akun-search-wrap:has(.akun-dropdown.open) { z-index: 9999; }
  .akun-search-input {
    width: 100%; padding: 9px 13px; border: 1.5px solid var(--border); border-radius: 8px;
    font-family: inherit; font-size: 13px; color: var(--text); background: var(--surface);
    transition: border-color .2s; outline: none;
  }
  .akun-search-input:focus { border-color: var(--navy); }
  .akun-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--surface); border: 1.5px solid var(--navy);
    border-radius: 8px; z-index: 9999; max-height: 220px; overflow-y: auto;
    box-shadow: 0 6px 20px rgba(0,0,0,.15); display: none;
  }
  .akun-dropdown.open { display: block; }
  /* Mode "fixed-pos": dipakai saat dropdown perlu keluar dari area yang
     terpotong overflow-y:auto milik .modal (lihat 03-komponen-umum.css),
     supaya tampil PENUH di depan form/tabel di belakangnya. Posisi top/left/
     width/max-height diisi lewat JS (positionKf2KodeDropdown), CSS di sini
     hanya melepas positioning relatif bawaan (top/left/right/max-height).*/
  .akun-dropdown.fixed-pos { position: fixed; right: auto; top: auto; left: auto; max-height: none; }
  .akun-opt {
    padding: 9px 13px; cursor: pointer; font-size: 13px;
    border-bottom: 1px solid var(--border); transition: background .15s;
  }
  .akun-opt:last-child { border-bottom: none; }
  .akun-opt:hover, .akun-opt.selected { background: var(--hover-row-bg); color: var(--navy); font-weight: 600; }
  .akun-opt-code { font-size: 11px; color: var(--muted); margin-right: 6px; font-family: 'Courier New', monospace; }
  .akun-opt-empty { padding: 12px 13px; color: var(--muted); font-size: 13px; font-style: italic; }
  .akun-opt-kosong { color: var(--muted); font-style: italic; text-align: center; }
  .akun-opt-group {
    padding: 7px 13px 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--navy); background: var(--hover-row-bg);
    position: sticky; top: 0; border-bottom: 1px solid var(--border);
  }

  /* PIUTANG & HUTANG */
  .ph-summary-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
  }
  @media(max-width:900px) { .ph-summary-grid { grid-template-columns: 1fr 1fr; } }
  @media(max-width:600px) { .ph-summary-grid { grid-template-columns: 1fr; } }
  .ph-summary-card {
    border-radius: 14px; padding: 20px 22px; display: flex; gap: 16px; align-items: center;
    border: 1px solid var(--border); background: var(--surface); position: relative; overflow: hidden;
  }
  .ph-summary-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; }
  .ph-card-piutang::before  { background: #3B82F6; }
  .ph-card-hutang::before   { background: #EF4444; }
  .ph-card-net::before      { background: var(--gold); }
  .ph-card-icon { font-size: 32px; opacity: .85; flex-shrink: 0; }
  .ph-card-content { flex: 1; min-width: 0; }
  .ph-card-label { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
  .ph-card-value { font-size: 20px; font-weight: 700; font-family: 'Poppins', sans-serif; color: var(--text); }
  .ph-card-piutang .ph-card-value { color: #2563EB; }
  .ph-card-hutang .ph-card-value  { color: #DC2626; }
  .ph-card-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
  html[data-theme="dark"] .ph-summary-card { background: var(--surface); border-color: var(--border); }
  html[data-theme="dark"] .ph-card-piutang .ph-card-value { color: #60A5FA; }
  html[data-theme="dark"] .ph-card-hutang .ph-card-value  { color: #F87171; }

  /* AGING / UMUR PIUTANG-HUTANG */
  .aging-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
  @media(max-width:1100px) { .aging-grid { grid-template-columns: repeat(3,1fr); } }
  @media(max-width:640px)  { .aging-grid { grid-template-columns: repeat(2,1fr); } }
  .aging-card {
    border-radius: 12px; padding: 14px 16px; border: 1px solid var(--border);
    background: var(--surface); position: relative; overflow: hidden;
  }
  .aging-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:4px; }
  .aging-card-current::before { background: #10B981; }
  .aging-card-b1::before      { background: #F59E0B; }
  .aging-card-b2::before      { background: #F97316; }
  .aging-card-b3::before      { background: #EF4444; }
  .aging-card-b4::before      { background: #991B1B; }
  .aging-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
  .aging-value { font-size: 17px; font-weight: 700; font-family: 'Poppins', sans-serif; color: var(--text); }
  .aging-count { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
  .aging-card-current .aging-value { color: #059669; }
  .aging-card-b1 .aging-value      { color: #D97706; }
  .aging-card-b2 .aging-value      { color: #EA580C; }
  .aging-card-b3 .aging-value      { color: #DC2626; }
  .aging-card-b4 .aging-value      { color: #991B1B; }
  html[data-theme="dark"] .aging-card { background: var(--surface); border-color: var(--border); }
  html[data-theme="dark"] .aging-card-current .aging-value { color: #6EE7B7; }
  html[data-theme="dark"] .aging-card-b1 .aging-value      { color: #FCD34D; }
  html[data-theme="dark"] .aging-card-b2 .aging-value      { color: #FDBA74; }
  html[data-theme="dark"] .aging-card-b3 .aging-value      { color: #FCA5A5; }
  html[data-theme="dark"] .aging-card-b4 .aging-value      { color: #F87171; }
  .umur-badge { display:inline-block; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:600; white-space:nowrap; }

  /* Inline edit row for piutang/hutang */
  .ph-row-input {
    width: 100%; padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 6px;
    font-family: inherit; font-size: 13px; color: var(--text); background: var(--surface);
    transition: border-color .2s; outline: none;
  }
  .ph-row-input:focus { border-color: var(--navy); }
  html[data-theme="dark"] .ph-row-input { background: var(--surface2); border-color: var(--border); color: var(--text); }
  .ph-row-input.amount { text-align: right; font-family: 'Courier New', monospace; }

  /* Wizard step summary boxes */
  .ph-summary { margin-top: 16px; }
  .ph-summary-box {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-radius: 10px; border: 1px solid var(--border);
    font-size: 13px; font-weight: 600;
  }
  .ph-piutang { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
  .ph-hutang  { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
  html[data-theme="dark"] .ph-piutang { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #93C5FD; }
  html[data-theme="dark"] .ph-hutang  { background: rgba(239,68,68,.12);   border-color: rgba(239,68,68,.3);   color: #FCA5A5; }
  .ph-sum-label { font-size: 11px; opacity: .7; font-weight: 500; margin-bottom: 2px; }
  .ph-sum-val { font-size: 16px; font-weight: 700; font-family: 'Poppins', sans-serif; }
  .ph-sum-count { font-size: 11px; opacity: .7; }
  .mb-16 { margin-bottom: 16px; }

  /* SETUP DROPDOWN NAV */
  .nav-dropdown { position: relative; }
  .nav-dropdown-toggle {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; margin: 2px 8px; border-radius: 8px;
    cursor: pointer; color: rgba(255,255,255,.65); font-size: 13.5px; font-weight: 500;
    transition: all .2s; position: relative; user-select: none;
  }
  .nav-dropdown-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
  .nav-dropdown-toggle.active {
    background: linear-gradient(135deg, var(--gold) 0%, #B8891F 100%);
    color: var(--navy); font-weight: 700; box-shadow: 0 4px 12px rgba(212,168,67,.35);
  }
  .nav-dropdown-toggle .nav-icon { font-size: 16px; width: 20px; text-align: center; }
  .nav-dropdown-arrow {
    margin-left: auto; font-size: 10px; opacity: .6;
    transition: transform .25s; display: inline-block;
  }
  .nav-dropdown-arrow.open { transform: rotate(180deg); }
  .nav-submenu {
    display: none; overflow: hidden;
    background: rgba(0,0,0,.18);
    border-left: 2px solid rgba(255,255,255,.12);
    margin: 0 8px 4px 28px;
    border-radius: 0 0 8px 8px;
  }
  .nav-submenu.open { display: block; }
  .nav-subitem {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; cursor: pointer;
    color: rgba(255,255,255,.55); font-size: 12.5px; font-weight: 500;
    border-radius: 6px; margin: 2px 4px;
    transition: all .2s;
  }
  .nav-subitem:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
  .nav-subitem.active { background: rgba(200,149,46,.22); color: var(--gold-light); font-weight: 600; }
  .nav-subitem .sub-icon { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }
  html[data-theme="dark"] .nav-submenu { background: rgba(0,0,0,.3); border-left-color: rgba(255,255,255,.08); }
  html[data-theme="dark"] .nav-subitem.active { background: rgba(251,191,36,.15); color: var(--gold-light); }

  /* IMPORT ERROR MODAL */
  .import-error-detail {
    background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px; font-size: 12.5px; color: var(--text); max-height: 200px;
    overflow-y: auto; margin-top: 12px; font-family: 'Courier New', monospace;
    white-space: pre-wrap; line-height: 1.6;
  }
  .import-error-icon { font-size: 40px; text-align: center; margin-bottom: 12px; }

  /* COA KODE NUMBER INPUT */
  input.coa-kode-input::-webkit-inner-spin-button,
  input.coa-kode-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  input.coa-kode-input { -moz-appearance: textfield; }