/* CAMABA visual refinement. Preserves component dimensions from the existing UI. */

html.camaba-ui {
	--camaba-border: #e5e7eb;
	--camaba-border-strong: #d9dee6;

	/* High-visibility green & WhatsApp tokens */
	--camaba-whatsapp: #25d366;
	--camaba-whatsapp-hover: #20bd5a;
	--camaba-whatsapp-glow: rgba(37, 211, 102, 0.45);
	--camaba-whatsapp-bg: rgba(37, 211, 102, 0.14);
	--camaba-whatsapp-border: rgba(37, 211, 102, 0.35);

	/* Accessible vibrant green for text, badges & icons */
	--camaba-success: #16a34a;
	--camaba-success-hover: #15803d;
	--camaba-success-subtle: #dcfce7;
	--camaba-success-border: #86efac;
}

/* ==========================================================================
   CAMABA HIGH-VISIBILITY GREEN & WHATSAPP TOKENS
   ========================================================================== */

/* Universal text & background utilities */
html.camaba-ui .text-wa,
html.camaba-ui .text-whatsapp {
	color: var(--camaba-whatsapp) !important;
}

html.camaba-ui .bg-wa {
	background-color: var(--camaba-whatsapp) !important;
	color: #ffffff !important;
}

html.camaba-ui .bg-wa-subtle {
	background-color: var(--camaba-whatsapp-bg) !important;
	border: 1px solid var(--camaba-whatsapp-border) !important;
	color: var(--camaba-whatsapp) !important;
}

/* WhatsApp Icon Enhancements (replaces dull #198754 with vivid brand green on bare icons) */
html.camaba-ui .fa-whatsapp:not(.text-white):not(.text-light),
html.camaba-ui .fab.fa-whatsapp:not(.text-white):not(.text-light),
html.camaba-ui .bi-whatsapp:not(.text-white):not(.text-light) {
	color: var(--camaba-whatsapp);
}

html.camaba-ui .fa-whatsapp.text-success,
html.camaba-ui .fab.fa-whatsapp.text-success,
html.camaba-ui .bi-whatsapp.text-success {
	color: var(--camaba-whatsapp) !important;
}

/* Ensure crisp white WhatsApp icons inside green buttons, badges, or white-colored containers */
html.camaba-ui .text-white .fa-whatsapp,
html.camaba-ui .text-white .fab.fa-whatsapp,
html.camaba-ui .text-white .bi-whatsapp,
html.camaba-ui .text-white.fa-whatsapp,
html.camaba-ui .text-white.fab.fa-whatsapp,
html.camaba-ui .btn-success .fa-whatsapp,
html.camaba-ui .btn-success .fab.fa-whatsapp,
html.camaba-ui .bg-success .fa-whatsapp,
html.camaba-ui .bg-success .fab.fa-whatsapp,
html.camaba-ui .bg-wa .fa-whatsapp,
html.camaba-ui .bg-wa .fab.fa-whatsapp,
html.camaba-ui #whatsappFloatingButton .fa-whatsapp,
html.camaba-ui #whatsappFloatingButton .fab.fa-whatsapp,
html.camaba-ui .whatsapp-floating-button .fa-whatsapp,
html.camaba-ui .whatsapp-floating-button .fab.fa-whatsapp,
html.camaba-ui .wa-header-icon-wrap .fa-whatsapp,
html.camaba-ui .wa-header-icon-wrap .fab.fa-whatsapp,
html.camaba-ui .wa-header-icon-wrap i {
	color: #ffffff !important;
}

html.camaba-ui .wa-glow-icon {
	color: var(--camaba-whatsapp) !important;
	filter: drop-shadow(0 0 6px var(--camaba-whatsapp-glow));
	transition: transform 0.2s ease;
}

/* Floating WhatsApp button upgrade */
html.camaba-ui #whatsappFloatingButton,
html.camaba-ui .whatsapp-floating-button {
	background-color: var(--camaba-whatsapp) !important;
	border-color: var(--camaba-whatsapp) !important;
	box-shadow: 0 4px 14px var(--camaba-whatsapp-glow) !important;
}
html.camaba-ui #whatsappFloatingButton:hover,
html.camaba-ui .whatsapp-floating-button:hover {
	background-color: var(--camaba-whatsapp-hover) !important;
	border-color: var(--camaba-whatsapp-hover) !important;
	transform: scale(1.06);
}

