@import '@simonwep/pickr/dist/themes/classic.min.css';
@import '@simonwep/pickr/dist/themes/monolith.min.css';
@import '@simonwep/pickr/dist/themes/nano.min.css';

/* ============================================
   Color Picker Theme Customization
   ============================================
   Customize Pickr to match Metronic design system
   using CSS variables mapped to Tailwind tokens.
*/

:root {
	/* ============================================
	   Picker Container
	   ============================================ */
	--pcr-color: var(--foreground);
	--pcr-bg: var(--popover);
	--pcr-border: var(--border);
	--pcr-radius: 0.75rem;
	--pcr-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

	/* ============================================
	   Preview Area
	   ============================================ */
	--pcr-preview-radius: 0.5rem;

	/* ============================================
	   Sliders (Hue, Opacity)
	   ============================================ */
	--pcr-slider-radius: 0.25rem;
	--pcr-slider-bg: var(--border);
	--pcr-slider-thumb-bg: var(--popover);
	--pcr-slider-thumb-border: var(--border);
	--pcr-slider-thumb-size: 0.875rem;

	/* ============================================
	   Input Fields
	   ============================================ */
	--pcr-input-bg: var(--popover);
	--pcr-input-text: var(--foreground);
	--pcr-input-border: var(--border);
	--pcr-input-radius: 0.375rem;
	--pcr-input-focus-border: var(--primary);

	/* ============================================
	   Buttons
	   ============================================ */
	--pcr-btn-bg: var(--primary);
	--pcr-btn-text: var(--primary-foreground);
	--pcr-btn-hover-bg: var(--primary);
	--pcr-btn-radius: 0.375rem;
}

/* ============================================
   Picker Container Base Styles
   ============================================ */

.pcr-app {
	background-color: var(--pcr-bg);
	border: 1px solid var(--pcr-border);
	border-radius: var(--pcr-radius);
	box-shadow: var(--pcr-shadow);
	color: var(--pcr-color);
	@apply shadow-md;
	z-index: 1050;
	/* position: fixed is handled by Pickr library */
}

/* ============================================
   Dark Mode Support
   ============================================ */

.dark .pcr-app {
	--pcr-bg: var(--popover);
	--pcr-color: var(--foreground);
	--pcr-border: var(--border);
}

/* ============================================
   Input Mode Positioning
   ============================================ */

.pcr-app[data-kt-color-picker-input] {
	@apply shadow-lg;
	z-index: 100;
}

/* ============================================
   Override Pickr Default Styles
   ============================================ */

.pcr-app .pcr-interaction {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex-wrap: nowrap;
}

.pcr-app .pcr-interaction button,
.pcr-app .pcr-interaction input[type="button"],
.pcr-app .pcr-interaction .pcr-save,
.pcr-app .pcr-interaction .pcr-clear,
.pcr-app .pcr-interaction .pcr-cancel {
	margin-left: 0;
	margin-right: 0;
}

.pcr-app .pcr-interaction input {
	background-color: var(--pcr-input-bg);
	color: var(--pcr-input-text);
	border: 1px solid var(--pcr-input-border);
	border-radius: var(--pcr-input-radius);
	@apply px-2 py-1 text-sm;
}

.pcr-app .pcr-interaction input.pcr-result {
	width: 80px;
	max-width: 80px;
	min-width: 80px;
}

.pcr-app .pcr-interaction input:focus {
	border-color: var(--pcr-input-focus-border);
	@apply outline-none ring-2 ring-primary ring-offset-1;
}

/* All color picker buttons - consistent rounded square (28px x 28px) */
.pcr-button,
.pickr .pcr-button,
.pickr button.pcr-button,
.pcr-app .pcr-button,
.pcr-app button.pcr-button {
	width: 28px;
	height: 28px;
	min-width: 28px;
	min-height: 28px;
	border-radius: var(--pcr-btn-radius, 0.375rem);
	overflow: hidden;
	@apply transition-colors;
}

/* ============================================
   Theme Styling
   ============================================ */

.pcr-app[class*="pcr-monolith"] {
	background-color: var(--pcr-bg);
	border: 1px solid var(--pcr-border);
	border-radius: var(--pcr-radius);
	box-shadow: var(--pcr-shadow);
	color: var(--pcr-color);
}

.pcr-app[class*="pcr-nano"] {
	background-color: var(--pcr-bg);
	border: 1px solid var(--pcr-border);
	border-radius: var(--pcr-radius);
	box-shadow: var(--pcr-shadow);
	color: var(--pcr-color);
}

.pcr-app .pcr-button:hover {
	background-color: var(--pcr-btn-hover-bg);
}

/* ============================================
   Slider Styling
   ============================================ */

.pcr-app .pcr-slider {
	border-radius: var(--pcr-slider-radius);
	background-color: var(--pcr-slider-bg);
}

.pcr-app .pcr-slider::-webkit-slider-thumb {
	background-color: var(--pcr-slider-thumb-bg);
	border: 1px solid var(--pcr-slider-thumb-border);
	border-radius: 50%;
	width: var(--pcr-slider-thumb-size);
	height: var(--pcr-slider-thumb-size);
}

.pcr-app .pcr-slider::-moz-range-thumb {
	background-color: var(--pcr-slider-thumb-bg);
	border: 1px solid var(--pcr-slider-thumb-border);
	border-radius: 50%;
	width: var(--pcr-slider-thumb-size);
	height: var(--pcr-slider-thumb-size);
}

/* ============================================
   Color Preview Box in Input
   ============================================ */

.kt-color-picker-preview {
	position: absolute;
	left: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 0.375rem;
	border: 1px solid var(--border);
	background-color: #3F51B5;
	flex-shrink: 0;
	pointer-events: none;
	z-index: 1;
}

.kt-input {
	position: relative;
	display: flex;
	align-items: center;
}

/* Input mode - consistent rounded corners */
.kt-input input[data-kt-color-picker-input-mode="true"],
input[data-kt-color-picker-input-mode="true"] {
	position: relative;
	border-radius: var(--pcr-btn-radius, 0.375rem);
}