.Font8 {
	font-size: 8pt;
}

.Font9 {
	font-size: 9pt;
}

.Font10 {
	font-size: 10pt;
}

.Font11 {
	font-size: 11pt;
}

.Font12 {
	font-size: 12pt;
}

.Font13 {
	font-size: 13pt;
}

.Font14 {
	font-size: 14pt;
}

.Font15 {
	font-size: 15pt;
}

.Font16 {
	font-size: 16pt;
}

td a {
	color: #344767;
}

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

.logo {
	height: 50px;
}

.customFileInput{
	display: none;
}

.customFileIcon{
	cursor: pointer;
}

.landingBody {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}

.landingHeader {
	color: #fff;
	padding: 20px 0;
	text-align: center;
	position: relative;
	z-index: 1;
}

.landingContainer {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.alternateRow {
	background-color: #e4f5ff;
	padding: 20px;
	margin: 10px 0;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cta-button {
	display: inline-block;
	padding: 15px 30px;
	margin-top: 20px;
	background: #ff5722;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
}

.cta-button:hover {
	background: #e64a19;
}

.features, .testimonials, .cta-section {
	margin: 40px 0;
}

.feature-item, .testimonial-item {
	background: #fff;
	padding: 20px;
	margin: 10px 0;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.feature-item div, .alternateRow div {
	margin-top: 0px;
}

.landingFooter {
	background: #333;
	color: #fff;
	text-align: center;
	padding: 20px 0;
}

.TitleField {
}

/* Skip-to-content link — visually hidden until keyboard focus */
.skip-to-content {
	position: absolute;
	top: -100%;
	left: 0;
	padding: 0.75rem 1.5rem;
	background: var(--primary-color);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	z-index: 10000;
	border-radius: 0 0 4px 0;
}

.skip-to-content:focus {
	top: 0;
}

/* Filer department picker shown beside the filer phone on form field 24 */
.filerphonedisplay {
	white-space: nowrap;
}

.filerdepartmentpicker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-left: 4px;
	border: 1px solid #98c1d9;
	border-radius: 50%;
	background-color: #fff;
	color: #3d5a80;
	line-height: 1;
	vertical-align: middle;
	text-decoration: none;
	cursor: pointer;
}

.filerdepartmentpicker:hover,
.filerdepartmentpicker:focus {
	background-color: #3d5a80;
	border-color: #3d5a80;
	color: #fff;
}

.filerdepartmentpicker .material-icons {
	font-size: 10px;
	line-height: 1;
}

.filerdepartmentoption {
	cursor: pointer;
}

.filerdepartmentoption .filerdepartmentcheck {
	font-size: 18px;
	color: #98c1d9;
	visibility: hidden;
}

.filerdepartmentoption.selected {
	background-color: #f0f6fb;
}

.filerdepartmentoption.selected .filerdepartmentcheck {
	color: #3d5a80;
	visibility: visible;
}

/* Filer department maintenance on the filer create/edit screens */
.department-row {
	position: relative;
	gap: 0.5rem 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 0.75rem);
	background-color: var(--white, #fff);
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.department-row:hover,
.department-row:focus-within {
	border-color: #b7cbd8;
	box-shadow: 0 6px 18px -10px rgba(15, 37, 64, 0.35);
}

/* The default contact carries a navy edge, like the active section cards */
.department-row.is-default {
	border-color: #b7cbd8;
	background: linear-gradient(90deg, var(--navy-50) 0%, var(--white, #fff) 65%);
	box-shadow: inset 3px 0 0 var(--navy-700);
}

.department-row.is-default:hover,
.department-row.is-default:focus-within {
	box-shadow: inset 3px 0 0 var(--navy-700), 0 6px 18px -10px rgba(15, 37, 64, 0.35);
}

/* Monogram tile: the department's initial */
.department-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 0.65rem;
	background: var(--navy-50);
	border: 1px solid var(--navy-100);
	color: var(--navy-800);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.department-row:hover .department-icon,
.department-row.is-default .department-icon {
	background: var(--navy-800);
	border-color: var(--navy-800);
	color: #fff;
}

.department-row .department-details {
	min-width: 0;
}

.department-row .department-details h6 {
	color: var(--ink) !important;
	font-weight: 700;
}

.department-row .department-contact,
.department-row .department-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--muted);
}

.department-row .department-contact .material-icons {
	font-size: 14px;
	color: #8aa6b9;
}

/* Phone as a quiet pill with even-width digits */
.department-row .department-phone {
	padding: 0.25rem 0.7rem 0.25rem 0.55rem;
	border-radius: 999px;
	background-color: var(--paper);
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.department-row .department-phone .material-icons {
	font-size: 15px;
	color: var(--navy-600);
}

/* The default marker on the right of the row, ahead of the phone and actions */
.department-row .department-default-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-right: 0.75rem;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--amber-100);
	border-radius: 1rem;
	background-color: #fff8e6;
	color: var(--navy-800);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

.department-row .department-default-badge .material-icons {
	font-size: 14px;
	color: var(--amber-600);
}

/* Three 32px buttons, held even when the default department only shows one */
.department-row .department-actions {
	min-width: 104px;
	gap: 0.25rem;
	flex-shrink: 0;
}

.department-row .department-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	line-height: 1;
	color: var(--muted);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.department-row .department-action:hover,
.department-row .department-action:focus-visible {
	background-color: var(--navy-50);
	border-color: var(--navy-100);
	box-shadow: none;
	transform: none;
	color: var(--navy-800);
}

/* Making a department the default previews the amber star */
.department-row .department-action.department-star:hover,
.department-row .department-action.department-star:focus-visible {
	background-color: #fff8e6;
	border-color: var(--amber-100);
	color: var(--amber-600);
}

.department-row .department-action.department-delete:hover,
.department-row .department-action.department-delete:focus-visible {
	background-color: var(--coral-100);
	border-color: transparent;
	color: var(--coral-700);
}

.department-row .department-action .material-icons {
	font-size: 18px;
}

/* The row just added or changed glows briefly so it's easy to spot in the list */
.department-row.is-flash::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	pointer-events: none;
	animation: department-flash 1.8s ease-out forwards;
}

@keyframes department-flash {
	0% { box-shadow: 0 0 0 0 rgba(42, 97, 132, 0.45); background-color: rgba(42, 97, 132, 0.12); }
	35% { box-shadow: 0 0 0 6px rgba(42, 97, 132, 0.18); background-color: rgba(42, 97, 132, 0.08); }
	100% { box-shadow: 0 0 0 10px rgba(42, 97, 132, 0); background-color: rgba(42, 97, 132, 0); }
}

/* Saved / couldn't save message above the list */
.department-message {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--tone, var(--navy-600));
	border-radius: var(--radius, 0.5rem);
	background: var(--tone-bg, var(--navy-50));
	color: var(--ink);
	font-weight: 600;
	animation: department-message-in 0.25s ease;
}

.department-message.is-success { --tone: var(--green-600); --tone-bg: var(--green-100); }
.department-message.is-error { --tone: var(--coral-600); --tone-bg: var(--coral-100); }

.department-message .material-icons-round {
	font-size: 18px;
	line-height: 1.25rem;
	color: var(--tone, var(--navy-600));
}

@keyframes department-message-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.department-row.is-flash::after,
	.department-message { animation: none; }
}

.department-empty {
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-lg, 0.75rem);
	background-color: var(--paper);
	color: var(--muted);
}

/* On narrow cards the phone and buttons drop under the name, lined up with it */
@media (max-width: 575.98px) {
	.department-row > .ms-auto {
		flex-wrap: wrap;
		width: calc(100% - 40px - 1rem);
		margin-left: calc(40px + 1rem) !important;
		row-gap: 0.4rem;
	}

	.department-row .department-actions {
		min-width: 0;
		margin-left: auto;
	}
}

/* border-lable-flt is width: inherit, so pin it to the grid column it sits in
   and keep the floating labels on one line */
#departmentModal .border-lable-flt {
	width: 100%;
}

#departmentModal .border-lable-flt label {
	white-space: nowrap;
	background-color: #fff;
}

#departmentModal .modal-body {
	padding-top: 1.5rem;
}

/* Department dialogs share the look of the app's notification dialog */
#departmentModal .modal-content,
#departmentDeleteModal .modal-content {
	border: 0;
	border-radius: 18px;
	box-shadow: 0 24px 60px -20px rgba(15, 42, 60, 0.45);
	overflow: hidden;
}

#departmentModal .modal-content::before,
#departmentDeleteModal .modal-content::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--navy-600);
}

#departmentDeleteModal .modal-content::before {
	background: var(--coral-600);
}

#departmentModal .modal-header {
	align-items: center;
	padding: 1rem 1.25rem 0.85rem !important;
	border-bottom: 1px solid var(--line);
}

#departmentModal .modal-header .btn-close {
	margin: 0;
	line-height: 1;
}

#departmentModal .modal-title {
	color: var(--navy-900);
	font-weight: 700;
}

#departmentModal .department-icon {
	background: var(--navy-800);
	border-color: var(--navy-800);
	color: #fff;
	animation: department-mono-in 0.3s ease;
}

#departmentModal .department-icon.is-empty {
	background: var(--navy-50);
	border: 1px dashed #8aa6b9;
	color: var(--navy-600);
}

#departmentModal .department-icon .material-icons {
	font-size: 20px;
}

#departmentModal .app-switch-row .form-check-input:disabled,
#departmentModal .app-switch-row .form-check-input:disabled + .form-check-label {
	cursor: default;
	opacity: 1;
}

/* Already the default: shown on, but quieter so it doesn't read as something to change */
#departmentModal .app-switch-row .form-check.form-switch:has(.form-check-input:disabled) {
	border-style: dashed;
	opacity: 0.75;
}

#departmentModal .modal-footer,
#departmentDeleteModal .modal-footer {
	border-top: 0;
	gap: 0.5rem;
	padding: 0.5rem 1.25rem 1.25rem !important;
}

#departmentDeleteModal .modal-header {
	border-bottom: 0;
}

#departmentDeleteModal .modal-title {
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#departmentDeleteModal .modal-body {
	padding: 0.5rem 1.5rem 1rem;
	color: var(--ink-soft);
}

#departmentDeleteModal .modal-footer {
	justify-content: center;
}

.department-delete-icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 0.9rem;
	border-radius: 50%;
	background: var(--coral-100);
	color: var(--coral-600);
	box-shadow: 0 0 0 8px rgba(200, 67, 45, 0.08);
	animation: modal-icon-in 0.35s ease;
}

.department-delete-icon .material-icons-round {
	font-size: 28px;
}

@keyframes department-mono-in {
	from { transform: scale(0.7); opacity: 0.4; }
	to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#departmentModal .department-icon,
	.department-delete-icon { animation: none; }
}

/* =====================================================================
   Signed-in app theme
   Maps Material Dashboard / Bootstrap components onto the EFileForMe
   palette (tokens in landing.css) so the app matches the public site:
   white cards on warm paper, light headers, one coral primary action,
   navy secondary actions, soft status pills. Scoped to body.app (set by
   _Layout) so marketing pages are never affected.
   ===================================================================== */

