/******************************************************
    COLOR VARIABLES
******************************************************/
:root {
	--white: #FFFFFF;
	/* Blue */
	--blue-50: #EFF6FF;
	--blue-100: #DBEAFE;
	--blue-200: #BFDBFE;
	--blue-300: #93C5FD;
	--blue-400: #60A5FA;
	--blue-500: #3B82F6;
	--blue-600: #0EA5E9;
	--blue-700: #0284C7;
	--blue-800: #1E40AF;
	--blue-900: #1E3A8A;
	/* Emerald */
	--emerald-50: #ECFDF5;
	--emerald-100: #D1FAE5;
	--emerald-200: #A7F3D0;
	--emerald-300: #6EE7B7;
	--emerald-400: #34D399;
	--emerald-500: #10B981;
	--emerald-600: #14B8A6;
	--emerald-700: #0D9488;
	--emerald-800: #065F46;
	/* Red */
	--red-50: #FEF2F2;
	--red-100: #FEE2E2;
	--red-200: #FECACA;
	--red-300: #FCA5A5;
	--red-400: #F87171;
	--red-600: #EF4444;
	--red-700: #DC2626;
	--red-800: #991B1B;
	/* Amber */
	--amber-50: #FFFBEB;
	--amber-100: #FEF3C7;
	--amber-200: #FDE68A;
	--amber-300: #FCD34D;
	--amber-400: #FBBF24;
	--amber-500: #F59E0B;
	--amber-700: #B45309;
	--amber-800: #92400E;
	--amber-900: #78350F;
	/* Slate */
	--slate-50: #F9FAFB;
	--slate-100: #F3F4F6;
	--slate-200: #E5E7EB;
	--slate-300: #CBD5E1;
	--slate-400: #9CA3AF;
	--slate-500: #6B7280;
	--slate-600: #4B5563;
	--slate-700: #374151;
}

/******************************************************
    BASE BUTTON
******************************************************/
.btn-custom {
	border-radius: 9999px !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
	cursor: pointer !important;
}

	.btn-custom:disabled {
		opacity: 0.6 !important;
		cursor: not-allowed !important;
	}

/******************************************************
    SAVE
******************************************************/
.btn-save {
	background-color: var(--blue-600) !important;
	color: var(--white) !important;
	border: none !important;
}

	.btn-save:hover:not(:disabled):not(.disabled) {
		background-color: var(--blue-700) !important;
	}

	.btn-save:active:not(:disabled):not(.disabled) {
		background-color: var(--blue-800) !important;
	}

	.btn-save:focus-visible:not(:disabled):not(.disabled) {
		outline: 2px solid var(--blue-300) !important;
		outline-offset: 2px !important;
	}

	.btn-save:disabled,
	.btn-save.disabled {
		background-color: var(--blue-500) !important;
		color: var(--slate-200) !important;
		pointer-events: none !important;
	}

/******************************************************
    SAVE LIGHT
******************************************************/
.btn-save-light {
	background-color: var(--blue-50) !important;
	color: var(--blue-600) !important;
	border: 1px solid var(--blue-200) !important;
}

	.btn-save-light:hover:not(:disabled):not(.disabled) {
		background-color: var(--blue-100) !important;
		color: var(--blue-700) !important;
		border-color: var(--blue-300) !important;
	}

	.btn-save-light:active:not(:disabled):not(.disabled) {
		background-color: var(--blue-200) !important;
		color: var(--blue-800) !important;
		border-color: var(--blue-400) !important;
	}

	.btn-save-light:focus-visible:not(:disabled):not(.disabled) {
		outline: 2px solid var(--blue-300) !important;
		outline-offset: 2px !important;
	}

	.btn-save-light:disabled,
	.btn-save-light.disabled {
		background-color: var(--blue-50) !important;
		color: var(--blue-300) !important;
		border-color: var(--blue-200) !important;
		pointer-events: none !important;
	}

