/*
 * Migration Fixes CSS - Perbaikan untuk masalah migrasi Tailwind ke Bootstrap 5
 * File ini berisi perbaikan untuk kelas-kelas yang tidak terkonversi dengan benar
 * atau memiliki masalah styling setelah migrasi
 */

/* ============================================
   RESET & BASE FIXES
   ============================================ */

/* Fix untuk kelas yang tidak standar */
.start-0-md {
	left: 0 !important;
}
.d-none-md {
	display: none !important;
}
.d-block-md {
	display: block !important;
}
.position-fixed-md {
	position: fixed !important;
}
.top-0-md {
	top: 0 !important;
}
.bottom-0-md {
	bottom: 0 !important;
}
.overflow-y-auto-md {
	overflow-y: auto !important;
}
.flex-row-md {
	flex-direction: row !important;
}
.flex-no-wrap {
	flex-wrap: nowrap !important;
}
.overflow-hidden-md {
	overflow: hidden !important;
}
.flex-column-md {
	flex-direction: column !important;
}
.align-items-stretch-md {
	align-items: stretch !important;
}
.mh-100-md {
	min-height: 100% !important;
}
.px-0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.mw-100-md {
	max-width: 100% !important;
}
.pb-2-md {
	padding-bottom: 0.5rem !important;
}
.me-0 {
	margin-right: 0 !important;
}
.whitespace-no-wrap {
	white-space: nowrap !important;
}
.w-64 {
	width: 16rem !important;
}
.z-1 {
	z-index: 1 !important;
}
.z-3 {
	z-index: 3 !important;
}
.justify-content-start-md {
	justify-content: flex-start !important;
}
.flex-wrap {
	flex-wrap: wrap !important;
}
.px-md-5 {
	padding-left: 3rem !important;
	padding-right: 3rem !important;
}
.d-flex-md {
	display: flex !important;
}
.d-flex-column {
	display: flex !important;
	flex-direction: column !important;
}
.d-flex-wrap {
	display: flex !important;
	flex-wrap: wrap !important;
}
.d-inline-block {
	display: inline-block !important;
}
.d-block {
	display: block !important;
}
.shadow-none-md {
	box-shadow: none !important;
}
.mt-4-md {
	margin-top: 1.5rem !important;
}
.mw-100-md {
	max-width: 100% !important;
}
.border-solid {
	border-style: solid !important;
}
.justify-content-between {
	display: flex !important;
	justify-content: space-between !important;
}

/* ============================================
   NAVIGATION FIXES
   ============================================ */

