/* SBH global modal, tooltip, and notification theming */

:root {
	/* Brand Colors - Updated to match main theme */
	--sbh-aqua: #7ab4a1;
	--sbh-orange: #e08f5f;
	--sbh-pink: #e19985;
	
	/* Neutral Colors */
	--sbh-black: #1a1a1a;
	--sbh-white: #ffffff;
	--sbh-light-gray: #f8f9fa;
	--sbh-medium-gray: #6c757d;
	--sbh-dark-gray: #495057;
	
	/* Legacy support */
	--sbh-accent-pink: var(--sbh-pink);
	--sbh-shadow-hover: rgba(0, 0, 0, 0.15);
	--color-aqua: var(--sbh-aqua);
	--color-orange: var(--sbh-orange);
	--color-pink: var(--sbh-pink);
	
	/* Typography */
	--sbh-font-primary: "Playfair Display", serif;
	--sbh-font-body: "Roboto", sans-serif;
}

/* Bootstrap modal overrides */
.modal-content {
	border: 0;
	border-radius: 16px;
	box-shadow: 0 20px 60px var(--sbh-shadow-hover);
	background: var(--sbh-white);
}

.modal-header {
	border: 0;
	padding: 1rem 1.25rem 0.5rem 1.25rem;
	background: var(--sbh-light-gray);
	border-radius: 16px 16px 0 0;
}

.modal-title {
	font-family: var(--sbh-font-primary);
	font-weight: 700;
	color: var(--sbh-black);
	font-size: 1.5rem;
}

.modal-body {
	padding: 0.75rem 1.25rem 1.25rem 1.25rem;
	font-family: var(--sbh-font-body);
	color: var(--sbh-black);
}

.modal-footer {
	border: 0;
	padding: 0.75rem 1.25rem 1.25rem 1.25rem;
	background: var(--sbh-light-gray);
	border-radius: 0 0 16px 16px;
}

.btn-close:focus {
	box-shadow: none;
}

.modal-backdrop.show {
	opacity: .25;
	background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25));
}

/* ========================================
   MOBILE RESPONSIVENESS ENHANCEMENTS
   ======================================== */