/******************************************************
    NEW
******************************************************/
.btn-new {
	background-color: var(--emerald-600) !important;
	color: var(--white) !important;
	border: none !important;
}

	.btn-new:hover:not(:disabled):not(.disabled) {
		background-color: var(--emerald-700) !important;
	}

	.btn-new:active:not(:disabled):not(.disabled) {
		background-color: var(--emerald-800) !important;
	}

	.btn-new:focus-visible:not(:disabled):not(.disabled) {
		outline: 2px solid var(--emerald-300) !important;
		outline-offset: 2px !important;
	}

	.btn-new:disabled,
	.btn-new.disabled {
		background-color: var(--emerald-500) !important;
		color: var(--emerald-50) !important;
		pointer-events: none !important;
	}

/******************************************************
    NEW LIGHT
******************************************************/
.btn-new-light {
	background-color: var(--emerald-50) !important;
	color: var(--emerald-600) !important;
	border: 1px solid var(--emerald-200) !important;
}

	.btn-new-light:hover:not(:disabled):not(.disabled) {
		background-color: var(--emerald-100) !important;
		color: var(--emerald-700) !important;
		border-color: var(--emerald-300) !important;
	}

	.btn-new-light:active:not(:disabled):not(.disabled) {
		background-color: var(--emerald-200) !important;
		color: var(--emerald-800) !important;
		border-color: var(--emerald-400) !important;
	}

	.btn-new-light:focus-visible:not(:disabled):not(.disabled) {
		outline: 2px solid var(--emerald-300) !important;
		outline-offset: 2px !important;
	}

	.btn-new-light:disabled,
	.btn-new-light.disabled {
		background-color: var(--emerald-50) !important;
		color: var(--emerald-300) !important;
		border-color: var(--emerald-200) !important;
		pointer-events: none !important;
	}

/******************************************************
    DELETE
******************************************************/
.btn-delete {
	background-color: var(--red-600) !important;
	color: var(--white) !important;
	border: none !important;
}

	.btn-delete:hover:not(:disabled):not(.disabled) {
		background-color: var(--red-700) !important;
	}

	.btn-delete:active:not(:disabled):not(.disabled) {
		background-color: var(--red-800) !important;
	}

	.btn-delete:focus-visible:not(:disabled):not(.disabled) {
		outline: 2px solid var(--red-300) !important;
		outline-offset: 2px !important;
	}

	.btn-delete:disabled,
	.btn-delete.disabled {
		background-color: var(--red-600) !important;
		color: var(--red-100) !important;
		pointer-events: none !important;
	}

/******************************************************
    DELETE LIGHT
******************************************************/
.btn-delete-light {
	background-color: var(--red-50) !important;
	color: var(--red-600) !important;
	border: 1px solid var(--red-200) !important;
}

	.btn-delete-light:hover:not(:disabled):not(.disabled) {
		background-color: var(--red-100) !important;
		color: var(--red-700) !important;
		border-color: var(--red-300) !important;
	}

	.btn-delete-light:active:not(:disabled):not(.disabled) {
		background-color: var(--red-200) !important;
		color: var(--red-800) !important;
		border-color: var(--red-400) !important;
	}

	.btn-delete-light:focus-visible:not(:disabled):not(.disabled) {
		outline: 2px solid var(--red-300) !important;
		outline-offset: 2px !important;
	}

	.btn-delete-light:disabled,
	.btn-delete-light.disabled {
		background-color: var(--red-50) !important;
		color: var(--red-300) !important;
		border-color: var(--red-200) !important;
		pointer-events: none !important;
	}

/******************************************************
    CLEAR
******************************************************/
.btn-clear {
	background-color: var(--amber-50) !important;
	border: 1px solid var(--amber-200) !important;
	color: var(--amber-800) !important;
}

	.btn-clear:hover:not(:disabled):not(.disabled) {
		background-color: var(--amber-100) !important;
	}

	.btn-clear:active:not(:disabled):not(.disabled) {
		background-color: var(--amber-200) !important;
	}

	.btn-clear:focus-visible:not(:disabled):not(.disabled) {
		outline: 2px solid var(--amber-300) !important;
		outline-offset: 2px !important;
	}

	.btn-clear:disabled,
	.btn-clear.disabled {
		background-color: var(--amber-100) !important;
		border-color: var(--amber-200) !important;
		color: var(--amber-500) !important;
		pointer-events: none !important;
	}

