/* --- General Body & Layout --- */
body {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center; /* Centers content if body is taller than viewport */
	align-items: center;
	background-color: #ebf0f4; /* Fallback or blend color */
	min-height: 100vh; /* Ensure body takes at least full viewport height */
	padding-top: 50px; /* Example: if header is 70px tall */
}

#body-main-div {
	width: 100%; /* Allow it to be responsive */
	min-height: 100vh; /* Can also be managed by flex on body */
	background-color: white;
	position: relative; /* For potential absolute positioning of children like footer */
	/* padding-bottom: 5vh; Space for fixed footer */
	display: flex; /* Added to make header/main/footer behave well */
	flex-direction: column; /* Stack header, main, footer */
}
/* Ensure main content area can grow if needed */
main,
.main-area-content,
#main-div {
	/* Target your main content containers */
	flex-grow: 1;
}

/* --- Header & Footer Component Common Styles --- */
/* Footer Component Styles */
.desktop-footer {
	background-color: var(--bs-primary);
	color: wheat;
	padding: 0; /* Remove default navbar padding if .desktop-footer-div handles it */
}
.desktop-footer a {
	color: wheat;
	text-decoration: none;
}
.desktop-footer-div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 0.5rem 1rem; /* Consistent padding */
}
#footer-date-time {
	/* ID from footer.js */
	font-size: 0.9em;
}
.mobile-footer {
	/* From original CSS - hidden by default */
	display: none;
}

/* General Header Styles (for app-header class on <header> inside components) */
.app-header .navbar {
	/* Target navbars within app-header */
	padding: 0 1rem 0 1rem; /* Default Bootstrap navbar padding, adjust if needed */
}

#logo, #logo-mobile, /* Specific IDs if still globally targeted by JS outside components */
#logo-nodash, #logo-withdash, #logo-assistant,
#logo-mobile-nodash, #logo-mobile-withdash, #logo-mobile-assistant {
	height: 40px; /* This is quite small, ensure it's intended */
	width: 50px;
	min-height: 28px; /* Add a min-height to prevent it from becoming too tiny */
	border-radius: 5px; /* Soften radius */
}


.app-header .user-profile-section {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.app-header .server-status-icon {
	font-size: 1.6rem;
	/* Color is set by JS (text-success/text-danger) */
}
.app-header .user-avatar-container,
#navbar-pract-img-div, /* Legacy ID support */
#navbar-assist-img-div {
	/* Legacy ID support */
	width: 36px; /* Slightly larger */
	height: 36px;
	overflow: hidden;
	border-radius: 50%;
	border: 1px solid #dee2e6;
	/* margin-right: 0.3em; -> Handled by gap in .user-profile-section */
}
.app-header .user-avatar-img,
#navbar-pract-img, /* Legacy ID support */
#navbar-assist-img {
	/* Legacy ID support */
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0; /* Image itself doesn't need radius if container has it */
}
.app-header .user-button .btn {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.875rem; /* Bootstrap default btn-sm size */
	border: 1px solid var(--bs-secondary-text-emphasis);
}