body.app {
	--bs-body-font-family: var(--font-sans);
	--bs-body-color: var(--ink);
	--bs-primary: #1f4d69;
	--bs-primary-rgb: 31, 77, 105;
	--bs-link-color: #1f4d69;
	--bs-link-hover-color: #0f2a3c;
	font-family: var(--font-sans);
	background: var(--paper);
	color: var(--ink);
}

/* Headings: navy by default (low specificity so utility classes still win). */
body.app :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-sans);
	color: var(--navy-900);
	letter-spacing: -0.01em;
}

/* Body links (not buttons). */
body.app main a:where(:not(.btn):not(.ef-btn):not(.page-link):not(.dropdown-item):not(.nav-link)) {
	color: var(--navy-700);
}

body.app main a:where(:not(.btn):not(.ef-btn):not(.page-link):not(.dropdown-item):not(.nav-link)):hover {
	color: var(--navy-900);
}

body.app .text-primary { color: var(--navy-700) !important; }
body.app .text-info { color: var(--navy-600) !important; }
body.app .text-success { color: var(--green-700) !important; }
body.app .text-warning { color: var(--amber-600) !important; }
body.app .text-danger { color: var(--coral-700) !important; }
body.app .text-dark { color: var(--ink) !important; }
body.app .text-secondary,
body.app .text-muted { color: var(--muted) !important; }

/* ---------- Cards ---------- */
body.app .card {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	background: var(--white);
}

body.app .card .card {
	box-shadow: none;
}

/* Light section headers everywhere, whatever Material class they carry. */
body.app .card-header,
body.app .card-header.bg-gradient-info,
body.app .card-header.bg-gradient-primary,
body.app .card-header.bg-gradient-dark,
body.app .card-header.bg-success,
body.app .card-header.bg-light {
	background: var(--white) !important;
	background-image: none !important;
	color: var(--navy-900) !important;
	border-bottom: 1px solid var(--line) !important;
	box-shadow: none !important;
}

body.app .card-header .text-white,
body.app .card-header :where(h1, h2, h3, h4, h5, h6, span, i) {
	color: var(--navy-900) !important;
}

body.app .card-header small,
body.app .card-header p {
	color: var(--muted) !important;
}

/* Dark highlight cards (e.g. credit balance): navy with white text. */
body.app .card.bg-gradient-primary,
body.app .card.bg-gradient-dark {
	background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-950) 100%) !important;
	border: none;
	box-shadow: var(--shadow-lg);
}

body.app .card.bg-gradient-primary *,
body.app .card.bg-gradient-dark * {
	color: #fff !important;
}

