@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@layer base {
	body{
		font-family: "Montserrat", sans-serif;
		font-size: 14px;
	}
}
html {
	scroll-behavior: smooth;
}
input:disabled, input:read-only {
	background-color: #e5e7eb;
}
.scrollbar-thin{scrollbar-width: thin;}
.no-scrollbar::-webkit-scrollbar {display: none;}
.no-scrollbar {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

/* Transisi Halus */
.transition-all { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* Overlay untuk Mobile */
/* #sidebar-overlay { display: none; }
#sidebar-overlay.show { display: block; } */

/* Fly-out Menu saat Collapsed (Desktop/Tablet) */
@media (min-width: 1024px) {
	#drawer-navigation.is-collapsed { width: 64px !important; }
	#drawer-navigation.is-collapsed .sidebar-text { display: none; }
	#drawer-navigation.is-collapsed .arrow-icon {position: absolute; transform: rotate(-90deg); margin-right:-2px;right:0;width: 0.75rem;}
	#drawer-navigation.is-collapsed li:hover > .dropdown-container {
		display: block !important;
		position: absolute;
		left: 48px;
		top: 0;
		width: 200px;
		z-index: 100;
		background: white;
		border: 1px solid #e5e7eb;
		border-radius: 0 0.2rem 0.2rem 0;
	}
}

/* Mobile Style (< 768px) */
@media (max-width: 1023px) {
	#drawer-navigation { transform: translateX(-100%); width: 280px !important; }
	#drawer-navigation.open { transform: translateX(0); }
	#navbar, #maincontent { margin-left: 0 !important; }
}

@keyframes bounce-in {
    0% {transform: scale(0.5);opacity: 0;}
    70% {transform: scale(1.05);opacity: 1;}
    100% {transform: scale(1);opacity: 1;}
}
@keyframes bounce-out {
    0% {transform: scale(1);opacity: 1;}
    70% {transform: scale(1.05);opacity: 1;}
    100% {transform: scale(0.5);opacity: 0;}
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}
.animate-bounce-in {animation: bounce-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}
.animate-bounce-out {animation: bounce-out 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}
.animate-fade-in {animation: fadeIn 0.4s ease-out forwards;}

/* CSS autocomplete */
.autocomplete-suggestions { border: 1px solid #9ca3af; background: #FFF; overflow: auto; scrollbar-width: thin;}
.autocomplete-suggestion { padding: 5px 8px 4px; white-space: nowrap; overflow: hidden; cursor: pointer;line-height:1.3em;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

/* HIGHLIGHT KETIKA DRAG & DROP IMAGE */
#dropzone-container.drag-over {
    border-color: #3b82f6; /* Warna biru (Tailwind blue-500) */
    background-color: #eff6ff;
}