/* styles.css */

/* Global Color */
:root {
	--primary-color: #d32f2f; /* Red */
	--secondary-color: white;
	--text-color: black;
}

.theme-color-red {
	background-color: var(--primary-color) !important;
}

/* --- */
/* app-header.vue Styles */

.v-text-field--solo {
	background-color: white !important;
}

.v-icon.mdi-magnify {
	color: var(--primary-color) !important;
}

.v-autocomplete input {
	color: var(--primary-color) !important;
}

.header-admit-btn {
	color: white;
	border: 1px solid white;
	border-radius: 10px;
	background-color: var(--primary-color) !important;
	width: 100px;
}

.header-discharge-btn {
	color: white;
	border: 1px solid white;
	border-radius: 10px;
	background-color: var(--primary-color) !important;
	width: 150px;
}

/* --- */

/*GLOBAL BUTTON*/
.theme-btn {
	color: var(--secondary-color) !important;
	background-color: var(--primary-color) !important;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
}

.theme-btn:hover {
	background-color: darkred !important;
}

.theme-btn-alt {
	color: var(--primary-color) !important;
	background-color: var(--secondary-color) !important;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
}

.theme-btn-alt:hover {
	background-color: #f2f2f2 !important;
}

.theme-chip {
}

.theme-chip-alt {
	color: var(--primary-color) !important;
	background-color: var(--secondary-color) !important;
}

.dialog-actions {
	display: flex;
	justify-content: flex-end;
}

/* form-btn Styles */

.form-admit-btn,
.form-cancel-btn,
.form-discharge-btn,
.form-close-btn {
	color: var(--text-color);
	background-color: var(--primary-color) !important;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
}

.form-admit-btn:hover,
.form-cancel-btn:hover,
.form-discharge-btn:hover,
.form-close-btn:hover {
	background-color: darkred !important;
}

/* --- */
/* form-stepper-admit.vue Styles */

/* Button Styles for Stepper */
.form-stepper-admit-dialog-previous-btn,
.form-stepper-admit-dialog-next-btn,
.form-stepper-admit-dialog-done-btn {
	color: white !important; /* Text color */
	background-color: var(--primary-color) !important; /* Background color */
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out; /* Smooth transition */
}

.form-stepper-admit-dialog-previous-btn:hover,
.form-stepper-admit-dialog-next-btn:hover,
.form-stepper-admit-dialog-done-btn:hover {
	background-color: darkred !important; /* Hover background color */
}

/* --- */
/* user-management.vue Styles */

.form-submit-btn {
	color: var(--text-color);
	background-color: var(--primary-color);
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
}

.form-submit-btn:hover {
	background-color: darkred !important;
}

/* --- */
/* form-stepper-admit-dialog Styles */

.form-stepper-admit-dialog-main {
	padding: 16px; /* Add padding for better spacing inside the dialog */
	background-color: #f9f9f9; /* Light background for differentiation */
	border-radius: 8px; /* Rounded corners for a modern look */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
}

/* Stepper Number Styles */
.v-application .v-stepper__step__step {
	background-color: var(
		--primary-color
	) !important; /* Change the background color of step numbers */
	color: var(--secondary-color) !important; /* Change the text color */
}

.v-application .v-stepper__step--complete .v-stepper__step__step,
.v-application .v-stepper__step--active .v-stepper__step__step {
	background-color: var(
		--primary-color
	) !important; /* Change the color of the completed and active step */
	color: var(--secondary-color) !important;
}

/* Completed stepper text color */
.v-application .v-stepper__step--complete .v-stepper__step__label,
.v-application .v-stepper__step--complete .v-stepper__step__subtitle {
	color: var(--primary-color) !important;
}