body.app .card.bg-gradient-primary .card-header,
body.app .card.bg-gradient-dark .card-header {
	background: transparent !important;
	border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

/* ---------- Buttons ---------- */
body.app .btn {
	font-family: var(--font-sans);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
	font-size: 0.9rem;
	border-radius: var(--radius);
	padding: 0.6rem 1.15rem;
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

body.app .btn-sm {
	font-size: 0.82rem;
	padding: 0.4rem 0.8rem;
}

body.app .btn .material-icons,
body.app .btn .material-icons-round {
	font-size: 1.1rem;
	vertical-align: -3px;
}

body.app .btn-primary,
body.app .btn.bg-gradient-primary {
	background: var(--navy-700) !important;
	background-image: none !important;
	border: 1px solid var(--navy-700) !important;
	color: #fff !important;
}

body.app .btn-primary:hover,
body.app .btn-primary:focus,
body.app .btn.bg-gradient-primary:hover,
body.app .btn.bg-gradient-primary:focus {
	background: var(--navy-900) !important;
	border-color: var(--navy-900) !important;
	color: #fff !important;
}

body.app .btn-secondary,
body.app .btn.bg-gradient-secondary {
	background: var(--white) !important;
	background-image: none !important;
	border: 1px solid var(--line-strong) !important;
	color: var(--navy-800) !important;
}

body.app .btn-secondary:hover,
body.app .btn-secondary:focus,
body.app .btn.bg-gradient-secondary:hover {
	background: var(--navy-50) !important;
	border-color: var(--navy-700) !important;
	color: var(--navy-900) !important;
}

body.app .btn-info,
body.app .btn.bg-gradient-info {
	background: var(--navy-50) !important;
	background-image: none !important;
	border: 1px solid var(--navy-100) !important;
	color: var(--navy-800) !important;
}

body.app .btn-info:hover,
body.app .btn-info:focus,
body.app .btn.bg-gradient-info:hover {
	background: var(--navy-100) !important;
	color: var(--navy-900) !important;
}

body.app .btn-success,
body.app .btn.bg-gradient-success {
	background: var(--green-600) !important;
	background-image: none !important;
	border: 1px solid var(--green-600) !important;
	color: #fff !important;
}

body.app .btn-success:hover,
body.app .btn.bg-gradient-success:hover {
	background: var(--green-700) !important;
	color: #fff !important;
}

body.app .btn-warning,
body.app .btn.bg-gradient-warning {
	background: var(--amber-600) !important;
	background-image: none !important;
	border: 1px solid var(--amber-600) !important;
	color: #fff !important;
}

body.app .btn-danger,
body.app .btn.bg-gradient-danger {
	background: var(--coral-700) !important;
	background-image: none !important;
	border: 1px solid var(--coral-700) !important;
	color: #fff !important;
}

body.app .btn-danger:hover,
body.app .btn.bg-gradient-danger:hover {
	background: #962f1d !important;
	color: #fff !important;
}

/* Outline buttons: white fill, colored text and border. */
body.app [class*="btn-outline-"] {
	background: var(--white) !important;
	background-image: none !important;
	border-width: 1px !important;
	border-style: solid !important;
	box-shadow: none !important;
}

body.app .btn-outline-primary { border-color: var(--navy-600) !important; color: var(--navy-700) !important; }
body.app .btn-outline-secondary,
body.app .btn-outline-dark { border-color: var(--line-strong) !important; color: var(--ink-soft) !important; }
body.app .btn-outline-info { border-color: var(--navy-100) !important; color: var(--navy-700) !important; }
body.app .btn-outline-success { border-color: #9fd4bd !important; color: var(--green-700) !important; }
body.app .btn-outline-warning { border-color: #e8c98e !important; color: #8a5a12 !important; }
body.app .btn-outline-danger { border-color: #f0b3a8 !important; color: var(--coral-700) !important; }

body.app .btn-outline-primary:hover,
body.app .btn-outline-info:hover { background: var(--navy-50) !important; color: var(--navy-900) !important; }
body.app .btn-outline-secondary:hover,
body.app .btn-outline-dark:hover { background: var(--paper) !important; border-color: var(--navy-700) !important; color: var(--navy-900) !important; }
body.app .btn-outline-success:hover { background: var(--green-100) !important; }
body.app .btn-outline-warning:hover { background: var(--amber-100) !important; }
body.app .btn-outline-danger:hover { background: var(--coral-100) !important; }

body.app .btn-link {
	background: none !important;
	border: none !important;
	color: var(--navy-700) !important;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

body.app .btn:disabled,
body.app .btn.disabled {
	opacity: 0.5;
}

/* Two-way toggles such as EIN / SSN (btn-group of labels). */
body.app .btn-group > .btn.btn-secondary,
body.app .btn-group-toggle > .btn {
	background: var(--white) !important;
	color: var(--ink-soft) !important;
	border: 1px solid var(--line-strong) !important;
}

body.app .btn-group > .btn.btn-secondary.active,
body.app .btn-group-toggle > .btn.active,
body.app .btn-check:checked + .btn {
	background: var(--navy-800) !important;
	border-color: var(--navy-800) !important;
	color: #fff !important;
}

body.app .btn.border-4 {
	border-width: 1px !important;
}

/* ---------- Badges / status pills ---------- */
body.app .badge {
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.35rem 0.65rem;
	border-radius: 999px;
	background-image: none !important;
}

body.app .badge a {
	color: inherit !important;
	text-decoration: none;
}

body.app .badge.bg-success,
body.app .badge.bg-gradient-success { background: var(--green-100) !important; color: var(--green-700) !important; }
body.app .badge.bg-danger,
body.app .badge.bg-gradient-danger { background: var(--coral-100) !important; color: var(--coral-700) !important; }
body.app .badge.bg-warning,
body.app .badge.bg-gradient-warning { background: var(--amber-100) !important; color: #8a5a12 !important; }
body.app .badge.bg-info,
body.app .badge.bg-gradient-info { background: var(--navy-50) !important; color: var(--navy-700) !important; }
body.app .badge.bg-primary,
body.app .badge.bg-gradient-primary { background: var(--navy-100) !important; color: var(--navy-800) !important; }
body.app .badge.bg-secondary,
body.app .badge.bg-gradient-secondary,
body.app .badge.bg-light { background: var(--paper-deep) !important; color: var(--ink-soft) !important; }
body.app .badge.bg-dark { background: var(--navy-800) !important; color: #fff !important; }

/* ---------- Alerts: soft tints with a colored edge, dark readable text ---------- */
body.app .alert {
	background-image: none !important;
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: var(--radius);
	color: var(--ink) !important;
	box-shadow: none;
}

body.app .alert :where(p, span, li, small, strong, b, h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

body.app .alert a:not(.btn) {
	color: var(--navy-800) !important;
	font-weight: 700;
	text-decoration: underline;
}

body.app .alert-info,
body.app .alert-primary { background: var(--navy-50) !important; border-color: var(--navy-100) !important; border-left-color: var(--navy-600) !important; }
body.app .alert-success { background: var(--green-100) !important; border-color: #b8e2cf !important; border-left-color: var(--green-600) !important; }
body.app .alert-warning { background: var(--amber-100) !important; border-color: #f0dcb0 !important; border-left-color: var(--amber-600) !important; }
body.app .alert-danger { background: var(--coral-100) !important; border-color: #f5c5bb !important; border-left-color: var(--coral-600) !important; }
body.app .alert-secondary,
body.app .alert-light,
body.app .alert-dark { background: var(--paper) !important; border-color: var(--line) !important; border-left-color: var(--ink-soft) !important; }

/* ---------- Tables ---------- */
body.app .table {
	--bs-table-bg: transparent;
	--bs-table-striped-bg: transparent;
	--bs-table-hover-bg: var(--navy-50);
	color: var(--ink);
	font-size: 0.925rem;
}

body.app .table > :not(caption) > * > * {
	border-bottom-color: var(--line);
}

body.app .table thead th,
body.app .table-light th {
	background: var(--paper) !important;
	color: var(--muted) !important;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.75rem 1rem;
	opacity: 1;
}

body.app .table tbody td {
	padding: 0.8rem 1rem;
	vertical-align: middle;
}

/* The Forms / Filers / Recipients lists */
.app-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	font-size: 0.925rem;
}

.app-table thead th {
	padding: 0.75rem 1rem;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}

.app-table tbody td {
	padding: 0.8rem 1rem;
	border-top: 1px solid var(--line);
	color: var(--ink);
	vertical-align: middle;
}

.app-table tbody tr:first-child td {
	border-top: 0;
}

.app-table tbody tr {
	transition: background-color 0.12s ease;
}

.app-table tbody tr:hover {
	background: var(--navy-50);
}

.app-table .app-table-check {
	width: 44px;
	text-align: center;
}

.app-table-link {
	color: var(--ink) !important;
	font-weight: 500;
	text-decoration: none;
}

.app-table td:first-child .app-table-link,
.app-table td:nth-child(2) .app-table-link {
	font-weight: 600;
	color: var(--navy-900) !important;
}

/* A second column that isn't a name (e.g. the filer list's address) */
.app-table td.app-td-plain .app-table-link {
	font-weight: 500;
	color: var(--ink) !important;
}

.app-table-link:hover {
	color: var(--navy-700) !important;
	text-decoration: underline;
}

.app-table .btn {
	margin-bottom: 0;
}

/* Row actions in tables read as quiet text buttons until hovered. */
body.app .app-table [class*="btn-outline-"] {
	background: transparent !important;
	border-color: transparent !important;
	padding: 0.35rem 0.6rem;
}

body.app .app-table .btn-outline-success:hover { background: var(--green-100) !important; }
body.app .app-table .btn-outline-danger:hover { background: var(--coral-100) !important; }
body.app .app-table .btn-outline-warning:hover { background: var(--amber-100) !important; }
body.app .app-table .btn-outline-secondary:hover,
body.app .app-table .btn-outline-primary:hover { background: var(--navy-50) !important; }

/* ---------- Bulk action bar (Recipients) ---------- */
.bulk-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	background: var(--navy-50);
	border: 1px solid var(--navy-100);
	border-radius: var(--radius);
}

.bulk-bar-count {
	font-weight: 700;
	color: var(--navy-800);
}

.bulk-bar-hint {
	font-size: 0.85rem;
	color: var(--muted);
}

/* While recipients are selected the bar lights up and the chosen rows are tinted. */
.bulk-bar {
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bulk-bar.is-active {
	background: var(--white);
	border-color: var(--navy-600);
	box-shadow: 0 8px 24px rgba(15, 42, 60, 0.12);
}

.bulk-bar.is-active #tinSelectedCount {
	display: inline-block;
	min-width: 1.6rem;
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--navy-700);
	color: var(--white);
	text-align: center;
}

#tinSelectedCount.is-bumped {
	animation: bulk-count-bump 0.25s ease;
}

@keyframes bulk-count-bump {
	50% { transform: scale(1.2); }
}

.app-table .app-table-check input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	accent-color: var(--navy-700);
	cursor: pointer;
	vertical-align: middle;
}

.app-table tbody tr.is-selected {
	background: var(--navy-100);
	box-shadow: inset 3px 0 0 var(--navy-700);
}

.app-table tbody tr.is-selected:hover {
	background: #d8e6ee;
}

@media (prefers-reduced-motion: reduce) {
	#tinSelectedCount.is-bumped { animation: none; }
}

/* ---------- Forms ---------- */
body.app .form-control,
body.app .form-select {
	border-color: var(--line-strong);
	border-radius: var(--radius-sm);
	color: var(--ink);
	background-color: var(--white);
}

body.app .form-control:focus,
body.app .form-select:focus {
	border-color: var(--navy-600) !important;
	box-shadow: 0 0 0 3px rgba(31, 77, 105, 0.15) !important;
}

body.app .form-check-input:checked {
	background-color: var(--navy-700);
	border-color: var(--navy-700);
}

body.app .form-check-input:focus {
	box-shadow: 0 0 0 3px rgba(31, 77, 105, 0.15);
}

/* ---------- Modals ---------- */
body.app .modal-content {
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
}

body.app .modal-header {
	border-bottom: 1px solid var(--line);
	background: var(--white);
}

body.app .modal-header .modal-title {
	color: var(--navy-900);
	font-weight: 700;
}

body.app .modal-footer {
	border-top: 1px solid var(--line);
}

/* ---------- Collapsible sections & tabs ---------- */
body.app .accordion-button {
	background: var(--white);
	color: var(--navy-900);
	font-weight: 700;
	box-shadow: none;
}

body.app .accordion-button:not(.collapsed) {
	background: var(--navy-50);
	color: var(--navy-900);
}

body.app .accordion-item {
	border-color: var(--line);
}

/* ---------- Pagination ---------- */
body.app .page-link {
	color: var(--navy-700);
	border-color: var(--line);
}

body.app .page-item.active .page-link {
	background: var(--navy-800);
	border-color: var(--navy-800);
	color: #fff;
}

/* Section titles inside light card headers. */
body.app .card-header :where(h1, h2, h3, h4, h5, h6),
body.app .landing-card-header :where(h1, h2, h3, h4, h5, h6) {
	font-weight: 700 !important;
	font-size: 1.05rem;
	margin-bottom: 0;
}

/* Icons inside header buttons follow the button's own color. */
body.app .card-header .btn i,
body.app .card-header .btn span,
body.app .card-header .btn .material-icons {
	color: inherit !important;
}

/* Card-brand logos sit on a white chip so they stay legible on the dark card graphic. */
body.app .credit-card-display #cardTypeImage {
	height: 32px !important;
	padding: 4px 8px;
	background: #fff;
	border-radius: 6px;
	opacity: 1 !important;
}

body.app .card-header {
	font-size: 1.05rem;
	font-weight: 700;
}

body.app code {
	color: var(--navy-800);
	background: var(--navy-50);
	padding: 0.1rem 0.35rem;
	border-radius: 4px;
}

/* Wide list tables scroll inside their card on small screens instead of
   stretching the page. */
@media (max-width: 991px) {
	.app-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.app-table th,
	.app-table td {
		white-space: nowrap;
	}
}

/* ---------- Rows that open a page (data-href) ---------- */
.modern-table tbody tr[data-href],
.app-table tbody tr[data-href] {
	cursor: pointer;
	outline: none;
}

.modern-table tbody tr[data-href] td:first-child,
.app-table tbody tr[data-href] td:first-child {
	position: relative;
	transition: color 0.15s ease;
}

.modern-table tbody tr[data-href] td:first-child::after,
.app-table tbody tr[data-href] td:first-child::after {
	content: "chevron_right";
	font-family: "Material Icons Round";
	font-size: 1.15rem;
	line-height: 1;
	vertical-align: -0.2em;
	margin-left: 0.25rem;
	display: inline-block;
	color: var(--navy-600);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.modern-table tbody tr[data-href]:hover,
.modern-table tbody tr[data-href]:focus-visible,
.app-table tbody tr[data-href]:hover,
.app-table tbody tr[data-href]:focus-visible {
	background: var(--navy-50);
	box-shadow: inset 3px 0 0 var(--navy-600);
}

.modern-table tbody tr[data-href]:hover td:first-child,
.modern-table tbody tr[data-href]:focus-visible td:first-child,
.app-table tbody tr[data-href]:hover td:first-child,
.app-table tbody tr[data-href]:focus-visible td:first-child {
	color: var(--navy-800);
}

.modern-table tbody tr[data-href]:hover td:first-child::after,
.modern-table tbody tr[data-href]:focus-visible td:first-child::after,
.app-table tbody tr[data-href]:hover td:first-child::after,
.app-table tbody tr[data-href]:focus-visible td:first-child::after {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.modern-table tbody tr[data-href] td:first-child::after,
	.app-table tbody tr[data-href] td:first-child::after { transition: none; }
}

/* ---------- Forms list: row edge by state ---------- */
.app-table tbody tr.uf-row-cart {
	box-shadow: inset 3px 0 0 var(--navy-600);
}

.app-table tbody tr.uf-row-flagged {
	background: #fff7f5;
	box-shadow: inset 3px 0 0 var(--coral-500);
}

.app-table tbody tr.uf-row-flagged:hover {
	background: var(--coral-100);
}

.app-table tbody tr.uf-row-done {
	box-shadow: inset 3px 0 0 var(--green-600);
}

/* ---------- Form sheet (fields drawn over the IRS form image) ---------- */
.form-sheet input.FormField:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-sheet select.FormField {
	border: 1px solid rgba(31, 77, 105, 0.35);
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--ink);
	padding: 0 3px;
	transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.form-sheet input.FormField:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.form-sheet select.FormField:hover {
	border-color: var(--navy-600);
}

.form-sheet input.FormField:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.form-sheet select.FormField:focus {
	outline: none;
	border-color: var(--navy-600);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(42, 97, 132, 0.25);
	z-index: 2;
}

/* Boxes you can type in get a soft fillable-field tint (like a fillable PDF) so they stand apart from the
   printed payer / recipient text; read-only or locked boxes stay plain */
body.app .form-sheet input.FormField:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([readonly]):not(:disabled),
body.app .form-sheet select.FormField:not(:disabled) {
	background-color: rgba(214, 230, 242, 0.75);
	border-color: rgba(31, 77, 105, 0.28);
	box-shadow: inset 0 -1.5px 0 rgba(31, 77, 105, 0.45);
}

body.app .form-sheet input.FormField:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([readonly]):not(:disabled):hover,
body.app .form-sheet select.FormField:not(:disabled):hover {
	background-color: rgba(214, 230, 242, 1);
}

body.app .form-sheet input.FormField:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([readonly]):not(:disabled):focus,
body.app .form-sheet select.FormField:not(:disabled):focus {
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(42, 97, 132, 0.25);
}

body.app .form-sheet input.FormField[readonly]:not([type="checkbox"]),
body.app .form-sheet input.FormField:disabled:not([type="checkbox"]),
body.app .form-sheet select.FormField:disabled {
	background-color: transparent;
	border-color: transparent;
}

.form-sheet input.FormField[type="checkbox"] {
	accent-color: var(--navy-700);
	cursor: pointer;
}

.form-sheet input.FormField[type="checkbox"]:focus-visible {
	outline: 2px solid var(--navy-600);
	outline-offset: 2px;
}

/* ---------- Selected rows in modern tables (Order PDFs) ---------- */
.modern-table tbody tr.is-selected {
	background: var(--navy-100);
	box-shadow: inset 3px 0 0 var(--navy-700);
}

.modern-table tbody tr.is-selected:hover {
	background: #d8e6ee;
}

.modern-table input.PDFSelect,
.modern-table #selectAllPDF {
	width: 1rem;
	height: 1rem;
	accent-color: var(--navy-700);
	cursor: pointer;
	vertical-align: middle;
}

/* Count badge that appears inside a button once something is picked. */
.btn .btn-count {
	display: none;
	min-width: 1.4rem;
	margin-left: 0.45rem;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--coral-700);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.btn .btn-count.is-shown {
	display: inline-block;
	animation: bulk-count-bump 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.btn .btn-count.is-shown { animation: none; }
}

/* ---------- Pager (shared by paged lists) ---------- */
.app-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	margin-top: 1rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--paper);
}

.app-pager-count {
	font-size: 0.875rem;
	color: var(--muted);
}

.app-pager-count strong {
	color: var(--ink);
	font-weight: 600;
}

.app-pager-pages {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.app-pager-btn,
.app-pager-gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
}

.app-pager-btn {
	color: var(--ink-soft);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.app-pager-btn:hover {
	background: var(--white);
	color: var(--navy-800);
	box-shadow: 0 0 0 1px var(--line-strong);
}

.app-pager-btn:focus-visible {
	outline: 2px solid var(--navy-600);
	outline-offset: 2px;
}

.app-pager-btn.is-current {
	background: var(--navy-700);
	color: var(--white);
	box-shadow: 0 2px 6px rgba(15, 42, 60, 0.2);
}

.app-pager-btn.is-disabled {
	color: var(--line-strong);
	pointer-events: none;
}

.app-pager-btn .material-icons-round {
	font-size: 1.25rem;
}

.app-pager-gap {
	min-width: 1.25rem;
	padding: 0;
	color: var(--muted);
}

.app-pager-size {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--muted);
}

.app-pager-size label {
	margin: 0;
	white-space: nowrap;
}

.app-pager-size .form-select {
	width: auto;
	min-width: 4.5rem;
}

@media (max-width: 640px) {
	.app-pager { justify-content: center; }
	.app-pager-pages { order: -1; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.1rem; }
	.app-pager-btn { min-width: 2rem; height: 2rem; padding: 0 0.35rem; }
}

/* ---------- Save panel: unsaved changes ---------- */
.app-form-actions {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-form-actions.is-dirty {
	border-color: var(--navy-600);
	box-shadow: 0 0 0 1px var(--navy-600), 0 12px 28px -14px rgba(15, 42, 60, 0.35);
}

.app-form-actions-title::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--coral-500);
	vertical-align: 0.1em;
	transition: width 0.2s ease, margin 0.2s ease;
}

.app-form-actions.is-dirty .app-form-actions-title::before {
	width: 0.5rem;
	margin-right: 0.45rem;
	animation: save-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes save-dot-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(228, 85, 63, 0.45); }
	50% { box-shadow: 0 0 0 5px rgba(228, 85, 63, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.app-form-actions.is-dirty .app-form-actions-title::before { animation: none; }
}

/* ---------- Picker rows (choose a filer / recipient for a new form) ---------- */
.app-table tbody tr.pick-row td:first-child::after {
	display: none;
}

.app-table .pick-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--navy-100);
	border-radius: 999px;
	background: var(--white);
	color: var(--navy-700);
	font-weight: 600;
	box-shadow: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-table .pick-btn .material-icons {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.app-table tr.pick-row:hover .pick-btn,
.app-table tr.pick-row:focus-visible .pick-btn,
.app-table .pick-btn:focus-visible {
	background: var(--navy-700);
	border-color: var(--navy-700);
	color: var(--white);
	box-shadow: 0 4px 12px -4px rgba(15, 42, 60, 0.45);
}

.app-table tr.pick-row:hover .pick-btn .material-icons,
.app-table tr.pick-row:focus-visible .pick-btn .material-icons {
	opacity: 1;
}

/* ---------- Filter (query wizard) ---------- */
body.app .qw-toggle {
	overflow: visible;
	position: relative;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.app .qw-toggle[aria-expanded="true"],
body.app .qw-toggle.is-applied {
	background: var(--navy-700) !important;
	border-color: var(--navy-700) !important;
	color: var(--white) !important;
}

/* A coral dot on the button while a filter is narrowing the list. */
body.app .qw-toggle.is-applied::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--coral-500);
	border: 2px solid var(--white);
}

/* No conditions yet: hide the empty column headings. */
#queryWizardCollapse table:has(tbody:empty) {
	display: none;
}

#queryWizardCollapse > .card {
	border-color: var(--navy-100) !important;
	background: var(--navy-50);
	border-radius: var(--radius-lg);
}

/* ---------- Status badges with an icon (TIN / W-9 on Recipients) ---------- */
body.app .badge.tin-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
}

