/* === FILE: journal.css — MULAI === */
/* ==========================================================================
   COMPONENTS / journal / journal.css
   --------------------------------------------------------------------------
   Styling untuk App/Views/dashboard/finance/journal/index.php — daftar
   jurnal dengan filter bar + data-table + pagination. Mengikuti pola visual
   coa-tree.css & period.css: badge-<tone> untuk status, data-table untuk
   baris data, spacing dari token yang sama.

   DEPENDS ON: organisms/data-table/data-table.css, molecules/select-modern/select-modern.css,
   molecules/search-bar/search-bar.css, atoms/badge/badge.css, atoms/button/button.css,
   atoms/input/input.css, molecules/pagination/pagination.css, tokens/*

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





/* --------------------------------------------------------------------------
   TABLE CELL DETAILS
   -------------------------------------------------------------------------- */
.journal-number-link {
	font-family: var(--font-family-mono);
	font-size:   var(--text-body-sm-size);
	color:       var(--color-brand-text);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
}
.journal-number-link:hover {
	text-decoration: underline;
}

.journal-amount {
	font-family: var(--font-family-mono);
	font-size:   var(--text-body-sm-size);
	color:       var(--color-text-primary);
	white-space: nowrap;
}

.flex-actions {
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	gap:             var(--size-100);
}


/* --------------------------------------------------------------------------
   PAGINATION FOOTER — baris ringkasan + nav, di bawah data-table-scroll
   -------------------------------------------------------------------------- */
.pagination-current {
	padding-inline: var(--size-200);
	color:          var(--color-text-secondary);
	white-space:    nowrap;
}

/* .pagination-btn dari pagination.css didesain untuk <button>; dipakai di
   sini pada <a> (link GET server-render, bukan AJAX) — reset properti
   anchor supaya visualnya identik dengan varian button. */
a.pagination-btn {
	text-decoration: none;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
/* === FILE: journal.css — SELESAI === */
/* === FILE: journal-form.css — MULAI === */
/* ==========================================================================
   COMPONENTS / journal-form / journal-form.css
   --------------------------------------------------------------------------
   Styling untuk App/Views/dashboard/finance/journal/_form.php — halaman
   FULL-PAGE create/edit jurnal (bukan dialog). Pola mengikuti coa-form.css
   (grid field) + journal.css (page shell), semua nilai dari token.

   Struktur (lihat _form.php):
     .journal-form-page
       .journal-form-header (.journal-form-heading + tombol Back)
       form.journal-form
         .card  > .journal-form-grid  (field header jurnal)
         .card  > .data-table-scroll > table.journal-lines-table
         .journal-form-actions (sticky): .journal-balance-summary + tombol

   DEPENDS ON: molecules/card/card.css, organisms/data-table/data-table.css,
   molecules/form-field/form-field.css, atoms/badge/badge.css,
   atoms/button/button.css, tokens/*

   CATATAN:
   - Ikon di tile "Posting to" diberi ukuran eksplisit di sini karena <svg>
     telanjang (tanpa class .icon-*) tidak punya ukuran sama sekali.
   - Toggle Exchange Rate memakai atribut `hidden` (bukan style inline).
     Rule `.form-field[hidden]` di bawah WAJIB ada: tanpa itu display:flex
     milik .journal-form-grid .form-field mengalahkan `hidden` bawaan browser.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE SHELL
   -------------------------------------------------------------------------- */
/* Body section Journal Information — padding sama dengan irama toolbar (size-500) */
.journal-form-body {
	padding: var(--size-500);
}
@media (max-width: 767px) {
	.journal-lines-table { min-width: 0; }

	.journal-lines-table .col-no,
	.journal-lines-table .col-account,
	.journal-lines-table .col-dept,
	.journal-lines-table .col-desc,
	.journal-lines-table .col-debit,
	.journal-lines-table .col-credit,
	.journal-lines-table .col-remove {
		width:     auto;
		min-width: 0;
	}

	/* Kontrol mengisi sisa lebar di samping label (data-label) */
	.journal-lines-table .data-table-td:not(.data-table-td-primary) > .select-modern,
	.journal-lines-table .data-table-td:not(.data-table-td-primary) > .input {
		flex:      1;
		min-width: 0;
		width:     auto;
	}
}
.journal-form-page {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-400);
}

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

.journal-form-heading {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-100);
}

.journal-form-title {
	margin:      0;
	font-size:   var(--text-heading-md-size);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-text-primary);
}

.journal-form-subtitle {
	margin:    0;
	font-size: var(--text-body-sm-size);
	color:     var(--color-text-secondary);
}

.journal-form {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-400);
}


