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

   Layout: 2 .variant-section berurutan vertikal — (1) "Tambah SKU Baru"
   (pilih tipe & nilai varian lewat checkbox-chip, plus inline-create),
   (2) "Daftar SKU" (bulk-fill bar + grid kombinasi + tambah kombinasi
   spesifik). Pola section sama dgn .spesifikasi-panel-header di
   spesifikasi-form.css — dipertahankan sengaja supaya kedua dialog terasu
   satu keluarga visual, meski form-nya tidak pakai tab.

   DEPENDS ON: organisms/data-table/data-table.css (tabel dasar & header),
   molecules/checkbox-chip-group/checkbox-chip-group.css (chip tipe/nilai
   varian, termasuk swatch warna), atoms/badge/badge.css ("Baru"/"Terpakai"),
   molecules/form-field/form-field.css, form-field-floating.css, tokens/*

   Struktur HTML yang di-styling di sini (lihat _form_variant.php +
   product-variant.js — grid & inline-create 100% dirender JS):
     <div class="variant-section">
       <div class="variant-section-header">…icon + title + desc…</div>
       <div class="variant-section-body">
         <div class="form-field">…chip Tipe Varian…</div>
         <div id="variantNilaiInlineArea">…chip Nilai + input+tombol inline…</div>
       </div>
     </div>
     <div class="variant-section">
       <div class="variant-section-body">
         <div id="variantBulkBar" class="variant-bulk-bar">…2 field + checkbox + tombol…</div>
         <div id="variantGridArea" class="variant-grid-area">
           <table class="data-table variant-grid">…tr.variant-row-inactive…</table>
         </div>
         <div id="variantAddComboArea" class="variant-add-combo">
           <div id="variantAddComboSelects" class="variant-add-combo-selects">…</div>
         </div>
       </div>
     </div>

   TIDAK mengubah .form-field/.form-field-floating/.checkbox-chip-group/
   .data-table/.badge itu sendiri — murni wrapper & sel grid di LUAR
   komponen yang sudah ada. Class lama (.variant-type-list, .sku-row,
   .sku-list-inner, .sku-preview-box) dari arsitektur SKU-per-card sebelum
   grid ini SUDAH TIDAK DIPAKAI markup manapun — dibuang dari file ini,
   bukan sekadar biar rapi: kalau dibiarkan, class itu jadi jebakan tersamar
   untuk siapa pun yang mengira grid ini masih memakainya.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION WRAPPER — identik pola .spesifikasi-panel-header (spesifikasi-
   form.css), supaya kedua dialog (Spesifikasi & Varian) satu keluarga visual.
   -------------------------------------------------------------------------- */
.variant-sections {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-600);
}

.variant-section-header {
	display:        flex;
	align-items:    center;
	gap:            var(--size-300);
	padding-bottom: var(--size-400);
	border-bottom:  1px solid var(--color-border-default);
}

.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 {
	margin:      0;
	font-size:   var(--text-body-size);
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	color:       var(--color-text-primary);
}

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

/* 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-500);
}

/* --------------------------------------------------------------------------
   INLINE CREATE — baris "<input nilai baru> + tombol Tambah", dipakai utk
   Tipe Varian (statis, di PHP) MAUPUN Nilai Varian (satu blok per tipe
   tercentang, dirender ulang JS ke #variantNilaiInlineArea tiap tipe
   berubah — lihat renderNilaiChips()). Disamakan supaya kedua konteks
   terasa satu pola, bukan constraint teknis dari JS.
   -------------------------------------------------------------------------- */
.variant-inline-create {
	display:     flex;
	align-items: center;
	gap:         var(--size-300);
}