body.app .badge .material-icons-round {
	font-size: 0.95rem;
	line-height: 1;
}

.tin-badge-date {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.72rem;
	color: var(--muted);
	white-space: nowrap;
}

a.tin-badge-link {
	color: var(--navy-700);
	font-weight: 600;
	text-decoration: none;
}

a.tin-badge-link:hover {
	text-decoration: underline;
}

.tin-badge-none {
	color: var(--line-strong);
	font-weight: 700;
}

/* A badge that just changed (after a TIN check or W-9 request) pops in. */
body.app .badge.tin-badge.is-new {
	animation: badge-pop 0.35s ease;
}

@keyframes badge-pop {
	0% { transform: scale(0.7); opacity: 0; }
	70% { transform: scale(1.08); opacity: 1; }
	100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	body.app .badge.tin-badge.is-new { animation: none; }
}

/* ---------- Shared notification / confirm dialog ---------- */
#modal-notification .modal-content {
	border: 0;
	border-radius: 18px;
	box-shadow: 0 24px 60px -20px rgba(15, 42, 60, 0.45);
	overflow: hidden;
}

#modal-notification .modal-content::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--tone, var(--navy-600));
}

#modal-notification .modal-header,
#modal-notification .modal-footer {
	border: 0;
}

#modal-notification .modal-title {
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#modal-notification .modal-tone-icon {
	display: inline-grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--tone-bg, var(--navy-50));
	color: var(--tone, var(--navy-600));
	box-shadow: 0 0 0 8px var(--tone-ring, rgba(42, 97, 132, 0.06));
	animation: modal-icon-in 0.35s ease;
}

#modal-notification .modal-tone-icon .material-icons-round {
	font-size: 32px;
}

#modal-notification .modal-attention {
	color: var(--navy-900);
	font-weight: 700;
}

#modal-notification #modal-message {
	color: var(--ink-soft);
}

#modal-notification .modal-footer {
	justify-content: center;
	gap: 0.5rem;
	padding-bottom: 1.5rem;
}

#modal-notification .tone-success { --tone: var(--green-600); --tone-bg: var(--green-100); --tone-ring: rgba(31, 122, 90, 0.08); }
#modal-notification .tone-warning { --tone: var(--amber-600); --tone-bg: var(--amber-100); --tone-ring: rgba(183, 121, 31, 0.08); }
#modal-notification .tone-danger { --tone: var(--coral-600); --tone-bg: var(--coral-100); --tone-ring: rgba(200, 67, 45, 0.08); }

@keyframes modal-icon-in {
	0% { transform: scale(0.6); opacity: 0; }
	70% { transform: scale(1.06); opacity: 1; }
	100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	#modal-notification .modal-tone-icon { animation: none; }
}

#modal-notification .modal-body > .py-3 {
	padding-bottom: 0 !important;
}

/* When the dismiss button is the only action, show it as a proper button. */
#modal-notification #modal-btn-yes[style*="display: none"] + #modal-btn-no {
	min-width: 120px;
	justify-content: center;
	text-align: center;
	border: 1px solid var(--line-strong) !important;
	background: var(--white) !important;
	color: var(--navy-800) !important;
	text-decoration: none;
}

#modal-notification #modal-btn-yes[style*="display: none"] + #modal-btn-no:hover {
	border-color: var(--navy-700) !important;
	background: var(--navy-50) !important;
}

/* ---------- Busy state (saving / processing) ---------- */
#modal-notification .tone-busy { --tone: var(--navy-600); --tone-bg: var(--navy-50); --tone-ring: transparent; }

#modal-notification .tone-busy .btn-close {
	display: none;
}

#modal-notification .tone-busy .modal-tone-icon,
#processingModal .spinner-container {
	position: relative;
}

/* A navy ring with a coral arc spins around the icon while we work. */
#modal-notification .tone-busy .modal-tone-icon::after {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	border: 3px solid var(--navy-100);
	border-top-color: var(--coral-500);
	animation: busy-spin 0.9s linear infinite;
}

#modal-notification .tone-busy .modal-content::before,
#modal-notification .modal-content.tone-busy::before {
	background: linear-gradient(90deg, var(--navy-600), var(--coral-500), var(--navy-600));
	background-size: 200% 100%;
	animation: busy-sweep 1.4s linear infinite;
}

#processingModal .spinner-border {
	width: 3.5rem !important;
	height: 3.5rem !important;
	border-width: 3px;
	border-color: var(--navy-100);
	border-top-color: var(--coral-500);
	color: transparent !important;
	animation-duration: 0.9s;
}

#processingModal .modal-content {
	border-radius: 18px;
	box-shadow: 0 24px 60px -20px rgba(15, 42, 60, 0.45);
}

#processingModal .modal-title {
	color: var(--navy-900);
	font-weight: 700;
}

@keyframes busy-spin {
	to { transform: rotate(360deg); }
}

@keyframes busy-sweep {
	to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	#modal-notification .tone-busy .modal-tone-icon::after { animation-duration: 2.5s; }
	#modal-notification .modal-content.tone-busy::before { animation: none; }
}

/* ---------- E-file progress track (Order details) ---------- */
.efile-track {
	display: flex;
	gap: 3px;
	width: 96px;
	margin-top: 0.4rem;
}

.efile-track i {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--line);
}

.efile-track.stage-1 i:nth-child(-n+1),
.efile-track.stage-2 i:nth-child(-n+2) {
	background: var(--amber-600);
}

.efile-track.stage-2 i:nth-child(2) {
	background: linear-gradient(90deg, var(--navy-600) 0%, var(--navy-100) 50%, var(--navy-600) 100%);
	background-size: 200% 100%;
	animation: efile-pulse 1.6s linear infinite;
}

.efile-track.stage-2 i:nth-child(1) {
	background: var(--navy-600);
}

.efile-track.stage-1 i:nth-child(1) {
	animation: efile-blink 1.6s ease-in-out infinite;
}

.efile-track.stage-3 i {
	background: var(--green-600);
}

.efile-track.stage-3.is-rejected i:nth-child(3) {
	background: var(--coral-600);
}

.efile-track.stage-3.is-rejected i:nth-child(-n+2) {
	background: var(--navy-600);
}

@keyframes efile-pulse {
	to { background-position: -200% 0; }
}

@keyframes efile-blink {
	50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
	.efile-track i { animation: none !important; }
}

/* ---------- Two-factor setup ---------- */
/* The setup key reads in groups of four (copying still gives one unbroken key). */
.twofa-key {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.08em;
	color: var(--navy-900);
	border: 1px dashed var(--line-strong);
}

/* Copy button tucked into the key box; the key keeps clear of it */
.twofa-key-wrap {
	position: relative;
}

/* Four groups per row, in even columns, rather than a ragged wrap that leaves one group alone */
.twofa-key-wrap .twofa-key {
	display: grid !important;
	grid-template-columns: repeat(4, max-content);
	gap: 0.35rem 0.9rem;
	padding-right: 3.5rem !important;
	font-size: 1rem;
}

.twofa-key-copy {
	position: absolute;
	top: 50%;
	right: 0.6rem;
	transform: translateY(-50%);
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--line);
	border-radius: 0.6rem;
	background: #fff;
	color: var(--navy-700);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.twofa-key-copy .material-icons-round {
	font-size: 1.1rem;
}

