/*
 * UP Voter Search — front-end styles.
 *
 * Colors/typography are consumed from the active block theme's theme.json
 * presets (Global Styles), e.g. --wp--preset--color--primary. Every token has
 * a static fallback so the plugin still renders sensibly on themes without
 * theme.json. Changing the palette in the Site Editor / Customizer updates
 * this UI automatically.
 *
 * The print/slip section is intentionally NOT tokenized: printed slips must
 * stay ink-on-white regardless of the site palette.
 */

.upvs-wrap,
.upvs-gate {
	/* Election Express palette via theme.json (fallbacks mirror it). */
	--upvs-primary: var(--wp--preset--color--primary, #006A4E);
	--upvs-primary-dark: var(--wp--preset--color--primary-dark, #01553F);
	--upvs-accent: var(--wp--preset--color--accent, #F42A41);
	--upvs-accent-dark: var(--wp--preset--color--accent-dark, #C81E33);
	--upvs-gold: var(--wp--preset--color--gold, #C9A227);
	--upvs-ink: var(--wp--preset--color--ink, #152420);
	--upvs-muted: var(--wp--preset--color--muted, #5B6B63);
	--upvs-surface: var(--wp--preset--color--white, #FFFFFF);
	--upvs-paper: var(--wp--preset--color--paper, #F8F6F1);
	--upvs-line: var(--wp--preset--color--line, #E5E1D6);
	/* Derived (static fallbacks verified ≥ 4.5:1; color-mix refines live). */
	--upvs-tint-primary: #e6f0ed;
	--upvs-tint-accent: #feeaec;
	--upvs-tint-gold: #f7f2e1;
	--upvs-gold-deep: #6B5510;
	--upvs-focus: var(--upvs-primary-dark);
	--upvs-radius: 8px;
	--upvs-font-body: var(
		--wp--preset--font-family--body,
		-apple-system, BlinkMacSystemFont, "Segoe UI",
		"Noto Sans Bengali", "Hind Siliguri", Arial, sans-serif
	);
}

.upvs-wrap {
	max-width: 1160px;
	margin: 0 auto;
	font-family: var(--upvs-font-body);
	color: var(--upvs-ink);
	font-size: 15px;
	line-height: 1.7;
}

.upvs-head {
	text-align: center;
	margin: 0 0 16px;
}

.upvs-title {
	margin: 0 0 6px;
	font-size: clamp(1.45rem, 1.25rem + 0.9vw, 1.9rem);
	line-height: 1.3;
	font-weight: 700;
	color: var(--upvs-ink);
}

.upvs-subtitle {
	margin: 0 auto;
	max-width: 640px;
	font-size: 14px;
	color: var(--upvs-muted);
}

.upvs-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 14px;
	background: var(--upvs-paper);
	border: 1px solid var(--upvs-line);
	border-radius: var(--upvs-radius);
	margin-bottom: 14px;
}

.upvs-count strong {
	font-size: 18px;
	color: var(--upvs-primary-dark);
}

.upvs-top-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.upvs-logout {
	color: var(--upvs-accent-dark);
	text-decoration: none;
}

.upvs-logout:hover {
	text-decoration: underline;
}

.upvs-form {
	background: var(--upvs-surface);
	border: 1px solid var(--upvs-line);
	border-radius: var(--upvs-radius);
	padding: 16px;
}

.upvs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px 16px;
}

.upvs-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
	font-size: 13px;
	color: var(--upvs-muted);
}

.upvs-field input[type="search"],
.upvs-field select {
	padding: 8px 10px;
	border: 1px solid var(--upvs-line);
	border-radius: 6px;
	font-size: 15px;
	font-weight: 400;
	color: var(--upvs-ink);
	background: var(--upvs-surface);
	width: 100%;
	box-sizing: border-box;
}

.upvs-field input::placeholder {
	color: var(--upvs-muted);
	opacity: 1;
}

.upvs-field input:focus,
.upvs-field select:focus {
	outline: 2px solid var(--upvs-focus);
	outline-offset: 1px;
	border-color: var(--upvs-primary);
}

.upvs-wide {
	grid-column: 1 / -1;
}

.upvs-check {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.upvs-actions {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}

/* Buttons follow the theme's button element: primary bg, white text,
 * 600 weight, 8px radius, primary-dark hover. */
.upvs-btn {
	display: inline-block;
	padding: 8px 18px;
	border-radius: var(--upvs-radius);
	border: 1px solid var(--upvs-primary);
	background: var(--upvs-primary);
	color: var(--upvs-surface);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.upvs-btn:hover {
	background: var(--upvs-primary-dark);
	border-color: var(--upvs-primary-dark);
	color: var(--upvs-surface);
}

.upvs-btn:focus-visible,
.upvs-logout:focus-visible,
.upvs-row-check:focus-visible,
.upvs-check-all:focus-visible,
.upvs-family-btn:focus-visible {
	outline: 2px solid var(--upvs-focus);
	outline-offset: 2px;
}

.upvs-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.upvs-form > .upvs-actions .upvs-btn[type="reset"] {
	background: var(--upvs-surface);
	color: var(--upvs-ink);
	border-color: var(--upvs-line);
}

.upvs-btn-ghost {
	background: var(--upvs-surface);
	color: var(--upvs-ink);
	border-color: var(--upvs-line);
}

.upvs-btn-ghost:hover {
	background: var(--upvs-paper);
	color: var(--upvs-ink);
	border-color: var(--upvs-muted);
}

.upvs-btn-mini {
	padding: 3px 10px;
	font-size: 12.5px;
	border-radius: 5px;
}

.upvs-gate {
	max-width: 460px;
	margin: 40px auto;
	padding: 28px;
	background: var(--upvs-surface);
	border: 1px solid var(--upvs-line);
	border-radius: var(--upvs-radius);
}

.upvs-gate-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.upvs-gate-form label {
	font-weight: 600;
	color: var(--upvs-ink);
}

.upvs-gate-form input[type="password"] {
	padding: 10px 12px;
	border: 1px solid var(--upvs-line);
	border-radius: 6px;
	font-size: 16px;
	color: var(--upvs-ink);
	background: var(--upvs-surface);
}

.upvs-notice {
	padding: 10px 14px;
	border-radius: 6px;
	color: var(--upvs-primary-dark);
	background: var(--upvs-tint-primary);
	background: color-mix(in srgb, var(--upvs-primary) 10%, var(--upvs-surface));
	border: 1px solid var(--upvs-primary);
}

.upvs-notice-error {
	color: var(--upvs-accent-dark);
	background: var(--upvs-tint-accent);
	background: color-mix(in srgb, var(--upvs-accent) 10%, var(--upvs-surface));
	border-color: var(--upvs-accent);
}

.upvs-results {
	margin-top: 16px;
}

/* Screen-reader only (status line, table caption) */
.upvs-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

.upvs-loading,
.upvs-empty,
.upvs-error {
	padding: 14px;
	background: var(--upvs-paper);
	border: 1px dashed var(--upvs-line);
	border-radius: var(--upvs-radius);
	color: var(--upvs-ink);
}

.upvs-error {
	color: var(--upvs-accent-dark);
	background: var(--upvs-tint-accent);
	background: color-mix(in srgb, var(--upvs-accent) 10%, var(--upvs-surface));
	border: 1px solid var(--upvs-accent);
}

.upvs-family {
	padding: 10px 14px;
	margin-bottom: 10px;
	color: var(--upvs-primary-dark);
	background: var(--upvs-tint-primary);
	background: color-mix(in srgb, var(--upvs-primary) 10%, var(--upvs-surface));
	border: 1px solid var(--upvs-primary);
	border-radius: var(--upvs-radius);
	font-weight: 600;
}

.upvs-table-wrap {
	overflow-x: auto;
	background: var(--upvs-surface);
	border: 1px solid var(--upvs-line);
	border-radius: var(--upvs-radius);
}

.upvs-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
	color: var(--upvs-ink);
}

.upvs-table th,
.upvs-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--upvs-line);
	text-align: left;
	vertical-align: top;
}

.upvs-table thead th {
	background: var(--upvs-paper);
	position: sticky;
	top: 0;
	white-space: nowrap;
	font-size: 13px;
	color: var(--upvs-muted);
}

.upvs-table tbody tr:hover {
	background: var(--upvs-paper);
}

/* Mobile: secondary columns (মাতা, অভিভাবক, জন্ম তারিখ, ভোটার নং) are hidden
 * to keep the table readable without horizontal scrolling. Desktop keeps all
 * columns; printed output is unaffected (the print table has no opt class). */
@media (max-width: 640px) {
	.upvs-table .upvs-col-opt {
		display: none;
	}
}

.upvs-serial {
	white-space: nowrap;
	color: var(--upvs-muted);
}

.upvs-nowrap {
	white-space: nowrap;
}

.upvs-chip {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.upvs-chip-dead {
	color: var(--upvs-accent-dark);
	background: var(--upvs-tint-accent);
	background: color-mix(in srgb, var(--upvs-accent) 10%, var(--upvs-surface));
	border: 1px solid var(--upvs-accent);
}

.upvs-chip-warn {
	color: var(--upvs-gold-deep);
	background: var(--upvs-tint-gold);
	background: color-mix(in srgb, var(--upvs-gold) 14%, var(--upvs-surface));
	border: 1px solid var(--upvs-gold);
}

.upvs-pager {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 12px 0 24px;
}

.upvs-pageinfo {
	padding: 0 6px;
	font-weight: 600;
	color: var(--upvs-ink);
}

.upvs-printbar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 8px 14px;
	background: var(--upvs-tint-gold);
	background: color-mix(in srgb, var(--upvs-gold) 14%, var(--upvs-surface));
	border: 1px solid var(--upvs-gold);
	border-radius: var(--upvs-radius);
	margin-bottom: 14px;
}

.upvs-printbar-info {
	font-weight: 600;
	white-space: nowrap;
	color: var(--upvs-ink);
}

.upvs-printbar-info strong {
	font-size: 17px;
	color: var(--upvs-gold-deep);
}

.upvs-printbar-hint {
	color: var(--upvs-gold-deep);
	font-size: 13px;
	margin-right: auto;
}

.upvs-select-col {
	width: 36px;
	text-align: center;
}

.upvs-select-col input[type="checkbox"],
.upvs-table .upvs-row-check,
.upvs-table .upvs-check-all {
	width: 16px;
	height: 16px;
	cursor: pointer;
	accent-color: var(--upvs-primary);
}

.upvs-print-area {
	display: none;
}

.upvs-print-title {
	margin: 0 0 10px;
	font-size: 18px;
	color: var(--upvs-ink);
}

/* ---- Slip (print output only — deliberately not themed) ---- */

.upvs-slip {
	position: relative;
	border: 1.5px solid #444;
	border-radius: 6px;
	padding: 10px 14px 10px;
	margin: 0 auto 14px;
	max-width: 760px;
	box-sizing: border-box;
	font-family: 'Bangla MN', 'Bangla Sangam MN', 'Noto Sans Bengali', 'Hind Siliguri', Arial, sans-serif;
	color: #111;
	background: #fff;
}

.upvs-slip-top {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.upvs-slip-photo-col {
	flex: 0 0 112px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: 4px;
	padding-top: 2px;
}

.upvs-slip-symbol-col {
	flex: 0 0 112px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: 4px;
	padding-top: 2px;
}

.upvs-slip-photo {
	width: 88px;
	height: 100px;
	border: 1.5px dashed #777;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #fff;
	box-sizing: border-box;
}

.upvs-slip-photo:empty::after {
	content: 'ছবি';
	color: #999;
	font-size: 12px;
}

.upvs-slip-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.upvs-slip-symbol img {
	display: block;
	width: 66px;
	height: 66px;
	object-fit: contain;
	border: 1.5px solid #555;
	border-radius: 6px;
	padding: 2px;
	background: #fff;
	box-sizing: border-box;
}

.upvs-slip-symbol-name {
	font-size: 14.5px;
	font-weight: 800;
	color: #1c2430;
	line-height: 1.25;
}

.upvs-slip-symbol-note {
	font-size: 13px;
	font-weight: 800;
	line-height: 1.35;
	color: #7f1d1d;
}

.upvs-slip-headcol {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

.upvs-slip-appeal {
	margin-top: 7px;
	text-align: center;
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.5;
	color: #7f1d1d;
}

.upvs-slip-head {
	font-size: 15.5px;
	font-weight: 700;
	text-align: center;
	border-bottom: 1.5px solid #333;
	padding-bottom: 4px;
	margin-bottom: 5px;
}

.upvs-slip-position {
	font-size: 13.5px;
	text-align: center;
	margin-bottom: 2px;
}

.upvs-slip-candname {
	font-size: 27px;
	font-weight: 800;
	text-align: center;
	margin: 2px 0;
	color: #1c2430;
}

.upvs-slip-slogan {
	font-size: 13px;
	font-style: italic;
	text-align: center;
	margin-bottom: 4px;
	color: #333;
}

.upvs-slip-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	font-size: 13.5px;
	border: 1px solid #999;
	border-radius: 5px;
	padding: 8px 12px;
	background: #fafafa;
	margin-top: 10px;
}

.upvs-slip-field {
	display: flex;
	align-items: baseline;
	width: calc(50% - 12px);
}

.upvs-slip-field-full {
	width: 100%;
}

.upvs-slip-label {
	font-weight: 700;
	white-space: nowrap;
}

.upvs-slip-value {
	margin-left: 8px;
	border-bottom: 1px dotted #555;
	padding: 0 4px 1px;
	min-height: 1.2em;
	word-break: break-word;
	flex: 1;
}

.upvs-slip-blank {
	min-width: 120px;
}

.upvs-slip-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-top: 8px;
}

.upvs-slip-footer {
	flex-shrink: 0;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	color: #333;
}

.upvs-slip-date {
	flex-shrink: 0;
	text-align: right;
	font-size: 13.5px;
	font-weight: 700;
	color: #111;
}

@media print {
	.upvs-form,
	.upvs-top-actions,
	.upvs-pager,
	.upvs-family-btn,
	.upvs-printbar,
	.upvs-select-col {
		display: none !important;
	}

	.upvs-table-wrap {
		overflow: visible;
		border: none;
	}

	.upvs-table th,
	.upvs-table td {
		border-bottom: 1px solid #999;
	}

	.upvs-table thead th {
		position: static;
		background: #eee !important;
	}

	.upvs-print-area {
		display: none;
	}

	body.upvs-list-printing > *:not(#upvs-print-area),
	body.upvs-slip-printing > *:not(#upvs-print-area) {
		display: none !important;
	}

	body.upvs-list-printing .upvs-wrap,
	body.upvs-slip-printing .upvs-wrap {
		display: none !important;
	}

	body.upvs-list-printing #upvs-print-area,
	body.upvs-slip-printing #upvs-print-area {
		display: block !important;
		width: 5in;
		max-width: 5in;
		margin: 0 auto;
		padding: 0;
	}

	body.upvs-slip-printing #upvs-print-area {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(92.5mm, auto);
		gap: 2.5mm 3.5mm;
		width: auto;
		max-width: none;
		margin: 0;
	}

	body.upvs-slip-printing .upvs-slip {
		width: auto;
		max-width: none;
		box-sizing: border-box;
		padding: 5px 7px 6px;
		margin: 0;
		border: 1px dashed #bbb;
		break-inside: avoid;
		page-break-inside: avoid;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		line-height: 1.5;
	}

	body.upvs-slip-printing .upvs-slip-photo-col,
	body.upvs-slip-printing .upvs-slip-symbol-col {
		flex: 0 0 78px;
	}

	body.upvs-slip-printing .upvs-slip-top {
		gap: 9px;
	}

	body.upvs-slip-printing .upvs-slip-photo {
		width: 66px;
		height: 74px;
	}

	body.upvs-slip-printing .upvs-slip-symbol img {
		width: 52px;
		height: 52px;
	}

	body.upvs-slip-printing .upvs-slip-head {
		font-size: 12.5px;
		line-height: 1.4;
		padding-bottom: 4px;
		margin-bottom: 4px;
	}

	body.upvs-slip-printing .upvs-slip-position {
		font-size: 11.5px;
		line-height: 1.4;
	}

	body.upvs-slip-printing .upvs-slip-candname {
		font-size: 19px;
		line-height: 1.3;
	}

	body.upvs-slip-printing .upvs-slip-slogan {
		font-size: 11px;
		line-height: 1.4;
		margin-bottom: 3px;
	}

	body.upvs-slip-printing .upvs-slip-symbol-name {
		font-size: 12.5px;
		line-height: 1.3;
	}

	body.upvs-slip-printing .upvs-slip-symbol-note {
		font-size: 11px;
		line-height: 1.35;
	}

	body.upvs-slip-printing .upvs-slip-appeal {
		font-size: 11.5px;
		line-height: 1.35;
		margin-top: 4px;
	}

	body.upvs-slip-printing .upvs-slip-fields {
		font-size: 11.5px;
		line-height: 2;
		gap: 6px 12px;
		padding: 15px 8px;
		margin-top: 3px;
	}

	body.upvs-slip-printing .upvs-slip-label {
		white-space: normal;
	}

	body.upvs-slip-printing .upvs-slip-value {
		margin-left: 4px;
		min-height: 1em;
	}

	body.upvs-slip-printing .upvs-slip-bottom {
		margin-top: 4px;
	}

	body.upvs-slip-printing .upvs-slip-footer,
	body.upvs-slip-printing .upvs-slip-date {
		font-size: 9.5px;
		line-height: 1.4;
	}

	body.upvs-list-printing .upvs-table {
		font-size: 8px;
	}

	body.upvs-list-printing .upvs-table th,
	body.upvs-list-printing .upvs-table td {
		padding: 3px 4px;
	}

	.upvs-slip img {
		display: block !important;
		visibility: visible !important;
		max-width: 100% !important;
	}

	.upvs-slip,
	.upvs-slip * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}