/* ============================================
   PayYourTix Modernized Stylesheet
   Overlay: replaces IconSite.chirp.css
   ============================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
	--color-primary: #1a5276;
	--color-primary-light: #2980b9;
	--color-primary-dark: #0e3a54;
	--color-accent: #27ae60;
	--color-accent-hover: #219a52;
	--color-text: #2c3e50;
	--color-text-light: #5d6d7e;
	--color-text-inverse: #ffffff;
	--color-bg: #f8f9fa;
	--color-bg-card: #ffffff;
	--color-bg-alt: #eef2f7;
	--color-border: #d5dce4;
	--color-border-input: #adb5bd;
	--color-error: #c0392b;
	--color-warning: #e67e22;
	--color-success: #27ae60;
	--color-grid-header: #1a5276;
	--color-grid-row: #ffffff;
	--color-grid-row-alt: #f4f7fa;
	--color-grid-footer: #1a5276;
	--color-link: #2471a3;
	--color-link-visited: #6c3483;
	--color-link-hover: #1a5276;

	--font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.8125rem;
	--font-size-base: 0.875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
	--font-size-xxl: 2rem;

	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);

	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;

	--transition: 0.15s ease;
}

/* --- Base Reset & Typography --- */
body {
	background-color: var(--color-bg);
	background-image: none;
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: 1.6;
	margin: 0;
	padding: 0;
}

p {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--color-text);
	margin: 0 0 var(--spacing-md) 0;
}

li {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	margin: 0 0 var(--spacing-xs) 0;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family);
	color: var(--color-primary);
	margin: 0 0 var(--spacing-sm) 0;
	line-height: 1.3;
}

/* --- Links --- */
a:link {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:visited {
	color: var(--color-link-visited);
}

a:hover {
	color: var(--color-link-hover);
	text-decoration: none;
}

a:active {
	color: var(--color-primary-dark);
}

/* --- Title Classes --- */
.sectitle {
	color: var(--color-primary);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: 600;
	text-decoration: none;
}

.lptitle {
	color: var(--color-primary);
	font-family: var(--font-family);
	font-size: var(--font-size-xxl);
	font-weight: 700;
}

.sptitle {
	color: var(--color-accent);
	font-family: var(--font-family);
	font-size: var(--font-size-lg);
	font-weight: 600;
}

.crumb {
	color: var(--color-text-light);
	font-family: var(--font-family);
	font-size: var(--font-size-xs);
	font-weight: 600;
}

.mdate {
	color: var(--color-text-inverse);
	font-family: var(--font-family);
	font-size: var(--font-size-xs);
	font-weight: 600;
}

/* --- Navigation Links --- */
.biglink {
	background-color: transparent;
	color: var(--color-primary);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: 600;
}

.menulink {
	background-color: transparent;
	color: var(--color-primary);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: 600;
}

.submenulink {
	background-color: transparent;
	color: var(--color-primary-light);
	font-family: var(--font-family);
	font-size: var(--font-size-xs);
	font-weight: 600;
	left: 10px;
	position: relative;
}

.cookielink {
	background-color: var(--color-warning);
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--font-size-xs);
	border-radius: var(--radius-sm);
	padding: 2px var(--spacing-sm);
}

.biglink a:link {
	color: var(--color-primary);
	text-decoration: underline;
}

.biglink a:visited {
	color: var(--color-primary-light);
	text-decoration: underline;
}

.biglink a:hover {
	background-color: var(--color-bg-alt);
	color: var(--color-primary-dark);
	text-decoration: none;
	border-radius: var(--radius-sm);
}

.biglink a:active {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.menulink a:link {
	color: var(--color-primary);
	text-decoration: none;
}

.menulink a:visited {
	color: var(--color-primary);
	text-decoration: none;
}

.menulink a:hover {
	background-color: var(--color-bg-alt);
	color: var(--color-primary-dark);
	text-decoration: none;
	border-radius: var(--radius-sm);
}

.menulink a:active {
	background-color: var(--color-bg-alt);
	color: var(--color-primary-dark);
	text-decoration: none;
}

.submenulink a:link {
	color: var(--color-primary-light);
	text-decoration: none;
}

.submenulink a:visited {
	color: var(--color-primary-light);
	text-decoration: none;
}

.submenulink a:hover {
	background-color: var(--color-bg-alt);
	color: var(--color-primary-dark);
	text-decoration: none;
	border-radius: var(--radius-sm);
}

.submenulink a:active {
	background-color: var(--color-bg-alt);
	color: var(--color-primary-dark);
	text-decoration: none;
}

.cookielink a:link {
	color: var(--color-text);
	text-decoration: none;
}

.cookielink a:visited {
	color: var(--color-text);
	text-decoration: none;
}

.cookielink a:hover {
	color: var(--color-text);
	text-decoration: underline;
}

.cookielink a:active {
	color: var(--color-text);
	text-decoration: none;
}

/* --- Search --- */
.SearchTitle {
	font-family: var(--font-family);
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--color-primary);
}