/* --------------------------------------------------------------------------
   JOURNAL INFORMATION — grid 4 kolom (desktop) → 2 (tablet) → 1 (mobile)
   Baris 1: Type · Date · Reference · Posting to
   Description selebar penuh; Department · Currency · Rate di baris berikut.
   -------------------------------------------------------------------------- */
.journal-form-grid {
	display:               grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap:                   var(--size-500) var(--size-400);
	align-items:           start;
}

.journal-form-field-full {
	grid-column: 1 / -1;
}

/* Jarak label → input → pesan error. Pesan .label-error yang kosong
   otomatis tersembunyi oleh label.css (:empty), jadi tidak memakan ruang. */
.journal-form-grid .form-field {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-100);
	min-width:      0;
}

/* Penting: lihat catatan `hidden` di header file. */
.journal-form-grid .form-field[hidden],
.journal-form-grid .form-field.hidden {
	display: none;
}

/* Tile "Posting to" — read-only, tinggi disamakan dengan input (40px) */
.journal-posting {
	display:     flex;
	align-items: center;
	gap:         var(--size-200);
	min-height:  var(--size-1000);
	margin:      0;
	font-size:   var(--text-body-sm-size);
	color:       var(--color-text-primary);
}

.journal-posting svg {
	flex-shrink: 0;
	width:       var(--size-icon-md);
	height:      var(--size-icon-md);
	color:       var(--color-text-secondary);
}

.journal-posting-muted {
	color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   JOURNAL LINES — tabel baris debit/credit
   min-width menjaga kolom tetap terbaca; di layar sempit .data-table-scroll
   yang menggulir horizontal.
   -------------------------------------------------------------------------- */
.journal-lines-table {
	min-width: 56rem;
}

.journal-lines-table .col-no      { width: 3rem;  text-align: center; }
.journal-lines-table .col-account { width: 32%;   min-width: 14rem; }
.journal-lines-table .col-dept    { width: 12%;   min-width: 8rem; }
.journal-lines-table .col-desc    { min-width: 12rem; }
.journal-lines-table .col-debit,
.journal-lines-table .col-credit  { width: 11rem; min-width: 9rem; }
.journal-lines-table .col-remove  { width: 3rem;  text-align: center; }

/* Header kolom angka rata kanan, sejajar dengan isi input di bawahnya */
.journal-lines-table .data-table-th.col-debit,
.journal-lines-table .data-table-th.col-credit {
	text-align: right;
}

.journal-line-number {
	font-family: var(--font-family-mono);
	font-size:   var(--text-caption-size);
	color:       var(--color-text-secondary);
}

/* Kontrol di dalam sel mengisi penuh lebar kolom */
.journal-lines-table .select-modern,
.journal-lines-table .input {
	width: 100%;
}

.journal-line-input-numeric {
	text-align:           right;
	font-family:          var(--font-family-mono);
	font-variant-numeric: tabular-nums;
}

.journal-lines-error {
	margin:  0;
	padding: var(--size-300) var(--size-400) 0;
}


/* --------------------------------------------------------------------------
   ACTION BAR — sticky di dasar viewport: total + balance + tombol
   Mengikuti pola .dialogBody-footer (custom-dialog-form.css): shadow
   mengarah ke ATAS, warna lewat color-mix supaya benar di light & dark.
   -------------------------------------------------------------------------- */
.journal-form-actions {
	position:         sticky;
	bottom:           0;
	z-index:          2;
	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);
	box-shadow:       0 -4px 8px -4px color-mix(in srgb, var(--color-text-primary) 12%, transparent);
}

.journal-balance-summary {
	display:     flex;
	align-items: center;
	gap:         var(--size-600);
	flex-wrap:   wrap;
}

.journal-balance-item {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-50);
}

.journal-balance-label {
	font-size:      var(--text-caption-size);
	font-weight:    var(--text-label-weight);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color:          var(--color-text-secondary);
}

.journal-balance-item .journal-amount {
	font-family:          var(--font-family-mono);
	font-size:            var(--text-body-size);
	font-weight:          var(--font-weight-semibold);
	font-variant-numeric: tabular-nums;
	white-space:          nowrap;
	color:                var(--color-text-primary);
}

/* Selisih debit − credit: hijau saat seimbang, merah saat tidak.
   Class state di-toggle journal.js (is-ok / is-error). */
.journal-balance-diff.is-ok    .journal-amount { color: var(--color-success-text); }
.journal-balance-diff.is-error .journal-amount { color: var(--color-error-text); }

.journal-form-buttons {
	display:     flex;
	align-items: center;
	gap:         var(--size-300);
	flex-wrap:   wrap;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.journal-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.journal-form-grid {
		grid-template-columns: 1fr;
	}
	.journal-form-actions {
		flex-direction: column;
		align-items:    stretch;
	}
	.journal-balance-summary {
		justify-content: space-between;
		gap:             var(--size-400);
	}
	.journal-form-buttons .btn {
		flex:            1 1 auto;
		justify-content: center;
	}
}
/* === FILE: journal-form.css — SELESAI === */