/* Status indicator pills & live pulse */
html.camaba-ui .hotline-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 50px;
	background: var(--camaba-whatsapp-bg);
	border: 1.5px solid var(--camaba-whatsapp);
	color: var(--camaba-whatsapp);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	box-shadow: 0 0 10px var(--camaba-whatsapp-glow);
}

html.camaba-ui .status-pulse-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--camaba-whatsapp);
	box-shadow: 0 0 8px var(--camaba-whatsapp);
	animation: camabaStatusPulse 2s infinite;
	flex-shrink: 0;
}

@keyframes camabaStatusPulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.8);
	}
	70% {
		transform: scale(1.05);
		box-shadow: 0 0 0 6px rgba(37, 211, 102, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

@keyframes statusPulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.8);
	}
	70% {
		transform: scale(1.05);
		box-shadow: 0 0 0 6px rgba(37, 211, 102, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

/* Refined Success Text & Badges on Light Backgrounds */
html.camaba-ui .text-success:not(.fa-whatsapp):not(.bi-whatsapp) {
	color: var(--camaba-success) !important;
}

html.camaba-ui .badge.bg-success {
	background-color: var(--camaba-success) !important;
}

html.camaba-ui .badge.bg-success-subtle,
html.camaba-ui .badge.bg-success.bg-opacity-10,
html.camaba-ui .badge.bg-success.bg-opacity-15 {
	background-color: var(--camaba-success-subtle) !important;
	color: var(--camaba-success) !important;
	border-color: var(--camaba-success-border) !important;
}

html.camaba-ui body {
	background: #f8fafc;
}

/*
 * A 125% OS/browser scale reports as DPR 1.25 on standard displays and
 * approximately 2.5 on Retina displays. Scale the canvas, not its controls,
 * so the original component dimensions remain unchanged.
 */
html.pmb-scale-125 body {
	zoom: 80%;
}

/* Use the available viewport without changing component width or height. */
html.camaba-ui .container,
html.camaba-ui .container-fluid {
	padding-right: 1rem;
	padding-left: 1rem;
}

html.camaba-ui main > .container,
html.camaba-ui #main > .container {
	margin-right: auto;
	margin-left: auto;
}

/* Footer clearance: jarak bawah section utama 7.25rem agar tidak mentok / tertutup #footerList fixed */
html.camaba-ui main,
html.camaba-ui #main,
html.camaba-ui .register-page-wrapper,
html.camaba-ui .login-page-wrapper,
html.camaba-ui .forgot-page-wrapper,
html.camaba-ui main > section:last-child,
html.camaba-ui #main > section:last-child {
	padding-bottom: 7.25rem !important;
}

html.camaba-ui main:has(.register-page-wrapper),
html.camaba-ui main:has(.login-page-wrapper),
html.camaba-ui main:has(.forgot-page-wrapper),
html.camaba-ui #main:has(.register-page-wrapper),
html.camaba-ui #main:has(.login-page-wrapper),
html.camaba-ui #main:has(.forgot-page-wrapper) {
	padding-bottom: 0 !important;
}

/* Keep existing sizing; only soften surfaces and spacing around sections. */
html.camaba-ui .card,
html.camaba-ui .modal-content,
html.camaba-ui .alert,
html.camaba-ui .accordion-item {
	border-color: var(--camaba-border);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html.camaba-ui .card.border-0,
html.camaba-ui .modal-content.border-0 {
	border: 1px solid var(--camaba-border);
}

html.camaba-ui .form-control,
html.camaba-ui .form-select,
html.camaba-ui .input-group-text {
	border-color: var(--camaba-border-strong);
}

html.camaba-ui .form-control:focus,
html.camaba-ui .form-select:focus {
	border-color: #93c5fd;
	box-shadow: 0 0 0 0.16rem rgba(37, 99, 235, 0.14);
}

html.camaba-ui .btn,
html.camaba-ui .nav-link,
html.camaba-ui .footer-link {
	transition:
		transform 160ms ease,
		box-shadow 160ms ease,
		background-color 160ms ease;
}

html.camaba-ui .btn:hover,
html.camaba-ui .footer-link:hover {
	transform: translateY(-1px);
}

html.camaba-ui .btn:active,
html.camaba-ui .footer-link:active {
	transform: translateY(0);
}

/* Top navbar: preserve its original height, logo size, and menu sizing. */
html.camaba-ui #navbarWrapper {
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

html.camaba-ui #navbarWrapper .navbar-brand,
html.camaba-ui #navbarWrapper .navbar-nav {
	margin-left: 0.35rem;
	margin-right: 0.35rem;
}