.twofa-key-copy:hover,
.twofa-key-copy:focus-visible {
	background: var(--navy-700);
	border-color: var(--navy-700);
	color: #fff;
}

.twofa-key-copy.is-copied {
	background: var(--green-600, #16a34a);
	border-color: var(--green-600, #16a34a);
	color: #fff;
}

/* One big, evenly spaced field for the 6-digit code. */
body.app .otp-input {
	max-width: 260px;
	height: 3.4rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.55em;
	text-align: center;
	padding-left: 0.55em;
	color: var(--navy-900);
	border-radius: 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.app .otp-input::placeholder {
	color: var(--line-strong);
	letter-spacing: 0.55em;
}

body.app .otp-input:focus {
	border-color: var(--navy-600);
	box-shadow: 0 0 0 4px rgba(42, 97, 132, 0.18);
}

/* All six digits in: the field turns green-edged. */
body.app .otp-input:valid {
	border-color: var(--green-600);
	box-shadow: 0 0 0 4px rgba(31, 122, 90, 0.15);
}

/* ---------- File drop zone (Import upload) ---------- */
.file-drop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	padding: 1.5rem;
	border: 1.5px dashed var(--line-strong);
	border-radius: 16px;
	background: var(--paper);
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* The real file input covers the zone, so clicking or dropping works natively. */
.file-drop input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.file-drop-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	pointer-events: none;
}

.file-drop-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--white);
	color: var(--navy-700);
	font-size: 28px;
	box-shadow: 0 6px 16px -8px rgba(15, 42, 60, 0.4);
	transition: transform 0.2s ease, background-color 0.15s ease, color 0.15s ease;
}

.file-drop-title {
	font-weight: 600;
	color: var(--ink);
}

.file-drop-browse {
	color: var(--navy-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.file-drop-name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--green-700);
}

.file-drop:hover,
.file-drop:focus-within {
	border-color: var(--navy-600);
	background: var(--navy-50);
}

.file-drop:focus-within {
	box-shadow: 0 0 0 4px rgba(42, 97, 132, 0.15);
}

.file-drop:hover .file-drop-icon {
	transform: translateY(-3px);
}

.file-drop.is-dragover {
	border-color: var(--navy-600);
	border-style: solid;
	background: var(--navy-100);
}

.file-drop.is-dragover .file-drop-icon {
	transform: translateY(-5px) scale(1.06);
}

.file-drop.has-file {
	border-style: solid;
	border-color: var(--green-600);
	background: var(--green-100);
}

.file-drop.has-file .file-drop-icon {
	background: var(--green-600);
	color: var(--white);
}

/* ---------- Control totals report ---------- */
.totals-table td {
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
}

.totals-table td:last-child {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* Boxes with nothing reported fade back so the real amounts stand out. */
.totals-table tr.is-zero td,
.totals-table tr.is-zero td span {
	color: var(--muted) !important;
	font-weight: 400;
}

.totals-table tr.is-zero td:last-child span {
	color: var(--line-strong) !important;
}

.totals-table tfoot td {
	border-top: 2px solid var(--navy-700);
	background: var(--navy-50) !important;
	color: var(--navy-900) !important;
	font-size: 1.02rem;
	font-variant-numeric: tabular-nums;
}

/* Printing a report (Ctrl+P) gives a clean page: no header, footer, buttons or tips. */
@media print {
	body.app .site-header,
	body.app .site-footer,
	body.app .app-head,
	body.app .btn,
	body.app .app-hint {
		display: none !important;
	}

	body.app .app-main {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	body.app .app-main .card {
		box-shadow: none !important;
		border-color: #ccc !important;
		break-inside: avoid;
	}

	body.app {
		background: #fff !important;
	}

	.totals-table tr.is-zero td:last-child span {
		color: #8a949c !important;
	}
}

/* ---------- Order export dialog: reuse flow ---------- */
.export-flow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	counter-reset: flow;
}

.export-flow li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0.5rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper);
	text-align: center;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--navy-900);
	line-height: 1.3;
}

.export-flow li small {
	display: block;
	margin-top: 0.15rem;
	font-weight: 400;
	color: var(--muted);
}

.export-flow li > .material-icons-round {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--navy-700);
	color: #fff;
	font-size: 22px;
}

.export-flow li:last-child > .material-icons-round {
	background: var(--coral-600);
}

/* Arrow between steps */
.export-flow li + li::before {
	content: "chevron_right";
	font-family: "Material Icons Round";
	position: absolute;
	left: -0.75rem;
	top: 50%;
	transform: translate(-25%, -50%);
	font-size: 1.1rem;
	color: var(--line-strong);
}

.export-files {
	margin: 0;
	padding: 0.75rem 1rem;
	list-style: none;
	border-radius: 12px;
	background: var(--navy-50);
	font-size: 0.85rem;
	color: var(--ink-soft);
}

.export-files li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.export-files li + li {
	margin-top: 0.35rem;
}

.export-files .material-icons-round {
	font-size: 1.1rem;
	color: var(--navy-600);
}

@media (max-width: 480px) {
	.export-flow { grid-template-columns: 1fr; }
	.export-flow li + li::before { display: none; }
}

/* ---------- Form totals report: count with a share-of-total bar ---------- */
.form-totals-table .form-count-cell {
	position: relative;
	width: 34%;
}

.form-count-bar {
	position: absolute;
	right: 4.25rem;
	top: 50%;
	width: calc((100% - 5.5rem) * var(--share) / 100);
	max-width: calc(100% - 5.5rem);
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--navy-100), var(--navy-600));
	transform: translateY(-50%);
	transform-origin: right center;
	animation: bar-grow 0.6s ease both;
}

.form-count {
	position: relative;
	display: inline-block;
	min-width: 2.5rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--navy-900);
}

@keyframes bar-grow {
	from { transform: translateY(-50%) scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.form-count-bar { animation: none; }
}

/* ---------- Scheduled processing banner (Order details) ---------- */
.date-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 72px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--white);
	box-shadow: 0 0 0 1px var(--navy-100), 0 8px 18px -10px rgba(15, 42, 60, 0.45);
	text-align: center;
	line-height: 1;
}

.date-tile-month {
	width: 100%;
	padding: 0.3rem 0;
	background: var(--coral-600);
	color: var(--white) !important;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.date-tile-day {
	padding-top: 0.35rem;
	font-family: var(--font-serif);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--navy-900);
}

.date-tile-year {
	padding: 0.15rem 0 0.4rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--muted);
}

.hold-service {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: 0.25rem;
	padding: 0.15rem 0.6rem 0.15rem 0.45rem;
	border-radius: 999px;
	background: var(--white);
	border: 1px solid var(--navy-100);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--navy-800);
	vertical-align: middle;
}

.hold-service .material-icons-round {
	font-size: 1rem;
	color: var(--navy-600);
}

/* ---------- Keyboard focus: one clear ring everywhere in the app ---------- */
body.app .btn:focus-visible,
body.app a:focus-visible,
body.app button:focus-visible,
body.app [role="button"]:focus-visible,
body.app .form-select:focus-visible,
body.app summary:focus-visible {
	outline: 2px solid var(--navy-600) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 5px rgba(42, 97, 132, 0.18) !important;
}

/* On the dark header band the ring is white so it stays visible. */
body.app .app-head a:focus-visible,
body.app .app-head .btn:focus-visible,
body.app .app-head button:focus-visible {
	outline-color: var(--white) !important;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2) !important;
}

/* Header nav links get an underline-style ring. */
body.app .site-header .site-nav-link:focus-visible {
	outline-offset: 4px !important;
	border-radius: 8px;
}

/* ---------- Credits: balance card and activity ---------- */
body.app .balance-card {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(420px 220px at 100% 0%, rgba(228, 85, 63, 0.28), transparent 65%),
		radial-gradient(360px 200px at 0% 120%, rgba(255, 255, 255, 0.08), transparent 60%),
		linear-gradient(135deg, var(--navy-700), var(--navy-900)) !important;
}

body.app .balance-card .card-body {
	position: relative;
	z-index: 1;
	padding: 1.5rem 1.75rem !important;
}

.balance-amount {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.balance-icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.balance-icon .material-icons-round {
	font-size: 32px;
	color: #fff;
}

.credit-activity-cell {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.credit-activity-icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
}

.credit-activity-icon .material-icons-round {
	font-size: 18px;
}

.credit-activity-icon.is-in {
	background: var(--green-100);
	color: var(--green-700);
}

.credit-activity-icon.is-out {
	background: var(--navy-50);
	color: var(--navy-700);
}

.balance-icon.balance-icon-sm {
	width: 40px;
	height: 40px;
	border-radius: 12px;
}

.balance-icon.balance-icon-sm .material-icons-round {
	font-size: 22px;
}

.credit-history-table td {
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
}

.credit-history-table td.text-end {
	font-variant-numeric: tabular-nums;
}

.credit-history-table tbody tr:hover {
	background: var(--navy-50);
}

/* ---------- Checkout summary ---------- */
body.app #CompleteOrder {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 1rem;
}

body.app #CompleteOrder .material-icons {
	margin: 0 !important;
}

.quote-credits {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--paper);
	font-size: 0.875rem;
	color: var(--ink-soft);
}

.quote-credits-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--navy-700);
	color: #fff;
}

.quote-credits-icon .material-icons-round {
	font-size: 17px;
}

.quote-credits strong {
	margin-left: auto;
	color: var(--navy-900);
	font-variant-numeric: tabular-nums;
}

/* ---------- Checkout: order breakdown ---------- */
:is(#orderDetailsAccordion, #ccAccordion) .breakdown-item {
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-lg) !important;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:is(#orderDetailsAccordion, #ccAccordion) .breakdown-item:has(.accordion-button:not(.collapsed)) {
	border-color: var(--navy-100) !important;
	box-shadow: inset 3px 0 0 var(--navy-600), 0 10px 24px -16px rgba(15, 42, 60, 0.35);
}

:is(#orderDetailsAccordion, #ccAccordion) .accordion-button {
	padding: 0.85rem 1.25rem;
	background: var(--white) !important;
	color: var(--navy-900);
	box-shadow: none !important;
}

:is(#orderDetailsAccordion, #ccAccordion) .accordion-button:hover {
	background: var(--navy-50) !important;
}