/* Enhanced navbar practitioner button with gradient */
#navbar-btn-pract-nodash,
#navbar-btn-pract-withdash,
#navbar-btn-assist,
#navbar-btn-assist-mobile {
	background: linear-gradient(135deg, #5d7381, #7a8d99) !important;
	border: none !important;
	border-radius: 25px !important;
	padding: 0.5rem 1.25rem !important;
	color: #ffffff !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	box-shadow: 0 2px 8px rgba(93, 115, 129, 0.2) !important;
	transition: all 0.25s ease-in-out !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

#navbar-btn-pract-nodash:hover,
#navbar-btn-pract-withdash:hover,
#navbar-btn-assist:hover,
#navbar-btn-assist-mobile:hover {
	background: linear-gradient(135deg, #4a5d6a, #5d7381) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(93, 115, 129, 0.3) !important;
	color: #ffffff !important;
	text-decoration: none !important;
	border: none !important;
}

#navbar-btn-pract-nodash:focus,
#navbar-btn-pract-withdash:focus,
#navbar-btn-assist:focus,
#navbar-btn-assist-mobile:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(93, 115, 129, 0.3) !important;
	background: linear-gradient(135deg, #4a5d6a, #5d7381) !important;
	border: none !important;
	color: #ffffff !important;
}

#navbar-btn-pract-nodash:active,
#navbar-btn-pract-withdash:active,
#navbar-btn-assist:active,
#navbar-btn-assist-mobile:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 4px rgba(93, 115, 129, 0.4) !important;
	border: none !important;
	background: linear-gradient(135deg, #4a5d6a, #5d7381) !important;
	color: #ffffff !important;
}

/* Encounter in Progress Indicator */
.encounter-in-progress-indicator {
	display: flex;
	align-items: center;
	margin-right: 1rem;
	border: 1px solid var(--bs-primary); /* Use BS variable */
	padding: 0.3em 0.6em;
	border-radius: 10px;
	background-color: var(--bs-primary-bg-subtle); /* Use BS variable */
	max-width: 10rem;
}
.encounter-in-progress-indicator .spinner-grow {
	margin-right: 0.75em;
}
.encounter-in-progress-indicator .patient-name-link {
	padding: 0;
	line-height: 1;
	font-size: 0.75rem;
	color: var(--bs-primary-text-emphasis); /* Use BS variable */
	text-decoration: none;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Mobile Navigation Specifics (assuming #mobile-nav is a global ID used by components) */
#mobile-nav {
	/* Applied to the <nav> element with this ID by components */
	display: none; /* Overridden by Bootstrap d-lg-none on desktop navs to show this */
	background-color: rgba(128, 128, 128, 0.25); /* Kept from original */
}

.mobile-nav-content {
	/* For the div inside #mobile-nav */
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	/* padding: 0.5rem 1rem; */
}
.user-avatar-container-mobile, /* Class from component.css */
#navbar-pract-img-div-mobile {
	/* Legacy ID */
	width: 35px;
	height: 35px;
	overflow: hidden;
	border-radius: 50%;
	/* margin-right: 0.3em; -> handled by gap if parent is flex */
}
.user-avatar-img-mobile, /* Class from component.css */
#navbar-pract-img-mobile {
	/* Legacy ID */
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#navbar-btn-pract-mobile {
	/* Specific ID for mobile button styling */
	border-radius: 5px;
	font-size: 0.8em !important; /* Keep !important if BS overrides are strong */
	/* height: 2em; -> Let padding and font-size define height */
	padding: 0.25rem 0.5rem; /* Bootstrap btn-sm padding */
}

/* --- Utility & Helper Classes (from your original style.css) --- */
.hide {
	display: none !important;
}
.show {
	display: block !important;
} /* Be cautious with !important */

.font-red {
	color: var(--bs-danger) !important;
} /* Use Bootstrap var */
.font-green {
	color: var(--bs-success) !important;
} /* Use Bootstrap var */
.font-blue-italic {
	color: blueviolet;
	font-style: italic;
}
.text-blueviolet {
	color: blueviolet;
}
.text-faded {
	color: #6c757d;
	font-style: italic;
} /* Bootstrap text-muted */
.text-strong {
	font-weight: bold; /* color: black; -> default */
}
.text-italic {
	font-style: italic;
}

.a-disabled {
	pointer-events: none;
	cursor: default;
	/* color: #adb5bd !important; */
}
.disabled {
	pointer-events: none;
	cursor: default;
}
.disabled td {
	color: #adb5bd;
} /* Example for table cells */
.blur {
	filter: blur(3px);
} /* Reduced blur */

.pointer {
	cursor: pointer !important;
}
.m-left {
	margin-left: 0.5rem;
}
.mr-3 {
	margin-right: 1rem;
} /* Bootstrap mr-3 is 1rem */
.mt-minus-1rem {
	margin-top: -1rem;
}

/* Specific page/element styles from original */
.pad-6em {
	padding-left: 3em;
	padding-right: 3em;
} /* Reduced padding */
.pad-top {
	padding-top: 2em;
}
.pad-bottom {
	padding-bottom: 2em;
}

