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

   Layout: SIDEBAR TAB VERTIKAL (satu tab per grup atribut + tab "Atribut
   Baru" di dasar) di kiri, PANEL aktif di kanan berisi grid 2 kolom.
   Di <640px sidebar berubah jadi baris tab yang bisa digeser horizontal.

   Kenapa file baru (bukan numpuk ke custom-form-field.css)?
     Layout ini spesifik untuk konteks "form EAV per-grup atribut". Scoped
     ke class .spesifikasi-* supaya breakpoint & gap-nya terkontrol tanpa
     menyentuh form-field.css/form-field-floating.css/tabs.css yang generik
     dan dipakai modul lain.

   DEPENDS ON: molecules/tabs/tabs.css (.tabs/.tab/.tabs-vertical/.tab-panel),
   molecules/form-field/form-field.css, form-field-floating.css,
   molecules/checkbox-chip-group/checkbox-chip-group.css,
   molecules/combobox/combobox.css (kelas .cb__list/.cb__option), tokens/*

   Struktur HTML yang di-styling di sini (lihat _form_spesifikasi.php):
     <div class="spesifikasi-layout">
       <div class="tabs tabs-vertical spesifikasi-tabs" role="tablist">
         <button class="tab tab-active" role="tab">
           <span class="spesifikasi-group-icon">…svg…</span>
           <span class="spesifikasi-tab-label">Nama Grup</span>
           <span class="spesifikasi-group-count">3/5</span>
         </button>
         <span class="spesifikasi-tabs-sep"></span>
         <button class="tab" role="tab">…Atribut Baru…</button>
       </div>
       <div class="spesifikasi-panels">
         <div class="tab-panel spesifikasi-panel" role="tabpanel">
           <div class="spesifikasi-panel-header">…ikon + judul + ringkasan…</div>
           <div class="spesifikasi-grid"> …field-field… </div>
         </div>
         <div class="tab-panel spesifikasi-panel">…form atribut baru…</div>
       </div>
     </div>

   Selector tab memakai .tabs.spesifikasi-tabs (specificity 0,3,0) supaya
   menang atas .tabs-vertical/.tab-active milik tabs.css TANPA bergantung
   pada urutan load stylesheet.

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

/* --------------------------------------------------------------------------
   LAYOUT — sidebar | panel
   minmax(0, 1fr) pada kolom panel: tanpa min-width:0, isi yang lebar (grid
   2 kolom + floating label) mendorong kolom keluar dari dialog.
   -------------------------------------------------------------------------- */
.spesifikasi-layout {
	display:               grid;
	grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
	gap:                   var(--size-600);
	align-items:           start;
}

/* 0 grup → sidebar tidak dirender, panel "Atribut Baru" tampil sendiri. */
.spesifikasi-layout-single {
	grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   SIDEBAR TAB
   Sticky: panel yang tinggi (banyak field) di-scroll di dalam .dialogBody,
   sidebar tetap terlihat supaya user bisa pindah grup tanpa scroll ke atas.
   max-height + overflow: kalau grupnya sangat banyak, sidebar scroll sendiri
   (tanpa ini, tab paling bawah — termasuk "Atribut Baru" — bisa tidak
   terjangkau karena sticky menahan sidebar di viewport).
   -------------------------------------------------------------------------- */
.tabs.spesifikasi-tabs {
	position:       sticky;
	top:            0;
	flex-direction: column;
	flex-wrap:      nowrap;
	gap:            var(--size-100);
	width:          100%;
	max-height:     60vh;
	overflow-x:     hidden;
	overflow-y:     auto;
	padding-right:  var(--size-400);
	border-right:   1px solid var(--color-border-default);
	border-bottom:  0;
	scrollbar-width: thin;
}

.tabs.spesifikasi-tabs .tab {
	display:       flex;
	align-items:   center;
	gap:           var(--size-200);
	width:         100%;
	margin:        0;
	padding:       var(--size-200) var(--size-300);
	border:        0;
	border-radius: var(--radius-md);
	text-align:    left;
	white-space:   normal;
	color:         var(--color-text-secondary);
}

.tabs.spesifikasi-tabs .tab:hover:not(.tab-active):not(:disabled) {
	background-color: var(--color-bg-sunken);
	color:            var(--color-text-primary);
}

/* Aktif: latar brand halus + garis aksen di sisi kiri. */
.tabs.spesifikasi-tabs .tab-active {
	background-color: var(--color-brand-subtle);
	color:            var(--color-brand-text);
	box-shadow:       inset 3px 0 0 var(--color-brand);
}

/* break-word (BUKAN anywhere): kata hanya dipatah kalau satu kata saja sudah
   lebih lebar dari kolom. "anywhere" ikut menurunkan lebar minimum flex item,
   sehingga label dipatah di tengah kata ("Kelistrika/n") padahal masih muat. */
.spesifikasi-tab-label {
	flex:          1;
	min-width:     0;
	line-height:   1.3;
	overflow-wrap: break-word;
}

/* Pemisah tipis antara tab grup dan tab "Atribut Baru". */
.spesifikasi-tabs-sep {
	display:          block;
	height:           1px;
	margin:           var(--size-200) var(--size-300);
	background-color: var(--color-border-default);
	flex-shrink:      0;
}

/* --------------------------------------------------------------------------
   IKON GRUP — kotak ikon (dipakai di tab & header panel)
   -------------------------------------------------------------------------- */
.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);
}