:is(#orderDetailsAccordion, #ccAccordion) .accordion-button > div > div {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.breakdown-icon {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-right: 0.75rem;
	border-radius: 10px;
	background: var(--navy-50);
	color: var(--navy-700);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.breakdown-icon .material-icons-round {
	font-size: 19px;
}

:is(#orderDetailsAccordion, #ccAccordion) .accordion-button:not(.collapsed) .breakdown-icon {
	background: var(--navy-700);
	color: var(--white);
}

:is(#orderDetailsAccordion, #ccAccordion) .accordion-button strong.me-3 {
	font-variant-numeric: tabular-nums;
}

:is(#orderDetailsAccordion, #ccAccordion) .accordion-body {
	padding: 0.25rem 1.25rem 1rem 1.4rem;
}

.breakdown-line {
	margin: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

.breakdown-line:last-child {
	border-bottom: 0;
}

.breakdown-line:hover {
	background: var(--navy-50);
}

.breakdown-line strong {
	font-variant-numeric: tabular-nums;
	color: var(--navy-900);
}

/* ---------- Checkout: schedule processing ---------- */
/* The switch card inside shows the "on" state, like the service options above */

#schedulingOptions {
	padding: 1rem 1.1rem 0.25rem;
	border-radius: 14px;
	background: var(--navy-50);
	border: 1px solid var(--navy-100);
}

#schedulingOptions #HoldDate {
	max-width: 260px;
	background: var(--white);
}

/* Which services to hold: chips instead of bare checkboxes */
#schedulingOptions .form-check {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0.5rem 0.5rem 0;
	padding: 0.4rem 0.85rem 0.4rem 0.6rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--white);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

#schedulingOptions .form-check .form-check-input {
	float: none;
	margin: 0;
	accent-color: var(--navy-700);
}

#schedulingOptions .form-check .form-check-label {
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}

#schedulingOptions .form-check:has(.form-check-input:checked) {
	border-color: var(--navy-600);
	background: var(--white);
	box-shadow: 0 0 0 1px var(--navy-600);
}

#schedulingOptions .form-label {
	display: block;
}

/* ---------- App header nav: one underline that grows in on hover and stays on the current page ---------- */
@media (min-width: 1025px) {
	body.app .site-header .site-nav-link {
		position: relative;
	}

	body.app .site-header .site-nav-link::after {
		content: "";
		position: absolute;
		left: 0.8rem;
		right: 0.8rem;
		bottom: -0.35rem;
		height: 2px;
		border-radius: 2px;
		background: var(--navy-100);
		transform: scaleX(0);
		transition: transform 0.2s ease, background-color 0.2s ease;
	}

	body.app .site-header .site-nav-link:hover::after {
		transform: scaleX(1);
	}

	body.app .site-header .site-nav-link.active {
		box-shadow: none;
		border-radius: var(--radius-sm);
	}

	body.app .site-header .site-nav-link.active::after {
		height: 3px;
		background: var(--coral-500);
		transform: scaleX(1);
	}

	body.app .site-header .nav-menu-toggle::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.app .site-header .site-nav-link::after { transition: none; }
}


/* ---------- Account menu: icon tiles, coral Sign out ---------- */
#accountMenu {
	min-width: 250px;
	padding: 0.45rem;
}

#accountMenu .nav-menu-item {
	padding: 0.45rem 0.6rem;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#accountMenu .nav-menu-item .material-icons-round {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--navy-50);
	color: var(--navy-700);
	font-size: 18px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#accountMenu .nav-menu-item:hover .material-icons-round,
#accountMenu .nav-menu-item:focus-visible .material-icons-round,
#accountMenu .nav-menu-item.active .material-icons-round {
	background: var(--navy-700);
	color: var(--white);
}

#accountMenu .nav-menu-item[href="/Logout"] {
	color: var(--coral-700);
}

#accountMenu .nav-menu-item[href="/Logout"] .material-icons-round {
	background: var(--coral-100);
	color: var(--coral-600);
}

#accountMenu .nav-menu-item[href="/Logout"]:hover {
	background: var(--coral-100);
}

#accountMenu .nav-menu-item[href="/Logout"]:hover .material-icons-round {
	background: var(--coral-600);
	color: var(--white);
}

/* ---------- Wide tables: soft edge shadows show there is more to scroll to ---------- */
/* The white "covers" scroll with the content and hide the shadows at the ends;
   in the middle of a scroll the shadows show on whichever side has more. */
body.app .table-responsive,
body.app .modern-table-container,
body.app .app-table.app-table-scroll-shadows {
	background:
		linear-gradient(90deg, var(--white) 30%, rgba(255, 255, 255, 0)) left center / 48px 100% no-repeat local,
		linear-gradient(270deg, var(--white) 30%, rgba(255, 255, 255, 0)) right center / 48px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(15, 42, 60, 0.3), rgba(15, 42, 60, 0)) left center / 20px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(15, 42, 60, 0.3), rgba(15, 42, 60, 0)) right center / 20px 100% no-repeat scroll,
		var(--white);
}

body.app .table-responsive > table:not(.app-table),
body.app .modern-table-container > table:not(.app-table) {
	background: transparent;
}

@media (max-width: 991px) {
	body.app .app-table {
		background:
			linear-gradient(90deg, var(--white) 30%, rgba(255, 255, 255, 0)) left center / 48px 100% no-repeat local,
			linear-gradient(270deg, var(--white) 30%, rgba(255, 255, 255, 0)) right center / 48px 100% no-repeat local,
			radial-gradient(farthest-side at 0 50%, rgba(15, 42, 60, 0.3), rgba(15, 42, 60, 0)) left center / 20px 100% no-repeat scroll,
			radial-gradient(farthest-side at 100% 50%, rgba(15, 42, 60, 0.3), rgba(15, 42, 60, 0)) right center / 20px 100% no-repeat scroll,
			var(--white);
	}
}

/* ---------- Dialogs on phones: full-width, thumb-sized buttons ---------- */
@media (max-width: 575.98px) {
	#modal-notification .modal-footer {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
		padding: 0.5rem 1.25rem 1.25rem;
	}

	#modal-notification .modal-footer > .btn {
		width: 100%;
		min-height: 3rem;
		margin: 0 !important;
		justify-content: center;
		font-size: 1rem;
	}

	#modal-notification #modal-btn-no {
		border: 1px solid var(--line-strong) !important;
		background: var(--white) !important;
		color: var(--navy-800) !important;
		text-decoration: none;
	}
}

/* Narrow screens: keep each table cell on one line (no "1099- / NEC" or split TINs); the table scrolls instead. */
@media (max-width: 991px) {
	body.app .modern-table th,
	body.app .modern-table td,
	body.app .table-responsive > .table th,
	body.app .table-responsive > .table td {
		white-space: nowrap;
	}
}

/* ---------- Import column mapping: the form scrolls inside its column on narrow screens ---------- */
@media (max-width: 991px) {
	.map-sheet-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
	}

	.map-sheet-scroll ~ *,
	.col-lg-9:has(> .map-sheet-scroll) {
		min-width: 0;
	}
}

/* ---------- Row actions: destructive buttons stay quiet until you're on that row (mouse users only) ---------- */
@media (hover: hover) and (pointer: fine) {
	body.app .app-table tbody .btn-outline-danger,
	body.app .modern-table tbody .btn-outline-danger {
		opacity: 0.4;
		filter: grayscale(1);
		transition: opacity 0.15s ease, filter 0.15s ease, background-color 0.15s ease;
	}

	body.app .app-table tbody tr:hover .btn-outline-danger,
	body.app .app-table tbody tr:focus-within .btn-outline-danger,
	body.app .modern-table tbody tr:hover .btn-outline-danger,
	body.app .modern-table tbody tr:focus-within .btn-outline-danger {
		opacity: 1;
		filter: none;
	}
}


/* ---------- Forms list: Add to Cart / Remove from Cart as real pill buttons ---------- */
body.app .app-table .cart-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.38rem 0.85rem !important;
	border-radius: 999px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

body.app .app-table .cart-toggle.is-out {
	background: var(--green-100) !important;
	border-color: #9fd4bd !important;
	color: var(--green-700) !important;
}

body.app .app-table .cart-toggle.is-out:hover {
	background: var(--green-600) !important;
	border-color: var(--green-600) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px -4px rgba(31, 122, 90, 0.5);
}

body.app .app-table .cart-toggle.is-in {
	background: var(--white) !important;
	border-color: var(--line-strong) !important;
	color: var(--ink-soft) !important;
}

body.app .app-table .cart-toggle.is-in:hover {
	border-color: #e8c98e !important;
	background: var(--amber-100) !important;
	color: #8a5a12 !important;
}


/* Table action menus are placed by Popper; drop the theme's fixed offset under the button. */
body.app .app-main .dropdown .dropdown-menu[data-popper-placement] {
	right: auto !important; /* placed by Popper with left/top only; a leftover right: 0 stretched it across the window */
	bottom: auto !important;
	margin-top: 0.35rem !important;
	margin-bottom: 0.35rem !important;
}

/* A closed menu stays laid out (invisible) for the theme's open animation; in a table its hidden box stuck out past
   the last column and made the whole table scroll sideways. Fixed positioning takes it out of the table's width. */
body.app .app-main .modern-table-container .dropdown .dropdown-menu:not(.show),
body.app .app-main .table-responsive .dropdown .dropdown-menu:not(.show) {
	position: fixed !important;
}


/* ---------- Row Actions menus (Orders, Imports): match the Account menu ---------- */
body.app .app-main .dropdown-menu {
	min-width: 230px;
	padding: 0.4rem;
	border: 1px solid var(--line) !important;
	border-radius: 14px;
	background: var(--white);
	box-shadow: 0 18px 40px -16px rgba(15, 42, 60, 0.35) !important;
}

body.app .app-main .dropdown-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.55rem;
	border-radius: 9px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ink);
	transition: background-color 0.15s ease;
}

body.app .app-main .dropdown-menu .dropdown-item > .material-icons {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin: 0 !important;
	border-radius: 8px;
	background: var(--navy-50);
	color: var(--navy-700);
	font-size: 17px !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.app .app-main .dropdown-menu .dropdown-item:hover,
body.app .app-main .dropdown-menu .dropdown-item:focus {
	background: var(--navy-50);
	color: var(--navy-900);
}

body.app .app-main .dropdown-menu .dropdown-item:hover > .material-icons,
body.app .app-main .dropdown-menu .dropdown-item:focus > .material-icons {
	background: var(--navy-700);
	color: var(--white);
}

body.app .app-main .dropdown-menu .dropdown-item.text-danger {
	color: var(--coral-700) !important;
}

body.app .app-main .dropdown-menu .dropdown-item.text-danger > .material-icons {
	background: var(--coral-100);
	color: var(--coral-600);
}

body.app .app-main .dropdown-menu .dropdown-item.text-danger:hover {
	background: var(--coral-100);
}

body.app .app-main .dropdown-menu .dropdown-item.text-danger:hover > .material-icons {
	background: var(--coral-600);
	color: var(--white);
}

body.app .app-main .dropdown-menu .dropdown-divider {
	margin: 0.35rem 0.25rem;
	border-color: var(--line);
	opacity: 1;
}


/* ---------- Row Actions toggle: light outline at rest, navy while its menu is open ---------- */
body.app .modern-table .dropdown-toggle.btn-primary,
body.app .app-table .dropdown-toggle.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.75rem 0.4rem 0.65rem;
	border: 1px solid var(--line-strong) !important;
	border-radius: 999px;
	background: var(--white) !important;
	color: var(--navy-800) !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.app .modern-table .dropdown-toggle.btn-primary:hover,
body.app .app-table .dropdown-toggle.btn-primary:hover {
	border-color: var(--navy-600) !important;
	background: var(--navy-50) !important;
}

body.app .modern-table .dropdown-toggle.btn-primary.show,
body.app .app-table .dropdown-toggle.btn-primary.show {
	border-color: var(--navy-700) !important;
	background: var(--navy-700) !important;
	color: var(--white) !important;
}


/* ---------- Order details: email-to-recipient as a round icon button ---------- */
body.app .email-form-btn {
	display: inline-grid !important;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0 !important;
	border: 1px solid var(--line-strong) !important;
	border-radius: 50% !important;
	background: var(--white) !important;
	color: var(--navy-700) !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

body.app .email-form-btn .material-icons-round {
	font-size: 18px;
	transition: transform 0.2s ease;
}

body.app .email-form-btn:hover {
	border-color: var(--navy-700) !important;
	background: var(--navy-700) !important;
	color: var(--white) !important;
}

body.app .email-form-btn:hover .material-icons-round {
	transform: translateX(2px);
}


/* ---------- Order details: copy picker + Get PDFs as one joined control ---------- */
body.app #pdfSelection {
	min-width: 8.5rem;
	border-radius: 999px 0 0 999px !important;
	border-color: var(--line-strong);
	padding-left: 1rem !important;
	font-weight: 600;
	color: var(--navy-900);
}

body.app #getPDFsBtn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: 0 999px 999px 0 !important;
	padding-left: 1rem;
	padding-right: 1.15rem;
	background: var(--navy-700) !important;
	border-color: var(--navy-700) !important;
	color: #fff !important;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

body.app #getPDFsBtn:hover {
	background: var(--navy-800) !important;
	box-shadow: 0 6px 16px -6px rgba(15, 42, 60, 0.5);
}