html.camaba-ui #navbarWrapper #navbarSupportedContent ul li a {
	margin-left: 0.2rem;
	margin-right: 0.2rem;
}

html.camaba-ui #navbarWrapper .social-links {
	margin-left: 0.5rem !important;
	margin-right: 0.5rem !important;
}

/* Logged-in profile bar: increase breathing room without resizing its contents. */
html.camaba-ui #navbar {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

html.camaba-ui #navbar .card-body {
	gap: 1.25rem;
}

html.camaba-ui #breadcrumb {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

/* Footer: preserve original dimensions and let content breathe horizontally. */
html.camaba-ui #footerList {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

html.camaba-ui #footerList .footer-shell {
	padding-left: 1rem;
	padding-right: 1rem;
}

html.camaba-ui #footerList .footer-shell-inner {
	column-gap: 1.25rem !important;
}

html.camaba-ui #footerList .footer-programs {
	column-gap: 0.55rem;
}

html.camaba-ui #footerList .footer-right-actions {
	column-gap: 0.55rem;
}

@media (max-width: 767.98px) {
	html.camaba-ui .container,
	html.camaba-ui .container-fluid {
		padding-right: 0.75rem;
		padding-left: 0.75rem;
	}

	html.camaba-ui #navbarWrapper .navbar-brand,
	html.camaba-ui #navbarWrapper .navbar-nav {
		margin-left: 0.15rem;
		margin-right: 0.15rem;
	}

	html.camaba-ui #footerList .footer-shell {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
}

/* =============================================================================
   CAMABA COMPACT DENSITY (Inspired by Admin Modern UI)
   Enhances viewport view, optimizes vertical rhythm, and reduces excessive scrolling
   ============================================================================= */

/* 1. Compact Sections & Headings */
html.camaba-ui section.regular,
html.camaba-ui section.strata,
html.camaba-ui section.psikologi,
html.camaba-ui section.apoteker,
html.camaba-ui section.kedokteran,
html.camaba-ui section.bookings {
	padding-top: 1.25rem !important;
	padding-bottom: 2.25rem !important;
}

html.camaba-ui h2:not(.navbar-brand h2) {
	font-size: 1.35rem !important;
}

html.camaba-ui h3 {
	font-size: 1.15rem !important;
}

html.camaba-ui h4 {
	font-size: 1.05rem !important;
}

html.camaba-ui h5 {
	font-size: 0.92rem !important;
}

/* 2. Compact Cards & Data Items (Biodata & Detail) */
html.camaba-ui .card-enhanced {
	margin-bottom: 1rem !important;
	border-radius: 12px !important;
}

html.camaba-ui .section-header-enhanced {
	padding: 0.7rem 1.15rem !important;
}

html.camaba-ui .section-title-enhanced {
	font-size: 1.02rem !important;
}

html.camaba-ui .data-item {
	padding: 0.65rem 1rem !important;
}

html.camaba-ui .data-label {
	font-size: 0.74rem !important;
	margin-bottom: 0.2rem !important;
	letter-spacing: 0.02em;
}

html.camaba-ui .data-value {
	font-size: 0.92rem !important;
	line-height: 1.4 !important;
}

/* 3. Sleek Form Controls (38px Touch & Desktop Friendly) */
html.camaba-ui .form-control:not(textarea),
html.camaba-ui .form-select {
	height: 38px !important;
	min-height: 38px !important;
	padding: 0.32rem 0.75rem !important;
	font-size: 13.5px !important;
	border-radius: 8px !important;
}

/* Input with Leading Icon: pastikan padding-left tidak tertimpa oleh rule sleek form controls */
html.camaba-ui .input-with-icon .form-control,
html.camaba-ui .input-with-icon input,
html.camaba-ui .form-control-enhanced,
html.camaba-ui .modern-input-wrapper .form-control,
html.camaba-ui .modern-input-wrapper input {
	padding-left: 2.85rem !important;
}

html.camaba-ui .input-with-icon .input-icon,
html.camaba-ui .modern-input-wrapper .modern-input-icon {
	pointer-events: none;
}

html.camaba-ui textarea.form-control {
	padding: 0.45rem 0.75rem !important;
	font-size: 13.5px !important;
	border-radius: 8px !important;
}

html.camaba-ui .form-label {
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	margin-bottom: 0.25rem !important;
	color: #334155 !important;
}

/* 4. Dense Data Tables (Rekap Nilai, Biaya, Transkrip) */
html.camaba-ui .table > :not(caption) > * > * {
	padding: 0.45rem 0.65rem !important;
	font-size: 13px !important;
	vertical-align: middle !important;
}

