﻿div.ui-datepicker {
    font-size: 0.9em;
    margin: 0 auto;
}

/* === ADA FIX: Allow datepicker to expand + fix header layout === */

/* Let the datepicker expand instead of being stuck at jQuery UI's 17em */
.ui-datepicker {
	width: auto !important;
}

@supports (width: fit-content) {
	.ui-datepicker {
		width: fit-content !important;
	}
}

/* Header must grow to contain larger 44px buttons */
.ui-datepicker .ui-datepicker-header {
	min-height: 48px;
	padding-left: 52px; /* room for Prev button (absolute positioned) */
	padding-right: 52px; /* room for Next button */
}

/* Center prev/next vertically since they're now larger */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	top: 50% !important;
	transform: translateY(-50%);
}

/* Ensure BOTH clickable and disabled days meet the 44×44 target with higher specificity */
.ui-datepicker .ui-datepicker-calendar a.ui-state-default,
.ui-datepicker .ui-datepicker-calendar span.ui-state-default {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	line-height: 1;
	padding: 0;
	box-sizing: border-box;
}

/* Make the day cells themselves large enough and add spacing */
.ui-datepicker .ui-datepicker-calendar td {
	min-width: 44px;
	min-height: 44px;
	padding: 2px;
	box-sizing: border-box;
}

div.ui-datepicker th {
    padding: 0;
}

/* Prev/Next navigation buttons */
div.ui-datepicker .ui-datepicker-prev,
div.ui-datepicker .ui-datepicker-next {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Month & Year dropdowns (if your theme shows selects in the title) */
div.ui-datepicker .ui-datepicker-title select {
	min-height: 44px;
	min-width: 44px; /* ensures the control itself meets size */
}

/* Ensure the header cells don't collapse the sizing above */
div.ui-datepicker th {
	padding: 0; /* keep your visual compactness */
	height: 44px; /* align row height with day targets */
}

/* Visible focus ring for keyboard users (required by audits) */
div.ui-datepicker td a:focus,
div.ui-datepicker .ui-datepicker-prev:focus,
div.ui-datepicker .ui-datepicker-next:focus,
div.ui-datepicker .ui-datepicker-title select:focus {
	outline: 3px solid #005a9e; /* high-contrast focus indicator */
	outline-offset: 2px;
	border-radius: 4px;
}

.ui-datepicker-today a {
	background-color: #d5dfe4 !important;
	background-image: none !important;
}

#divCalls {
	display: block;
	overflow-x: auto;
	overflow-y: hidden;
	text-align: left !important;
	scrollbar-width: auto;
	-webkit-overflow-scrolling: touch;
}

	#divCalls table {
		width: auto;
		min-width: 100%;
		white-space: nowrap;
		display: table;
	}


#calls {
    margin: 0 auto;
}

#loadingMsg {
    text-align: center;
    display: none;
    color: blue;
    font-style: italic;
}

.controlsHeader {
	display: flex;
	flex-direction: column; /* row layout */
	justify-content:center;
	gap:16px;
	align-items:center;
	margin-bottom:32px;
}

#formControls {
	display: flex;
	flex-direction: row; /* row layout */
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-start; /* align tops */
	justify-content: space-between;
}

@media (max-width: 1023px) {

	#formControls {
		display: flex;
		flex-direction: column; /* row layout */
		gap: 16px;
		align-items: center; /* align tops */
		justify-content: center;
	}
}

	/* Styles for tablesorter
--------------------------------------------------------*/
	table.tablesorter {
		/*font-family:arial;*/
		background-color: #CDCDCD;
		margin: 10px 0pt 15px;
		font-size: 0.9em;
		width: 100%;
		text-align: left;
	}

		table.tablesorter thead tr th, table.tablesorter tfoot tr th {
			background-color: #e6EEEE;
			border: 1px solid #FFF;
			font-size: 1em;
			padding: 4px;
		}

		table.tablesorter thead tr .header {
			background-image: url('Images/bg.gif');
			background-repeat: no-repeat;
			background-position: center right;
			cursor: pointer;
		}

		table.tablesorter tbody td {
			/*color: #3D3D3D;*/
			padding: 4px;
			background-color: #FFF;
			vertical-align: top;
		}

		table.tablesorter tbody tr.odd td {
			background-color: #F0F0F6;
		}

		table.tablesorter tbody tr:nth-child(even) td {
			background-color: #dfdfdf;
		}

		table.tablesorter thead tr .headerSortUp {
			background-image: url('Images/asc.gif');
		}

		table.tablesorter thead tr .headerSortDown {
			background-image: url('Images/desc.gif');
		}

		table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
			background-color: #8dbdd8;
		}

	table.tableCenter {
		margin: 0 auto;
	}

	.sr-only {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0,0,0,0);
		white-space: nowrap;
		border: 0;
	}
