/* Bootstrap 5 Custom Color Theme - Golden Primary */
:root {
	/* Primary Colors - Golden Theme */
	--bs-primary: #BC995C;
	--bs-primary-rgb: 188, 153, 92;
	--bs-primary-text-emphasis: #4A3D24;
	--bs-primary-bg-subtle: #F5F0E7;
	--bs-primary-border-subtle: #E6D5B8;

	/* Secondary Colors - Complementary Cool Gray */
	--bs-secondary: #6C757D;
	--bs-secondary-rgb: 108, 117, 125;
	--bs-secondary-text-emphasis: #2B2F32;
	--bs-secondary-bg-subtle: #F8F9FA;
	--bs-secondary-border-subtle: #DEE2E6;

	/* Success Colors - Warm Green */
	--bs-success: #8B9F5A;
	--bs-success-rgb: 139, 159, 90;
	--bs-success-text-emphasis: #384024;
	--bs-success-bg-subtle: #F1F4EA;
	--bs-success-border-subtle: #D9E2C7;

	/* Danger Colors - Warm Red */
	--bs-danger: #C85A54;
	--bs-danger-rgb: 200, 90, 84;
	--bs-danger-text-emphasis: #501F1C;
	--bs-danger-bg-subtle: #F7EEEE;
	--bs-danger-border-subtle: #E8C5C3;

	/* Warning Colors - Bright Orange */
	--bs-warning: #E6A853;
	--bs-warning-rgb: 230, 168, 83;
	--bs-warning-text-emphasis: #5C4321;
	--bs-warning-bg-subtle: #FDF5EC;
	--bs-warning-border-subtle: #F2DCC0;

	/* Info Colors - Soft Blue */
	--bs-info: #7B9AB8;
	--bs-info-rgb: 123, 154, 184;
	--bs-info-text-emphasis: #2F3D4A;
	--bs-info-bg-subtle: #F0F4F8;
	--bs-info-border-subtle: #C8D6E5;

	/* Light Colors */
	--bs-light: #F8F9FA;
	--bs-light-rgb: 248, 249, 250;
	--bs-light-text-emphasis: #495057;
	--bs-light-bg-subtle: #FCFCFD;
	--bs-light-border-subtle: #E9ECEF;

	/* Dark Colors */
	--bs-dark: #212529;
	--bs-dark-rgb: 33, 37, 41;
	--bs-dark-text-emphasis: #495057;
	--bs-dark-bg-subtle: #CED4DA;
	--bs-dark-border-subtle: #ADB5BD;

	/* Body Colors */
	--bs-body-color: #2C2C2C;
	--bs-body-bg: #FFFFFF;

	/* Border Colors */
	--bs-border-color: #DEE2E6;
	--bs-border-color-translucent: rgba(0, 0, 0, 0.175);

	/* Link Colors */
	--bs-link-color: #BC995C;
	--bs-link-hover-color: #9A7D4A;

	/* Code Colors */
	--bs-code-color: #C85A54;

	/* Highlight Color */
	--bs-highlight-color: #2C2C2C;
	--bs-highlight-bg: #FFF3CD;
}

/* Button Overrides - Direct CSS Properties */
.btn-primary {
	color: #fff !important;
	background-color: #BC995C !important;
	border-color: #BC995C !important;

	/* CSS Variables for Bootstrap compatibility */
	--bs-btn-color: #fff;
	--bs-btn-bg: #BC995C;
	--bs-btn-border-color: #BC995C;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #A0824E;
	--bs-btn-hover-border-color: #9A7D4A;
	--bs-btn-focus-shadow-rgb: 188, 153, 92;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #9A7D4A;
	--bs-btn-active-border-color: #916F42;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #BC995C;
	--bs-btn-disabled-border-color: #BC995C;
}

.btn-primary:hover,
.btn-primary:focus {
	color: #fff !important;
	background-color: #A0824E !important;
	border-color: #9A7D4A !important;
}

.btn-primary:active,
.btn-primary.active {
	color: #fff !important;
	background-color: #9A7D4A !important;
	border-color: #916F42 !important;
}

/* Success Button */
.btn-success {
	color: #fff !important;
	background-color: #8B9F5A !important;
	border-color: #8B9F5A !important;

	--bs-btn-color: #fff;
	--bs-btn-bg: #8B9F5A;
	--bs-btn-border-color: #8B9F5A;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #7A8B4F;
	--bs-btn-hover-border-color: #727F49;
	--bs-btn-focus-shadow-rgb: 139, 159, 90;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #727F49;
	--bs-btn-active-border-color: #697643;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #8B9F5A;
	--bs-btn-disabled-border-color: #8B9F5A;
}