html.camaba-ui .table thead th {
	font-size: 11.5px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	padding: 0.45rem 0.65rem !important;
}

/* 5. Compact Action Tiles & Badges */
html.camaba-ui .action-tile-card {
	border-radius: 10px !important;
}

html.camaba-ui .action-tile-desc {
	font-size: 0.8rem !important;
	min-height: 2.1rem !important;
	margin-bottom: 0.75rem !important;
	line-height: 1.4 !important;
}

html.camaba-ui .action-tile-icon {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	border-radius: 8px !important;
}

html.camaba-ui .status-badge {
	padding: 0.35rem 0.75rem !important;
	font-size: 0.82rem !important;
}

/* 6. Sleek Compact Buttons */
html.camaba-ui
	.btn:not(.btn-lg):not(.navbar-brand):not(.btn-close):not(.btn-action-tile) {
	height: 38px;
	min-height: 38px;
	padding: 0.35rem 0.85rem;
	font-size: 13.5px;
	font-weight: 500;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
}

html.camaba-ui .btn-sm {
	height: 30px !important;
	min-height: 30px !important;
	padding: 0.2rem 0.6rem !important;
	font-size: 12px !important;
	border-radius: 6px !important;
}

html.camaba-ui .btn-lg,
html.camaba-ui .btn-cta-block-desktop {
	min-height: 42px !important;
	padding: 0.5rem 1.25rem !important;
	font-size: 14.5px !important;
	border-radius: 8px !important;
}

/* 7. Streamlined Select2 Controls (Matches 38px input height) */
html.camaba-ui .select2-container .select2-selection--single {
	height: 38px !important;
	min-height: 38px !important;
	border-radius: 8px !important;
	border: 1px solid var(--camaba-border-strong) !important;
	background-color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
}

html.camaba-ui
	.select2-container--default
	.select2-selection--single
	.select2-selection__rendered {
	line-height: 36px !important;
	font-size: 13.5px !important;
	padding-left: 0.75rem !important;
	color: #0f172a !important;
}

html.camaba-ui
	.select2-container--default
	.select2-selection--single
	.select2-selection__arrow {
	height: 36px !important;
	right: 6px !important;
}

html.camaba-ui .select2-dropdown {
	border-radius: 8px !important;
	border: 1px solid var(--camaba-border-strong) !important;
	box-shadow: 0 4px 14px 0 rgba(15, 23, 42, 0.08) !important;
	font-size: 13.5px !important;
}

html.camaba-ui .select2-search--dropdown .select2-search__field {
	height: 34px !important;
	font-size: 13px !important;
	border-radius: 6px !important;
	border: 1px solid var(--camaba-border-strong) !important;
	padding: 0.25rem 0.5rem !important;
}

/* 8. Compact Alerts, Overpadded Card Bodies, Modals & Accordions */
html.camaba-ui .alert {
	padding: 0.65rem 0.95rem !important;
	font-size: 13.5px !important;
	border-radius: 8px !important;
	margin-bottom: 0.85rem !important;
}

html.camaba-ui .card-body.p-5,
html.camaba-ui .card-body.p-md-5 {
	padding: 1.5rem !important;
}

html.camaba-ui .card-body.p-4 {
	padding: 1.15rem 1.25rem !important;
}

html.camaba-ui .modal-content {
	border-radius: 12px !important;
	box-shadow:
		0 10px 25px -5px rgba(15, 23, 42, 0.1),
		0 8px 10px -6px rgba(15, 23, 42, 0.1) !important;
}

html.camaba-ui .modal-header {
	padding: 0.75rem 1.15rem !important;
	border-bottom: 1px solid var(--camaba-border) !important;
}

html.camaba-ui .modal-header .modal-title {
	font-size: 1.05rem !important;
	font-weight: 600 !important;
}

html.camaba-ui .modal-body {
	padding: 1rem 1.15rem !important;
	font-size: 13.5px !important;
}

html.camaba-ui .modal-footer {
	padding: 0.65rem 1.15rem !important;
	border-top: 1px solid var(--camaba-border) !important;
}

html.camaba-ui .accordion-button {
	padding: 0.75rem 1rem !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
}

html.camaba-ui .accordion-body {
	padding: 0.85rem 1rem !important;
	font-size: 13.5px !important;
}

div#registrationCard,
#regular-detail,
#kedokteran-detail,
#apoteker-detail,
#psikologi-detail,
#strata-detail,
#ppg-detail-booking {
	margin-bottom: 7.25rem !important;
}