/**
 * DataTables USWDS Integration Stylesheet
 * Styles DataTables components to match U.S. Web Design System
 */

/* Status badges using USWDS color palette */
.status-badge {
	display: inline-block;
	padding: 0.3125rem 0.5rem;
	font-size: 0.75rem;
	font-weight: bold;
	text-align: center;
	border-radius: 0.25rem;
	margin-top: 0.3125rem; /* 5px spacing between stacked pills */
}

.status-badge:first-child {
	margin-top: 0; /* Remove top margin from first pill in a group */
}

.status-success { 
	background-color: #00a91c; 
	color: white; 
}

.status-warning { 
	background-color: #ffbe2e; 
	color: #1b1b1b; 
}

.status-error { 
	background-color: #d83933; 
	color: white; 
}

.status-info { 
	background-color: #005ea2; 
	color: white; 
}

.status-secondary { 
	background-color: #71767a; 
	color: white; 
}

/* DataTables wrapper styling to match USWDS */
.dataTables_wrapper {
	font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

/* DataTables Responsive - Fix background styling for collapsed column details */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
	position: relative;
	padding-left: 30px;
	cursor: pointer;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
	top: 50%;
	left: 5px;
	height: 1rem;
	width: 1rem;
	margin-top: -9px;
	display: block;
	position: absolute;
	color: white;
	border: 2px solid white;
	border-radius: 1rem;
	box-shadow: 0 0 3px #444;
	box-sizing: content-box;
	text-align: center;
	text-indent: 0 !important;
	font-family: 'Courier New', Courier, monospace;
	line-height: 1rem;
	content: '+';
	background-color: #005ea2;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
	content: '-';
	background-color: #d83933;
}

/* Responsive child row styling to match table background */
table.dataTable > tbody > tr.child {
	padding: 0.5rem 1rem;
	background-color: inherit;
}

table.dataTable > tbody > tr.child:hover {
	background-color: inherit !important;
}

table.dataTable > tbody > tr.child ul.dtr-details {
	display: inline-block;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
	border-bottom: 1px solid #eeeeee;
	padding: 0.5rem 0;
}

table.dataTable > tbody > tr.child ul.dtr-details > li:first-child {
	padding-top: 0;
}

table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
	border-bottom: none;
}

table.dataTable > tbody > tr.child span.dtr-title {
	display: inline-block;
	min-width: 75px;
	font-weight: bold;
	padding-right: 1rem;
}

/* Search box styling */
.dataTables_filter input[type="search"] {
	border: 2px solid #565c65;
	border-radius: 0;
	padding: 0.5rem;
	font-family: inherit;
	margin-left: 0.5rem;
}

.dataTables_filter input[type="search"]:focus {
	outline: 0.25rem solid #2491ff;
	outline-offset: 0;
	border-color: #0050d8;
}

/* Fix DataTables 2.0+ search label positioning */
.dt-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dt-search label {
	display: flex;
	align-items: center;
	margin: 0;
	white-space: nowrap;
}

.dt-search label .dt-input {
	margin-left: 0.5rem;
}

/* Ensure search text appears before input */
.dt-layout-cell.dt-end .dt-search {
	flex-direction: row;
}

.dt-layout-cell.dt-end .dt-search label {
	flex-direction: row;
}

/* Length menu styling */
.dataTables_length select {
	border: 2px solid #565c65;
	border-radius: 0;
	padding: 0.5rem;
	font-family: inherit;
	margin: 0 0.5rem;
}

.dataTables_length select:focus {
	outline: 0.25rem solid #2491ff;
	outline-offset: 0;
	border-color: #0050d8;
}

/* Table styling to match USWDS */
table.dataTable {
	border-collapse: separate;
	border-spacing: 0;
	width: 100% !important;
}

table.dataTable thead th {
	background-color: #162e51;
	color: white;
	border-bottom: 1px solid #565c65;
	padding: 1rem 0.75rem;
	font-weight: 700;
}