.nomargin {
	margin: 0;
}
.textwithicon {
	display: flex;
	align-items: center;
	margin-bottom: 1em;
}
.textwithicon svg,
.textwithicon .fa-lg {
	margin-right: 0.5em; /* Reduced from 1em */
}

.h3-head {
	margin: 1em 0 0.5em 0; /* Adjusted margin */
	border-top: 1px solid var(--bs-primary);
	border-bottom: 1px solid var(--bs-primary);
	background-color: var(--bs-primary-bg-subtle); /* Lighter, using BS var */
	padding: 0.5em; /* Consistent padding */
	font-size: 1.25rem;
}
.h4-attr-value {
	color: var(--bs-primary-text-emphasis);
}
.h5-bold {
	font-weight: bold;
}
.p-attr-value {
	color: var(--bs-primary-text-emphasis);
}

.nav-link:hover {
	cursor: pointer;
}

.field-mandatory {
	background-color: #cfe2ff;
} /* Bootstrap info-bg-subtle */
.field-required {
	background-color: rgba(255, 193, 7, 0.15) !important;
} /* Light yellow, similar to --fc-today-bg-color */

.a-link {
	text-decoration: underline;
	color: var(--bs-link-color);
	cursor: pointer !important;
}
.a-link2 {
	text-decoration: underline;
	cursor: pointer !important;
	color: var(--bs-body-color) !important;
}

/* Background Color Helpers */
.back-red {
	background-color: var(--bs-danger) !important;
	color: white !important;
}
.back-green {
	background-color: var(--bs-success) !important;
	color: white !important;
}
.back-yellow {
	background-color: var(--bs-warning) !important;
	color: var(--bs-dark) !important;
} /* Ensure text contrast */
.back-blue {
	background-color: rgba(7, 7, 224, 0.19) !important;
}
.back-gray {
	background-color: var(--bs-secondary) !important;
	color: white !important;
}
.back-khaki {
	background-color: darkkhaki !important;
	color: #333 !important;
} /* Ensure text contrast */
.back-purple {
	background-color: var(--bs-purple) !important;
	color: white !important;
}
.medprobackcolor {
	background-color: rgba(212, 232, 239, 0.459);
} /* Was #d4e8ef75 */

/* Popover Styles (Consider scoping if used elsewhere) */
.popover-header {
	font-size: 0.9rem !important;
} /* Keep !important if BS is overriding */
#popover-user {
	/* Specific ID, might be better as a class if reusable */
	background-color: #e9ecef; /* Bootstrap light gray */
	padding: 10px;
	color: var(--bs-body-color);
}
.popover-attr {
	padding: 0 10px;
}

/* --- Specific Layouts & Components from original style.css --- */
/* #heading-div related styles (from pract-dashboard.css originally) */
#heading-div {
	display: flex;
	justify-content: space-between;
	align-items: flex-start; /* Align items to top */
	margin-bottom: 1rem; /* Increased bottom margin */
}
#heading-div-left {
	display: flex;
	flex-direction: column;
	flex-grow: 1; /* Allow left side to take available space */
	/* max-width: 70%; -> Let flexbox handle it or use Bootstrap cols */
}
#heading-btn-div {
	/* This is also in pract-dashboard.css, ensure consistency or one source */
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
#practitioner-photo-div {
	/* This specific ID was for pract-mydata, may not apply globally */
	/* width: 10rem; height: 7rem; */ /* These are small for a main photo */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
#practitioner-photo {
	/* This specific ID was for pract-mydata and pract-dashboard */
	width: 120px; /* Example size, adjust as needed */
	height: 120px;
	object-fit: cover;
	border-radius: 0.375rem; /* BS default rounding */
	/* margin-right: 2rem; -> if part of #heading-div, spacing handled by justify-content */
}

