/* ════════════════════════════════════════════════════════════════
   CF-CHIP KIT - Shared chip-style checkbox/radio/select styles
   Used by:
   - helpers/forms/fields/checklist.blade.php (checkbox_multiple)
   - front/post/createOrEdit/partials/fields.blade.php (select, radio)
   - front/search/partials/sidebar/fields.blade.php (search filters)
   ════════════════════════════════════════════════════════════════ */

/* ── Base Grid ── */
.cf-chip-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
	gap: 10px;
	padding: 2px;
}

/* ── Toggle (hidden checkbox/radio) ── */
.cf-chip-toggle {
	display: none;
}

/* ── Label (the visible chip) ── */
.cf-chip-label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border: 2px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
	color: #374151;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	user-select: none;
	line-height: 1.3;
}
.cf-chip-label:hover {
	border-color: rgba(34, 34, 34, 0.4);
	background: rgba(34, 34, 34, 0.04);
	box-shadow: 0 4px 14px rgba(34, 34, 34, 0.08);
	transform: translateY(-1px);
}
.cf-chip-label:active {
	transform: translateY(0) scale(0.98);
}

/* ── Chip Icon ── */
.cf-chip-label .cf-chip-icon {
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: 6px;
	border: 2px solid #d1d5db;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
	background: #f9fafb;
}

/* ── Checked State ── */
.cf-chip-toggle:checked + .cf-chip-label {
	background: rgba(34, 34, 34, 0.08);
	border-color: #222;
	color: #222;
	box-shadow: 0 2px 8px rgba(34, 34, 34, 0.15);
}
.cf-chip-toggle:checked + .cf-chip-label .cf-chip-icon {
	background: #222;
	border-color: #222;
	font-size: 11px;
	color: #fff;
	border-radius: 6px;
}

/* ── Radio (single-select) variant ── */
.cf-chip-icon.cf-chip-icon-radio { border-radius: 50%; }
.cf-chip-toggle:checked + .cf-chip-label .cf-chip-icon.cf-chip-icon-radio {
	border-radius: 50%;
	background: #222;
	border-color: #222;
	font-size: 0;
}
.cf-chip-toggle:checked + .cf-chip-label .cf-chip-icon.cf-chip-icon-radio::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	display: block;
}

/* ── Sidebar compact mode ── */
#leftSidebar .cf-chip-grid {
	grid-template-columns: 1fr;
	gap: 6px;
}
#leftSidebar .cf-chip-label {
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 0.82rem;
	border-width: 1.5px;
}
#leftSidebar .cf-chip-label .cf-chip-icon {
	width: 18px;
	height: 18px;
	min-width: 18px;
	border-radius: 5px;
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
	.cf-chip-grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: 8px;
	}
	.cf-chip-label {
		padding: 9px 12px;
		font-size: 0.82rem;
	}
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .cf-chip-label {
	background: var(--il-surface-2, #3A3B3C) !important;
	border-color: var(--il-border, #3E4042) !important;
	color: var(--il-text-2, #B0B3B8) !important;
}
[data-bs-theme="dark"] .cf-chip-label:hover {
	border-color: var(--il-accent, #6366f1) !important;
	background: var(--il-accent-soft, rgba(99,102,241,0.12)) !important;
	box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
	color: var(--il-text, #E4E6EB) !important;
}
[data-bs-theme="dark"] .cf-chip-label .cf-chip-icon {
	border-color: var(--il-border-2, #65686C) !important;
	background: var(--il-surface, #242526) !important;
}
[data-bs-theme="dark"] .cf-chip-toggle:checked + .cf-chip-label {
	background: var(--il-accent-soft, rgba(99,102,241,0.15)) !important;
	border-color: var(--il-accent, #6366f1) !important;
	color: var(--il-accent-text, #c7d2fe) !important;
	box-shadow: 0 2px 8px rgba(99,102,241, 0.2) !important;
}
[data-bs-theme="dark"] .cf-chip-toggle:checked + .cf-chip-label .cf-chip-icon {
	background: var(--il-accent, #6366f1) !important;
	border-color: var(--il-accent, #6366f1) !important;
	color: #fff !important;
}
[data-bs-theme="dark"] .cf-chip-toggle:checked + .cf-chip-label .cf-chip-icon.cf-chip-icon-radio {
	background: var(--il-accent, #6366f1) !important;
	border-color: var(--il-accent, #6366f1) !important;
}