table.dataTable tbody td {
	padding: 0.75rem;
	border-bottom: 1px solid #dfe1e2;
	vertical-align: middle;
}

table.dataTable tbody tr:hover {
	background-color: #f0f0f0;
}

table.dataTable tbody tr:nth-child(even) {
	background-color: #f8f9fa;
}

table.dataTable tbody tr:nth-child(even):hover {
	background-color: #e6e7e8;
}

/* Pagination styling to match USWDS */
.dataTables_paginate .paginate_button {
	border: 1px solid #dfe1e2;
	color: #005ea2 !important;
	background: white;
	padding: 0.5rem 0.75rem;
	margin: 0 0.125rem;
	text-decoration: none;
	border-radius: 0;
}

.dataTables_paginate .paginate_button:hover {
	background: #f0f0f0 !important;
	border-color: #71767a;
	color: #1b1b1b !important;
}

.dataTables_paginate .paginate_button.current {
	background: #005ea2 !important;
	border-color: #005ea2;
	color: white !important;
}

.dataTables_paginate .paginate_button.disabled {
	color: #71767a !important;
	background: #f8f9fa !important;
	border-color: #dfe1e2;
}

/* Info text styling */
.dataTables_info {
	color: #1b1b1b;
	font-weight: 400;
	padding: 0.75rem 0;
}

/* Processing indicator */
.dataTables_processing {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #dfe1e2;
	color: #1b1b1b;
	padding: 1rem;
	border-radius: 0.25rem;
}

/* Utility classes */
.text-monospace {
	font-family: "Roboto Mono Web", "Bitstream Vera Sans Mono", "Consolas", "Courier New", Courier, monospace;
	font-size: 0.9rem;
}

.word-break {
	word-break: break-all;
	overflow-wrap: break-word;
	max-width: 200px;
}

/* Button styling for action buttons */
.dt-button {
	border: 1px solid #005ea2;
	background: #005ea2;
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
	font-family: inherit;
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
	margin: 0.125rem;
	white-space: nowrap;
}

.dt-button:hover {
	background: #1a4480;
	border-color: #1a4480;
	color: white;
}

.dt-button.btn-sm {
	padding: 0.25rem;
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dt-button.btn-sm svg.usa-icon {
	margin: 0;
	flex-shrink: 0;
}

/* Action column button container - keep buttons side by side */
table.dataTable td .dt-button.btn-sm {
	display: inline-flex;
	margin-right: 0.25rem;
}

table.dataTable td .dt-button.btn-sm:last-child {
	margin-right: 0;
}

/* Force DataTable action buttons to stay side by side at all screen sizes */
@media (max-width: 1024px) {
	table.dataTable td .dt-button.btn-sm {
		display: inline-flex !important;
		width: auto !important;
		margin-right: 0.25rem !important;
		margin-bottom: 0 !important;
		flex-direction: row !important;
	}

	table.dataTable td .dt-button.btn-sm:last-child {
		margin-right: 0 !important;
	}
}

/* Danger button variant for delete actions */
.dt-button.btn-danger {
	border-color: #d83933;
	background: #d83933;
	color: white;
}

.dt-button.btn-danger:hover {
	background: #b50909;
	border-color: #b50909;
	color: white;
}

/* DataTables Buttons styling - USWDS themed */
.dt-buttons .dt-button {
	background-color: #005ea2;
	color: white;
	border: 0;
	border-radius: 0.25rem;
	padding: 0.75rem 1rem;
	font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-size: 1rem;
	line-height: 0.9;
	text-decoration: none;
	cursor: pointer;
	font-weight: 700;
	margin-right: 0.5rem;
	transition: all 0.15s ease-in-out;
	white-space: nowrap;
}

.dt-buttons .dt-button:hover {
	background-color: #1a4480;
	color: white;
	text-decoration: none;
}

.dt-buttons .dt-button:focus {
	outline: 0.25rem solid #2491ff;
	outline-offset: 0.25rem;
}

.dt-buttons .dt-button:disabled,
.dt-buttons .dt-button.disabled {
	background-color: #c9c9c9;
	color: #757575;
	cursor: not-allowed;
}

.dt-buttons .dt-button:disabled:hover,
.dt-buttons .dt-button.disabled:hover {
	background-color: #c9c9c9;
	color: #757575;
}

/* DataTables Select Plugin Styling */
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected:hover {
	background-color: #005ea2 !important;
	color: white !important;
}

table.dataTable tbody tr.selected td {
	background-color: inherit !important;
	color: inherit !important;
}

/* Make status badges readable when selected */
table.dataTable tbody tr.selected .status-badge {
	background-color: rgba(255, 255, 255, 0.2) !important;
	color: white !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* ========================================
   RESPONSIVE TABLE WIDTH CONTROLS
   ======================================== */

/* Ensure DataTable has minimum width on larger screens */
/*
@media (min-width: 1024px) {
	table.dataTable {
		min-width: 1024px;
	}
	
	.dataTables_wrapper {
		min-width: 1024px;
	}
}
*/

/* ========================================
   LEGACY STYLES - Maintained for compatibility
   ======================================== */

/* DataTables pagination styling */
ul.pagination li { 
	display: inline-block; 
}

/* Legacy form elements */
#add_edit { 
	display: none; 
}

#form_error { 
	color: #ff0000; 
	font-weight: bold; 
}