/* General form and input group styling */
.appointment-form {
	/* If this is a general class for forms */
	max-width: 600px; /* Increased max-width */
	margin: 2rem auto;
	padding: 2rem;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* Softer shadow */
}
.input-group label {
	/* This is a very broad selector, might affect unintended labels */
	margin-bottom: 0 !important; /* Highly specific, be cautious */
}
.div-flex-1 {
	/* Used in pract-mydata */
	display: flex;
	column-gap: 20px; /* Reduced from 30px */
	/* background-color, padding, border-radius are set in pract-mydata.css or data-form-container */
}

/* Invitation and Advantages sections (from homepage?) */
.invitation,
.advantages {
	background-color: #ffffff;
	padding: 25px; /* Increased padding */
	border-radius: 0.5rem; /* Bootstrap default rounded-3 */
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Bootstrap shadow-lg */
	margin: 3em auto; /* Centering with auto margins */
	max-width: 800px; /* Constrain width */
}
.invitation h2,
.advantages h2 {
	color: var(--bs-primary);
	text-align: center;
	margin-bottom: 1.25rem;
}
.invitation p {
	text-align: left; /* Changed from justify for better readability on web */
	margin-bottom: 1.25rem;
	line-height: 1.6;
}
.btn-register2 {
	/* Specific button for invitation */
	display: block;
	width: auto; /* Let content or padding define width */
	min-width: 200px;
	margin: 20px auto;
	padding: 0.5rem 1rem; /* Bootstrap default btn padding */
	text-align: center;
	background-color: var(--bs-primary);
	color: #ffffff;
	border-radius: var(--bs-border-radius); /* Use BS var */
	text-decoration: none;
	transition: background-color 0.2s ease-in-out;
}
.btn-register2:hover {
	background-color: var(--bs-btn-hover-bg); /* Use BS var if primary is default */
}
.advantages ul {
	list-style-type: none;
	padding: 0;
}
.advantages li {
	margin-bottom: 1rem;
	position: relative;
	padding-left: 30px;
	line-height: 1.6;
}
.advantages li::before {
	content: "✔";
	position: absolute;
	left: 0;
	top: 2px;
	color: var(--bs-success);
	font-weight: bold;
	font-size: 1.2em;
}

/* Table Styles from original */
.enc-table {
	/* For encounter tables */
	border-spacing: 0;
	border-radius: 10px;
	border-collapse: separate; /* Needed for border-radius on table */
	overflow: hidden; /* Clip corners */
}
.enc-table th:first-of-type {
	border-top-left-radius: 10px;
}
.enc-table th:last-of-type {
	border-top-right-radius: 10px;
}
/* Bottom radius on last row's cells might be tricky with tbody, often better on table itself */

/* Loaders & Animations (Custom) */

#loader-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw; /* Full viewport width */
	height: 100vh; /* Full viewport height */
	background-color: rgba(200, 200, 200, 0.5); /* Slightly lighter, more transparent background */

	/* Flexbox for centering content within the overlay */
	display: flex;
	flex-direction: column; /* Stack spinner and message vertically */
	justify-content: center;
	align-items: center;

	z-index: 1090; /* High z-index */
	opacity: 1; /* Start visible if not hidden by .hide */
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Smooth fade */
}

#loader-overlay.hide {
	opacity: 0;
	visibility: hidden; /* Use visibility for transitions and to remove from layout */
	/* display: none !important; -> this would override transition */
}

/* Styles for the Bootstrap spinner IF it's directly inside #loader-overlay */
#loader-overlay .spinner-border {
	width: 3rem; /* Default Bootstrap spinner size */
	height: 3rem;
	border-width: 0.25em; /* Default Bootstrap spinner border width */
	color: var(--bs-primary); /* Use your primary color */
}

/* Styles for the optional message */
#loader-overlay .loader-message {
	margin-top: 1rem; /* Space between spinner and message */
	font-size: 1rem;
	color: #333; /* Or your theme's text color */
	font-weight: 500;
	text-align: center;
}

/* Blur Box Style */
#blur-overlay {
	/* Was .blur-box */
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.2); /* Softer blur background */
	backdrop-filter: blur(2px); /* Softer blur */
	-webkit-backdrop-filter: blur(2px);
	z-index: 1080; /* Below loader overlay */
	opacity: 1;
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#blur-overlay.hide {
	opacity: 0;
	visibility: hidden;
}