.btn-success:hover,
.btn-success:focus {
	color: #fff !important;
	background-color: #7A8B4F !important;
	border-color: #727F49 !important;
}

.btn-success:active,
.btn-success.active {
	color: #fff !important;
	background-color: #727F49 !important;
	border-color: #697643 !important;
}

/* Danger Button */
.btn-danger {
	color: #fff !important;
	background-color: #C85A54 !important;
	border-color: #C85A54 !important;

	--bs-btn-color: #fff;
	--bs-btn-bg: #C85A54;
	--bs-btn-border-color: #C85A54;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #B24E48;
	--bs-btn-hover-border-color: #A8473F;
	--bs-btn-focus-shadow-rgb: 200, 90, 84;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #A8473F;
	--bs-btn-active-border-color: #9E423A;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #C85A54;
	--bs-btn-disabled-border-color: #C85A54;
}

.btn-danger:hover,
.btn-danger:focus {
	color: #fff !important;
	background-color: #B24E48 !important;
	border-color: #A8473F !important;
}

.btn-danger:active,
.btn-danger.active {
	color: #fff !important;
	background-color: #A8473F !important;
	border-color: #9E423A !important;
}

/* Warning Button */
.btn-warning {
	color: #000 !important;
	background-color: #E6A853 !important;
	border-color: #E6A853 !important;

	--bs-btn-color: #000;
	--bs-btn-bg: #E6A853;
	--bs-btn-border-color: #E6A853;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #E09E46;
	--bs-btn-hover-border-color: #DC9A41;
	--bs-btn-focus-shadow-rgb: 230, 168, 83;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: #DC9A41;
	--bs-btn-active-border-color: #D3913D;
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #E6A853;
	--bs-btn-disabled-border-color: #E6A853;
}

.btn-warning:hover,
.btn-warning:focus {
	color: #000 !important;
	background-color: #E09E46 !important;
	border-color: #DC9A41 !important;
}

.btn-warning:active,
.btn-warning.active {
	color: #000 !important;
	background-color: #DC9A41 !important;
	border-color: #D3913D !important;
}

/* Info Button */
.btn-info {
	color: #fff !important;
	background-color: #7B9AB8 !important;
	border-color: #7B9AB8 !important;

	--bs-btn-color: #fff;
	--bs-btn-bg: #7B9AB8;
	--bs-btn-border-color: #7B9AB8;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #6B8AAA;
	--bs-btn-hover-border-color: #6584A3;
	--bs-btn-focus-shadow-rgb: 123, 154, 184;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #6584A3;
	--bs-btn-active-border-color: #5F7C98;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #7B9AB8;
	--bs-btn-disabled-border-color: #7B9AB8;
}

.btn-info:hover,
.btn-info:focus {
	color: #fff !important;
	background-color: #6B8AAA !important;
	border-color: #6584A3 !important;
}

.btn-info:active,
.btn-info.active {
	color: #fff !important;
	background-color: #6584A3 !important;
	border-color: #5F7C98 !important;
}

/* Secondary Button */
.btn-secondary {
	color: #fff !important;
	background-color: #6C757D !important;
	border-color: #6C757D !important;

	--bs-btn-color: #fff;
	--bs-btn-bg: #6C757D;
	--bs-btn-border-color: #6C757D;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #5C636A;
	--bs-btn-hover-border-color: #565E64;
	--bs-btn-focus-shadow-rgb: 108, 117, 125;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #565E64;
	--bs-btn-active-border-color: #51585E;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #6C757D;
	--bs-btn-disabled-border-color: #6C757D;
}

.btn-secondary:hover,
.btn-secondary:focus {
	color: #fff !important;
	background-color: #5C636A !important;
	border-color: #565E64 !important;
}

.btn-secondary:active,
.btn-secondary.active {
	color: #fff !important;
	background-color: #565E64 !important;
	border-color: #51585E !important;
}

/* Light Button */
.btn-light {
	color: #000 !important;
	background-color: #F8F9FA !important;
	border-color: #F8F9FA !important;

	--bs-btn-color: #000;
	--bs-btn-bg: #F8F9FA;
	--bs-btn-border-color: #F8F9FA;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #D3D4D5;
	--bs-btn-hover-border-color: #C6C7C8;
	--bs-btn-focus-shadow-rgb: 248, 249, 250;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: #C6C7C8;
	--bs-btn-active-border-color: #BABBBC;
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #F8F9FA;
	--bs-btn-disabled-border-color: #F8F9FA;
}