/* ========================================
   MODAL TEMPLATE SYSTEM - All modal-related CSS
   ======================================== */

/* jQuery Modal customization */
.jquery-modal.blocker {
	background-color: rgba(0, 0, 0, 0.7);
}

/* Hide all modals by default - important for proper close behavior */
.modal {
	display: none !important;
}

/* Ensure user admin modal is hidden by default */
#userAdminModal {
	display: none !important;
}

/* GLOBAL MODAL TEMPLATE - Applied to all modals when shown */
.modal[style]:not([style*="display: none"]) {
	display: flex !important;
	flex-direction: column !important;
	max-width: none !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
	padding: 0 !important;
	position: fixed !important;
	z-index: 99999 !important;
	background: white !important;
	border: 1px solid #dfe1e2 !important;
	border-radius: 0.5rem !important;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175) !important;
}

/* MODAL DIMENSIONS - ID-specific width and height only */

/* Large modals (90% viewport) */
#logDetailsModal.modal[style]:not([style*="display: none"]),
#admin-reinit-modal.modal[style]:not([style*="display: none"]) {
	width: 90vw !important;
	height: 90vh !important;
	max-height: none !important;
}

/* Archive log modal */
#archiveLogsModal.modal[style]:not([style*="display: none"]) {
	width: 50vw !important;
	height: auto !important;
	max-height: 90vw !important;
}

/* Admin reinit modal - auto height instead of 90vh */
#admin-reinit-modal.modal[style]:not([style*="display: none"]) {
	height: auto !important;
	min-height: auto !important;
	max-height: 90vh !important;
}

/* Small modal (33% viewport width) */
#admin-toggle-modal.modal[style]:not([style*="display: none"]) {
	width: 33vw !important;
	min-width: 400px !important;
	height: auto !important;
	min-height: auto !important;
	max-height: 90vh !important;
}

/* Role management modals - auto width, 500px max height */
#roleModerationModal.modal[style]:not([style*="display: none"]),
#roleDeleteModal.modal[style]:not([style*="display: none"]),
#userDeleteModal.modal[style]:not([style*="display: none"]) {
	width: auto !important;
	max-width: 500px !important;
	max-height: 500px !important;
	height: auto !important;
	min-height: auto !important;
}

/* Site deletion confirmation modal - 700px max width, 400px max height */
#siteDeleteModal.modal[style]:not([style*="display: none"]) {
	width: auto !important;
	max-width: 700px !important;
	height: auto !important;
	max-height: 400px !important;
	min-height: auto !important;
}

