/* === FILE: coa-detail.css — MULAI === */
/* ==========================================================================
   COMPONENTS / coa-detail / coa-detail.css
   --------------------------------------------------------------------------
   Styling khusus halaman App/Views/dashboard/finance/coa/detail.php (hero
   satu akun + accordion Mutation History).

   CATATAN ARSITEKTUR: sub-akun/tree TIDAK lagi dirender di halaman ini —
   itu sekarang tugas index.php (lihat coa-tree.css). File ini HANYA berisi
   hero icon; .accordion-summary-detail dasar dan .data-item dipakai apa
   adanya dari customer-detail.css tanpa perlu extension tambahan, karena
   halaman ini cuma punya SATU accordion (Mutation History) yang dibuka
   default — tidak butuh varian compact/nested seperti tree.

   DEPENDS ON: customer-detail.css (.customer-hero, .data-item,
   .accordion-summary-detail/.accordion-title-block/.accordion-count),
   molecules/breadcrumb/breadcrumb.css, atoms/badge/badge.css, tokens/*
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO ICON — pengganti .customer-hero-logo-wrap untuk konteks Account
   (akun tidak punya logo; icon besar bertone tipe akun menggantikannya)
   -------------------------------------------------------------------------- */
.account-hero-icon-wrap {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            112px;
	height:           112px;
	border-radius:    var(--radius-full);
	background-color: var(--color-brand-subtle);
	color:            var(--color-brand-text);
	border:           1px solid var(--color-border-default);
	box-shadow:       var(--shadow-xs);
}
.account-hero-icon-wrap svg {
	width:  40px;
	height: 40px;
}

/* Tone icon ikut tipe akun — mapping sama dengan badge tone di detail.php
   dan filter/dot di index.php tree (asset=brand, liability=warning,
   equity=info, revenue=success, expense=error) */
.account-hero-icon-wrap[data-account-type="asset"] {
	background-color: var(--color-brand-subtle);
	color:             var(--color-brand-text);
}
.account-hero-icon-wrap[data-account-type="liability"] {
	background-color: var(--color-warning-subtle);
	color:             var(--color-warning-text);
}
.account-hero-icon-wrap[data-account-type="equity"] {
	background-color: var(--color-info-subtle);
	color:             var(--color-info-text);
}
.account-hero-icon-wrap[data-account-type="revenue"] {
	background-color: var(--color-success-subtle);
	color:             var(--color-success-text);
}
.account-hero-icon-wrap[data-account-type="expense"] {
	background-color: var(--color-error-subtle);
	color:             var(--color-error-text);
}


/* --------------------------------------------------------------------------
   Breadcrumb spacing di atas hero — breadcrumb.css sendiri tidak beri
   margin bawah (dipakai di banyak konteks berbeda), jadi jarak ke hero
   diatur di sini, scoped ke halaman ini saja.
   -------------------------------------------------------------------------- */
.customer-hero {
	margin-top: var(--size-400);
}


/* --------------------------------------------------------------------------
   Saldo akun di hero (#bal-{id}) — target yang sama dipakai polling
   updateBalanceDom() di coa.js, jadi warna/berat font harus tetap terbaca
   jelas meskipun kontennya berganti tiap 30 detik tanpa reload halaman.
   -------------------------------------------------------------------------- */
.data-item-value[id^="bal-"] {
	font-weight: var(--font-weight-semibold);
	font-variant-numeric: tabular-nums;
}
/* === FILE: coa-detail.css — SELESAI === */