/* --- Grid / Table Styles --- */
.GridHeaders {
	background-color: var(--color-grid-header) !important;
	color: var(--color-text-inverse) !important;
	text-decoration: none;
	font-weight: 600;
	padding: var(--spacing-sm) var(--spacing-md) !important;
}

.Alternate {
	background-color: var(--color-grid-row-alt);
}

.DataGrid {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	overflow: hidden;
}

.DataGridIndicator {
	background-color: var(--color-grid-header);
	border: 1px solid var(--color-border);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
}

.TableGrid {
	background-color: var(--color-bg-card);
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
}

.TableHeader {
	background-color: var(--color-grid-header);
	color: var(--color-text-inverse);
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	padding: var(--spacing-sm) var(--spacing-md);
}

.InfoGridHeader {
	background-color: var(--color-bg-alt);
	font-family: var(--font-family);
	font-weight: 600;
	padding: var(--spacing-sm);
}

.InfoGridMain {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	font-family: var(--font-family);
}

/* --- Buttons --- */
.Buttons,
input[type="submit"],
input[type="button"],
.navbuttons {
	background-color: var(--color-primary) !important;
	color: var(--color-text-inverse) !important;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	font-weight: 600;
	border: none !important;
	border-radius: var(--radius-md);
	padding: var(--spacing-sm) var(--spacing-lg);
	cursor: pointer;
	transition: background-color var(--transition), box-shadow var(--transition);
	box-shadow: var(--shadow-sm);
	line-height: 1.5;
}

.Buttons:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.navbuttons:hover {
	background-color: var(--color-primary-dark) !important;
	box-shadow: var(--shadow-md);
}

.Buttons:active,
input[type="submit"]:active,
input[type="button"]:active,
.navbuttons:active {
	background-color: var(--color-primary-dark) !important;
	box-shadow: var(--shadow-sm);
}

/* --- Form Controls --- */
.ComboBox,
select {
	background-color: var(--color-bg-card);
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-md);
	padding: var(--spacing-sm) var(--spacing-md);
	transition: border-color var(--transition), box-shadow var(--transition);
	appearance: auto;
}

.ComboBox:focus,
select:focus {
	border-color: var(--color-primary-light);
	box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.15);
}

.TextBox,
input[type="text"],
input[type="password"],
textarea {
	color: var(--color-text) !important;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	border: 1px solid var(--color-border-input) !important;
	border-radius: var(--radius-md);
	padding: var(--spacing-sm) var(--spacing-md);
	transition: border-color var(--transition), box-shadow var(--transition);
	background-color: var(--color-bg-card);
}

.TextBox:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
	border-color: var(--color-primary-light) !important;
	box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.15);
}

.CheckBox {
	background-color: transparent;
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
}

.RadioList {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
}

/* --- Labels --- */
.Labels {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	color: var(--color-text);
}

label {
	font-weight: 500;
	color: var(--color-text);
}

/* --- Panels & Containers --- */
.CaseInfoPanel {
	background-color: var(--color-primary);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
}

.CaseInfoLabel {
	color: var(--color-primary);
	font-weight: 700;
}

.Panels {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
}

.ButtonGrid {
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-md);
}

.SearchInfo {
	background-color: var(--color-bg-alt);
	color: var(--color-text);
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	width: 100%;
}

.SearchInfo .InfoName {
	text-align: right;
	padding-right: var(--spacing-md);
	width: 30%;
	color: var(--color-text-light);
}

.SearchInfo .InfoValue {
	font-weight: 600;
}

/* --- Menu System --- */
.MainMenu {
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-md);
}

.SkyMenu {
	background-color: var(--color-bg-alt);
	border-style: none;
	color: var(--color-text);
	cursor: pointer;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	border-radius: var(--radius-sm);
}