.btn-light:hover,
.btn-light:focus {
	color: #000 !important;
	background-color: #D3D4D5 !important;
	border-color: #C6C7C8 !important;
}

.btn-light:active,
.btn-light.active {
	color: #000 !important;
	background-color: #C6C7C8 !important;
	border-color: #BABBBC !important;
}

/* Dark Button */
.btn-dark {
	color: #fff !important;
	background-color: #212529 !important;
	border-color: #212529 !important;

	--bs-btn-color: #fff;
	--bs-btn-bg: #212529;
	--bs-btn-border-color: #212529;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #424649;
	--bs-btn-hover-border-color: #373B3E;
	--bs-btn-focus-shadow-rgb: 33, 37, 41;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #4D5154;
	--bs-btn-active-border-color: #373B3E;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #212529;
	--bs-btn-disabled-border-color: #212529;
}

.btn-dark:hover,
.btn-dark:focus {
	color: #fff !important;
	background-color: #424649 !important;
	border-color: #373B3E !important;
}

.btn-dark:active,
.btn-dark.active {
	color: #fff !important;
	background-color: #4D5154 !important;
	border-color: #373B3E !important;
}

/* Outline Buttons */
.btn-outline-primary {
	--bs-btn-color: #BC995C;
	--bs-btn-border-color: #BC995C;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #BC995C;
	--bs-btn-hover-border-color: #BC995C;
	--bs-btn-focus-shadow-rgb: 188, 153, 92;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #BC995C;
	--bs-btn-active-border-color: #BC995C;
}

.btn-outline-success {
	--bs-btn-color: #8B9F5A;
	--bs-btn-border-color: #8B9F5A;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #8B9F5A;
	--bs-btn-hover-border-color: #8B9F5A;
	--bs-btn-focus-shadow-rgb: 139, 159, 90;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #8B9F5A;
	--bs-btn-active-border-color: #8B9F5A;
}

.btn-outline-danger {
	--bs-btn-color: #C85A54;
	--bs-btn-border-color: #C85A54;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #C85A54;
	--bs-btn-hover-border-color: #C85A54;
	--bs-btn-focus-shadow-rgb: 200, 90, 84;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #C85A54;
	--bs-btn-active-border-color: #C85A54;
}

.btn-outline-warning {
	--bs-btn-color: #E6A853;
	--bs-btn-border-color: #E6A853;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #E6A853;
	--bs-btn-hover-border-color: #E6A853;
	--bs-btn-focus-shadow-rgb: 230, 168, 83;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: #E6A853;
	--bs-btn-active-border-color: #E6A853;
}

.btn-outline-info {
	--bs-btn-color: #7B9AB8;
	--bs-btn-border-color: #7B9AB8;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #7B9AB8;
	--bs-btn-hover-border-color: #7B9AB8;
	--bs-btn-focus-shadow-rgb: 123, 154, 184;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #7B9AB8;
	--bs-btn-active-border-color: #7B9AB8;
}

/* Form Control Focus States */
.form-control:focus,
.form-select:focus {
	border-color: #E6D5B8;
	box-shadow: 0 0 0 0.25rem rgba(188, 153, 92, 0.25);
}

/* Custom Utilities */
.text-primary-custom {
	color: #BC995C !important;
}

.bg-primary-custom {
	background-color: #BC995C !important;
}

.border-primary-custom {
	border-color: #BC995C !important;
}

/* Navigation and Component Customizations */
.navbar-brand {
	color: var(--bs-primary) !important;
}

.nav-link {
	color: var(--bs-primary) !important;
}

.nav-link:hover,
.nav-link:focus {
	color: #9A7D4A !important;
}

.nav-link.active {
	color: #9A7D4A !important;
	font-weight: 500;
}

/* Navbar Light Theme */
.navbar-light .navbar-nav .nav-link {
	color: var(--bs-primary) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
	color: #9A7D4A !important;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
	color: #9A7D4A !important;
}

/* Navbar Dark Theme */
.navbar-dark .navbar-nav .nav-link {
	color: #BC995C !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
	color: #E6D5B8 !important;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link {
	color: #F5F0E7 !important;
}