body.app #getPDFsBtn .material-icons-round {
	font-size: 18px;
	transition: transform 0.2s ease;
}

body.app #getPDFsBtn:hover .material-icons-round {
	transform: translateY(2px);
}

body.app #getPDFsBtn .btn-count {
	color: var(--navy-800);
}

/* ---------- Tooltips: navy, rounded, readable ---------- */
body.app .tooltip {
	--bs-tooltip-bg: var(--navy-900);
	--bs-tooltip-color: #fff;
	--bs-tooltip-max-width: 280px;
	--bs-tooltip-padding-x: 0.75rem;
	--bs-tooltip-padding-y: 0.45rem;
	--bs-tooltip-border-radius: 8px;
	--bs-tooltip-font-size: 0.8rem;
	--bs-tooltip-opacity: 1;
	font-family: var(--font-sans);
}

body.app .tooltip .tooltip-inner {
	text-align: left;
	line-height: 1.45;
	box-shadow: 0 8px 22px -8px rgba(15, 42, 60, 0.5);
}


/* ---------- "Show inactive" switch on list toolbars: same pill as the edit-page switches ---------- */
body.app .list-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 0;
	padding: 0.4rem 0.95rem 0.4rem 0.55rem !important;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--white);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.app .list-switch:hover {
	border-color: var(--navy-600);
}

body.app .list-switch:has(.form-check-input:checked) {
	border-color: var(--navy-600);
	background: var(--navy-50);
}

body.app .list-switch .form-check-input {
	float: none;
	margin: 0 !important;
	cursor: pointer;
}

body.app .list-switch .form-check-label {
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- IRS form page: error / warning / info / confirm banners as callout cards ---------- */
body.app :is([id^="ErrorDisplay"], [id^="WarningDisplay"], [id^="InfoDisplay"], [id^="ConfirmSaveMessage"]).alert {
	position: relative;
	padding: 0.9rem 1.15rem 0.9rem 3.4rem;
	border: 1px solid var(--line);
	border-left-width: 4px;
	border-radius: 14px;
	background: var(--white) !important;
	background-image: none !important;
	color: var(--ink) !important;
	box-shadow: 0 10px 26px -18px rgba(15, 42, 60, 0.35);
}

body.app :is([id^="ErrorDisplay"], [id^="WarningDisplay"], [id^="InfoDisplay"], [id^="ConfirmSaveMessage"]).alert::before {
	position: absolute;
	left: 1rem;
	top: 0.85rem;
	font-family: "Material Icons Round";
	font-size: 22px;
	line-height: 1;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
}

body.app :is([id^="ErrorDisplay"], [id^="WarningDisplay"], [id^="InfoDisplay"], [id^="ConfirmSaveMessage"]).alert ul {
	margin: 0.35rem 0 0;
	padding-left: 1.1rem;
}

body.app :is([id^="ErrorDisplay"], [id^="WarningDisplay"], [id^="InfoDisplay"], [id^="ConfirmSaveMessage"]).alert li + li {
	margin-top: 0.2rem;
}

body.app [id^="ErrorDisplay"].alert { border-color: #f3c2b9; border-left-color: var(--coral-600); background: #fffaf9 !important; }
body.app [id^="ErrorDisplay"].alert::before { content: "error"; color: var(--coral-600); }
body.app [id^="ErrorDisplay"].alert strong { color: var(--coral-700); }

body.app [id^="WarningDisplay"].alert { border-color: #f1e4c4; border-left-color: var(--amber-600); background: #fffdf6 !important; }
body.app [id^="WarningDisplay"].alert::before { content: "warning_amber"; color: var(--amber-600); }
body.app [id^="WarningDisplay"].alert strong { color: #8a5a12; }

body.app [id^="InfoDisplay"].alert { border-color: var(--navy-100); border-left-color: var(--navy-600); }
body.app [id^="InfoDisplay"].alert::before { content: "info"; color: var(--navy-600); }
body.app [id^="InfoDisplay"].alert strong { color: var(--navy-800); }

body.app [id^="ConfirmSaveMessage"].alert { border-color: var(--navy-100); border-left-color: var(--navy-700); background: var(--navy-50) !important; }
body.app [id^="ConfirmSaveMessage"].alert::before { content: "help_outline"; color: var(--navy-700); }

/* ---------- IRS form pages: Save shows an "unsaved" dot after a change ---------- */
body.app #SaveBtn.has-unsaved,
body.app #SaveBtnBottom.has-unsaved {
	position: relative;
	overflow: visible;
}

body.app #SaveBtn.has-unsaved::after,
body.app #SaveBtnBottom.has-unsaved::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--coral-500);
	border: 2px solid var(--white);
	animation: save-dot-pulse 1.6s ease-in-out infinite;
}

/* Save Anyway (shown after warnings): amber outline with rounded corners like the other buttons */
body.app #SaveAnywayBtn,
body.app #SaveAnywayBtnBottom {
	border-radius: var(--radius) !important;
	background: var(--amber-100) !important;
	border: 1px solid #e8c98e !important;
	color: #8a5a12 !important;
}

body.app #SaveAnywayBtn:hover,
body.app #SaveAnywayBtnBottom:hover {
	background: var(--amber-600) !important;
	border-color: var(--amber-600) !important;
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	body.app #SaveBtn.has-unsaved::after,
	body.app #SaveBtnBottom.has-unsaved::after { animation: none; }
}

/* ---------- Form edit page: "Get a PDF of this form" reads as a PDF download ---------- */
body.app .pdf-picker .border-lable-flt {
	position: relative;
}

body.app .pdf-picker .border-lable-flt::before {
	content: "picture_as_pdf";
	position: absolute;
	left: 0.8rem;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	font-family: "Material Icons Round";
	font-size: 20px;
	line-height: 1;
	color: var(--coral-600);
	pointer-events: none;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
}

body.app .pdf-picker #pdfList {
	padding-left: 2.6rem !important;
	font-weight: 600;
	color: var(--navy-900);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.app .pdf-picker #pdfList:hover {
	border-color: var(--navy-600);
	background-color: var(--navy-50);
}


/* ---------- Filer edit: saved state IDs as chips ---------- */
.state-id-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.state-id-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.3rem 0.85rem 0.3rem 0.3rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--white);
	font-variant-numeric: tabular-nums;
}

.state-id-abbr {
	display: inline-grid;
	place-items: center;
	min-width: 2.1rem;
	height: 1.8rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--navy-700);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.state-id-num {
	font-weight: 600;
	color: var(--navy-900);
}

.state-id-empty {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 1rem;
	padding: 0.45rem 0.9rem;
	border: 1.5px dashed var(--line-strong);
	border-radius: 999px;
	font-size: 0.875rem;
	color: var(--muted);
}

.state-id-empty .material-icons-round {
	font-size: 18px;
	color: var(--navy-600);
}

/* EIN / SSN toggles: a tray with a navy pill that slides to the chosen option (thumb added by site.js) */
body.app .btn-group-toggle.seg-slide {
	position: relative;
	gap: 2px;
	padding: 4px;
	border: 1px solid var(--line-strong);
	border-radius: 14px;
	background: var(--paper);
	box-shadow: inset 0 1px 2px rgba(15, 37, 64, 0.06);
}

body.app .btn-group-toggle.seg-slide > .btn {
	position: relative;
	z-index: 1;
	margin: 0 !important;
	padding: 0.55rem 1.1rem;
	border: 0 !important;
	border-radius: 10px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--ink-soft) !important;
	transition: color 0.2s ease, background-color 0.15s ease;
}

body.app .btn-group-toggle.seg-slide > .btn:not(.active):hover {
	background: rgba(22, 58, 80, 0.06) !important;
	color: var(--navy-800) !important;
}

body.app .btn-group-toggle.seg-slide > .btn.active {
	background: transparent !important;
	color: #fff !important;
}

body.app .btn-group-toggle.seg-slide .seg-thumb {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	border-radius: 10px;
	background: var(--navy-800);
	box-shadow: 0 4px 10px -4px rgba(15, 37, 64, 0.55);
	pointer-events: none;
}

body.app .btn-group-toggle.seg-ready .seg-thumb {
	transition: left 0.28s cubic-bezier(0.3, 0.9, 0.3, 1.05), width 0.28s cubic-bezier(0.3, 0.9, 0.3, 1.05), opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	body.app .btn-group-toggle.seg-ready .seg-thumb { transition: none; }
}

/* Some pages put lines straight into the box (no list): no stray bullet beside the icon */
body.app :is([id^="ErrorDisplay"], [id^="WarningDisplay"], [id^="InfoDisplay"]).alert > li {
	list-style: none;
	padding-top: 0.1rem;
}

/* A message that just appeared gets a short glow so the eye finds it */
body.app :is([id^="ErrorDisplay"], [id^="WarningDisplay"]).alert.is-flagged {
	animation: callout-flag 1.4s ease-out;
}

body.app [id^="WarningDisplay"].alert.is-flagged {
	--flag: rgba(183, 121, 31, 0.35);
}