.variant-inline-create .form-field {
	flex: 1;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   EMPTY STATE — Tipe Varian belum ada SATUPUN secara global (bukan cuma
   belum dicentang utk produk ini, tapi memang belum pernah dibuat lewat
   "Tambah Tipe"). Tanpa ini, .checkbox-chip-group-items kosong cuma jadi
   <div> tanpa tinggi: legend "Tipe Varian" terasa mengambang sendirian,
   lalu langsung loncat ke input inline-create tanpa penjelasan kenapa
   kosong. :empty aman dipakai di sini — isinya SELALU di-generate ulang
   lewat innerHTML (renderTipeChips()), tidak pernah cuma whitespace sisa. */
.checkbox-chip-group-items:empty::before {
	content:    'Belum ada tipe varian — tambahkan lewat form di bawah.';
	display:    block;
	padding:    var(--size-300) 0;
	font-size:  var(--text-label-sm-size);
	color:      var(--color-text-secondary);
	font-style: italic;
}

/* Tiap blok Nilai Varian (1 per tipe tercentang) butuh jarak dari blok
   berikutnya + label tipe di atasnya. */
.variant-nilai-group + .variant-nilai-group {
	margin-top: var(--size-400);
}

.variant-nilai-group-label {
	margin:      0 0 var(--size-200);
	font-weight: var(--font-weight-medium);
	color:       var(--color-text-primary);
}

@media (max-width: 479px) {
	.variant-inline-create {
		flex-direction: column;
		align-items:    stretch;
	}
}

/* --------------------------------------------------------------------------
   BULK-FILL BAR — "Harga untuk semua" / "Stok untuk semua" + checkbox
   "Timpa yang sudah diisi" + tombol "Isi". Baris tunggal di desktop
   (2 field lebar tetap, checkbox & tombol menempel di kanan), susun
   vertikal di mobile.
   -------------------------------------------------------------------------- */
.variant-bulk-bar {
	display:          flex;
	flex-wrap:        wrap;
	align-items:      end;
	gap:              var(--size-400);
	padding:          var(--size-400);
	border:           1px solid var(--color-border-default);
	border-radius:    var(--radius-md);
	background-color: var(--color-bg-sunken);
}

.variant-bulk-bar .form-field {
	flex:      1 1 12rem;
	min-width: 0;
	margin:    0;
}

.variant-bulk-bar .checkbox {
	flex-shrink: 0;
}

@media (max-width: 479px) {
	.variant-bulk-bar {
		flex-direction: column;
		align-items:    stretch;
	}
	.variant-bulk-bar .btn {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   GRID KOMBINASI SKU — <table class="data-table variant-grid">
   .data-table sudah memberi gaya header/hover/zebra, TAPI body cell-nya
   (.data-table-td) TIDAK dipakai markup grid ini (renderGrid() memakai
   <td> polos supaya input di dalamnya menempel rapat, tanpa padding ganda
   dari .data-table-td + padding input itu sendiri). Makanya sel diberi
   padding sendiri di sini, scoped ke .variant-grid — BUKAN menambah
   .data-table-td ke tiap <td> di JS, supaya data-table.css yang dipakai
   modul lain (Product Directory, dst) tidak perlu ikut disesuaikan.
   -------------------------------------------------------------------------- */
.variant-grid-area {
	overflow-x:    auto;
	border:        1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	/* Fade tepi kanan sbg isyarat "masih ada kolom di kanan, geser" —
	   dipakai TERUS (bukan cuma saat overflow) krn deteksi overflow murni
	   CSS tanpa JS tidak reliable lintas breakpoint; efeknya nihil kalau
	   toh tidak overflow (fade jatuh di luar area yg terlihat). */
	-webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
	        mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
}

/* Tanpa kombinasi: pesan dari JS/PHP tidak butuh border tabel.
   :has() diperluas cakupannya (bukan cuma > .label-hint) supaya tetap
   match baik fallback teks-polos (PHP awal, sebelum JS init) MAUPUN
   versi kaya .variant-grid-empty (ikon+judul+deskripsi, dirender JS —
   lihat renderGrid()). Properti di dalamnya TIDAK diubah. */
.variant-grid-area:has(> .label-hint),
.variant-grid-area:has(> .variant-grid-empty) {
	overflow-x:    visible;
	border:        0;
	padding:       var(--size-400) var(--size-500);
	text-align:    center;
	background-color: var(--color-bg-sunken);
	border-radius: var(--radius-md);
}

/* Isi .variant-grid-empty (ikon + judul + deskripsi) — dipakai
   renderGrid() saat rows.size === 0, menggantikan <p class="label-hint">
   polos supaya empty state terasa sbg instruksi alur kerja ("langkah
   berikutnya"), bukan pesan error/disabled. Wrapper luar (padding,
   background, border) tetap tanggung jawab :has() di atas — di sini
   HANYA styling konten internalnya. */
.variant-grid-empty {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            var(--size-200);
}
.variant-grid-empty svg {
	width:  var(--size-icon-md);
	height: var(--size-icon-md);
	color:  var(--color-text-secondary);
}
.variant-grid-empty-title {
	margin:      0;
	font-weight: var(--font-weight-medium);
	color:       var(--color-text-primary);
}
.variant-grid-empty-desc {
	margin:    0;
	font-size: var(--text-label-sm-size);
	color:     var(--color-text-secondary);
}

.variant-grid {
	width: 100%;
}

/* Padding & hover sel BUKAN dari sini — <td> grid ini sekarang punya class
   resmi .data-table-td (lihat renderGrid()/selTd() di product-variant.js),
   jadi diwarisi dari data-table.css: .data-table td.data-table-td (padding)
   dan .data-table-row:hover (hover). Ditambah data-label pada tiap <td>,
   grid ini otomatis ikut mode kartu data-table-responsive.css di <768px —
   TANPA CSS tambahan apa pun di sini utk itu (progressive enhancement
   bawaan, sama seperti Product Directory).
   Sisa aturan di bawah HANYA lebar kolom di mode tabel (>=768px) — spesifik
   utk grid varian & TIDAK ada di data-table.css generik. */

.variant-grid td.data-table-check {
	text-align: center;
}

/* Kolom Kombinasi: label + badge, wrap rapi (bukan terpotong). */
.variant-grid td.data-table-td-primary {
	min-width: 6rem;
}

.variant-grid td.data-table-td-primary .label {
	display:       block;
	margin-bottom: var(--size-100);
}

.variant-grid td.data-table-td-primary .badge {
	margin-right: var(--size-100);
}

/* Kolom SKU: font mono, beri lebar cukup supaya kode seperti
   "TSHIRT-MERAH-S" tidak terpotong. */
.variant-grid td[data-label="SKU"] .input {
	min-width:   11rem;
	font-family: var(--font-family-mono, monospace);
}

/* Kolom Harga: 6 digit wajar (mis. 850000) tanpa terpotong. */
.variant-grid td[data-label="Harga"] .input {
	min-width: 6.5rem;
}

/* Kolom Stok & Min. Stok: cukup sempit, angka rata tengah. */
.variant-grid td[data-label="Stok"] .input,
.variant-grid td[data-label="Min. Stok"] .input {
	width:      4.5rem;
	text-align: center;
}

/* CATATAN LEBAR TOTAL: kolom di atas (Kombinasi ~7rem + SKU ~11rem + Harga
   ~6.5rem + Stok/Min.Stok 2x4.5rem + checkbox/aksi) melebihi lebar dialog
   'xl' cuma dgn 2 tipe varian pendek (Warna+Ukuran) — dgn 3+ tipe varian
   (kombinasi makin panjang) situasinya lebih sempit lagi. DISENGAJA: kolom
   data yang bisa memuat kode SKU & harga asli (bukan dipotong artifisial
   demi muat di satu layar) lebih penting drpd tabel selalu pas tanpa
   scroll. .variant-grid-area scroll horizontal (dgn fade-indicator di
   bawah) menampung sisanya — pola yg sama seperti data-table biasa dgn
   banyak kolom (lihat data-table-zebra.css / Product Directory). */


.variant-grid td.data-table-td-action {
	text-align: center;
}

/* Baris dinonaktifkan (checkbox di-uncheck): pudar, menandakan baris ini
   TIDAK akan disimpan aktif — tanpa perlu scroll ke kolom checkbox utk tahu. */
.variant-row-inactive {
	opacity: 0.55;
}

.variant-row-inactive .data-table-td:not(.data-table-check) .input {
	background-color: var(--color-bg-sunken);
}

/* --------------------------------------------------------------------------
   TAMBAH KOMBINASI TERTENTU — escape hatch di dasar grid: 1 dropdown per
   tipe varian tercentang (dirender JS ke #variantAddComboSelects) + tombol.
   -------------------------------------------------------------------------- */
.variant-add-combo {
	padding-top: var(--size-400);
	border-top:  1px dashed var(--color-border-default);
}

.variant-add-combo > .label {
	margin: 0 0 var(--size-300);
}

.variant-add-combo-selects {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap:                   var(--size-400);
	margin-bottom:         var(--size-400);
}

.variant-add-combo-selects .form-field {
	margin: 0;
}

/* --------------------------------------------------------------------------
   ICON BUTTON — tombol "nonaktifkan paksa" di kolom aksi grid. Belum ada
   definisi generik .icon-btn di design system; scoped di sini karena
   HANYA dipakai grid varian saat ini (lihat renderGrid() > tdAksi).
   -------------------------------------------------------------------------- */
.icon-btn {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            var(--size-700);
	height:           var(--size-700);
	padding:          0;
	border:           1px solid var(--color-border-default);
	border-radius:    var(--radius-md);
	background-color: var(--color-bg-surface);
	color:            var(--color-warning-text);
	cursor:           pointer;
}

.icon-btn:hover {
	background-color: var(--color-warning-subtle);
	border-color:     var(--color-warning-border, var(--color-border-strong));
}

.icon-btn svg {
	width:  var(--size-icon-sm);
	height: var(--size-icon-sm);
}

.icon-btn-sm {
	width:  var(--size-600);
	height: var(--size-600);
}

@media (max-width: 639px) {
	.variant-add-combo-selects {
		grid-template-columns: 1fr;
	}
}
/* === FILE: variant-form.css — SELESAI === */