/* === FILE: coa-tree.css — MULAI === */
/* ==========================================================================
   COMPONENTS / coa-tree / coa-tree.css
   --------------------------------------------------------------------------
   Styling untuk App/Views/dashboard/finance/coa/index.php — halaman tree
   navigasi/setup struktur akun (bukan halaman detail 1 akun; itu di
   coa-detail.css, yang meng-import bagian hero dari sini bila perlu).

   DEPENDS ON: molecules/accordion/accordion.css, molecules/dropdown/dropdown.css,
   molecules/select-modern/select-modern.css, atoms/badge/badge.css,
   atoms/button/button.css, tokens/*

   Semua nilai warna/spacing/radius mengacu ke token — tidak ada hardcoded
   value.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE SHELL
   -------------------------------------------------------------------------- */
.coa-page {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-400);
}

.coa-toolbar {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             var(--size-400);
	flex-wrap:       wrap;
}

.coa-toolbar-left {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-100);
}

.coa-toolbar-right {
	display:     flex;
	align-items: center;
	gap:         var(--size-300);
}


/* --------------------------------------------------------------------------
   BALANCE BAR — periode aktif + polling indicator + refresh
   -------------------------------------------------------------------------- */
.coa-balance-bar {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	gap:              var(--size-400);
	flex-wrap:        wrap;
	padding:          var(--size-300) var(--size-400);
	background-color: var(--color-bg-surface);
	border:           1px solid var(--color-border-default);
	border-radius:    var(--radius-lg);
}

.coa-balance-bar-period {
	display:     flex;
	align-items: center;
	gap:         var(--size-300);
}

.coa-balance-bar-actions {
	display:     flex;
	align-items: center;
	gap:         var(--size-300);
}

/* Titik hijau berdenyut — indikasi "sedang live-sync", bukan sekadar teks,
   supaya orang finance langsung yakin angka yang ditampilkan bukan basi. */
.coa-polling-indicator {
	display:     inline-flex;
	align-items: center;
	gap:         var(--size-150);
	font-size:   var(--text-caption-size);
	color:       var(--color-success-text);
}
.coa-polling-dot {
	width:            8px;
	height:           8px;
	border-radius:    var(--radius-full);
	background-color: var(--color-success);
	animation:        ds-pulse var(--duration-sluggish) var(--ease-in-out) infinite;
}

/* Icon refresh berputar selagi request berjalan — buttonRefreshBalance.disabled
   di-toggle oleh coa.js selama fetch */
#buttonRefreshBalance:disabled .i-refresh svg {
	animation: ds-spin var(--duration-sluggish) linear infinite;
}


/* --------------------------------------------------------------------------
   EMPTY STATE — belum ada akun sama sekali (bukan loading; tree di-render
   server-side langsung dari PHP, jadi tidak ada state "sedang memuat" di
   sisi client — beda dari asumsi versi draft sebelumnya yang salah kira
   tree diisi lewat AJAX oleh chart-of-accounts.js)
   -------------------------------------------------------------------------- */
.coa-tree-empty {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	padding:          var(--size-600) var(--size-400);
	background-color: var(--color-bg-surface);
	border:           1px dashed var(--color-border-default);
	border-radius:    var(--radius-lg);
	text-align:       center;
}


/* --------------------------------------------------------------------------
   TREE
   -------------------------------------------------------------------------- */
.account-tree {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-300);
}

.account-tree-code {
	font-family: var(--font-family-mono);
	font-size:   var(--text-caption-size);
	color:       var(--color-text-secondary);
	flex-shrink: 0;
}

.account-tree-name {
	font-size:   var(--text-body-sm-size);
	font-weight: var(--font-weight-medium);
	color:       var(--color-text-primary);
}

.account-tree-balance {
	font-size:   var(--text-body-sm-size);
	color:       var(--color-text-secondary);
	white-space: nowrap;
}

/* Varian ringan .accordion-summary — dipakai di TIAP level tree (bukan
   cuma level 2+) karena di halaman index tidak ada .accordion-summary-detail
   besar sebagai pembanding "level utama" seperti di halaman detail. */
.accordion-summary-compact {
	align-items: center;
	padding:     var(--size-300) var(--size-400);
	gap:         var(--size-300);
}
.accordion-summary-compact .accordion-header {
	gap:   var(--size-300);
	flex:  1;
	min-width: 0;
}
.accordion-summary-compact .accordion-summary-info {
	gap: var(--size-300);
}