/* Dashboard Mobile Optimizations */
@media (max-width: 991.98px) {
	/* Sidebar mobile adjustments */
	.sidebar {
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		z-index: 1000;
	}
	
	.sidebar.show {
		transform: translateX(0);
	}
	
	/* Header mobile adjustments */
	.header {
		padding: 0.5rem 1rem;
	}
	
	.header .logo span {
		display: none !important;
	}
	
	.header .logo img {
		width: 40px;
		height: 40px;
	}
	
	/* Main content mobile adjustments */
	.main {
		margin-left: 0;
		padding: 1rem;
	}
	
	/* Page title mobile adjustments */
	.pagetitle {
		margin-bottom: 1rem;
	}
	
	.pagetitle h1 {
		font-size: 1.5rem;
		margin-bottom: 0.5rem;
	}
	
	.breadcrumb {
		font-size: 0.875rem;
	}
	
	/* Cards mobile adjustments */
	.card {
		margin-bottom: 1rem;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	}
	
	.card-body {
		padding: 1rem;
	}
	
	.card-title {
		font-size: 1.1rem;
		margin-bottom: 0.75rem;
	}
	
	/* Stats cards mobile layout */
	.stats-card {
		margin-bottom: 1rem;
	}
	
	.stats-card .card-body {
		padding: 1.25rem;
		text-align: center;
	}
	
	.stats-card .stats-icon {
		font-size: 2rem;
		margin-bottom: 0.5rem;
	}
	
	.stats-card .stats-number {
		font-size: 1.5rem;
		font-weight: 700;
		margin-bottom: 0.25rem;
	}
	
	.stats-card .stats-label {
		font-size: 0.875rem;
		color: var(--sbh-medium-gray);
	}
	
	/* Tables mobile adjustments */
	.table-responsive {
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	}
	
	.table {
		font-size: 0.875rem;
	}
	
	.table th,
	.table td {
		padding: 0.5rem 0.75rem;
		vertical-align: middle;
	}
	
	/* Buttons mobile adjustments */
	.btn {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
		min-height: 44px;
		border-radius: 8px;
	}
	
	.btn-sm {
		padding: 0.375rem 0.75rem;
		font-size: 0.8rem;
		min-height: 36px;
	}
	
	.btn-lg {
		padding: 0.75rem 1.5rem;
		font-size: 1rem;
		min-height: 48px;
	}
	
	/* Forms mobile adjustments */
	.form-control,
	.form-select {
		height: 44px;
		font-size: 16px; /* Prevents zoom on iOS */
		padding: 0.75rem;
		border-radius: 8px;
	}
	
	.form-label {
		font-size: 0.875rem;
		font-weight: 600;
		margin-bottom: 0.5rem;
	}
	
	/* Modal mobile adjustments */
	.modal-dialog {
		margin: 1rem;
		max-width: calc(100% - 2rem);
	}
	
	.modal-content {
		border-radius: 12px;
	}
	
	.modal-header {
		padding: 1rem;
		border-bottom: 1px solid #e9ecef;
	}
	
	.modal-title {
		font-size: 1.25rem;
	}
	
	.modal-body {
		padding: 1rem;
	}
	
	.modal-footer {
		padding: 1rem;
		border-top: 1px solid #e9ecef;
	}
	
	/* Alert mobile adjustments */
	.alert {
		padding: 0.75rem 1rem;
		font-size: 0.875rem;
		border-radius: 8px;
		margin-bottom: 1rem;
	}
	
	/* Badge mobile adjustments */
	.badge {
		font-size: 0.75rem;
		padding: 0.375rem 0.5rem;
	}
	
	/* Pagination mobile adjustments */
	.pagination {
		justify-content: center;
		margin-top: 1rem;
	}
	
	.page-link {
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Extra Small Devices (phones, 576px and down) */
@media (max-width: 575.98px) {
	/* Header extra small adjustments */
	.header {
		padding: 0.5rem;
	}
	
	.header .logo img {
		width: 35px;
		height: 35px;
	}
	
	/* Main content extra small adjustments */
	.main {
		padding: 0.75rem;
	}
	
	/* Page title extra small adjustments */
	.pagetitle h1 {
		font-size: 1.25rem;
	}
	
	.breadcrumb {
		font-size: 0.8rem;
	}
	
	/* Cards extra small adjustments */
	.card-body {
		padding: 0.75rem;
	}
	
	.card-title {
		font-size: 1rem;
	}
	
	/* Stats cards extra small layout */
	.stats-card .stats-icon {
		font-size: 1.75rem;
	}
	
	.stats-card .stats-number {
		font-size: 1.25rem;
	}
	
	/* Tables extra small adjustments */
	.table {
		font-size: 0.8rem;
	}
	
	.table th,
	.table td {
		padding: 0.375rem 0.5rem;
	}
	
	/* Buttons extra small adjustments */
	.btn {
		padding: 0.5rem 0.75rem;
		font-size: 0.8rem;
		min-height: 40px;
	}
	
	/* Forms extra small adjustments */
	.form-control,
	.form-select {
		height: 40px;
		font-size: 16px;
		padding: 0.5rem;
	}
	
	/* Modal extra small adjustments */
	.modal-dialog {
		margin: 0.5rem;
		max-width: calc(100% - 1rem);
	}
	
	.modal-header,
	.modal-body,
	.modal-footer {
		padding: 0.75rem;
	}
	
	.modal-title {
		font-size: 1.1rem;
	}
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
	/* Larger touch targets for dashboard elements */
	.btn,
	.nav-link,
	.dropdown-item,
	.page-link {
		min-height: 44px;
		min-width: 44px;
	}
	
	/* Keep checkboxes at reasonable size even on touch devices */
	.form-check-input {
		min-height: 18px !important;
		min-width: 18px !important;
		height: 18px !important;
		width: 18px !important;
	}
	
	/* Remove hover effects on touch devices */
	.btn:hover,
	.nav-link:hover,
	.dropdown-item:hover,
	.card:hover {
		transform: none;
		box-shadow: none;
	}
	
	/* Active states for touch */
	.btn:active,
	.nav-link:active,
	.dropdown-item:active {
		transform: scale(0.98);
		transition: transform 0.1s ease;
	}
	
	/* Sidebar toggle button */
	.toggle-sidebar-btn {
		min-height: 44px;
		min-width: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Landscape Orientation Adjustments */
@media (orientation: landscape) and (max-height: 500px) {
	.header {
		padding: 0.25rem 1rem;
	}
	
	.main {
		padding: 0.5rem 1rem;
	}
	
	.pagetitle {
		margin-bottom: 0.5rem;
	}
	
	.pagetitle h1 {
		font-size: 1.25rem;
	}
	
	.card-body {
		padding: 0.75rem;
	}
	
	.modal-dialog {
		margin: 0.5rem;
	}
}

/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.header .logo img,
	.navbar-brand-enhanced img {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
	.sidebar,
	.modal,
	.btn,
	.card,
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
	.card {
		border: 2px solid #000;
	}
	
	.btn {
		border: 2px solid currentColor;
	}
	
	.form-control,
	.form-select {
		border: 2px solid #000;
	}
	
	.table th,
	.table td {
		border: 1px solid #000;
	}
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
	.card {
		background-color: #2d3748;
		color: #e2e8f0;
		border-color: #4a5568;
	}
	
	.table {
		color: #e2e8f0;
	}
	
	.table th,
	.table td {
		border-color: #4a5568;
	}
	
	.form-control,
	.form-select {
		background-color: #2d3748;
		color: #e2e8f0;
		border-color: #4a5568;
	}
	
	.modal-content {
		background-color: #2d3748;
		color: #e2e8f0;
	}
	
	.modal-header,
	.modal-footer {
		border-color: #4a5568;
	}
}

/* Enhanced Facility Modal Styles */
.facility-modal-enhanced .modal-content {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border: 1px solid rgba(122, 180, 161, 0.1);
	box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
}

.facility-modal-enhanced .modal-header {
	background: linear-gradient(135deg, var(--color-aqua) 0%, #8bc7b4 100%);
	color: white;
	border-radius: 16px 16px 0 0;
	padding: 1.5rem 1.5rem 1rem 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.facility-modal-enhanced .modal-title-wrapper {
	display: flex;
	align-items: center;
}

.facility-modal-enhanced .modal-title {
	color: white;
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
	font-family: "Playfair Display", serif;
}

.facility-modal-enhanced .btn-close-white {
	filter: brightness(0) invert(1);
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

.facility-modal-enhanced .btn-close-white:hover {
	opacity: 1;
}

.facility-modal-enhanced .modal-body {
	padding: 2rem 1.5rem;
	font-family: "Roboto", sans-serif;
}

.facility-modal-enhanced .form-group {
	margin-bottom: 1.5rem;
}

.facility-modal-enhanced .form-label {
	font-weight: 600;
	color: var(--sbh-black);
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-family: "Poppins", sans-serif;
}

.facility-modal-enhanced .form-label i {
	font-size: 1.1rem;
}

.facility-modal-enhanced .form-control,
.facility-modal-enhanced .form-select {
	border: 2px solid #e9ecef;
	border-radius: 12px;
	padding: 0.875rem 1rem;
	font-size: 1rem;
	transition: all 0.3s ease;
	background-color: #ffffff;
	font-family: "Roboto", sans-serif;
}

.facility-modal-enhanced .form-control:focus,
.facility-modal-enhanced .form-select:focus {
	border-color: var(--color-aqua);
	box-shadow: 0 0 0 0.2rem rgba(122, 180, 161, 0.25);
	background-color: #ffffff;
}

.facility-modal-enhanced .form-control-lg,
.facility-modal-enhanced .form-select-lg {
	padding: 1rem 1.25rem;
	font-size: 1.1rem;
}

.facility-modal-enhanced .input-group-text {
	border: 2px solid #e9ecef;
	border-right: none;
	border-radius: 12px 0 0 12px;
	background-color: #f8f9fa;
	font-weight: 600;
	color: var(--sbh-medium-gray);
	font-family: "Roboto", sans-serif;
}

.facility-modal-enhanced .input-group .form-control {
	border-left: none;
	border-radius: 0 12px 12px 0;
}

.facility-modal-enhanced .file-upload-wrapper {
	position: relative;
}

.facility-modal-enhanced .file-upload-info {
	margin-top: 0.5rem;
	padding: 0.75rem;
	background-color: #f8f9fa;
	border-radius: 8px;
	border-left: 4px solid var(--color-aqua);
	font-family: "Roboto", sans-serif;
}

.facility-modal-enhanced .coordinate-info {
	background: linear-gradient(135deg, #e8f5f0 0%, #d4eddb 100%);
	border: 1px solid var(--color-aqua);
	border-radius: 12px;
	color: #2d5a41;
	font-size: 0.9rem;
	padding: 1rem;
	margin-top: 1rem;
	font-family: "Roboto", sans-serif;
}

.facility-modal-enhanced .coordinate-info i {
	color: var(--color-aqua);
}

.facility-modal-enhanced .modal-footer {
	padding: 1.5rem;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	background-color: #f8f9fa;
	border-radius: 0 0 16px 16px;
}

.facility-modal-enhanced .btn {
	border-radius: 12px;
	font-weight: 600;
	padding: 0.875rem 1.5rem;
	transition: all 0.3s ease;
	border: 2px solid transparent;
	font-family: "Poppins", sans-serif;
}

.facility-modal-enhanced .btn-lg {
	padding: 1rem 2rem;
	font-size: 1rem;
}

.facility-modal-enhanced .btn-primary {
	background: linear-gradient(135deg, var(--color-aqua) 0%, #8bc7b4 100%);
	border-color: var(--color-aqua);
	color: white;
}

.facility-modal-enhanced .btn-primary:hover {
	background: linear-gradient(135deg, #6da190 0%, #7ab4a1 100%);
	border-color: #6da190;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(122, 180, 161, 0.3);
}

.facility-modal-enhanced .btn-outline-secondary {
	border-color: #6c757d;
	color: #6c757d;
	background-color: transparent;
}

.facility-modal-enhanced .btn-outline-secondary:hover {
	background-color: #6c757d;
	border-color: #6c757d;
	color: white;
	transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.facility-modal-enhanced .modal-dialog {
		margin: 1rem;
	}
	
	.facility-modal-enhanced .modal-body {
		padding: 1.5rem 1rem;
	}
	
	.facility-modal-enhanced .modal-footer {
		padding: 1rem;
	}
	
	.facility-modal-enhanced .btn-lg {
		padding: 0.875rem 1.5rem;
	}
}

/* Animation for modal appearance */
.facility-modal-enhanced.fade .modal-dialog {
	transform: scale(0.8) translateY(-50px);
	transition: all 0.3s ease;
}

.facility-modal-enhanced.show .modal-dialog {
	transform: scale(1) translateY(0);
}

/* Status option styling */
.facility-modal-enhanced .form-select option.text-success {
	color: var(--color-aqua) !important;
	font-weight: 600;
}

.facility-modal-enhanced .form-select option.text-danger {
	color: var(--color-pink) !important;
	font-weight: 600;
}

/* Tooltips & Popovers (bubbles) */
.tooltip .tooltip-inner {
	background-color: var(--sbh-black);
	color: var(--sbh-white);
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 8px;
	box-shadow: 0 6px 18px var(--sbh-shadow-hover);
	font-family: "Roboto", sans-serif;
}

.tooltip .tooltip-arrow::before { background-color: var(--sbh-black); }

.popover {
	border: 0;
	border-radius: 14px;
	box-shadow: 0 16px 40px var(--sbh-shadow-hover);
}

.popover-header {
	background: var(--sbh-light-gray);
	border: 0;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
}

.popover-body { 
	color: var(--sbh-black);
	font-family: "Roboto", sans-serif;
}

/* SweetAlert2 theming */
.swal2-popup {
	border-radius: 16px !important;
	box-shadow: 0 20px 60px var(--sbh-shadow-hover) !important;
	background: var(--sbh-white) !important;
}

.swal2-title {
	font-family: var(--sbh-font-primary) !important;
	font-weight: 700 !important;
	color: var(--sbh-black) !important;
	font-size: 1.5rem !important;
}

.swal2-html-container { 
	color: var(--sbh-medium-gray) !important;
	font-family: var(--sbh-font-body) !important;
	font-size: 1rem !important;
}

.swal2-styled.swal2-confirm {
	background: linear-gradient(135deg, var(--sbh-aqua) 0%, #8bc7b4 100%) !important;
	border: 2px solid var(--sbh-aqua) !important;
	border-radius: 12px !important;
	font-family: var(--sbh-font-body) !important;
	font-weight: 600 !important;
	padding: 12px 24px !important;
	transition: all 0.3s ease !important;
}

.swal2-styled.swal2-confirm:hover { 
	filter: brightness(0.95) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(122, 180, 161, 0.3) !important;
}

.swal2-styled.swal2-cancel {
	background: var(--sbh-medium-gray) !important;
	border: 2px solid var(--sbh-medium-gray) !important;
	border-radius: 12px !important;
	font-family: var(--sbh-font-body) !important;
	font-weight: 600 !important;
	padding: 12px 24px !important;
	transition: all 0.3s ease !important;
}

.swal2-styled.swal2-cancel:hover {
	background: var(--sbh-dark-gray) !important;
	border-color: var(--sbh-dark-gray) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(108, 117, 125, 0.3) !important;
}

.swal2-icon.swal2-success { border-color: var(--color-aqua) !important; color: var(--color-aqua) !important; }
.swal2-icon.swal2-warning { border-color: var(--color-orange) !important; color: var(--color-orange) !important; }
.swal2-icon.swal2-error { border-color: var(--sbh-accent-pink) !important; color: var(--sbh-accent-pink) !important; }

/* Toast (SweetAlert2 toast mode) */
.swal2-container.swal2-top-end > .swal2-popup {
	border-left: 0;
	border-top: 0;
	border-right: 0;
}

/* Bootstrap alerts, toasts fallback */
.alert {
	border: 0;
	border-radius: 14px;
	box-shadow: 0 10px 28px var(--sbh-shadow);
	font-family: "Roboto", sans-serif;
}

.alert-success { background: rgba(122, 180, 161, 0.12); color: var(--sbh-black); }
.alert-warning { background: rgba(224, 143, 95, 0.12); color: var(--sbh-black); }
.alert-danger { background: rgba(225, 153, 133, 0.12); color: var(--sbh-black); }
.alert-info { background: rgba(122, 180, 161, 0.08); color: var(--sbh-black); }

/* Buttons alignment within modals */
.modal-footer .btn + .btn { margin-left: .5rem; }

/* DataTables export buttons themed to SBH palette */
.dt-buttons .dt-button.buttons-copy,
.dt-buttons .btn.buttons-copy,
button.dt-button.buttons-copy,
a.dt-button.buttons-copy,
.dt-buttons .btn-secondary.buttons-copy,
.buttons-copy.btn {
	color: #fff !important;
	background: var(--color-aqua) !important;
	border-color: var(--color-aqua) !important;
	font-family: "Poppins", sans-serif !important;
}
.dt-buttons .dt-button.buttons-excel,
.dt-buttons .btn.buttons-excel,
button.dt-button.buttons-excel,
a.dt-button.buttons-excel,
.dt-buttons .btn-secondary.buttons-excel,
.buttons-excel.btn {
	color: #fff !important;
	background: var(--color-orange) !important;
	border-color: var(--color-orange) !important;
	font-family: "Poppins", sans-serif !important;
}
.dt-buttons .dt-button.buttons-csv,
.dt-buttons .btn.buttons-csv,
button.dt-button.buttons-csv,
a.dt-button.buttons-csv,
.dt-buttons .btn-secondary.buttons-csv,
.buttons-csv.btn {
	color: #fff !important;
	background: var(--color-pink) !important;
	border-color: var(--color-pink) !important;
	font-family: "Poppins", sans-serif !important;
}
.dt-buttons .dt-button:hover,
.dt-buttons .btn:hover { filter: brightness(.92); }

/* Global body text styling */
body {
	font-family: var(--sbh-font-body);
	color: var(--sbh-black);
	line-height: 1.6;
}

/* Headings styling */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--sbh-font-primary);
	font-weight: 700;
	color: var(--sbh-black);
	line-height: 1.2;
}

/* Accent elements */
.btn, .nav-link, .badge, .form-label, .input-group-text {
	font-family: var(--sbh-font-body);
	font-weight: 500;
}