/* Di dalam tab: sedikit lebih kecil; saat aktif kotaknya "menyala" putih
   (latar tab sudah brand-subtle, jadi kotak brand-subtle akan hilang). */
.spesifikasi-tabs .spesifikasi-group-icon {
	width:  var(--size-700);
	height: var(--size-700);
}

.spesifikasi-tabs .tab-active .spesifikasi-group-icon {
	background-color: var(--color-bg-surface);
}

/* --------------------------------------------------------------------------
   BADGE "terisi/total" — di ujung kanan tab.
   Diisi JS (initSpesifikasiTabs); nilai awal dari server = total saja.
   tabular-nums: lebar angka tetap, badge tidak "bergetar" saat berubah.
   -------------------------------------------------------------------------- */
.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);
	font-variant-numeric: tabular-nums;
	margin-left:          auto;
	flex-shrink:          0;
}

.spesifikasi-tabs .tab-active .spesifikasi-group-count {
	background-color: var(--color-bg-surface);
}

/* Semua atribut grup terisi → hijau. */
.spesifikasi-group-count.is-complete,
.spesifikasi-tabs .tab-active .spesifikasi-group-count.is-complete {
	background-color: var(--color-success-subtle);
	color:            var(--color-success-text);
}

/* Grup berisi field yang gagal validasi (ditandai JS setelah submit).
   Ditaruh SETELAH varian di atas supaya error menang atas is-complete. */
.tabs.spesifikasi-tabs .tab.spesifikasi-tab-error {
	color: var(--color-error-text);
}

.spesifikasi-tabs .spesifikasi-tab-error .spesifikasi-group-count,
.spesifikasi-tabs .tab-active.spesifikasi-tab-error .spesifikasi-group-count {
	background-color: var(--color-error-subtle);
	color:            var(--color-error-text);
}

/* --------------------------------------------------------------------------
   PANEL
   .tab-panel bawaan tabs.css punya padding-top; dibuang karena jarak atas
   sudah diatur header panel & grid (clearance floating label).
   -------------------------------------------------------------------------- */
.spesifikasi-panels {
	min-width: 0;
}

.spesifikasi-panels .spesifikasi-panel {
	padding-top: 0;
}

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

.spesifikasi-panel-title {
	margin:      0;
	font-size:   var(--text-body-size);
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	color:       var(--color-text-primary);
}

.spesifikasi-panel-header .label-hint {
	margin: var(--size-100) 0 0;
}

