/*    GLOBAL STYLES */

/* Reset margin and apply a universal font stack */
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Code block font styling */
code {
	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

/*   CUSTOM DROPDOWN*/

/* Styled dropdown to remove browser default styles and add custom appearance */
.custom-dropdown {
	appearance: none; /* Remove default styling */
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 10px center; /* Custom dropdown arrow */
	background-size: 12px; /* Size of the arrow */
	border: 1px solid #ccc;
	border-radius: 4px;
	padding-right: 30px; /* Space for the arrow */
	height: 38px; /* Match form-control height */
}

/*    PROVIDER LIST (Search Results) */

/* Grid layout for search results */
.provider-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* Three equal columns */
	border: 2px solid #dee2e6;
	margin-bottom: 10px; /* Space below the table */
}

/*    FORM LAYOUT (Responsive) */

/* Medium to large screens */
@media (min-width: 768px) {
	.form-group {
		display: flex;
		align-items: center;
		margin-bottom: 1rem;
	}

	.form-label {
		width: 150px; /* Fixed label width */
		margin-bottom: 0;
	}

	.form-control {
		flex: 1; /* Allows the input field to take remaining space */
	}
}

/* Small screens */
@media (max-width: 767px) {
	.form-group {
		display: block; /* Stack form fields */
		margin-bottom: 1rem;
	}

	.form-label {
		display: block;
		margin-bottom: 0.5rem;
	}

	.form-control {
		width: 100%;
	}
}

/*    PRINT STYLES */

/* Styles to optimize for print */
@media print {
	@page {
		margin: 20mm 0 10mm 0; /* Custom margins for print pages */
	}

	.no-print {
		display: none; /* Hides elements marked as "no-print" */
	}

	.d-none {
		display: block !important; /* Forces visibility of hidden elements */
	}

	.page-break {
		page-break-before: always; /* Ensures certain content starts on a new page */
	}
}

/* RESPONSIVE - HIDE 3rd COLUMN UNDER 500px */
@media (max-width: 499px) {
	.provider-list {
		grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on small screens */
	}

	/* Hide the third column on small screens */
	.hide-on-small {
		display: none !important;
	}
}

/* BUTTON CONTAINER */

/* Align buttons to the right with spacing */
.button-container {
	display: flex;
	justify-content: flex-end;
	gap: 10px; /* Adds space between buttons */
}

/*    LOADING CAROUSEL (Animated Dots) */

/* Center the carousel container */
.carousel {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
}

/* Three bouncing dots for the loading animation */
.dot {
	width: 25px;
	height: 25px;
	margin: 0 5px;
	background-color: #007bff; /* Blue color */
	border-radius: 50%;
	display: inline-block;
	animation: dotBounce 1.2s infinite ease-in-out both;
}

	/* Delay animations for a smooth effect */
	.dot:nth-child(1) {
		animation-delay: -0.32s;
	}

	.dot:nth-child(2) {
		animation-delay: -0.16s;
	}

/* Animation keyframes for bouncing effect */
@keyframes dotBounce {
	0%, 80%, 100% {
		transform: scale(0);
	}

	40% {
		transform: scale(1);
	}
}

/*    PAGINATION STYLES */

/* Center pagination controls */
.pagination {
	display: flex;
	gap: 4px;
	justify-content: center; /* Center horizontally */
	align-items: center; /* Align vertically */
	margin: 0 auto; /* Ensure it's always centered */
}

	/* Default pagination button styles */
	.pagination button {
		padding: 5px 10px;
		border-radius: 8px; /* Rounded corners */
		border: 1px solid #ccc; /* Light border */
		background-color: #f8f9fa; /* Light gray background */
		cursor: pointer;
		transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transitions */
	}

		/* Active page button */
		.pagination button.active {
			background-color: #007bff;
			color: white;
		}

		/* Disabled button styling */
		.pagination button:disabled {
			background-color: #e0e0e0;
			cursor: not-allowed;
			opacity: 0.5;
		}



/* General cell styles */
.header-item, .provider-cell {
	flex: 1;
	padding: 5px;
	border: 1px solid #dee2e6;
}

/* Header row styling */
.header-item {
	font-weight: bold;
}

/* Background styling for table headers */
.provider-header {
	background-color: #f8f9fa; /* Light gray background */
	font-weight: bold;
	text-align: left;
	border-bottom: 2px solid #dee2e6; /* Distinct bottom border */
}

/* No data message */
.no-data {
	text-align: center;
	color: #666;
	padding: 10px;
	flex: 1;
}