/* Lebar kontrol filter index — satu baris, pola toolbar sama dengan customer/product.
   Selector diberi prefix .data-table-toolbar-right supaya menang atas width:100% bawaan DS. */
.data-table-toolbar-right .jf-search        { width: 170px; }
.data-table-toolbar-right select.jf-period  { width: 160px; }
.data-table-toolbar-right select.jf-status  { width: 120px; }
.data-table-toolbar-right select.jf-type    { width: 110px; }
.data-table-toolbar-right .jf-date          { width: 290px; }

@media (max-width: 767px) {
	.data-table-toolbar-right .jf-search,
	.data-table-toolbar-right select.jf-period,
	.data-table-toolbar-right select.jf-status,
	.data-table-toolbar-right select.jf-type,
	.data-table-toolbar-right .jf-date { width: 100%; }
}

/* === JOURNAL SHOW — gabungkan ke journal.css (di bawah blok journal-form) === */
/* ==========================================================================
   Styling untuk App/Views/dashboard/finance/journal/show.php.
   Sebelumnya .journal-show-page / .journal-show-head / .journal-value /
   .journal-total-row dipakai view tapi BELUM didefinisikan di CSS mana pun —
   itu penyebab judul, badge, dan tombol back bertumpuk vertikal, serta kartu
   header & Journal Lines menempel tanpa jarak.
   ========================================================================== */

.journal-show-page {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-400);
}

/* Judul + badge status/tipe sebaris */
.journal-show-head {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         var(--size-300);
	min-width:   0;
}

.journal-show-number {
	font-family: var(--font-family-mono);
}

/* --------------------------------------------------------------------------
   BODY HEADER — deskripsi (lead) + fakta kunci
   -------------------------------------------------------------------------- */
.journal-show-body {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-500);
	padding:        var(--size-500);
}

.journal-show-desc {
	margin:      0;
	font-size:   var(--text-body-size);
	line-height: var(--leading-normal);
	color:       var(--color-text-primary);
}

/* <dl> grid auto-fit: jumlah kolom menyesuaikan lebar, tanpa media query */
.journal-facts {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap:                   var(--size-500) var(--size-400);
	margin:                0;
}

.journal-fact {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-100);
	min-width:      0;
}

.journal-fact dt {
	font-size:      var(--text-caption-size);
	font-weight:    var(--font-weight-medium);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color:          var(--color-text-secondary);
}

.journal-fact dd {
	margin:        0;
	font-size:     var(--text-body-size);
	color:         var(--color-text-primary);
	overflow-wrap: anywhere;
}

/* Amount: angka mono + tabular supaya sejajar dengan kolom tabel di bawah */
.journal-fact-amount dd {
	display:              flex;
	flex-direction:       column;
	font-family:          var(--font-family-mono);
	font-weight:          var(--font-weight-semibold);
	font-variant-numeric: tabular-nums;
}

.journal-fact-sub {
	font-size:   var(--text-caption-size);
	font-weight: var(--font-weight-regular);
	color:       var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   JEJAK AUDIT — Created / Posted / Voided, strip tipis di dasar kartu
   -------------------------------------------------------------------------- */
.journal-meta {
	display:          flex;
	flex-wrap:        wrap;
	gap:              var(--size-200) var(--size-600);
	margin:           0;
	padding:          var(--size-300) var(--size-500);
	background-color: var(--color-bg-sunken);
	border-top:       1px solid var(--color-border-default);
	font-size:        var(--text-caption-size);
}

.journal-meta > div {
	display: flex;
	gap:     var(--size-200);
}

.journal-meta dt {
	font-weight: var(--font-weight-medium);
	color:       var(--color-text-secondary);
}

.journal-meta dd {
	margin: 0;
	color:  var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   BARIS TOTAL — tfoot tabel Journal Lines
   -------------------------------------------------------------------------- */
.journal-total-row .data-table-td {
	background-color: var(--color-bg-sunken);
	font-weight:      var(--font-weight-semibold);
}

@media (min-width: 768px) {
	.journal-total-row .data-table-td {
		border-top: 2px solid var(--color-border-default);
	}
}

/* --------------------------------------------------------------------------
   STATE VOID — angka dicoret & diredupkan supaya tidak terbaca sebagai saldo aktif
   -------------------------------------------------------------------------- */
.journal-show-page.is-void .journal-fact-amount dd,
.journal-show-page.is-void .journal-lines-table .journal-amount {
	color:           var(--color-text-secondary);
	text-decoration: line-through;
}
/* === JOURNAL SHOW — SELESAI === */