/* Petunjuk tepat di bawah header (mis. grup tanpa atribut). */
.spesifikasi-panel-header + .label-hint {
	margin-top: var(--size-400);
}

/* --------------------------------------------------------------------------
   GRID 2 KOLOM — field di dalam satu grup atribut
   minmax(0, 1fr): kolom boleh menyusut di bawah lebar isi minimumnya.
   -------------------------------------------------------------------------- */
.spesifikasi-grid {
	display:               grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:                   var(--size-500) var(--size-400);
	align-items:           start;
	/* Clearance atas ~24px (--size-600) — 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-600);
}

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

/* --------------------------------------------------------------------------
   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);
	margin-top:       var(--size-500);
	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);
}

/* --------------------------------------------------------------------------
   FORM "ATRIBUT BARU" — isi panel (bukan lagi kartu tersendiri)
   Alur vertikal: grup → (nama | tipe | satuan) → [pilihan] → aksi.
   JS mengikat lewat ID (#attrGroupSearch, #inlineAttr*, #btnAddAttribute),
   bukan class — class di sini murni tampilan.
   -------------------------------------------------------------------------- */
.attribute-inline-create {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-500);
	padding-top:    var(--size-500);
}

/* 2 kolom: Nama selebar penuh, Tipe & Satuan berdampingan di bawahnya.
   (Sebelumnya 3 kolom 2fr/1.2fr/1fr: kolom Satuan cuma ~120px sehingga
   label "Satuan (opsional)" meluap keluar kotak & memicu scroll horizontal.)
   align-items:end → dasar kotak input sejajar walau kolom Tipe (label statis
   select-modern + select) lebih tinggi dari kolom floating-label di sebelahnya;
   ruang ekstra di atas kolom yang lebih pendek sekaligus jadi clearance label. */
.attribute-inline-create-grid {
	display:               grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:                   var(--size-500) var(--size-400);
	align-items:           end;
}

.attribute-inline-create-grid > :first-child {
	grid-column: 1 / -1;
}

.attribute-inline-create-footer {
	display:         flex;
	justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   DROPDOWN SARAN GRUP — #attrGroupSuggestions (.cb__list-wrap)
   Diisi product-attribute.js::renderGroupSuggestions() dgn .cb__list >
   .cb__option (kelas combobox.css), TAPI pembungkusnya bukan .cb, jadi:
   (1) .cb__list-wrap tidak punya definisi di CSS mana pun → tanpa posisi,
       latar, border, z-index: saran mendorong/menimpa isi form;
   (2) variabel --cb-* (hover, radius, warna) hanya didefinisikan DI DALAM
       .cb → .cb__option di sini kehilangan semuanya.
   Diperbaiki di sini (scoped ke form ini), bukan mengubah combobox.css
   yang dipakai modul lain. Pola visual disalin dari .cb__dropdown.
   Pembungkus form-field-nya sudah position:relative (lihat _form_spesifikasi.php).
   -------------------------------------------------------------------------- */
.attribute-inline-create .cb__list-wrap {
	--cb-surface-hover: var(--color-bg-sunken);
	--cb-border:        var(--color-border-strong);
	--cb-radius-sm:     var(--radius-sm);
	--cb-ease:          var(--duration-fast) var(--ease-default);

	position:         absolute;
	top:              calc(100% + var(--size-100));
	left:             0;
	right:            0;
	z-index:          var(--z-dropdown);
	background-color: var(--color-bg-elevated);
	border:           1px solid var(--color-border-strong);
	border-radius:    var(--radius-md);
	box-shadow:       var(--shadow-md);
	overflow:         hidden;
}

/* Kosong (sebelum user mengetik / setelah pilih) → tidak tampil sama sekali,
   supaya tidak ada kotak bergaris tipis kosong. */
.attribute-inline-create .cb__list-wrap:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   MOBILE (<640px) — sidebar → baris tab yang bisa digeser horizontal,
   semua grid jadi 1 kolom.
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
	.spesifikasi-layout {
		grid-template-columns: minmax(0, 1fr);
		gap:                   var(--size-400);
	}

	.tabs.spesifikasi-tabs {
		position:       static;
		flex-direction: row;
		max-height:     none;
		overflow-x:     auto;
		overflow-y:     hidden;
		padding:        0 0 var(--size-300);
		border-right:   0;
		border-bottom:  1px solid var(--color-border-default);
	}

	.tabs.spesifikasi-tabs .tab {
		width:       auto;
		flex:        0 0 auto;
		white-space: nowrap;
	}

	/* Aksen pindah dari sisi kiri ke dasar tab (arah tab sekarang horizontal). */
	.tabs.spesifikasi-tabs .tab-active {
		box-shadow: inset 0 -3px 0 var(--color-brand);
	}

	.spesifikasi-tab-label {
		flex: none;
	}

	.spesifikasi-tabs-sep {
		width:        1px;
		height:       auto;
		margin:       var(--size-100) var(--size-200);
		align-self:   stretch;
	}

	.spesifikasi-grid,
	.attribute-inline-create-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.attribute-inline-create-footer .btn {
		width: 100%;
	}
}
/* === FILE: spesifikasi-form.css — SELESAI === */


