/* ============================================
	CUSTOM CSS
============================================ */

/* Reduce overall font size */
body, .fi, .fi-root {
	font-size: 0.9rem !important;
}

/* Reduce padding pada komponen utama */
.fi-px-3 { @apply px-2! !important; }
.fi-py-3 { @apply py-2! !important; }
.fi-p-4 { @apply p-3! !important; }
.fi-p-6 { @apply p-4! !important; }

/* Reduce spacing pada form fields */
.fi-form-field {
	@apply mb-3! !important;
}

/* Reduce height pada input fields */
.fi-input {
	@apply h-9! !important;
	@apply py-1.5! !important;
}

/* Reduce height pada buttons */
.fi-btn {
	@apply h-9! !important;
	@apply px-3! !important;
	@apply text-sm! !important;
}

/* Reduce table row height */
.fi-table-row {
	@apply py-2! !important;
}

.fi-topbar {
	min-height: calc(var(--spacing) * 12) !important;
}

@media (width >= 64rem) {
.fi-body-has-topbar .fi-sidebar {
			top: 0rem !important;
			height: 100dvh !important;
	}
}

/* Reduce sidebar item padding */
.fi-sidebar-item {
	@apply py-1.5! !important;
	@apply px-2! !important;
}

/* Reduce card padding */
.fi-card {
	@apply p-4! !important;
}

/* Reduce heading sizes */
.fi-h1 { @apply text-2xl! !important; }
.fi-h2 { @apply text-xl! !important; }
.fi-h3 { @apply text-lg! !important; }

.fi-sidebar-header {
	height: calc(var(--spacing) * 8) !important;
	margin-bottom: 0 !important;
	margin-top: 20px !important;
}

.fi-sidebar {
	background-color: #eeeeee !important;
}

.dark .fi-sidebar {
	background-color: rgb(37, 37, 37) !important;
} 

.fi-topbar {
	background-color: #eeeeee !important;
}

.dark .fi-topbar {
	background-color: rgb(37, 37, 37) !important;
} 

.peek-action {
	display: none !important;
}

.view-detail-from-peek-action-button {
	margin-top: 20px !important;
}

.fi-avatar {
	object-fit:contain !important;
}

.fi-fo-modal-table-select {
	&:not(.fi-fo-modal-table-select-multiple) {
			display: block !important;
	}
}


/* THIS IS FOR CUSTOM TABLE SEARCH INPUT TO FULL WIDTH */
.table-search-input-full-width .fi-ta-actions {
  display: none !important;
}

.table-search-input-full-width .fi-ta-actions + div {
  width: 100% !important;
}

.table-search-input-full-width .fi-ta-search-field {
  width: 100% !important;
}
/* ********* */

.fi-auth-theme-switcher-wrapper {
	transform: translate(-50%, -50%) !important;
}

.fi-auth-card {
	z-index: 5 !important;
	/* border-radius: 0 !important; */
	padding-top: 20px !important;
}

.fi-auth-card .fi-logo {
	display: none !important;
}

.fi-auth-card .fi-simple-header-heading {
	text-align: center !important;
	width: 100% !important;
}

.fi-fo-field {
	& .fi-fo-field-label-col {
			&.fi-vertical-align-center {
					@media (width >= 40rem) {
						align-items: start !important;
						padding-top: 5px !important;
					}
			}
	}
}

.fi-modal-header, .fi-modal-footer {
	background-color: oklch(26.8% 0.007 34.298) !important;
}

.fi-modal-heading {
	color: #fff !important;	
}

.fi-modal-header {
	padding-top: calc(var(--spacing) * 2);
	padding-bottom: calc(var(--spacing) * 2);
	border-top-right-radius: var(--radius-xl) !important;
	border-top-left-radius: var(--radius-xl) !important;
}

.fi-modal-footer {
	padding-top: calc(var(--spacing) * 2);
	padding-bottom: calc(var(--spacing) * 2);
	border-bottom-right-radius: var(--radius-xl) !important;
	border-bottom-left-radius: var(--radius-xl) !important;
}

.fi-modal-close-btn {
	color: #fff !important;
	top: calc(var(--spacing) * 2);
}

.fi-modal-window {
	border-radius: var(--radius-xl) !important;
}

.fi-in-entry-label {
	color: var(--color-neutral-500) /* oklch(55.6% 0 0) = #737373 */;
}
/* 
  ALASAN ANIMASI TIDAK JALAN:

  1. Untuk animasi progress bar bekerja, properti 'width' pada .progress-bar harus berubah secara dinamis dari 0 ke value tertentu, 
     biasanya melalui JavaScript atau transisi CSS yang di-trigger perubahan kelas. Jika width selalu 0 atau tidak berubah, tidak ada animasi yang tampil.
  2. Animasi stripes pada .progress-bar::after akan selalu tampil, tapi mungkin efek progress-nya sendiri (lebar progress) tidak bergerak kalau width tidak berubah.
  3. Pastikan ada JavaScript atau interaksi lain yang mengubah width .progress-bar (misalnya width: 70% untuk 70% progress).

  CONTOH FIX:
  - Di HTML, beri .progress-bar dengan inline style atau class yang mengubah width (misal: style="width:40%").

  KODE DIBAWAH TIDAK ADA MASALAH DENGAN ANIMASI STRIPES,
  TAPI UNTUK ANIMASI PROGRESS, PASTIKAN width BERUBAH DARI 0 KE VALUE TARGET SECARA DINAMIS AGAR TRANSITION BEKERJA.
*/

.progress-container {
	width: 100%;
	background-color: #e5e7eb;
	border-radius: 0.375rem;
	height: 1.5rem;
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.progress-bar {
	height: 100%;
	border-radius: 0.375rem;
	transition: width 0.3s, background-color 0.3s; /* width HARUS berubah agar ada animasi */
	width: 0;
	/* contoh: tambahkan class .w-70 { width: 70% } lalu toggle class ke element .progress-bar */
}
.progress-text {
	text-align: center;
	font-size: 0.875rem;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-weight: 600;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.progress-bar::after {
	content: '';
	display: block;
	height: 100%;
	border-radius: 0.375rem;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%);
	background-size: 40px 40px;
	animation: progress-bar-stripes 1s linear infinite;
}
@keyframes progress-bar-stripes {
	from {
			background-position: 40px 0;
	}
	to {
			background-position: 0 0;
	}
}