/* User admin modal - 481px default width, responsive */
#userAdminModal.modal[style]:not([style*="display: none"]) {
	width: 481px !important;
	max-width: 90vw !important;
	height: auto !important;
	max-height: 80vh !important;
}

/* Site management modal - auto width based on content, max 900px width, 90vh max height */
#siteModerationModal.modal[style]:not([style*="display: none"]) {
	width: auto !important;
	max-width: 900px !important;
	min-width: 600px !important;
	height: auto !important;
	max-height: 90vh !important;
}

/* Site restore confirmation modal - auto width, 600px max width */
#siteRestoreModal.modal[style]:not([style*="display: none"]) {
	width: auto !important;
	max-width: 600px !important;
	height: auto !important;
	max-height: 500px !important;
	min-height: auto !important;
}

/* User moderation modal - auto width, 800px max width, 90vh max height */
#userModerationModal.modal[style]:not([style*="display: none"]) {
	width: auto !important;
	max-width: 800px !important;
	height: 70vh !important;
	max-height: 70vh !important;
}

/* Ensure user-moderation modal container uses full height for 3-pane layout */
#userModerationModal .user-modal-container {
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Modal header - USWDS style */
.modal .modal-header {
	flex-shrink: 0;
	padding: 1.5rem 2rem;
	border-bottom: 1px solid #dfe1e2;
	background-color: #f8f9fa;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

.modal .modal-header h3 {
	margin: 0;
	color: #1b1b1b;
	font-size: 1.375rem;
	font-weight: 700;
	font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

/* Modal body - USWDS style */
.modal .modal-body {
	flex-grow: 1;
	overflow-y: auto;
	padding: 2rem;
	background-color: white;
}

/* Modal footer - USWDS style with responsive button handling */
.modal div[class$="-footer"] {
	flex-shrink: 0;
	padding: 1.5rem 2rem;
	border-top: 1px solid #dfe1e2;
	background-color: #f8f9fa;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}

/* Ensure footer buttons are properly spaced and responsive */
.modal div[class$="-footer"] .display-flex {
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.modal div[class$="-footer"] .display-flex > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Prevent button overflow and ensure proper spacing */
.modal div[class$="-footer"] button,
.modal div[class$="-footer"] .usa-button {
	white-space: nowrap;
	min-width: auto;
	flex-shrink: 0;
}

/* Modal body without footer should have bottom radius */
.modal .modal-body:last-child {
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}

/* jQuery Modal auto-generated close button with USWDS styling and 508 compliance */
.modal a.close-modal.uswds-close {
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	width: 2.5rem;
	height: 2.5rem;
	background-color: #f8f9fa;
	border: 2px solid #565c65;
	border-radius: 50%;
	color: #1b1b1b;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease-in-out;
	z-index: 1;
}

.modal a.close-modal.uswds-close:hover,
.modal a.close-modal.uswds-close:focus {
	background-color: #1b1b1b;
	border-color: #1b1b1b;
	color: white;
	transform: scale(1.1);
}

.modal a.close-modal.uswds-close:focus {
	outline: 2px solid #005ea2;
	outline-offset: 2px;
}

/* Ensure admin toggle modal buttons stay side by side */
#admin-toggle-modal .modal-body {
	padding: 1rem 2rem !important;
}

#admin-toggle-modal .modal-body > div {
	display: flex !important;
	flex-direction: column !important;
}

#admin-toggle-modal .modal-body > div > div {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 1rem !important;
	align-items: center !important;
	margin-top: 1rem !important;
}

#admin-toggle-modal .usa-button {
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}

/* Override USWDS form width constraints for advanced filters */
#filtersCollapse .usa-form {
	max-width: none !important;
	width: 100%;
}

/* Animation keyframes */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Prevent button text from wrapping */
.usa-button {
	white-space: nowrap;
}

/* Admin reinit modal sizing */
#admin-reinit-modal.modal[style]:not([style*="display: none"]) {
	width: auto !important;
	max-width: 700px !important;
	height: auto !important;
}