/******************************************************
    CLEAR LIGHT
******************************************************/
.btn-clear-light {
	background-color: var(--amber-50) !important;
	color: var(--amber-800) !important;
	border: 1px solid var(--amber-200) !important;
}

	.btn-clear-light:hover:not(:disabled):not(.disabled) {
		background-color: var(--amber-100) !important;
		color: var(--amber-700) !important;
		border-color: var(--amber-300) !important;
	}

	.btn-clear-light:active:not(:disabled):not(.disabled) {
		background-color: var(--amber-200) !important;
		color: var(--amber-900) !important;
		border-color: var(--amber-400) !important;
	}

	.btn-clear-light:focus-visible:not(:disabled):not(.disabled) {
		outline: 2px solid var(--amber-300) !important;
		outline-offset: 2px !important;
	}

	.btn-clear-light:disabled,
	.btn-clear-light.disabled {
		background-color: var(--amber-50) !important;
		color: var(--amber-300) !important;
		border-color: var(--amber-200) !important;
		pointer-events: none !important;
	}

/******************************************************
    IMPORT
******************************************************/
.btn-import,
.btn-import-light {
	background-color: var(--blue-50) !important;
	color: var(--blue-700) !important;
	border: 1px solid var(--blue-200) !important;
}

	.btn-import:hover:not(:disabled):not(.disabled),
	.btn-import-light:hover:not(:disabled):not(.disabled) {
		background-color: var(--blue-100) !important;
		color: var(--blue-800) !important;
		border-color: var(--blue-300) !important;
	}

	.btn-import:active:not(:disabled):not(.disabled),
	.btn-import-light:active:not(:disabled):not(.disabled) {
		background-color: var(--blue-100) !important;
		color: var(--blue-900) !important;
		border-color: var(--blue-400) !important;
	}

	.btn-import:focus-visible:not(:disabled):not(.disabled),
	.btn-import-light:focus-visible:not(:disabled):not(.disabled) {
		outline: 2px solid var(--blue-300) !important;
		outline-offset: 2px !important;
	}

	.btn-import:disabled,
	.btn-import.disabled,
	.btn-import-light:disabled,
	.btn-import-light.disabled {
		background-color: var(--blue-50) !important;
		color: var(--blue-300) !important;
		border-color: var(--blue-200) !important;
		pointer-events: none !important;
	}

/******************************************************
    CANCEL
******************************************************/
.btn-cancel {
	background-color: var(--slate-500) !important;
	color: var(--white) !important;
	border: none !important;
}

	.btn-cancel:hover:not(:disabled):not(.disabled) {
		background-color: var(--slate-600) !important;
	}

	.btn-cancel:active:not(:disabled):not(.disabled) {
		background-color: var(--slate-700) !important;
	}

	.btn-cancel:focus-visible:not(:disabled):not(.disabled) {
		outline: 2px solid var(--slate-300) !important;
		outline-offset: 2px !important;
	}

	.btn-cancel:disabled,
	.btn-cancel.disabled {
		background-color: var(--slate-400) !important;
		color: var(--slate-200) !important;
		pointer-events: none !important;
	}

/******************************************************
    CANCEL LIGHT
******************************************************/
.btn-cancel-light {
	background-color: var(--slate-100) !important;
	color: var(--slate-500) !important;
	border: 1px solid var(--slate-300) !important;
}

	.btn-cancel-light:hover:not(:disabled):not(.disabled) {
		background-color: var(--slate-200) !important;
		color: var(--slate-600) !important;
		border-color: var(--slate-300) !important;
	}

	.btn-cancel-light:active:not(:disabled):not(.disabled) {
		background-color: var(--slate-300) !important;
		color: var(--slate-700) !important;
		border-color: var(--slate-400) !important;
	}

	.btn-cancel-light:focus-visible:not(:disabled):not(.disabled) {
		outline: 2px solid var(--slate-300) !important;
		outline-offset: 2px !important;
	}

	.btn-cancel-light:disabled,
	.btn-cancel-light.disabled {
		background-color: var(--slate-50) !important;
		color: var(--slate-300) !important;
		border-color: var(--slate-200) !important;
		pointer-events: none !important;
	}