.SkyMenuItem {
	background-color: var(--color-primary);
	border-bottom: 1px solid var(--color-primary-light);
	border-left-style: none;
	border-right-style: none;
	color: var(--color-text-inverse);
	cursor: pointer;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
}

.SkyMenuMouseOver {
	background-color: var(--color-bg-alt);
	cursor: pointer;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	border-radius: var(--radius-sm);
}

/* --- Miscellaneous --- */
.RowSelect {
	background-color: var(--color-primary-dark);
}

.DIV {
	background-color: transparent;
	position: relative;
	text-align: center;
}

.HR {
	color: var(--color-border);
}

hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--spacing-md) 0;
}

.Tables {
	cursor: pointer;
}

.CoDefendantLabel {
	color: var(--color-primary-light);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	font-weight: 600;
}

.TreeView {
	background-color: var(--color-bg-alt);
	border-style: none;
	color: var(--color-text);
	cursor: pointer;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
}

.TableFooter {
	color: var(--color-primary);
	text-align: center;
	font-weight: 600;
}

.TheRules {
	text-align: left;
	color: var(--color-text);
	line-height: 1.6;
}

.TableJur .ComboBox {
	width: 152px;
}

#CitationInfo {
}

.IconSpecialMessage {
	color: var(--color-error);
	font-size: var(--font-size-base);
	font-family: var(--font-family);
	width: 100%;
	padding: var(--spacing-sm) 0;
}

/* ============================================
   GridView Inline Style Overrides
   ASP.NET renders BackColor/ForeColor as inline
   styles, so !important is needed here.
   ============================================ */

/* Header row */
th[scope="col"],
tr[style*="background-color:#5D7B9D"],
tr[style*="background-color: #5D7B9D"] {
	background-color: var(--color-grid-header) !important;
	color: var(--color-text-inverse) !important;
	font-weight: 600 !important;
	border: none !important;
}

/* Footer row */
tr[style*="background-color:#5D7B9D"]:last-child td,
tfoot tr {
	background-color: var(--color-grid-header) !important;
	color: var(--color-text-inverse) !important;
}

/* Data rows */
tr[style*="background-color:#F7F6F3"] {
	background-color: var(--color-grid-row) !important;
}

tr[style*="background-color:White"][style*="color:#284775"] {
	background-color: var(--color-grid-row-alt) !important;
	color: var(--color-text) !important;
}

/* Pager row */
tr[style*="background-color:#284775"] {
	background-color: var(--color-primary-dark) !important;
}

/* Selected row */
tr[style*="background-color:#E2DED6"] {
	background-color: #e8f0fe !important;
	color: var(--color-text) !important;
}

/* Edit row */
tr[style*="background-color:#999999"] {
	background-color: var(--color-bg-alt) !important;
}

/* GridView general improvements */
div[id$="ShoppingCart"],
table[id$="ShoppingCart"],
div[id$="gvPartialPay"],
table[id$="gvPartialPay"],
div[id$="gvResults"],
table[id$="gvResults"] {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

/* Grid cell padding */
table[id$="ShoppingCart"] td,
table[id$="ShoppingCart"] th,
table[id$="gvPartialPay"] td,
table[id$="gvPartialPay"] th,
table[id$="gvResults"] td,
table[id$="gvResults"] th {
	padding: var(--spacing-sm) var(--spacing-md) !important;
}

/* ============================================
   WCAG 2.2 AA Accessibility
   ============================================ */

/* Focus indicators (2.4.7 Focus Visible) */
*:focus {
	outline: 2px solid var(--color-primary-light);
	outline-offset: 2px;
}
*:focus:not(:focus-visible) {
	outline: none;
}
*:focus-visible {
	outline: 2px solid var(--color-primary-light);
	outline-offset: 2px;
}

/* Skip navigation link (2.4.1 Bypass Blocks) */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--color-primary-dark);
	color: var(--color-text-inverse);
	z-index: 10000;
	font-size: var(--font-size-md);
	text-decoration: none;
	border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
	top: 0;
}

/* Screen-reader-only text */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Accessible error message styling */
.error-message {
	color: var(--color-error);
	font-weight: 600;
}

/* Required field indicator */
.required {
	color: var(--color-error);
	font-weight: 600;
	margin-left: 2px;
}

/* Validation error messages */
span[id*="Validator"],
span[id*="validator"] {
	color: var(--color-error) !important;
	font-size: var(--font-size-sm);
}