/* Log details modal sizing - 95% viewport */
#logDetailsModal.modal[style]:not([style*="display: none"]) {
	width: 95vw !important;
	height: 95vh !important;
	max-width: none !important;
	max-height: none !important;
}


/* Full height layout - makes pages fill 100% of visible space */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Ensure message area is visible and not overlapped when it has content */
#message-container {
	position: relative;
	z-index: 10;
	flex-shrink: 0;
	width: 100%;
	/* Remove !important from display/visibility to allow JavaScript control */
}

/* When message container is empty, ensure it's completely hidden */
#message-container:empty,
#message-container[style*="display: none"] {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	visibility: hidden !important;
}

/* Force message area to be visible above content when it has content */
#message-area {
	position: relative;
	z-index: 11;
	width: 100%;
}

/* Dynamic alert positioning - ensure it's properly positioned but below modals */
#dynamic-alert {
	position: relative;
	z-index: 12;
	margin-bottom: 1rem;
}

/* Only force visibility when alert is not hidden */
#dynamic-alert:not(.display-none) {
	display: block !important;
	visibility: visible !important;
}

/* Ensure modals always appear above system messages */
.modal,
.jquery-modal.blocker {
	z-index: 99999 !important;
}

/* Ensure modal content is above the blocker */
.modal[style]:not([style*="display: none"]) {
	z-index: 100000 !important;
}

/* Override any potential hiding of alerts */
.usa-alert:not(.display-none) {
	display: block !important;
	visibility: visible !important;
}

#main-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;
}

#main-content .bg-base-lightest {
	flex: 1;
	display: flex;
	flex-direction: column;
}

#main-content .grid-container {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Ensure DataTables container can grow */
.dataTables_wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.dataTables_wrapper .dt-container {
	flex: 1;
	display: flex;
	flex-direction: column;
}


/* Remove right margin from last button in DataTable containers */
.margin-left-auto.display-flex.flex-align-center .usa-button:last-child,
.margin-left-auto.display-flex.flex-align-center button:last-child,
.margin-left-auto.display-flex.flex-align-center a:last-child {
	margin-right: 0 !important;
}

/* Responsive adjustments for DataTable header button containers only */
@media (max-width: 1024px) {
	/* Stack header buttons on tablets and smaller screens - exclude table action buttons */
	.display-flex.flex-justify.flex-align-center.margin-bottom-2 .margin-left-auto.display-flex.flex-align-center {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-top: 1rem !important;
	}

	/* Make parent container stack vertically */
	.display-flex.flex-justify.flex-align-center.margin-bottom-2 {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	/* Full width buttons when stacked - only for header buttons */
	.display-flex.flex-justify.flex-align-center.margin-bottom-2 .margin-left-auto.display-flex.flex-align-center .usa-button,
	.display-flex.flex-justify.flex-align-center.margin-bottom-2 .margin-left-auto.display-flex.flex-align-center button {
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 0.5rem !important;
		justify-content: center !important;
	}

	/* Remove bottom margin from last header button */
	.display-flex.flex-justify.flex-align-center.margin-bottom-2 .margin-left-auto.display-flex.flex-align-center .usa-button:last-child,
	.display-flex.flex-justify.flex-align-center.margin-bottom-2 .margin-left-auto.display-flex.flex-align-center button:last-child {
		margin-bottom: 0 !important;
	}

	/* Ensure title takes full width when stacked */
	.display-flex.flex-justify.flex-align-center.margin-bottom-2 h1 {
		margin-bottom: 0.5rem !important;
		text-align: center !important;
	}
}

/* Responsive table adjustments */
@media (max-width: 768px) {
	.dataTables_wrapper .dataTables_filter,
	.dataTables_wrapper .dataTables_length {
		text-align: left;
		margin-bottom: 1rem;
	}
	
	table.dataTable thead th,
	table.dataTable tbody td {
		padding: 0.5rem;
		font-size: 0.875rem;
	}
	
	/* Make modals smaller on mobile */
	#logDetailsModal.modal,
	#archiveLogsModal.modal {
		width: 95vw !important;
		height: 95vh !important;
	}
	
	/* Even more compact button layout on mobile */
	.margin-left-auto.display-flex.flex-align-center .usa-button,
	.margin-left-auto.display-flex.flex-align-center button {
		padding: 0.75rem !important;
		font-size: 0.9375rem !important;
	}
}