.blink_me {
	animation: blinker 1s linear infinite;
}
@keyframes blinker {
	50% {
		opacity: 0;
	}
}

.Rec {
	animation: pulseRec 1.5s infinite linear;
	background-color: red;
} /* More specific */
@keyframes pulseRec {
	/* Renamed animation */
	0% {
		box-shadow: 0 0 0 0 rgba(173, 0, 0, 0.4);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(173, 0, 0, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(173, 0, 0, 0);
	}
}

.pulse-button {
	cursor: pointer;
	animation: pulseBtn 1s infinite ease-in-out;
}
.pulse-button:hover {
	animation: none;
}
@keyframes pulseBtn {
	/* For buttons, scale might be better */
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

/* AI Loader Styles */
.loader-ai1 {
	/* This seems like a progress bar */
	width: 100%; /* Make it responsive */
	max-width: 30rem;
	height: 10px; /* Reduced height for a sleeker bar */
	background: linear-gradient(var(--bs-primary) 0 0) left -20px top 0/20px 10px, linear-gradient(#e9ecef 0 0) center/100% 50%; /* BS light gray for track */
	background-repeat: no-repeat;
	animation: l5-progress 2s infinite linear;
	border-radius: 5px;
	margin: 0.5rem 0;
}
@keyframes l5-progress {
	100% {
		background-position: right -20px top 0, center;
	}
}

.loader-ai2 {
	/* Text loader */
	color: var(--bs-primary);
	width: fit-content;
	font-weight: bold;
	padding-bottom: 5px; /* Reduced padding */
	background: linear-gradient(currentColor 0 0) 0 100%/0% 2px no-repeat; /* Thinner underline */
	animation: l2-underline 2s linear infinite;
}
.loader-ai2:before {
	content: "Processando...";
}
@keyframes l2-underline {
	to {
		background-size: 100% 2px;
	}
}

.loader-images1 {
	/* Spinning mask loader */
	width: 40px;
	padding: 6px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--bs-primary);
	--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
	-webkit-mask: var(--_m);
	mask: var(--_m);
	-webkit-mask-composite: source-out;
	mask-composite: subtract;
	animation: l3-rotate 1s infinite linear;
}
@keyframes l3-rotate {
	to {
		transform: rotate(1turn);
	}
}

.loader-images2 {
	/* Four dots loader */
	width: 40px;
	aspect-ratio: 1;
	--_c: no-repeat radial-gradient(farthest-side, var(--bs-primary) 92%, #0000);
	background: var(--_c) top, var(--_c) left, var(--_c) right, var(--_c) bottom;
	background-size: 10px 10px; /* Smaller dots */
	animation: l7-spin-dots 1s infinite; /* Renamed for clarity */
}
@keyframes l7-spin-dots {
	to {
		transform: rotate(0.5turn);
	}
}

/* Custom Toast Container (if using medpro.js showToast with its own container) */
#toast-container-global {
	/* Changed ID to be specific for global toasts from medpro.js */
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1100; /* Ensure it's above modals */
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Toast messages themselves are styled by Bootstrap alert classes in the JS */

.bg-light-blue {
	background-color: #d4e8ef75;
}

.pt-6 {
	padding-top: 5rem !important;
}

.border-radius-20 {
	border-radius: 20px !important;
}

.typing-loader {
	z-index: 9999; /* Ensure it's above other elements */
	width: 15px;
	height: 15px;
	aspect-ratio: 1;
	border-radius: 50% !important;
	animation: l5 1s infinite linear alternate;
	position: absolute; /* Changed to relative positioning */
	right: 80px;
	bottom: calc(50% - 7.5px); /* Center vertically */
}

@keyframes l5 {
	0% {
		box-shadow: 20px 0 #000, -20px 0 #0002;
		background: #000;
	}

	33% {
		box-shadow: 20px 0 #000, -20px 0 #0002;
		background: #0002;
	}

	66% {
		box-shadow: 20px 0 #0002, -20px 0 #000;
		background: #0002;
	}

	100% {
		box-shadow: 20px 0 #0002, -20px 0 #000;
		background: #000;
	}
}

.z-top {
	z-index: 9999; /* Ensure this is above other elements */
	position: relative; /* Needed for z-index to take effect */
}

.relative {
	position: relative; /* Ensure this class is used for relative positioning */
}

/* --- Existing CSS for container and reveal --- */
.alert-stack-container.bottom-middle {
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1080;
	position: fixed;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	width: auto;
	max-width: 90%;
	/* Add pointer-events: none so clicks pass through the container itself if needed */
	pointer-events: none;
}

.alert-stack-container.bottom-middle .alert {
	animation: revealFromBottomAlert 0.35s ease-out forwards;
	opacity: 0; /* Initial state for reveal animation */
	margin-bottom: 0.75rem;
	min-width: 300px;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
	width: auto;
	max-width: 100%;
	/* Re-enable pointer events for individual alerts */
	pointer-events: auto;
}

@keyframes revealFromBottomAlert {
	from {
		opacity: 0;
		transform: translateY(100%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- NEW CSS for Hiding Animation --- */
.alert-stack-container.bottom-middle .alert.hiding-custom {
	/* Custom class to trigger hide animation */
	animation: slideOutToBottomAlert 0.35s ease-in forwards;
}

@keyframes slideOutToBottomAlert {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(50%); /* Slide down by 50% of its height as it fades */
		/* or transform: translateY(100%); to slide completely out of its original space */
	}
}

.btn-xs {
    padding: 0.1rem 0.25rem;
    font-size: 0.75rem; /* Adjust as needed */
    line-height: 1.2;
    border-radius: 0.2rem;
}

.page-title {
    font-size: 1.75rem; /* Bootstrap h2 equivalent */
    font-weight: bold; /* Was h2 implicit style */
    margin-bottom: 0;
}
.page-subtitle {
    font-size: 0.9rem;
}

.page-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Allow button to wrap */
    gap: 0.5rem;
}


/* Estilo para o Botão de Ação Flutuante (FAB) */
#fab-open-assistant {
	position: fixed; /* Posição fixa relativa à janela de visualização */
	bottom: 20px;    /* Distância do fundo */
	right: 25px;     /* Distância da direita */
	z-index: 1045;   /* Abaixo do z-index padrão de um modal (1055), mas acima do conteúdo normal */
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#fab-open-assistant:hover {
	transform: scale(1.1);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25) !important;
}


input.form-control, textarea.form-control, select.form-select, :hover input.form-control, :hover textarea.form-control, :hover select.form-select {
	color: var(--bs-purple);
}

.btn-secondary {
	color: var(--bs-secondary-text-emphasis);
}

/* ========================================
   PAGE HEADER MODERN DESIGN (top-div-header)
   ======================================== */
#top-div-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    background: var(--bs-white, #ffffff);
    padding: 1.5rem;
    border-radius: var(--bs-border-radius-xl, 1rem);
    box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
    border: 1px solid var(--bs-gray-200, #dee2e6);
}

#top-div-header .page-title {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--bs-primary, #0d6efd);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#top-div-header .page-title i {
    color: var(--bs-secondary, #6c757d);
    background: rgba(var(--bs-info-rgb, 13, 202, 240), 0.1);
    padding: 0.75rem;
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile responsiveness for top-div-header */
@media (max-width: 767.98px) {
    #top-div-header {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }
    
    #top-div-header .page-title {
        font-size: 1.5rem;
    }
    
    #top-div-header .page-title i {
        width: 40px;
        height: 40px;
        padding: 0.5rem;
    }
}

/* --- Clinical Record Category Badges --- */
.category-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
}