/* PRODUCT TIER PRICE */
/* ==========================================================================
   product-tier.css
   --------------------------------------------------------------------------
   Styling untuk _form_tier.php + kartu tier yang dirender
   product-price-tier.js::renderTierTable().

   Pola section identik .variant-section (variant-product.css) supaya dialog
   Tier, Varian & Spesifikasi terasa satu keluarga visual.

   Struktur:
     <form.form-section>
       <section.tier-section>
         <div.tier-section-header> icon + title + desc </div>
         <div#tierTableBody.tier-list>
           <div.tier-item> … </div>  (JS)  |  <div.tier-empty> … </div> (JS)
       <section.tier-section>
         <div.tier-section-header>
         <div.tier-section-body>
           <fieldset.tier-type-group> radio-card
           <div.form-group-row> …

   TIDAK mengubah .form-field / .badge / .btn — hanya wrapper & kartu di
   LUAR komponen yang sudah ada. Semua nilai dari token (tanpa hex), jadi
   otomatis benar di light & dark theme.

   DEPENDS ON: tokens/*, atoms/badge, atoms/button, atoms/icon,
               molecules/form-field (+ floating)
   ========================================================================== */


/* --------------------------------------------------------------------------
   SECTION — header icon + judul + deskripsi
   -------------------------------------------------------------------------- */
.tier-section-header {
	display:        flex;
	align-items:    center;
	gap:            var(--size-300);
	padding-bottom: var(--size-400);
	border-bottom:  1px solid var(--color-border-default);
}

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

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

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

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

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

/* Jarak antar section — .form-section sudah flex column dgn gap size-600,
   tapi tanpa pemisah visual ekstra: header punya border-bottom sendiri. */
.tier-section {
	display:        flex;
	flex-direction: column;
}


/* --------------------------------------------------------------------------
   DAFTAR TIER — kartu (dirender JS)
   -------------------------------------------------------------------------- */
.tier-list {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-200);
	padding-top:    var(--size-400);
	/* Batasi tinggi: puluhan tier tidak mendorong form keluar layar */
	max-height:     280px;
	overflow-y:     auto;
}

.tier-item {
	display:     flex;
	align-items: center;
	gap:         var(--size-300);
	padding:     var(--size-300) var(--size-400);
	background-color: var(--color-bg-surface);
	border:      1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	transition:  border-color var(--duration-fast) var(--ease-default),
	             background-color var(--duration-fast) var(--ease-default);
}

.tier-item:hover {
	border-color:     var(--color-border-strong);
	background-color: var(--color-bg-sunken);
}

.tier-item-main {
	flex:           1;
	min-width:      0; /* izinkan teks panjang terpotong, bukan mendorong lebar */
	display:        flex;
	flex-direction: column;
	gap:            var(--size-100);
}