/* User admin modal specific styling for proper 3-row architecture */
/* Only apply flex when modal is actually shown */
#userAdminModal.modal[style]:not([style*="display: none"]) {
	display: flex !important;
	flex-direction: column !important;
}

#userAdminModal.modal[style]:not([style*="display: none"]) .user-modal-container {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	width: 100% !important;
}

#userAdminModal .user-modal-header {
	flex-shrink: 0 !important;
	padding: 1.5rem 2rem !important;
	border-bottom: 1px solid #dfe1e2 !important;
	background-color: #f8f9fa !important;
}

#userAdminModal .user-modal-body {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	padding: 1rem !important;
	padding-top: 0.5rem !important;
	min-height: 0 !important;
	width: 100% !important;
}

/* Ensure content uses full width */
#userAdminModal .user-modal-content {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 0 !important;
}

#userAdminModal .usa-form {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
}

#userAdminModal .usa-fieldset {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

#userAdminModal .user-modal-footer {
	flex-shrink: 0 !important;
	padding: 1.5rem 2rem !important;
	border-top: 1px solid #dfe1e2 !important;
	background-color: #f8f9fa !important;
}

/* User admin modal responsive sizing */

/* User modal padding - reduce to 1rem for all sections */
#userAdminModal .user-modal-header,
#userAdminModal .user-modal-body,
#userAdminModal .user-modal-footer {
	padding: 1rem !important;
}

/* Ensure modal body scrolls when content is too tall */
#userAdminModal .user-modal-body {
	overflow-y: auto !important;
	max-height: calc(80vh - 200px) !important;
}

/* Site moderation modal - same scrolling behavior as user admin modal */
#siteModerationModal .user-modal-body {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	padding: 1rem !important;
	padding-top: 0.5rem !important;
	min-height: 0 !important;
	width: 100% !important;
	max-height: calc(80vh - 200px) !important;
}

/* Ensure site modal content uses full width */
#siteModerationModal .user-modal-content {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 0 !important;
}

/* Site modal form optimizations - reduce vertical whitespace and optimize layout */
#siteModerationModal .usa-section-heading {
	margin-top: 1.5rem !important;
	margin-bottom: 1rem !important;
}

#siteModerationModal .margin-top-4 {
	margin-top: 1.5rem !important;
}

#siteModerationModal .margin-bottom-2 {
	margin-bottom: 0.75rem !important;
}

#siteModerationModal .margin-y-2 {
	margin-top: 1rem !important;
	margin-bottom: 0.75rem !important;
}

/* Reduce spacing between form rows */
#siteModerationModal .grid-row + .grid-row {
	margin-top: 0.75rem !important;
}

/* Reduce spacing within fieldsets and ensure full width */
#siteModerationModal .usa-fieldset {
	margin-bottom: 0.5rem !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
}

/* Make all form fields use full available width */
#siteModerationModal .usa-input,
#siteModerationModal .usa-select {
	width: 100% !important;
	max-width: 100% !important;
}

/* Reduce label margins */
#siteModerationModal .usa-label {
	margin-bottom: 0.25rem !important;
	margin-top: 0 !important;
}

/* Reduce checkbox spacing */
#siteModerationModal .usa-checkbox {
	margin-bottom: 0.5rem !important;
}

/* Compact checkbox layout */
#siteModerationModal .usa-checkbox:last-child {
	margin-bottom: 0 !important;
}

