/* === FILE: period.css — MULAI (v2, AJAX) === */
/* ==========================================================================
   COMPONENTS / period / period.css
   --------------------------------------------------------------------------
   Styling untuk App/Views/dashboard/finance/period/index.php — Fiscal Year
   & Period Management, versi AJAX (selaras dengan customer/index.php dan
   quotation/index.php: .data-table-wrapper > .data-table-toolbar + list,
   search-bar, select-modern, pagination via #containerHalaman).

   Beda dari customer/quotation: isi list bukan <table>/<tbody> flat,
   melainkan sekumpulan <details class="accordion fy-node"> — satu per
   Fiscal Year — masing-masing membungkus data-table periode sendiri
   yang di-lazy-load oleh period.js.

   DEPENDS ON: molecules/accordion/accordion.css, 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, molecules/pagination/pagination.css,
   tokens/*

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

/* --------------------------------------------------------------------------
   PAGE SHELL
   -------------------------------------------------------------------------- */
.period-wrapper {
	display:        flex;
	flex-direction: column;
}

/* Tombol expand/collapse-all — rotasi ikon saat state berubah, feedback
   visual halus tanpa perlu ganti ikon lewat JS. */
#buttonExpandAll svg {
	transition: transform var(--duration-fast) var(--ease-default);
}
#buttonExpandAll[data-expanded="false"] svg {
	transform: rotate(180deg);
}


/* --------------------------------------------------------------------------
   LOADING / EMPTY STATE — ditampilkan period.js saat fetch berjalan atau
   hasil kosong.
   -------------------------------------------------------------------------- */
.period-loading,
.period-empty {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	padding:          var(--size-600) var(--size-400);
	text-align:       center;
}
.period-empty {
	background-color: var(--color-bg-surface);
	border:           1px dashed var(--color-border-default);
	border-radius:    var(--radius-lg);
	margin:           var(--size-300) var(--size-400);
}


/* --------------------------------------------------------------------------
   FY LIST — container hasil render period.js, padding mengikuti irama
   data-table-wrapper (bukan <table>, jadi spacing diatur manual di sini).
   -------------------------------------------------------------------------- */
.fy-list {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-300);
	padding:        var(--size-300) var(--size-400) var(--size-400);
}

/* Setiap FY = card mandiri, border+radius penuh. */
.fy-node {
	border:           1px solid var(--color-border-default);
	border-radius:    var(--radius-lg);
	overflow:         hidden;
	background-color: var(--color-bg-surface);
}

/* FY yang sedang aktif ditandai aksen border kiri brand. */
.fy-node:has(.badge-brand) {
	border-left: 3px solid var(--color-brand);
}

.fy-summary {
	align-items: center;
	padding:     var(--size-300) var(--size-400);
	gap:         var(--size-300);
	flex-wrap:   wrap;
}
.fy-summary .accordion-header {
	flex:      1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
	gap:       var(--size-300);
}

.fy-year-name {
	font-size:   var(--text-body-lg-size);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-text-primary);
}

.fy-date-range {
	font-size:   var(--text-caption-size);
	color:       var(--color-text-secondary);
	white-space: nowrap;
}

.fy-summary-info {
	gap:       var(--size-400);
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   STAT PILLS — ringkasan closed/open/pending
   -------------------------------------------------------------------------- */
.fy-stat-pills {
	display:     flex;
	align-items: center;
	gap:         var(--size-300);
	font-size:   var(--text-caption-size);
	color:       var(--color-text-secondary);
}

.fy-stat-pill {
	display:     inline-flex;
	align-items: center;
	gap:         var(--size-100);
}

.fy-stat-value {
	font-weight: var(--font-weight-semibold);
	color:       var(--color-text-primary);
}
.fy-stat-open .fy-stat-value {
	color: var(--color-success-text);
}
.fy-stat-pending .fy-stat-value {
	color: var(--color-warning-text);
}


/* --------------------------------------------------------------------------
   FY BODY — wrapper tabel periode (lazy-loaded), di dalam accordion-content
   -------------------------------------------------------------------------- */
.fy-body {
	padding:    var(--size-300) var(--size-400) var(--size-400);
	border-top: 1px solid var(--color-border-default);
}
.fy-body .data-table-wrapper {
	border-radius: var(--radius-md);
}

.col-num {
	width:      var(--size-600);
	text-align: center;
}
.period-number {
	font-family: var(--font-family-mono);
	font-size:   var(--text-caption-size);
	color:       var(--color-text-secondary);
}

/* Baris periode closed sedikit diredupkan. */
.period-row.period-closed .data-table-td {
	color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.fy-summary {
		align-items: flex-start;
	}
	.fy-summary-info {
		width:           100%;
		justify-content: space-between;
	}
}

@media (max-width: 639px) {
	.fy-date-range {
		width: 100%;
	}
	.fy-stat-pills {
		flex-wrap: wrap;
	}
}
/* === FILE: period.css — SELESAI (v2, AJAX) === */