/* Nav Pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: var(--bs-primary);
	color: #fff;
}

/* Nav Tabs */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
	color: var(--bs-primary);
	border-color: var(--bs-primary-border-subtle) var(--bs-primary-border-subtle) #fff;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
	border-color: var(--bs-primary-border-subtle);
}

/* Alert Customizations */
.alert-primary {
	--bs-alert-color: #4A3D24;
	--bs-alert-bg: #F5F0E7;
	--bs-alert-border-color: #E6D5B8;
}

/* Badge Customizations */
.badge.bg-primary {
	background-color: #BC995C !important;
}

/* Progress Bar */
.progress-bar {
	background-color: var(--bs-primary);
}

/* Pagination */
.page-link {
	color: var(--bs-primary);
}

.page-link:hover {
	color: #9A7D4A;
}

.page-item.active .page-link {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

/* Card Customizations */
.card-header {
	background-color: var(--bs-primary-bg-subtle);
	border-bottom-color: var(--bs-primary-border-subtle);
}

/* Dropdown */
.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--bs-primary-bg-subtle);
}

.dropdown-item.active {
	background-color: var(--bs-primary);
}

/* List Group */
.list-group-item.active {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

/* Table Hover */
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
	background-color: var(--bs-primary-bg-subtle);
}

/* Profile Card Component */
.profile-card {
	max-width: 500px;
	margin: 0px auto;
	background-color: var(--bs-body-bg);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	padding: 30px;
}

.profile-header {
	text-align: center;
	margin-bottom: 30px;
	position: relative;
}

.profile-header .avatar {
	width: 100px;
	height: 100px;
	background-color: var(--bs-primary-bg-subtle);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: var(--bs-primary);
	margin: 0 auto 15px auto;
	border: 3px solid var(--bs-primary);
}

.profile-header h2 {
	margin-bottom: 5px;
	color: var(--bs-dark);
	font-weight: 600;
}

.profile-header p {
	color: var(--bs-secondary);
	font-size: 0.95rem;
}

.profile-info .info-item {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bs-border-color);
	font-size: 1rem;
}

.profile-info .info-item:last-child {
	border-bottom: none;
}

.profile-info .info-item i {
	font-size: 1.3rem;
	color: var(--bs-primary);
	margin-right: 15px;
	width: 30px;
	text-align: center;
}

.profile-info .info-label {
	font-weight: 500;
	color: var(--bs-emphasis-color);
	min-width: 120px;
}

.profile-info .info-value {
	color: var(--bs-body-color);
	flex-grow: 1;
}

.edit-button-container {
	text-align: center;
	margin-top: 30px;
}

.btn-edit-profile {
	padding: 10px 30px;
	font-size: 1.1rem;
	border-radius: 50px;
	transition: all 0.3s ease;
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
	color: white;
}

.btn-edit-profile:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(188, 153, 92, 0.3);
	background-color: #9A7D4A;
	border-color: #9A7D4A;
	color: white;
}


.parsley-errors-list.filled li{
	font-size: 0.8rem;
}

.control-label{
	margin-bottom: 0px;
	font-size: 1rem;
}

.form-group{
	margin-top: 10px;
}


/* Gaya placeholder untuk input Bootstrap 5 */
.form-control::placeholder,
.select2-search__field::placeholder {
	font-size: 0.875rem; /* Ukuran font default Bootstrap 5 untuk body */
	color: #6C757D; /* Warna placeholder default Bootstrap 5 ($form-control-placeholder-color) */
	opacity: 1; /* Untuk memastikan opasitas tidak 0 */
}

/* Gaya placeholder untuk textarea Bootstrap 5 */
.form-control-lg::placeholder {
	font-size: 1rem; /* Ukuran font untuk input besar */
}

.form-control-sm::placeholder {
	font-size: 0.75rem; /* Ukuran font untuk input kecil */
}

/* Prefiks vendor untuk kompatibilitas browser yang lebih luas (opsional) */
.form-control::-webkit-input-placeholder {
	font-size: 0.875rem;
	color: #6C757D;
	opacity: 1;
}

.form-control::-moz-placeholder { /* Firefox 19+ */
	font-size: 0.875rem;
	color: #6C757D;
	opacity: 1;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10+ */
	font-size: 0.875rem;
	color: #6C757D;
	opacity: 1;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
	font-size: 0.875rem;
	color: #6C757D;
	opacity: 1;
}

.form-label,
.form-group label{
	margin-bottom: 0.1rem;
	font-size: 0.875rem;
}

.deskripsi li{
	font-size: 0.875rem;
}