/* === 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.
   ========================================================================== */

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

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

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

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


/* --------------------------------------------------------------------------
   FILTER BAR — card dengan grid field responsif + baris aksi terpisah
   -------------------------------------------------------------------------- */
.journal-filter-bar {
	display:          flex;
	flex-direction:   column;
	gap:              var(--size-300);
	padding:          var(--size-400);
	background-color: var(--color-bg-surface);
	border:           1px solid var(--color-border-default);
	border-radius:    var(--radius-lg);
}

.journal-filter-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap:                   var(--size-300);
	align-items:           end;
}

/* Field Search butuh lebih banyak ruang daripada field select biasa —
   dipaksa melebar minimal 2 kolom kalau grid punya cukup ruang. */
.journal-filter-search {
	grid-column: span 2;
	min-width:   220px;
}

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

.journal-filter-actions {
	display:     flex;
	align-items: center;
	gap:         var(--size-200);
	padding-top: var(--size-100);
	border-top:  1px solid var(--color-border-default);
}


/* --------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */
.journal-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;
}


/* --------------------------------------------------------------------------
   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
   -------------------------------------------------------------------------- */
.journal-pagination {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--size-300);
	flex-wrap:       wrap;
	padding:         var(--size-300) var(--size-400);
	border-top:      1px solid var(--color-border-default);
}

.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
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.journal-filter-search {
		grid-column: span 1;
	}
}

@media (max-width: 639px) {
	.journal-toolbar-right {
		width: 100%;
	}
	.journal-toolbar-right .btn {
		width: 100%;
		justify-content: center;
	}
	.journal-filter-grid {
		grid-template-columns: 1fr;
	}
	.journal-filter-search {
		grid-column: span 1;
	}
	.journal-pagination {
		flex-direction: column;
		align-items:    stretch;
		text-align:     center;
	}
}
/* === FILE: journal.css — SELESAI === */