/* Ensure form and all containers use full width */
#siteModerationModal .usa-form {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Ensure grid system uses full width */
#siteModerationModal .grid-row {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* User admin modal form layout - single column only */
#userAdminModal .user-form-row {
	display: block;
	width: 100%;
}

#userAdminModal .user-form-col {
	width: 100%;
	padding: 0.5rem 0;
	margin-bottom: 0;
}

/* Ensure all form elements and containers use full width */
#userAdminModal .usa-input,
#userAdminModal .usa-select {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

#userAdminModal .usa-form-group {
	width: 100% !important;
	max-width: 100% !important;
}

#userAdminModal .usa-label {
	width: 100% !important;
	max-width: 100% !important;
}

/* Style checkbox group in user admin modal */
#userAdminModal .usa-checkbox-group {
	width: 100% !important;
	max-width: 100% !important;
}

#userAdminModal .usa-checkbox {
	margin-bottom: 0.5rem !important;
}

#userAdminModal .usa-legend {
	width: 100% !important;
	max-width: 100% !important;
}

/* User Moderation Modal checkbox styling - copy exact same styles as userAdminModal */
#userModerationModal .usa-checkbox-group {
	width: 100% !important;
	max-width: 100% !important;
}

#userModerationModal .usa-checkbox {
	margin-bottom: 0.5rem !important;
}

/* Old CSS removed - replaced with working CSS below */

/* NUCLEAR OPTION - Show native HTML checkboxes and fuck USWDS styling */
#userModerationModal .usa-checkbox__input {
	opacity: 1 !important;
	position: static !important;
	width: 20px !important;
	height: 20px !important;
	margin-right: 10px !important;
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

#userModerationModal .usa-checkbox__label {
	padding-left: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	flex-direction: row !important;
}

#userModerationModal .usa-checkbox__label::before {
	display: none !important;
}

#userModerationModal .usa-legend {
	width: 100% !important;
	max-width: 100% !important;
}

/* Remove top margin from first label only in each column */
#userAdminModal .user-form-col > .usa-label:first-of-type {
	margin-top: 0 !important;
}

/* Also handle first element if it's a fieldset */
#userAdminModal .user-form-col > .usa-fieldset:first-child {
	margin-top: 0 !important;
}

/* Tablet breakpoint - maintain two columns but reduce modal width */

/* Mobile breakpoint - only when 481px won't fit */
@media (max-width: 500px) {
	/* User admin modal - use viewport width when 481px is too wide */
	#userAdminModal.modal[style]:not([style*="display: none"]) {
		width: 95vw !important;
	}	
	
	/* Reduce padding on smaller screens */
	.modal .modal-header,
	.modal .modal-body,
	.modal div[class$="-footer"] {
		padding: 1rem !important;
	}
	
	/* Stack footer buttons only when they would collide (ONLY for user admin modal) */
	@media (max-width: 480px) {
		#userAdminModal .user-modal-footer .display-flex {
			flex-direction: column;
			align-items: stretch;
		}
		
		#userAdminModal .user-modal-footer .display-flex > div {
			flex-direction: column;
			width: 100%;
		}
		
		#userAdminModal .user-modal-footer button,
		#userAdminModal .user-modal-footer .usa-button {
			width: 100%;
			justify-content: center;
			margin-bottom: 0.5rem;
		}
	}
	
	/* Adjust header text size */
	.modal .modal-header h3 {
		font-size: 1.125rem !important;
	}

	/* Responsive filter controls - stack vertically on mobile */
	.filter-controls-row {
		flex-direction: column !important;
		gap: 1rem !important;
		align-items: flex-start !important;
	}

	.filter-control-group {
		width: 100% !important;
	}

	.search-group {
		justify-content: space-between !important;
	}

	.results-group {
		justify-content: flex-start !important;
	}

	.filter-control-group input[type="text"] {
		width: 100% !important;
		max-width: none !important;
	}

	/* Search appears first on mobile, results per page second */
	.search-group {
		order: 1 !important;
	}

	.results-group {
		order: 2 !important;
	}
}