/* Category-specific colors */
.category-badge.category-lab {
    background-color: #e3f2fd;
    color: #1565c0;
    border-color: #bbdefb;
}

.category-badge.category-anatomia {
    background-color: #f3e5f5;
    color: #7b1fa2;
    border-color: #ce93d8;
}

.category-badge.category-procgerais {
    background-color: #e8f5e8;
    color: #2e7d32;
    border-color: #a5d6a7;
}

.category-badge.category-imagem {
    background-color: #fff3e0;
    color: #ef6c00;
    border-color: #ffcc02;
}

.category-badge.category-consulta {
    background-color: #fce4ec;
    color: #c2185b;
    border-color: #f8bbd9;
}

.category-badge.category-cirurgia {
    background-color: #ffebee;
    color: #d32f2f;
    border-color: #ffcdd2;
}

.category-badge.category-terapia {
    background-color: #e0f2f1;
    color: #00695c;
    border-color: #80cbc4;
}

.category-badge.category-preventivo {
    background-color: #f1f8e9;
    color: #558b2f;
    border-color: #c5e1a5;
}

/* Status badges (existing or enhanced) */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    text-transform: capitalize;
}

.status-badge.status-draft {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.status-badge.status-active {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.status-badge.status-completed {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-badge.status-revoked {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-badge.status-on-hold {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

/* --- Type Badges --- */
.type-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    border: 1px solid transparent;
}

.type-badge.type-servicerequest {
    background-color: #e1f5fe;
    color: #01579b;
    border-color: #b3e5fc;
}

.type-badge.type-referral {
    background-color: #f9fbe7;
    color: #33691e;
    border-color: #dcedc8;
}

.type-badge.type-atestado {
    background-color: #fff8e1;
    color: #e65100;
    border-color: #ffecb3;
}

.type-badge.type-condition {
    background-color: #fce4ec;
    color: #ad1457;
    border-color: #f8bbd9;
}

/* --- Medication Type Badges --- */
.med-type-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    border: 1px solid transparent;
}

.med-type-badge.med-type-medicationrequest {
    background-color: #e8f5e8;
    color: #2e7d32;
    border-color: #a5d6a7;
}

.med-type-badge.med-type-medicationstatement {
    background-color: #e3f2fd;
    color: #1565c0;
    border-color: #bbdefb;
}

.med-type-badge.med-type-medicationadministration {
    background-color: #fff3e0;
    color: #ef6c00;
    border-color: #ffcc02;
}

.med-type-badge.med-type-medicationdispense {
    background-color: #f3e5f5;
    color: #7b1fa2;
    border-color: #ce93d8;
}

/* --- Medication Category Badges --- */
.med-category-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
}

.med-category-badge.med-category-medication {
    background-color: #e8f5e8;
    color: #2e7d32;
    border-color: #a5d6a7;
}

.med-category-badge.med-category-cosmetic {
    background-color: #fce4ec;
    color: #c2185b;
    border-color: #f8bbd9;
}

.med-category-badge.med-category-food {
    background-color: #fff8e1;
    color: #f57f17;
    border-color: #fff59d;
}

.med-category-badge.med-category-vitamin {
    background-color: #fff3e0;
    color: #ef6c00;
    border-color: #ffcc02;
}

.med-category-badge.med-category-supplement {
    background-color: #f1f8e9;
    color: #558b2f;
    border-color: #c5e1a5;
}

.med-category-badge.med-category-herbal {
    background-color: #e0f2f1;
    color: #00695c;
    border-color: #80cbc4;
}

.med-category-badge.med-category-homeopathic {
    background-color: #f3e5f5;
    color: #7b1fa2;
    border-color: #ce93d8;
}

/* --- Medication Status Badges --- */
.med-status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    text-transform: capitalize;
}

.med-status-badge.med-status-draft {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.med-status-badge.med-status-active {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.med-status-badge.med-status-completed {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.med-status-badge.med-status-cancelled {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.med-status-badge.med-status-on-hold {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

.med-status-badge.med-status-stopped {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.med-status-badge.med-status-entered-in-error {
    background-color: #ffebee;
    color: #d32f2f;
    border: 1px solid #ffcdd2;
}

.med-status-badge.med-status-unknown {
    background-color: #f5f5f5;
    color: #616161;
    border: 1px solid #e0e0e0;
}