.tier-item-head {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         var(--size-200);
}

.tier-item-meta {
	margin:    0;
	font-size: var(--text-label-sm-size);
	color:     var(--color-text-secondary);
}

.tier-item-price {
	flex-shrink:         0;
	font-size:           var(--text-body-size);
	font-weight:         var(--font-weight-bold);
	color:               var(--color-text-primary);
	font-variant-numeric: tabular-nums; /* angka rata, tidak "menari" antar baris */
	white-space:         nowrap;
}

/* Tombol hapus: redup dulu, merah saat hover — aksi destruktif tidak boleh
   terlihat "menggoda" untuk diklik tidak sengaja */
.tier-item .btn-hapus-tier {
	flex-shrink: 0;
	color:       var(--color-text-secondary);
}
.tier-item .btn-hapus-tier:hover {
	color:            var(--color-error-text);
	background-color: var(--color-error-subtle);
}
.stack-list {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-200);
}
/* Empty state */
.tier-empty {
	margin:        0;
	padding:       var(--size-600) var(--size-400);
	text-align:    center;
	font-size:     var(--text-label-sm-size);
	color:         var(--color-text-secondary);
	background-color: var(--color-bg-sunken);
	border:        1px dashed var(--color-border-default);
	border-radius: var(--radius-md);
}


/* --------------------------------------------------------------------------
   TIPE TIER — radio-card
   Pola: <label><input type=radio class="…-input"><span class="…-card"> …
   Input disembunyikan secara visual (BUKAN display:none) supaya tetap bisa
   difokus keyboard & terbaca screen reader.
   -------------------------------------------------------------------------- */
.tier-type-group {
	border:  0;
	margin:  0;
	padding: 0;
	min-width: 0;
}

.tier-type-group > .label {
	margin-bottom: var(--size-200);
}

.tier-type-options {
	display:               grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:                   var(--size-200);
}

.tier-type-option {
	position: relative;
	display:  block;
	cursor:   pointer;
}

.tier-type-input {
	position: absolute;
	inset:    0;
	width:    100%;
	height:   100%;
	margin:   0;
	opacity:  0;
	cursor:   pointer;
}

.tier-type-card {
	display:        flex;
	flex-direction: column;
	gap:            var(--size-50);
	height:         100%;
	padding:        var(--size-300) var(--size-400);
	background-color: var(--color-bg-surface);
	border:         1px solid var(--color-border-default);
	border-radius:  var(--radius-md);
	transition:     border-color var(--duration-fast) var(--ease-default),
	                background-color var(--duration-fast) var(--ease-default),
	                box-shadow var(--duration-fast) var(--ease-default);
}

.tier-type-label {
	font-size:   var(--text-body-sm-size);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-text-primary);
}

.tier-type-desc {
	font-size:   var(--text-label-sm-size);
	line-height: 1.35;
	color:       var(--color-text-secondary);
}

.tier-type-option:hover .tier-type-card {
	border-color: var(--color-border-strong);
}

/* Terpilih: border brand + tint + ring tipis (bukan hanya warna → tidak
   bergantung pada persepsi warna saja, ring memberi sinyal bentuk juga) */
.tier-type-input:checked + .tier-type-card {
	border-color:     var(--color-brand);
	background-color: var(--color-brand-subtle);
	box-shadow:       0 0 0 1px var(--color-brand);
}
.tier-type-input:checked + .tier-type-card .tier-type-label {
	color: var(--color-brand-text);
}

/* Fokus keyboard */
.tier-type-input:focus-visible + .tier-type-card {
	outline:        2px solid var(--color-border-focus);
	outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   RESPONSIVE — radio-card jadi 1 kolom di layar sempit
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
	.tier-type-options {
		grid-template-columns: 1fr;
	}

	.tier-item {
		padding: var(--size-300);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tier-item,
	.tier-type-card {
		transition: none;
	}
}/* PRODUCT TIER PRICE */