/* Fix untuk navigation header */
.navbar-custom {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(10px) !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.sidebar-custom {
	width: 280px !important;
	min-height: 100vh !important;
	background: white !important;
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 1000 !important;
	transition: all 0.3s ease !important;
}

.sidebar-custom .nav-link {
	color: #333 !important;
	padding: 12px 20px !important;
	border-radius: 8px !important;
	margin: 2px 10px !important;
	transition: all 0.2s ease !important;
}

.sidebar-custom .nav-link:hover {
	background-color: #f8f9fa !important;
	color: #0d6efd !important;
}

.sidebar-custom .nav-link.active {
	background-color: #0d6efd !important;
	color: white !important;
}

/* Mobile navigation fixes */
@media (max-width: 768px) {
	.sidebar-custom {
		transform: translateX(-100%) !important;
	}

	.sidebar-custom.show {
		transform: translateX(0) !important;
	}

	.navbar-custom {
		padding: 0.5rem 1rem !important;
	}
}

/* ============================================
   LAYOUT FIXES
   ============================================ */

/* Fix untuk layout classes yang bermasalah */
.w-full {
	width: 100% !important;
}
.w-12\/12 {
	width: 100% !important;
}
.xl\:w-12\/12 {
	width: 100% !important;
}
.xl\:w-4\/12 {
	width: 100% !important;
}
.xl\:w-8\/12 {
	width: 100% !important;
}

@media (min-width: 1200px) {
	.xl\:w-4\/12 {
		width: 33.333333% !important;
	}
	.xl\:w-8\/12 {
		width: 66.666667% !important;
	}
	.xl\:w-12\/12 {
		width: 100% !important;
	}
}

/* Fix untuk padding dan margin */
.md\:pt-32 {
	padding-top: 2rem !important;
}
.pt-12 {
	padding-top: 3rem !important;
}
.pb-32 {
	padding-bottom: 8rem !important;
}
.md\:px-10 {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

@media (min-width: 768px) {
	.md\:pt-32 {
		padding-top: 8rem !important;
	}
	.md\:px-10 {
		padding-left: 2.5rem !important;
		padding-right: 2.5rem !important;
	}
}

/* Fix untuk negative margin */
.-m-24 {
	margin: -6rem !important;
}

@media (max-width: 768px) {
	.-m-24 {
		margin: -2rem !important;
	}
}

/* ============================================
   FORM FIXES
   ============================================ */

/* Fix untuk form controls yang masih menggunakan kelas Tailwind */
.form-control-tailwind-fix {
	margin-top: 0.5rem !important;
	background-color: white !important;
	border: 1px solid #ced4da !important;
	border-radius: 0.5rem !important;
	padding: 0.5rem 1rem !important;
	display: block !important;
	width: 100% !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	line-height: 1.5 !important;
	transition:
		border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out !important;
}

.form-control-tailwind-fix:focus {
	outline: none !important;
	border-color: #0d6efd !important;
	box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

/* Selector untuk mengganti kelas Tailwind yang masih ada */
.mt-2.bg-white.focus\:outline-none.focus\:shadow-outline.border-gray-300.rounded-lg.py-2.px-4.block.w-full.appearance-none.leading-normal,
select.mt-2.bg-white.focus\:outline-none.focus\:shadow-outline.border-gray-300.rounded-lg.py-2.px-4.block.w-full.appearance-none.leading-normal {
	margin-top: 0.5rem !important;
	background-color: white !important;
	border: 1px solid #ced4da !important;
	border-radius: 0.5rem !important;
	padding: 0.5rem 1rem !important;
	display: block !important;
	width: 100% !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	line-height: 1.5 !important;
}

.mt-2.bg-white.focus\:outline-none.focus\:shadow-outline.border-gray-300.rounded-lg.py-2.px-4.block.w-full.appearance-none.leading-normal:focus,
select.mt-2.bg-white.focus\:outline-none.focus\:shadow-outline.border-gray-300.rounded-lg.py-2.px-4.block.w-full.appearance-none.leading-normal:focus {
	outline: none !important;
	border-color: #0d6efd !important;
	box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

/* ============================================
   BUTTON FIXES
   ============================================ */

/* Fix untuk button classes yang masih menggunakan Tailwind */
.bg-green-500.hover\:bg-green-700.text-white.font-bold.py-2.px-3.rounded,
.bg-green-500 {
	background-color: #198754 !important;
	color: white !important;
	font-weight: 700 !important;
	padding: 0.5rem 0.75rem !important;
	border-radius: 0.375rem !important;
	border: none !important;
	cursor: pointer !important;
	text-decoration: none !important;
	display: inline-block !important;
	transition: background-color 0.15s ease-in-out !important;
}

.bg-green-500.hover\:bg-green-700.text-white.font-bold.py-2.px-3.rounded:hover,
.bg-green-500:hover {
	background-color: #157347 !important;
	color: white !important;
}

.bg-blue-500.hover\:bg-blue-700.text-white.font-bold.py-2.px-3.rounded,
.bg-blue-500 {
	background-color: #0d6efd !important;
	color: white !important;
	font-weight: 700 !important;
	padding: 0.5rem 0.75rem !important;
	border-radius: 0.375rem !important;
	border: none !important;
	cursor: pointer !important;
	text-decoration: none !important;
	display: inline-block !important;
	transition: background-color 0.15s ease-in-out !important;
}

.bg-blue-500.hover\:bg-blue-700.text-white.font-bold.py-2.px-3.rounded:hover,
.bg-blue-500:hover {
	background-color: #0b5ed7 !important;
	color: white !important;
}

.bg-blue-400.hover\:bg-red-700.text-white.font-bold.py-2.px-3.rounded,
.bg-blue-400 {
	background-color: #6ea8fe !important;
	color: white !important;
	font-weight: 700 !important;
	padding: 0.5rem 0.75rem !important;
	border-radius: 0.375rem !important;
	border: none !important;
	cursor: pointer !important;
	text-decoration: none !important;
	display: inline-block !important;
	transition: background-color 0.15s ease-in-out !important;
}

.bg-blue-400.hover\:bg-red-700.text-white.font-bold.py-2.px-3.rounded:hover,
.bg-blue-400:hover {
	background-color: #dc3545 !important;
	color: white !important;
}

/* ============================================
   TABLE FIXES
   ============================================ */

/* Fix untuk table styling */
.table-fixed {
	table-layout: fixed !important;
	width: 100% !important;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(0, 0, 0, 0.05) !important;
}

.table th,
.table td {
	vertical-align: middle !important;
	word-wrap: break-word !important;
}

/* Fix untuk padding classes dalam table */
.p-3 {
	padding: 0.75rem !important;
}
.p-4 {
	padding: 1rem !important;
}
.p-5 {
	padding: 1.25rem !important;
}

/* ============================================
   CARD FIXES
   ============================================ */

/* Fix untuk card styling yang konsisten */
.card {
	background-color: white !important;
	border: 1px solid rgba(0, 0, 0, 0.125) !important;
	border-radius: 0.5rem !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
	margin-bottom: 1.5rem !important;
}

.card-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
	padding: 1rem !important;
	border-radius: 0.5rem 0.5rem 0 0 !important;
}

.card-header:not([class*="bg-"]) {
	background-color: #f8f9fa !important;
}

.card-header.bg-primary {
	background-color: #0d6efd !important;
	color: white !important;
	border-bottom: 1px solid #0a58ca !important;
}

.card-header.bg-success {
	background-color: #198754 !important;
	color: white !important;
	border-bottom: 1px solid #146c43 !important;
}

.card-header.bg-danger {
	background-color: #dc3545 !important;
	color: white !important;
	border-bottom: 1px solid #b02a37 !important;
}

.card-header.bg-warning {
	background-color: #ffc107 !important;
	color: #000 !important;
	border-bottom: 1px solid #ffcd39 !important;
}

.card-header.bg-info {
	background-color: #0dcaf0 !important;
	color: #000 !important;
	border-bottom: 1px solid #3dd5f3 !important;
}

.card-header.bg-secondary {
	background-color: #6c757d !important;
	color: white !important;
	border-bottom: 1px solid #565e64 !important;
}

.card-header.bg-dark {
	background-color: #212529 !important;
	color: white !important;
	border-bottom: 1px solid #495057 !important;
}

.card-body {
	padding: 1.5rem !important;
}

.card-footer {
	background-color: #f8f9fa !important;
	border-top: 1px solid rgba(0, 0, 0, 0.125) !important;
	padding: 1rem !important;
	border-radius: 0 0 0.5rem 0.5rem !important;
}

.card-footer.bg-dark {
	background-color: #212529 !important;
	color: white !important;
	border-top: 1px solid #495057 !important;
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */

/* Fix untuk responsive behavior */
@media (max-width: 576px) {
	.px-4.md\:px-10 {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	.-m-24 {
		margin: -1rem !important;
	}

	.relative.bg-dark.md\:pt-32.pb-32.pt-12 {
		padding-top: 2rem !important;
		padding-bottom: 4rem !important;
	}
}

@media (min-width: 768px) {
	.px-4.md\:px-10 {
		padding-left: 2.5rem !important;
		padding-right: 2.5rem !important;
	}
}

/* ============================================
   TEXT & COLOR FIXES
   ============================================ */

/* Fix untuk text colors yang bermasalah */
.text-red-500 {
	color: #dc3545 !important;
}

.text-blue-700 {
	color: #0b5ed7 !important;
}

.text-white-600 {
	color: rgba(255, 255, 255, 0.8) !important;
}

/* Fix untuk background utilities */
.bg-dark {
	background-color: #212529 !important;
}

/* ============================================
   UTILITY FIXES
   ============================================ */

/* Fix untuk utility classes yang hilang */
.cursor-pointer {
	cursor: pointer !important;
}

.opacity-50 {
	opacity: 0.5 !important;
}

.lh-1 {
	line-height: 1 !important;
}

.border-transparent {
	border-color: transparent !important;
}

.whitespace-no-wrap {
	white-space: nowrap !important;
}

.break-words {
	word-wrap: break-word !important;
	word-break: break-word !important;
}

.min-w-0 {
	min-width: 0 !important;
}

.flex-1 {
	flex: 1 1 0% !important;
}

.w-12 {
	width: 3rem !important;
}

.h-12 {
	height: 3rem !important;
}

.newfont {
	font-weight: 700 !important;
}

/* ============================================
   SPECIFIC FIXES
   ============================================ */

/* Fix untuk login page specific issues */
.login-container {
	min-height: 100vh !important;
	background-attachment: fixed !important;
}

/* Fix untuk dashboard header */
.relative.bg-dark.md\:pt-32.pb-32.pt-12 {
	position: relative !important;
	background-color: #212529 !important;
	padding-top: 3rem !important;
	padding-bottom: 8rem !important;
}

@media (min-width: 768px) {
	.relative.bg-dark.md\:pt-32.pb-32.pt-12 {
		padding-top: 8rem !important;
	}
}

/* Fix untuk container behavior */
.px-4.md\:px-10.mx-auto.w-full {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
	max-width: 1200px !important;
}

@media (min-width: 768px) {
	.px-4.md\:px-10.mx-auto.w-full {
		padding-left: 2.5rem !important;
		padding-right: 2.5rem !important;
	}
}

/* Fix untuk dropdown */
.float-left {
	float: left !important;
}

/* Fix untuk specific margin and padding issues */
.mt-6 {
	margin-top: 1.5rem !important;
}

.mb-12 {
	margin-bottom: 3rem !important;
}

.xl\:mb-0 {
	margin-bottom: 1.5rem !important;
}

@media (min-width: 1200px) {
	.xl\:mb-0 {
		margin-bottom: 0 !important;
	}
}

/* ============================================
   DATATABLES FIXES
   ============================================ */

/* Fix untuk DataTables styling dengan Bootstrap */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
	color: #212529 !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
	border: 1px solid #ced4da !important;
	border-radius: 0.375rem !important;
	padding: 0.375rem 0.75rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	border: 1px solid #dee2e6 !important;
	border-radius: 0.375rem !important;
	padding: 0.375rem 0.75rem !important;
	margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: #0d6efd !important;
	color: white !important;
	border-color: #0d6efd !important;
}

/* ============================================
   PRINT FIXES
   ============================================ */

@media print {
	.btn,
	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter,
	.dataTables_wrapper .dataTables_paginate {
		display: none !important;
	}

	.table {
		border-collapse: collapse !important;
	}

	.table th,
	.table td {
		border: 1px solid #000 !important;
		padding: 8px !important;
	}
}

/* ============================================
   FINAL OVERRIDES
   ============================================ */

/* Override untuk memastikan Bootstrap classes bekerja dengan baik */
.d-flex {
	display: flex !important;
}

.align-items-center {
	align-items: center !important;
}

.justify-content-center {
	justify-content: center !important;
}

.w-100 {
	width: 100% !important;
}

.text-center {
	text-align: center !important;
}

.mb-4 {
	margin-bottom: 1.5rem !important;
}

.px-4 {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

/* Fix untuk form validation states */
.was-validated .form-control:valid,
.form-control.is-valid {
	border-color: #198754 !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='m2.3 6.73.8-.77L4.2 5 8 1.23l.75.8L4.2 6.77z'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right calc(0.375em + 0.1875rem) center !important;
	background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
	border-color: #dc3545 !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 5.8 4.4 4.4m0-4.4-4.4 4.4'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right calc(0.375em + 0.1875rem) center !important;
	background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}

/* Ensure smooth transitions */
* {
	transition: all 0.2s ease-in-out;
}

/* Override any conflicting styles */
.position-relative {
	position: relative !important;
}

.position-absolute {
	position: absolute !important;
}

.position-fixed {
	position: fixed !important;
}

/* ============================================
   RESPONSIVE BUTTON FIXES
   ============================================ */

/* Button responsive sizes */
.btn-sm.btn-md-normal {
	font-size: 0.875rem;
	padding: 0.375rem 0.75rem;
}

@media (min-width: 768px) {
	.btn-sm.btn-md-normal {
		font-size: 1rem;
		padding: 0.5rem 1rem;
	}
}

/* Dashboard specific responsive fixes */
@media (max-width: 576px) {
	.h3 {
		font-size: 1.5rem !important;
	}

	.h-md-2 {
		font-size: 1.75rem !important;
	}

	.fs-6.fs-md-5 {
		font-size: 0.875rem !important;
	}

	.px-3.px-md-4 {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}

	.py-2 {
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
	}

	.p-3.p-md-4 {
		padding: 0.75rem !important;
	}

	.py-3 {
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
	}
}

@media (min-width: 768px) {
	.h-md-2 {
		font-size: 2rem !important;
	}

	.fs-md-5 {
		font-size: 1.25rem !important;
	}

	.px-md-4 {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}

	.p-md-5 {
		padding: 3rem !important;
	}

	.p-md-4 {
		padding: 1.5rem !important;
	}
}

/* Display utilities for responsive text */
.d-none.d-sm-inline {
	display: none !important;
}

@media (min-width: 576px) {
	.d-none.d-sm-inline {
		display: inline !important;
	}
}

.d-none.d-md-block {
	display: none !important;
}

@media (min-width: 768px) {
	.d-none.d-md-block {
		display: block !important;
	}
}

/* .progress-bar {
	transition: width 900ms ease;
	will-change: width;
	background-size: 2.25rem 2.25rem;
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .38) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, .38) 75%, transparent 75%, transparent);
	animation: sibima-progress-stripes 450ms linear infinite;
} */

@keyframes sibima-progress-stripes {
	0% {
		background-position-x: 2.25rem;
	}
	100% {
		background-position-x: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.progress-bar {
		animation: none;
		transition: none;
	}
}