/* Level TERATAS (langsung anak dari .account-tree) tampil sebagai "card" —
   ini yang punya border+radius+bg penuh, jadi terasa seperti satu blok. */
.account-tree > .account-tree-node {
	border:           1px solid var(--color-border-default);
	border-radius:    var(--radius-lg);
	overflow:         hidden; /* biar summary & children ikut radius wrapper */
	background-color: var(--color-bg-surface);
}
.account-tree-node .accordion-summary-compact:hover {
	background-color: var(--color-bg-sunken);
}

/* Level ke-2 dst (nested di dalam .account-tree-children) TIDAK diberi
   border/radius sendiri lagi — supaya tidak jadi "kotak di dalam kotak".
   Pemisah antar-item cukup border-bottom tipis, hierarki dibaca dari
   indentasi (padding-left) .account-tree-children, bukan dari border baru. */
.account-tree-children .account-tree-node {
	border-radius: 0;
	border-bottom: 1px solid var(--color-border-default);
}
.account-tree-children .account-tree-node:last-child {
	border-bottom: none;
}

/* Container anak — indentasi kiri konsisten di tiap level lewat nesting
   alami .account-tree-children di dalam .account-tree-node */
.account-tree-children {
	display:        flex;
	flex-direction: column;
	padding-left:   var(--size-600);
	border-top:     1px solid var(--color-border-default);
}
/* Level teratas: children punya padding penuh karena wrapper sudah punya
   border sendiri (lihat .account-tree > .account-tree-node di atas) */
.account-tree > .account-tree-node > .account-tree-children {
	padding:    var(--size-300) var(--size-300) var(--size-300) var(--size-600);
	border-top: none;
	gap:        var(--size-200);
}


/* --------------------------------------------------------------------------
   ACCOUNT ROW — leaf-node (akun tanpa anak), TIDAK memakai <details>
   --------------------------------------------------------------------------
   Prinsip: accordion hanya untuk node yang benar-benar punya konten
   tersembunyi. Leaf akun dirender sebagai baris biasa supaya tidak ada
   panah dropdown yang tidak berfungsi (antipattern disclosure kosong).
   -------------------------------------------------------------------------- */
.account-row {
	display:          flex;
	align-items:      center;
	gap:              var(--size-300);
	padding:          var(--size-300) var(--size-400);
	background-color: var(--color-bg-surface);
	border:           1px solid var(--color-border-default);
	border-radius:    var(--radius-md);
	transition:       background-color var(--duration-fast) var(--ease-default);
}
.account-row:hover {
	background-color: var(--color-bg-sunken);
}
.account-row:focus-visible {
	outline:        2px solid var(--color-border-focus);
	outline-offset: 2px;
}

.account-row-code {
	font-family: var(--font-family-mono);
	font-size:   var(--text-caption-size);
	color:       var(--color-text-secondary);
	flex-shrink: 0;
	min-width:   56px;
}

.account-row-name {
	font-size:   var(--text-body-sm-size);
	color:       var(--color-text-primary);
	flex:        1;
	min-width:   0;
}

.account-row-badge {
	flex-shrink: 0;
}

.account-row-balance {
	font-size:   var(--text-body-sm-size);
	color:       var(--color-text-secondary);
	white-space: nowrap;
	flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   DROPDOWN ITEM AS <button> — chart-of-accounts.js membaca .button-add-child/
   .button-edit/.button-delete lewat delegasi klik di #coaTree, dan elemen itu
   WAJIB tag <button> (lihat penjelasan panjang di index.php) supaya tidak
   ketangkap kondisi early-return saat diklik di dalam <summary>. Komponen
   dropdown.css sendiri didesain untuk <li>, jadi reset native-button di
   sini — mengikuti preseden a.dropdown-item yang sudah ada di dropdown.css.
   -------------------------------------------------------------------------- */
button.dropdown-item {
	width:      100%;
	background: none;
	border:     none;
	font:       inherit;
	text-align: left;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
	.coa-balance-bar {
		flex-direction: column;
		align-items:    stretch;
	}
	.coa-balance-bar-period,
	.coa-balance-bar-actions {
		justify-content: space-between;
	}
	.account-row {
		flex-wrap: wrap;
	}
	.account-row-balance {
		width:      100%;
		text-align: right;
	}
}
/* === FILE: coa-tree.css — SELESAI === */