@keyframes callout-flag {
	0% { box-shadow: 0 0 0 0 var(--flag, rgba(200, 67, 45, 0.4)); transform: translateY(-4px); }
	20% { transform: none; }
	40% { box-shadow: 0 0 0 7px rgba(200, 67, 45, 0); }
	100% { box-shadow: 0 10px 26px -18px rgba(15, 42, 60, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
	body.app :is([id^="ErrorDisplay"], [id^="WarningDisplay"]).alert.is-flagged { animation: none; }
}

/* ---------- IRS form pages: the form sits as a sheet of paper with a white margin, hairline edge and soft shadow ---------- */
/* Drawn with box-shadow so it spills into the card's padding without changing the layout or the fit-to-width zoom */
body.app .form-sheet {
	margin-top: 1.25rem;
	margin-left: 14px;
	border-radius: 2px;
	box-shadow:
		0 0 0 14px #fff,
		0 0 0 15px var(--line),
		0 22px 44px -20px rgba(15, 42, 60, 0.45);
}

/* ---------- IRS form pages: bottom Save / Back row as a floating action bar ---------- */
body.app .form-action-bar {
	position: sticky;
	bottom: 12px;
	z-index: 20;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0;
	width: fit-content;
	max-width: 100%;
	margin-top: 1.5rem;
	padding: 0.55rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 12px 30px -14px rgba(15, 42, 60, 0.45);
}

/* The blur sits on a layer behind the bar: a backdrop-filter on the bar itself made it the box that fixed-position
   menus are placed in, so Create Correction's menu (placed against the window) landed down in the footer */
body.app .form-action-bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	backdrop-filter: blur(8px);
	pointer-events: none;
}

body.app .form-action-bar > .btn,
body.app .form-action-bar > .dropdown > .btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0;
	border-radius: 0.6rem !important;
}

body.app .form-action-bar .btn .material-icons-round {
	font-size: 1.05rem;
}

/* Save carries a save icon (top and bottom) */
body.app :is(#SaveBtn, #SaveBtnBottom)::before {
	content: "save";
	font-family: "Material Icons Round";
	font-feature-settings: "liga";
	font-size: 1.05rem;
	font-weight: normal;
	line-height: 1;
	margin-right: 0.35rem;
	vertical-align: -0.2em;
}

body.app .form-action-bar .pdf-picker {
	margin: 0 0.25rem 0 0.75rem !important;
	padding-top: 0.4rem;
}

/* The form sits in a sideways-scroll box for small phones; where the form fits, let the bar float past it */
@media (min-width: 700px) {
	body.app .table-responsive:has(.form-action-bar) {
		overflow: visible;
	}
}

/* The PDF picker keeps a usable width inside the bar */
body.app .form-action-bar .pdf-picker {
	flex: 0 0 240px;
	width: 240px;
	max-width: 100%;
	padding-bottom: 0 !important;
}

/* Dropdowns on the IRS form: drawn by us (not the browser's native look) so they take the same fillable tint, with a small navy chevron */
body.app .form-sheet select.FormField:not(:disabled) {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 14px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231f4d69' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
	background-size: 8px 5px;
	cursor: pointer;
}

/* ---------- IRS form pages: Contact Department picker ---------- */
.filerdepartmentpicker {
	width: 16px;
	height: 16px;
	border-color: var(--navy-100);
	background-color: var(--navy-50);
	color: var(--navy-700);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.filerdepartmentpicker:hover,
.filerdepartmentpicker:focus {
	background-color: var(--navy-800);
	border-color: var(--navy-800);
	transform: scale(1.15);
}

#filerDepartmentModal .modal-content {
	border: 0;
	border-radius: 18px;
	box-shadow: 0 24px 60px -20px rgba(15, 42, 60, 0.45);
	overflow: hidden;
}

#filerDepartmentModal .modal-content::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--navy-600);
}

#filerDepartmentModal .modal-header {
	border-bottom: 0;
	padding: 1rem 1.25rem 0.25rem !important;
}

#filerDepartmentModal .modal-title {
	color: var(--navy-900);
	font-weight: 700;
}

#filerDepartmentModal .filerdepartmentlist {
	display: grid;
	gap: 0.5rem;
	padding: 0.25rem 1rem 1.1rem;
}

#filerDepartmentModal .filerdepartmentoption {
	position: relative;
	border: 1px solid var(--line) !important;
	border-radius: 0.85rem !important;
	padding: 0.65rem 0.8rem;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#filerDepartmentModal .filerdepartmentoption > span {
	gap: 0;
}

#filerDepartmentModal .filerdepartmentoption > span > span:nth-child(2) {
	margin-right: auto;
}

#filerDepartmentModal .filerdepartmentoption:hover {
	border-color: #b7cbd8 !important;
	background-color: var(--white);
	box-shadow: 0 6px 18px -10px rgba(15, 37, 64, 0.35);
}

#filerDepartmentModal .filerdepartmentoption.selected {
	border-color: var(--navy-600) !important;
	background: var(--navy-50);
	box-shadow: inset 3px 0 0 var(--navy-700);
}

#filerDepartmentModal .filerdepartmentoption .department-icon {
	width: 36px;
	height: 36px;
}

#filerDepartmentModal .filerdepartmentoption.selected .department-icon,
#filerDepartmentModal .filerdepartmentoption:hover .department-icon {
	background: var(--navy-800);
	border-color: var(--navy-800);
	color: #fff;
}

/* Phone as a quiet pill, like the department list */
#filerDepartmentModal .filerdepartmentoption .flex-shrink-0 > .text-sm {
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

#filerDepartmentModal .filerdepartmentoption .badge {
	background: #fff8e6 !important;
	border: 1px solid var(--amber-100);
	color: #8a5a12 !important;
	vertical-align: 0.1em;
}

#filerDepartmentModal .filerdepartmentcheck {
	color: var(--navy-700);
}

/* ---------- IRS form pages: tick boxes match the fillable fields; ticked = navy with a white tick that pops in ---------- */
body.app .form-sheet input.FormField[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	place-content: center;
	margin: 0;
	border: 1px solid rgba(31, 77, 105, 0.35);
	border-radius: 4px;
	background-color: rgba(214, 230, 242, 0.75);
	box-shadow: inset 0 -1.5px 0 rgba(31, 77, 105, 0.45);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body.app .form-sheet input.FormField[type="checkbox"]::before {
	content: "";
	width: 11px;
	height: 11px;
	background: #fff;
	clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
	transform: scale(0);
	transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
}

body.app .form-sheet input.FormField[type="checkbox"]:hover {
	background-color: rgba(214, 230, 242, 1);
	border-color: var(--navy-600);
}

body.app .form-sheet input.FormField[type="checkbox"]:checked {
	background-color: var(--navy-700);
	border-color: var(--navy-700);
	box-shadow: none;
}

body.app .form-sheet input.FormField[type="checkbox"]:checked::before {
	transform: scale(1);
}

body.app .form-sheet input.FormField[type="checkbox"]:focus-visible {
	outline: 2px solid var(--navy-600);
	outline-offset: 2px;
}

/* Boxes you can't change here (e.g. CORRECTED) stay plain */
body.app .form-sheet input.FormField[type="checkbox"][onclick="return false;"],
body.app .form-sheet input.FormField[type="checkbox"]:disabled {
	background-color: #fff;
	border-color: var(--line-strong);
	box-shadow: none;
	cursor: default;
}

body.app .form-sheet input.FormField[type="checkbox"][onclick="return false;"]:checked,
body.app .form-sheet input.FormField[type="checkbox"]:disabled:checked {
	background-color: var(--muted);
	border-color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
	body.app .form-sheet input.FormField[type="checkbox"]::before { transition: none; }
}

/* ---------- Page-to-page loading bar (top of the screen, signed-in pages) ---------- */
body.app .nav-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	width: 100%;
	height: 3px;
	transform: scaleX(0);
	transform-origin: left;
	background: linear-gradient(90deg, var(--coral-500), #f08a6b 60%, var(--coral-500));
	box-shadow: 0 0 8px rgba(228, 85, 63, 0.55);
	opacity: 0;
	pointer-events: none;
}

/* Races to about 70% quickly, then creeps on - it never finishes on its own, the new page replaces it */
body.app .nav-progress.is-loading {
	opacity: 1;
	animation: nav-progress-run 8s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}

@keyframes nav-progress-run {
	0% { transform: scaleX(0); }
	10% { transform: scaleX(0.45); }
	30% { transform: scaleX(0.7); }
	100% { transform: scaleX(0.94); }
}

@media (prefers-reduced-motion: reduce) {
	body.app .nav-progress.is-loading { animation: none; transform: scaleX(1); opacity: 0.8; }
}

/* ---------- 1094-B / 1094-C: the same fillable look as the other IRS forms (their boxes don't carry .FormField) ---------- */
body.app #Form1094 .form-sheet input:not(.FormField):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):not(:disabled),
body.app #Form1094 .form-sheet select:not(.FormField):not(:disabled) {
	border: 1px solid rgba(31, 77, 105, 0.28);
	border-radius: 3px;
	background-color: rgba(214, 230, 242, 0.75);
	box-shadow: inset 0 -1.5px 0 rgba(31, 77, 105, 0.45);
	color: var(--ink);
	transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

body.app #Form1094 .form-sheet input:not(.FormField):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):not(:disabled):hover,
body.app #Form1094 .form-sheet select:not(.FormField):not(:disabled):hover {
	background-color: rgba(214, 230, 242, 1);
	border-color: var(--navy-600);
}

body.app #Form1094 .form-sheet input:not(.FormField):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):not(:disabled):focus,
body.app #Form1094 .form-sheet select:not(.FormField):not(:disabled):focus {
	outline: none;
	background-color: #fff;
	border-color: var(--navy-600);
	box-shadow: 0 0 0 3px rgba(42, 97, 132, 0.25);
}

body.app #Form1094 .form-sheet input[type="checkbox"]:not(.FormField) {
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	place-content: center;
	margin: 0;
	border: 1px solid rgba(31, 77, 105, 0.35);
	border-radius: 4px;
	background-color: rgba(214, 230, 242, 0.75);
	box-shadow: inset 0 -1.5px 0 rgba(31, 77, 105, 0.45);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.app #Form1094 .form-sheet input[type="checkbox"]:not(.FormField)::before {
	content: "";
	width: 11px;
	height: 11px;
	background: #fff;
	clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
	transform: scale(0);
	transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
}

body.app #Form1094 .form-sheet input[type="checkbox"]:not(.FormField):hover {
	background-color: rgba(214, 230, 242, 1);
	border-color: var(--navy-600);
}

body.app #Form1094 .form-sheet input[type="checkbox"]:not(.FormField):checked {
	background-color: var(--navy-700);
	border-color: var(--navy-700);
	box-shadow: none;
}

body.app #Form1094 .form-sheet input[type="checkbox"]:not(.FormField):checked::before {
	transform: scale(1);
}

body.app #Form1094 .form-sheet input[type="checkbox"]:not(.FormField):focus-visible {
	outline: 2px solid var(--navy-600);
	outline-offset: 2px;
}

body.app #Form1094 .form-sheet input[type="checkbox"]:not(.FormField):disabled {
	background-color: #fff;
	border-color: var(--line-strong);
	box-shadow: none;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	body.app #Form1094 .form-sheet input[type="checkbox"]:not(.FormField)::before { transition: none; }
}