/* Other dialog styles */
.form-stepper-admit-dialog-completeform,
.form-stepper-admit-dialog-bedchart,
.form-stepper-admit-dialog-add-allergy,
.form-stepper-admit-dialog-add-photo,
.form-stepper-admit-dialog-add-card,
.form-stepper-admit-dialog-discharge {
	padding: 16px;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Toolbar Styles */
.form-stepper-admit-toolbar {
	border-bottom: 2px solid #ddd !important; /* Bottom border for the toolbar */
}

.sticky-toolbar {
	position: sticky !important;
	top: 0 !important;
	z-index: 1 !important;
	background-color: white !important;
	border-bottom: 2px solid #ddd !important; /* Ensuring the border stays visible */
}

/* Dialog Title Styles */
.dialog-title {
	padding: 10px 0 !important;
	font-size: 28px !important;
	font-weight: bold !important;
}

/* Close Button Styles */
.form-stepper-admit-dialog-close-btn {
	color: white !important; /* Ensuring white text for the close button */
	padding: 5px;
}

/* Small Close Button */
.small-close-btn {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	color: white !important;
	background-color: red !important;
	transition: background-color 0.3s ease-in-out; /* Smooth transition */
}

.small-close-btn:hover {
	background-color: darkred !important;
}

/* Button Styles */
.form-stepper-admit-dialog-previous-btn,
.form-stepper-admit-dialog-next-btn,
.form-stepper-admit-dialog-done-btn,
.form-stepper-admit-dialog-continue-btn,
.form-stepper-admit-dialog-admit-btn,
.form-stepper-admit-dialog-other-forms-btn,
.discharge-dialog-btn {
	color: white !important;
	background-color: red !important;
}

.form-stepper-admit-dialog-previous-btn:hover,
.form-stepper-admit-dialog-next-btn:hover,
.form-stepper-admit-dialog-done-btn:hover,
.form-stepper-admit-dialog-continue-btn:hover,
.form-stepper-admit-dialog-admit-btn:hover,
.form-stepper-admit-dialog-other-forms-btn:hover,
.discharge-dialog-btn:hover {
	background-color: darkred !important;
}

/* Dialog Content Styles */
.form-stepper-admit-dialog-content {
	background-color: white; /* Set the background color to white */
	padding: 16px; /* Optional: Add padding for better readability */
}

/* Summary Dialog Content Styles */
.summary-dialog-content {
	padding: 16px; /* Add padding to make the dialog more readable */
}

/* Dashboard Bedchart Styles */
.dashboard-card {
	padding: 16px; /* Add padding for the dashboard bedchart */
	max-width: fit-content;
	margin: 0 auto;
}

/* Headline Styles */
.headline {
	font-size: 24px;
	font-weight: bold;
}

/* Secondary Title Styles */
.secondary-title {
	font-size: 18px;
	font-weight: bold;
}

/* Full Width Step Styles */
.full-width-step {
	width: 100%;
}

.full-width-step-content {
	width: 100%;
}

/* Custom Scrollbar Styles */
.form-stepper-admit-dialog-content::-webkit-scrollbar {
	width: 12px;
}

.form-stepper-admit-dialog-content::-webkit-scrollbar-thumb {
	background: red !important;
	border-radius: 6px;
	border: 3px solid white; /* Add a white border for better thumb visibility */
}

.form-stepper-admit-dialog-content::-webkit-scrollbar-thumb:hover {
	background: darkred !important;
}

.form-stepper-admit-dialog-content::-webkit-scrollbar-track {
	background: #f5f5f5; /* Light grey track */
	border-radius: 6px;
}

.form-stepper-admit-dialog-content {
	scrollbar-width: thin !important; /* For Firefox */
	scrollbar-color: red white !important; /* Thumb color and track color for Firefox */
}

/* --- */
/* Discharge Dialog Styles */
.search-input input {
	padding: 8px !important;
}

.discharge-dialog-btn {
	color: white !important;
	background-color: var(--primary-color) !important;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
}

.discharge-dialog-btn:hover {
	background-color: darkred !important;
}

.discharge-dialog-actions {
	padding: 16px !important;
}

/* Make the search input in the discharge dialog look like a text field */
.discharge-search-input input {
	border-radius: 4px !important;
	color: var(--primary-color) !important;
}

/* Bed button styles */
.bed-button {
	border: 1px solid #ccc !important; /* Ensuring border for bed button */
	border-radius: 8px !important; /* Rounded corners */
}

/* --- */
/* V-Tooltip Modifications */

.info-icon {
	cursor: pointer;
	color: #b71c1c; /* Red color */
}

.tooltip-content {
	background-color: #fff; /* White background */
	color: #000; /* Black text */
	border: 1px solid #ccc; /* Light grey border */
	border-radius: 4px; /* Rounded corners */
	padding: 4px 8px; /* Reduce padding to minimize gray space */
	font-size: 14px; /* Adjust font size if necessary */
	max-width: 250px; /* Adjust max-width as needed */
	white-space: pre-wrap; /* Allow line breaks */
	box-shadow: none; /* Remove default shadow */
	text-align: left; /* Align text to the left */
	margin: 0; /* Remove default margin */
}

/* Optional: Customize the arrow (caret) of the tooltip */
.v-tooltip__content::before {
	border-top-color: #fff; /* Color of the arrow */
	box-shadow: none; /* Remove shadow from the arrow */
}

/* Remove any inherent padding or margin from the tooltip container */
.v-tooltip__content {
	padding: 0 !important;
	margin: 0 !important;
}

/* --- */
/* Custom Pagination Styles */
.custom-pagination .v-pagination__item--active {
	background-color: red !important;
	color: white !important;
}

/* --- */