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

   Kenapa file baru (bukan numpuk ke custom-form-field.css)?
     Layout ini spesifik untuk konteks "form EAV per-grup atribut" —
     grid 2 kolom di dalam tiap grup + accordion pembungkus grup, pola
     yang sama seperti coa-form.css (grid 2 kolom scoped ke satu form),
     supaya breakpoint & gap-nya terkontrol tanpa menyentuh
     form-field.css/form-field-floating.css yang generik dan dipakai
     modul lain.

   DEPENDS ON: molecules/form-field/form-field.css,
   molecules/form-field/form-field-floating.css,
   molecules/accordion/accordion.css,
   molecules/checkbox-chip-group/checkbox-chip-group.css, tokens/*

   Struktur HTML yang di-styling di sini (lihat _form_spesifikasi.php):
     <div class="spesifikasi-groups">
       <details class="accordion spesifikasi-group" open>
         <summary class="accordion-summary">
           <div class="accordion-header">
             <span class="spesifikasi-group-icon">...svg...</span>
             <span>Nama Grup</span>
             <span class="spesifikasi-group-count">4</span>
           </div>
           <svg class="accordion-arrow">...</svg>
         </summary>
         <div class="accordion-content">
           <div class="spesifikasi-grid"> ...field-field... </div>
         </div>
       </details>
     </div>

   TIDAK mengubah apa pun di dalam .form-field/.form-field-floating/
   .checkbox-chip-group itu sendiri — murni wrapper grid + accordion di
   LUAR field yang sudah ada, kontrak lama (id/name/class JS) tetap utuh.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GROUP LIST — jarak antar accordion grup
   -------------------------------------------------------------------------- */
.spesifikasi-groups {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-400);
}

/* --------------------------------------------------------------------------
   ACCORDION GRUP — pakai .accordion dasar, sedikit modifier
   -------------------------------------------------------------------------- */
.spesifikasi-group .accordion-summary {
	padding: var(--size-400) var(--size-500);
}

.spesifikasi-group .accordion-content {
	padding: var(--size-600) var(--size-500) var(--size-500);
}

.spesifikasi-group-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);
}

.spesifikasi-group-icon svg {
	width:  var(--size-icon-md);
	height: var(--size-icon-md);
}

/* Badge kecil jumlah atribut dalam grup — murni info visual, tidak ada
   makna fungsional/JS di baliknya. */
.spesifikasi-group-count {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	min-width:        var(--size-500);
	height:           var(--size-500);
	padding:          0 var(--size-200);
	border-radius:    999px;
	background-color: var(--color-bg-sunken);
	color:            var(--color-text-secondary);
	font-size:        var(--text-label-sm-size);
	font-weight:      var(--font-weight-medium);
	margin-left:      auto;
	margin-right:     var(--size-300);
}

/* --------------------------------------------------------------------------
   GRID 2 KOLOM — field di dalam satu grup atribut
   -------------------------------------------------------------------------- */
.spesifikasi-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   var(--size-500) var(--size-400);
	align-items:           start;
	/* Clearance atas ~20px (--size-500) — floating label butuh ruang untuk
	   naik ke luar box input (lihat catatan form-field-floating.css).
	   Baris pertama grid tidak punya elemen sebelumnya yang menyumbang
	   gap, jadi ruang ini harus disediakan manual di sini. */
	padding-top: var(--size-500);
}

/* Field yang perlu melebar penuh 2 kolom: textarea, checkbox-chip-group,
   dan checkbox boolean (checkbox tunggal terasa janggal kalau setengah
   lebar, apalagi kalau labelnya panjang). */
.spesifikasi-field-full {
	grid-column: 1 / -1;
}

@media (max-width: 639px) {
	.spesifikasi-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Placeholder saat belum ada grup atribut sama sekali
   -------------------------------------------------------------------------- */
.spesifikasi-empty {
	display:          flex;
	flex-direction:   column;
	align-items:      center;
	justify-content:  center;
	gap:              var(--size-300);
	padding:          var(--size-800) var(--size-500);
	border:           1px dashed var(--color-border-default);
	border-radius:    var(--radius-md);
	color:            var(--color-text-secondary);
	text-align:       center;
}

.spesifikasi-empty svg {
	width:  var(--size-icon-2xl);
	height: var(--size-icon-2xl);
	color:  var(--color-text-disabled);
}
/* === FILE: spesifikasi-form.css — SELESAI === */