/* === FILE: variant-form.css — MULAI === */
/* ==========================================================================
   COMPONENTS / variant-form / variant-form.css
   --------------------------------------------------------------------------
   Styling untuk App/Views/dashboard/product/_form_variant.php.

   BERBEDA dari spesifikasi-form.css (accordion per grup) — form ini
   SENGAJA TIDAK memakai accordion sama sekali. Alasan: SKU builder adalah
   alur berurutan yang saling bergantung (pilih tipe → pilih nilai →
   preview SKU muncul → isi detail SKU), bukan kumpulan grup independen
   yang bisa dibuka-tutup bebas seperti atribut produk. Menyembunyikan
   salah satu langkah di balik accordion akan memaksa user
   membuka-tutup panel di tengah alur input yang sudah berurutan.

   Sebagai gantinya, tiap bagian diberi HEADER statis (icon + judul,
   TANPA <details>/<summary>, tidak collapsible) — cukup untuk menunjukkan
   "input ini bagian dari apa" tanpa mengorbankan akses langsung ke semua
   field sekaligus.

   DEPENDS ON: molecules/form-field/form-field.css,
   molecules/form-field/form-field-floating.css,
   atoms/badge/badge.css, tokens/*

   Struktur HTML yang di-styling di sini :
     <div class="variant-section">
       <div class="variant-section-header">
         <span class="variant-section-icon">...svg...</span>
         <div>
           <p class="variant-section-title">Judul Bagian</p>
           <p class="variant-section-desc">Deskripsi singkat opsional</p>
         </div>
       </div>
       <div class="variant-section-body"> ...field-field/grid... </div>
     </div>

   TIDAK mengubah apa pun di dalam .form-field/.checkbox/.checkbox-chip-
   group itu sendiri — murni wrapper visual di LUAR field yang sudah ada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION LIST — jarak antar bagian (SKU list, builder, detail SKU)
   -------------------------------------------------------------------------- */
.variant-sections {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-600);
}

/* --------------------------------------------------------------------------
   SECTION — kontainer statis (bukan accordion), border tipis pemisah visual
   -------------------------------------------------------------------------- */
.variant-section {
	display:          flex;
	flex-direction:   column;
	gap:              var(--size-400);
	padding:          var(--size-500);
	border:           1px solid var(--color-border-default);
	border-radius:    var(--radius-md);
	background-color: var(--color-bg-surface);
}

.variant-section-header {
	display:     flex;
	align-items: flex-start;
	gap:         var(--size-300);
}

.variant-section-icon {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            var(--size-800);
	height:           var(--size-800);
	flex-shrink:      0;
	border-radius:    var(--radius-md);
	background-color: var(--color-brand-subtle, var(--color-bg-sunken));
	color:            var(--color-brand-text);
}

.variant-section-icon svg {
	width:  var(--size-icon-md);
	height: var(--size-icon-md);
}

.variant-section-title {
	font-size:   var(--text-heading-md-size);
	font-weight: var(--text-heading-xs-weight);
	color:       var(--color-text-primary);
	margin:      0;
}

.variant-section-desc {
	font-size:  var(--text-body-sm-size);
	color:      var(--color-text-secondary);
	margin:     var(--size-100) 0 0;
}

/* Body section butuh clearance atas ~20px kalau berisi field floating
   sebagai child langsung — sama alasan seperti .spesifikasi-grid
   (lihat catatan form-field-floating.css). */
.variant-section-body {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-500);
	padding-top:    var(--size-100);
}

/* --------------------------------------------------------------------------
   TIPE VARIAN — checkbox biasa, dibiarkan wrap horizontal rapi
   -------------------------------------------------------------------------- */
.variant-type-list {
	display:        flex;
	flex-wrap:      wrap;
	gap:            var(--size-300) var(--size-500);
}

/* --------------------------------------------------------------------------
   SKU SAAT INI — daftar SKU yang sudah ada, tiap baris = 1 card ringkas
   -------------------------------------------------------------------------- */
.sku-list-inner {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-300);
}

.sku-row {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	gap:              var(--size-400);
	padding:          var(--size-300) var(--size-400);
	border:           1px solid var(--color-border-default);
	border-radius:    var(--radius-md);
	background-color: var(--color-bg-sunken);
}

.sku-row-main {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-100);
	min-width:      0;
}

.sku-row-main .label {
	font-weight: var(--font-weight-medium);
}

.sku-row-meta {
	display:     flex;
	align-items: center;
	gap:         var(--size-400);
	flex-shrink: 0;
}

@media (max-width: 639px) {
	.sku-row {
		flex-direction: column;
		align-items:    flex-start;
	}
	.sku-row-meta {
		width:           100%;
		justify-content: space-between;
	}
}

/* --------------------------------------------------------------------------
   PREVIEW SKU — teks kode SKU yang akan dihasilkan, ditonjolkan dgn
   background subtle + font mono supaya jelas beda dari label biasa.
   -------------------------------------------------------------------------- */
.sku-preview-box {
	display:          inline-flex;
	align-items:      center;
	gap:              var(--size-200);
	padding:          var(--size-300) var(--size-400);
	border:           1px dashed var(--color-border-default);
	border-radius:    var(--radius-md);
	background-color: var(--color-bg-sunken);
	font-family:      var(--font-family-mono, monospace);
	font-size:        var(--text-body-size);
	color:            var(--color-text-primary);
	width:            fit-content;
	max-width:        100%;
	overflow-wrap:    anywhere;
}
/* === FILE: variant-form.css — SELESAI === */