/* ============================================================
AssemblySite — Unified Stylesheet
Merged from: site.css + dc.css + Blazor defaults
Dark theme native | Mobile-first
============================================================ */
/* ── CSS Custom Properties (VDC theme — SP Red+Green) ── */
:root {
/* Corporate light. Same variable NAMES as the dark campaign palette this
replaced, so the ~2,900 var() call sites did not have to change. */
--bg: #ffffff; --bg2: #161920; --bg3: #1f232c; --bg4: #232833;
--border: #232833; --border2: #333b49;
--text: #f5f7fa; --muted: #7c8494; --muted2: #aeb6c2;
/* Semantic hues are darkened against the dark-theme originals: #4caf50 on
white is 2.8:1 and fails AA, #15803d is 4.6:1 and passes. Every value
below clears 4.5:1 on --bg. */
--green: #15803d; --green-dim: rgba(21,128,61,0.10);
--red: #b91c1c; --red-dim: rgba(185,28,28,0.10);
--amber: #b45309; --amber-dim: rgba(180,83,9,0.10);
--blue: #1d4ed8; --blue-dim: rgba(29,78,216,0.10);
--cyan: #0e7490;
--purple: #6d28d9; --purple-dim: rgba(109,40,217,0.10);
/* One accent across all seven sites: the product reads as one system, and
users move between assembly/teams/booth on the same credentials. */
--primary: #1e40af;
--accent: #2563eb; --accent-dim: rgba(37,99,235,0.10);
--on-accent: #ffffff;
--shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
--shadow: 0 1px 3px rgba(15,23,42,0.10), 0 1px 2px rgba(15,23,42,0.06);
--shadow-lg: 0 10px 24px rgba(15,23,42,0.10);
--mono: 'JetBrains Mono', ui-monospace, monospace;
--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--radius: 8px}
/* ── Reset & Base ── */
* { box-sizing: border-box}
html, body { margin:0; padding:0; background:#161920; color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.4}
h1, h2, h3 { margin:0 0 8px}
h2 { font-size:20px}
h3 { font-size:16px}
a { color:var(--cyan); text-decoration:none !important}
a:hover { text-decoration:none !important}
/* ── Blazor framework styles ── */
.content { padding-top:1.1rem}
h1:focus { outline:none}
.valid.modified:not([type=checkbox]) { outline:1px solid #15803d}
.invalid { outline:1px solid #b91c1c}
.validation-message { color:#ff5c77}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem; color: white}
.blazor-error-boundary::after { content: "An error has occurred."}
.darker-border-checkbox.form-check-input { border-color: #333b49}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color, var(--muted)); text-align: end}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start}
/* ── Topbar ── */
.topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; color:var(--text); background:linear-gradient(90deg,#161920,#161920); border-bottom:1px solid rgba(185,28,28,.25); position:sticky; top:0; z-index:50; box-shadow:0 2px 12px rgba(0,0,0,.35)}
.topbar .brand { font-family:var(--mono); font-size:13px; font-weight:800; letter-spacing:.18em; color:var(--red); text-transform:uppercase; text-shadow:0 0 14px rgba(185,28,28,.4)}
.topbar a, .topbar span { color:var(--muted2); font-size:13px}
.topbar a { text-decoration:none}
.topbar .logout-btn { display:inline-block; padding:7px 16px; background:rgba(255,255,255,0.072); color:#f5f7fa; border:1px solid rgba(255,255,255,0.216); border-radius:8px; font-size:13px; font-weight:600; text-decoration:none; transition:all .15s; cursor:pointer}
.topbar .logout-btn:hover { background:rgba(185,28,28,.85); border-color:rgba(185,28,28,.95); transform:translateY(-1px)}
/* Layer-specific brand colors */
.topbar.layer-state .brand { color:#fbbf24; text-shadow:0 0 16px rgba(161,98,7,.35)}
.topbar.layer-district .brand { color:#c4b5fd; text-shadow:0 0 16px rgba(109,40,217,.35)}
.topbar.layer-parliamentary .brand { color:#60a5fa; text-shadow:0 0 16px rgba(29,78,216,.35)}
.topbar.layer-assembly .brand { color:#ff5c77; text-shadow:0 0 16px rgba(185,28,28,.35)}
.topbar.layer-sector .brand { color:#3fd37e; text-shadow:0 0 16px rgba(21,128,61,.35)}
.topbar.layer-booth .brand { color:#fbbf24; text-shadow:0 0 16px rgba(180,83,9,.35)}
@media (max-width: 480px) {
.topbar { padding:10px 12px}
.topbar .brand { font-size:12px; letter-spacing:.10em}
.topbar .logout-btn { padding:5px 12px; font-size:12px}
}
/* ── Main content ── */
.main { padding:16px; padding-bottom:60px; max-width:700px; margin:0 auto; flex:1; min-width:0}
/* ── Bottom navigation ── */
.bottombar { position:fixed; bottom:0; left:0; right:0; background:#161920; border-top:1px solid rgba(185,28,28,.18); display:flex; z-index:10}
.bottombar a { flex:1; text-align:center; text-decoration:none; color:var(--muted); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:12px 0}
/* The bar is the only navigation below 1000px, and its links were about 39px
tall (11px x 1.4 + 24px padding) -- under the 44px floor the rest of the app
keeps. It is also driven by WarRoomDestinations now, so a statewide account
can carry nine labels: the bar scrolls sideways instead of crushing them. */
.bottombar { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.bottombar::-webkit-scrollbar { display:none}
.bottombar a { flex:1 0 auto; min-height:44px; display:flex; align-items:center; justify-content:center; padding:0 12px; white-space:nowrap}
.bottombar a.active { color:var(--on-accent); background:var(--red); border-radius:6px}
.bottombar a:active { color:var(--red)}
/* ── Page header ── */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; gap:16px}
.page-title { font-family:var(--mono); font-size:17px; font-weight:700; color:var(--text)}
.page-subtitle { font-size:13px; color:var(--muted); margin-top:3px}
.page-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; flex-wrap:wrap}
/* ── Section header ── */
.section-hdr { font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; border-bottom:1px solid var(--border); padding-bottom:7px; margin-bottom:14px}
/* ── Stat cards ── */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:10px; margin-bottom:24px}
.col-span-2 { grid-column:span 2}
.cards-grid-8 { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; margin-bottom:24px}
.cards-grid-7 { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; margin-bottom:24px}
@media(max-width:700px){ .cards-grid-8,.cards-grid-7{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; position:relative; overflow:hidden}
.stat-card.c-green { border-top:2px solid var(--green)}
.stat-card.c-red { border-top:2px solid var(--red)}
.stat-card.c-amber { border-top:2px solid var(--amber)}
.stat-card.c-blue { border-top:2px solid var(--blue)}
.stat-card.c-cyan { border-top:2px solid var(--cyan)}
.stat-card.c-purple { border-top:2px solid var(--purple)}
.stat-card.c-gray { border-top:2px solid #333b49}
.card-label { font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; margin-bottom:8px}
.card-value { font-family:var(--mono); font-size:24px; font-weight:700; line-height:1; margin-bottom:5px}
.c-green .card-value { color:var(--green)}
.c-red .card-value { color:var(--red)}
.c-amber .card-value { color:var(--amber)}
.c-blue .card-value { color:var(--blue)}
.c-cyan .card-value { color:var(--cyan)}
.c-purple .card-value { color:var(--purple)}
.c-gray .card-value { color:#aeb6c2}
.card-sub { font-family:var(--mono); font-size:10px; color:var(--muted)}
/* ── Progress bar ── */
.progress-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; margin-bottom:24px}
.progress-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px}
.progress-pct { font-family:var(--mono); font-size:18px; font-weight:700; color:var(--green)}
.progress-meta { font-family:var(--mono); font-size:10px; color:var(--muted)}
.prog-track { height:8px; background:var(--bg4); border-radius:4px; overflow:hidden; display:flex; gap:1px}
.prog-seg { height:100%; border-radius:3px; transition:width .5s ease}
.seg-done { background:var(--green)} .seg-fail { background:var(--red)} .seg-nf { background:var(--border2)} .seg-ip { background:var(--amber)}
.prog-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px}
.leg { display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px; color:var(--muted)}
.leg-dot { width:7px; height:7px; border-radius:2px; flex-shrink:0}
/* ── Two-column layout ── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px}
@media(max-width:1050px){ .two-col{grid-template-columns:1fr} }
/* ── Tables ── */
.table-wrap { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:24px}
.data-table { width:100%; border-collapse:collapse; font-size:12px}
.data-table th { background:var(--bg3); color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:8px 12px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap}
.data-table td { padding:8px 12px; border-bottom:1px solid var(--border); color:var(--muted2); font-family:var(--mono); font-size:11px}
.data-table tr:last-child td { border-bottom:none}
.data-table tr:hover td { background:var(--bg3)}
.data-table a { color:var(--cyan); text-decoration:none}
.data-table a:hover { text-decoration:underline}
.data-table th.sortable { cursor:pointer}
.data-table th.sortable:hover { color:var(--text)}
/* ── Bar chart (CSS only) ── */
.bar-chart { display:flex; flex-direction:column; gap:6px}
.bar-row { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10px}
.bar-label { width:80px; color:var(--muted); text-align:right; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-track { flex:1; height:18px; background:var(--bg4); border-radius:3px; overflow:hidden; position:relative}
.bar-fill { height:100%; border-radius:3px; transition:width .4s ease; display:flex; align-items:center; justify-content:flex-end; padding-right:6px; font-size:9px; font-weight:700}
.bar-value { width:60px; text-align:right; flex-shrink:0; color:var(--muted2)}
.bar { background:var(--green)}
/* ── PDA-G palette ── */
.pdag-p { color:var(--amber)} .pdag-d { color:var(--blue)} .pdag-a { color:var(--green)} .pdag-g { color:var(--purple)}
.bg-pdag-p { background:var(--amber)} .bg-pdag-d { background:var(--blue)} .bg-pdag-a { background:var(--green)} .bg-pdag-g { background:var(--purple)}
.pdag-tile { display:flex; flex-direction:column; align-items:center; justify-content:center}
.pdag-letter { font-size:40px; font-weight:800; font-family:var(--sans); line-height:1; margin-bottom:4px}
.pdag-p .pdag-letter { color:var(--amber)}
.pdag-d .pdag-letter { color:var(--blue)}
.pdag-a .pdag-letter { color:var(--green)}
.pdag-g .pdag-letter { color:var(--purple)}
/* ── Badges ── */
.badge { display:inline-block; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; padding:2px 5px; border-radius:3px}
.badge-done { background:var(--green-dim); color:var(--green)}
.badge-failed { background:var(--red-dim); color:var(--red)}
.badge-ip { background:var(--amber-dim); color:var(--amber)}
.badge-pending { background:var(--bg4); color:var(--muted2)}
/* ── Buttons ── */
.btn { display:inline-block; padding:10px 20px; background:var(--bg3); border:1px solid var(--border2); color:var(--text); font-family:var(--mono); font-size:11px; border-radius:var(--radius); text-decoration:none; cursor:pointer}
.btn:active, .btn:hover { background:var(--bg4)}
.page-actions .btn { font-size:10px; padding:5px 12px; white-space:nowrap}
.page-actions .btn-green { background:var(--green-dim); color:var(--green); border-color:var(--green)}
.pill { background:var(--green-dim); color:var(--green)}
/* Bootstrap overrides for dark theme */
.btn-primary { background-color:var(--green); border-color:var(--green); color:var(--on-accent)}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow:0 0 0 0.1rem rgba(15,23,42,.1), 0 0 0 0.25rem rgba(21,128,61,.4)}
/* ── Cards ── */
.card { background:var(--bg2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:16px; margin-bottom:12px; box-shadow:0 1px 4px rgba(0,0,0,.18)}
/* ── Forms ── */
input[type=text], input[type=password], input[type=email], input[type=number], textarea, select {
width:100%; box-sizing:border-box; padding:10px 12px; font-size:14px; font-family:var(--sans);
background:var(--bg3); color:var(--text); border:1px solid var(--border2); border-radius:var(--radius); outline:none; transition:border-color .15s, box-shadow .15s}
input:focus, textarea:focus, select:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(14,116,144,.15)}
textarea { min-height:60px; resize:vertical}
select { cursor:pointer; appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 12px center; padding-right:34px}
.form-row { margin-bottom:14px}
.form-row label { display:block; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted2); letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px}
.edit-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.btn-save { background:var(--green)!important; color:var(--on-accent)!important; border-color:var(--green)!important; font-weight:700; padding:10px 28px!important; font-size:13px!important}
.btn-save:hover { opacity:.9}
.btn-cancel { background:var(--bg3)!important; color:var(--muted2)!important; border:1px solid var(--border2)!important; padding:10px 22px!important; font-size:13px!important}
.btn-cancel:hover { background:var(--bg4)!important; color:var(--text)!important}
/* ── Status messages ── */
.err { color:var(--red); font-weight:600}
.ok { color:var(--green); font-weight:600}
.err-text { color:var(--red)!important; font-size:10px}
/* ── Voter cards ── */
.voter-card { background:linear-gradient(135deg,#161920,#161920); border:1px solid rgba(21,128,61,0.10); border-radius:10px; margin-bottom:8px; overflow:hidden; border-left:3px solid var(--green); box-shadow:0 2px 12px rgba(0,0,0,.35); transition:transform .15s,box-shadow .15s}
.voter-card:hover { transform:translateY(-1px); box-shadow:0 4px 20px rgba(0,0,0,.45)}
.voter-card a { color:var(--cyan); text-decoration:none}
.voter-card a:active { text-decoration:underline}
.voter-card.vc-m { border-left-color:var(--blue); box-shadow:0 2px 12px rgba(0,0,0,.35),inset 0 0 0 1px rgba(29,78,216,.06)}
.voter-card.vc-f { border-left-color:#be185d; box-shadow:0 2px 12px rgba(0,0,0,.35),inset 0 0 0 1px rgba(190,24,93,.06)}
.vc-layout { display:flex; align-items:stretch}
.vc-srno { display:flex; align-items:center; justify-content:center; min-width:46px; padding:0 4px; font-family:var(--mono); font-size:15px; font-weight:800; color:var(--muted2); background:rgba(255,255,255,0.036); border-right:1px solid rgba(148,163,184,0.08); flex-shrink:0}
.vc-content { flex:1; min-width:0; padding:12px 14px}
.vc-row1 { display:flex; align-items:flex-start; gap:8px; margin-bottom:4px}
.vc-name { flex:1; min-width:0; font-size:15px; font-weight:700; color:#f5f7fa; line-height:1.35}
.vc-en { font-size:12px; font-weight:400; color:var(--muted2)}
.vc-edit { flex-shrink:0; padding:4px 12px; border-radius:6px; background:rgba(185,28,28,.10); border:1px solid rgba(185,28,28,.25); color:var(--red); text-decoration:none; font-family:var(--mono); font-size:10px; font-weight:700; white-space:nowrap; transition:all .15s; letter-spacing:.03em}
.vc-edit:hover { background:rgba(185,28,28,.20); border-color:var(--red); box-shadow:0 0 8px rgba(185,28,28,.2)}
.vc-row2 { display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:12px}
.vc-sur { color:var(--muted2); font-weight:500}
.vc-vid { font-family:var(--mono); font-size:10px; color:var(--green); letter-spacing:.03em; padding:2px 7px; background:rgba(21,128,61,.10); border:1px solid rgba(21,128,61,.15); border-radius:4px; font-weight:600}
.vc-row3 { display:flex; flex-wrap:wrap; gap:0; font-family:var(--mono); font-size:11px; color:var(--muted2); line-height:1.3}
.vc-row3 span { white-space:nowrap}
.vc-row3 span::after { content:"\00b7"; margin:0 5px; color:var(--muted); opacity:.4}
.vc-row3 span:last-child::after { display:none}
.vc-row3 .vc-ph { color:var(--green)}
.vc-row3 .vc-pty { color:var(--blue); font-weight:700}
/* ── Tile grid ── */
.tile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px}
.tile { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; text-decoration:none; color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.25); transition:transform .15s,box-shadow .15s,border-color .15s}
.tile:active { transform:scale(0.97)}
.tile:hover { box-shadow:0 4px 20px rgba(0,0,0,.35); border-color:var(--border2)}
.tile img { width:80px; height:80px; object-fit:contain}
.tile h5 { margin:8px 0 0; font-size:14px; font-weight:600; color:var(--muted2)}
/* ── Picker bar ── */
.pdc-picker { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; width:100%; margin:14px 0 22px}
@media(max-width:600px){ .pdc-picker{grid-template-columns:1fr} }
.pdc-picker-lbl { font-family:var(--mono); font-size:11px; color:var(--muted2); text-transform:uppercase; letter-spacing:.14em; font-weight:700}
.pdc-picker-sel {
appearance:none; -webkit-appearance:none; cursor:pointer; width:100%; max-width:420px;
background-color:var(--bg3);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 12px center;
color:var(--text); border:1px solid var(--border2); border-radius:8px;
padding:9px 34px 9px 12px; font-family:var(--mono); font-size:13px; font-weight:500}
.pdc-picker-sel:focus { outline:none; border-color:#0e7490; box-shadow:0 0 0 2px rgba(14,116,144,.18)}
.pdc-picker-sel option { background:var(--bg2); color:var(--text)}
/* ── Geo bar ── */
.geo-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 22px}
.geo-bar select { appearance:none; -webkit-appearance:none; background:var(--bg3); color:var(--text); border:1px solid var(--border2); border-radius:8px; padding:9px 12px; font-family:var(--mono); font-size:13px; font-weight:500}
/* ── Booth Picker ── */
.bp-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; margin:0 0 12px; background:linear-gradient(135deg,#161920,#161920); border:1px solid rgba(21,128,61,0.10); border-radius:var(--radius); flex-wrap:wrap}
.bp-lbl { font-family:var(--mono); font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap}
.bp-sel { flex:1; min-width:140px; padding:8px 30px 8px 10px; font-family:var(--mono); font-size:12px; background:var(--bg3); color:var(--text); border:1px solid var(--border2); border-radius:var(--radius); outline:none; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 10px center}
.bp-sel:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(14,116,144,.15)}
/* ── Search box ── */
.search-box { background:var(--bg3); border:1px solid var(--border2); color:var(--text); font-family:var(--mono); font-size:12px; padding:7px 12px; border-radius:var(--radius); outline:none; width:260px}
.search-box:focus { border-color:var(--cyan)}
/* ── Filter bar ── */
.filter-header { font-family:var(--mono); font-size:15px; font-weight:700; color:var(--text); padding:14px 0 4px; letter-spacing:.02em}
.filter-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; margin:6px 0 10px; background:linear-gradient(135deg,#161920,#161920); border:1px solid rgba(21,128,61,0.10); border-radius:var(--radius); flex-wrap:wrap; box-shadow:0 2px 10px rgba(0,0,0,.3)}
.filter-bar label { font-family:var(--mono); font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap}
.filter-bar select, .filter-bar input[type=text] { flex:1; min-width:120px; padding:9px 12px; font-family:var(--mono); font-size:13px; background:var(--bg3); color:var(--text); border:1px solid var(--border2); border-radius:var(--radius); outline:none; transition:border-color .15s,box-shadow .15s; appearance:none; -webkit-appearance:none}
.filter-bar select { background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 10px center; padding-right:30px; cursor:pointer}
.filter-bar select:focus, .filter-bar input[type=text]:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(14,116,144,.15)}
.filter-bar .btn { background:var(--green); color:var(--on-accent); border:none; padding:9px 18px; font-family:var(--mono); font-size:11px; font-weight:700; border-radius:var(--radius); cursor:pointer; letter-spacing:.04em; text-transform:uppercase; transition:opacity .15s}
.filter-bar .btn:hover { opacity:.85}
.filter-results-count { font-family:var(--mono); font-size:12px; color:var(--muted2); padding:4px 0 8px; letter-spacing:.02em}
/* ── Letter picker ── */
.letter-picker { display:flex; flex-wrap:wrap; gap:4px; padding:8px 16px}
.letter-picker a { padding:4px 8px; background:var(--bg3); color:var(--muted2); border:1px solid var(--border); text-decoration:none; border-radius:4px; font-size:12px}
.letter-picker a.active { background:var(--red); color:var(--on-accent); border-color:var(--red); font-weight:700}
/* ── Surname Cloud ── */
.surname-cloud { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; padding:14px; margin:8px 0 12px; background:linear-gradient(135deg,#161920,#161920); border:1px solid rgba(21,128,61,0.10); border-radius:var(--radius); line-height:1.6; box-shadow:0 2px 10px rgba(0,0,0,.3)}
.sc-tag { text-decoration:none; color:var(--muted2); font-family:var(--sans); transition:color .15s; white-space:nowrap}
.sc-tag:hover { color:var(--accent)}
.sc-tag.sc-active { color:var(--accent); font-weight:700}
.sc-tag .sc-cnt { font-size:inherit; color:var(--muted); font-family:var(--mono); font-weight:400}
/* ── Pager ── */
.pager { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; padding:16px 0; margin:12px 0}
.pager-btn { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border-radius:var(--radius); font-size:13px; font-weight:600; color:var(--text); background:var(--bg2); border:1px solid var(--border); text-decoration:none; cursor:pointer; transition:background .15s,border-color .15s}
.pager-btn:hover { background:var(--bg3); border-color:var(--border2)}
.pager-btn.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.pager-btn.disabled { opacity:.35; cursor:default; pointer-events:none}
.pager-dots { display:inline-flex; align-items:center; padding:0 4px; color:var(--muted)}
/* ── Back link ── */
.back-link { display:inline-block; margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--cyan); text-decoration:none; padding:6px 0}
.back-link:hover { text-decoration:underline}
/* ── Text helpers ── */
.text-muted { color:var(--muted)}
.text-muted2 { color:var(--muted2)}
.text-green { color:var(--green)}
.text-red { color:var(--red)}
.text-amber { color:var(--amber)}
.text-blue { color:var(--blue)}
.text-cyan { color:var(--cyan)}
.text-purple { color:var(--purple)}
.mono { font-family:var(--mono)}
.mb24 { margin-bottom:24px}
/* ── Stat grid ── */
.stat-grid > div { color:var(--muted2)}
/* ── Login page ── */
/* Assembly layer theme */
body.layer-assembly { --layer-primary: #1d4ed8; --layer-secondary: #1d4ed8}
/* Voter Card */
.voter-card{background:var(--bg2,#161920);border:1px solid rgba(255,255,255,0.096);border-radius:10px;padding:12px;margin-bottom:8px}
.voter-card.vc-m{border-left:3px solid #1d4ed8}
.voter-card.vc-f{border-left:3px solid #be185d}
.vc-head{display:flex;justify-content:space-between;font-size:12px;color:#aeb6c2;margin-bottom:4px}
.vc-name{font-size:15px;font-weight:700;color:#f5f7fa}
.vc-hname{font-size:13px;color:#aeb6c2;margin-top:2px}
.vc-detail{font-size:12px;color:#60a5fa;margin-top:6px;display:flex;gap:12px}
.vc-tag{display:inline-block;font-size:11px;background:rgba(255,255,255,0.072);border-radius:4px;padding:2px 8px;margin-top:6px;color:#aeb6c2}
/* Pager */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px}
.pager button{background:var(--bg2,#161920);border:1px solid rgba(255,255,255,0.12);color:#f5f7fa;padding:6px 16px;border-radius:6px;cursor:pointer}
.pager button:disabled{opacity:.4;cursor:default}
.pager .pager-info{font-size:13px;color:#aeb6c2}
/* Booth Picker */
.booth-picker select{width:100%;padding:8px 12px;background:var(--bg2,#161920);border:1px solid rgba(255,255,255,0.12);border-radius:8px;color:#f5f7fa;font-size:14px}
/* ── Ported-page primitives (carried over from the DistrictWeb stylesheet so the
pages ported out of PDAProject/WarRoomWeb keep the house classes) ── */
.btn-sm { padding:4px 10px; font-size:10px}
.btn-danger { background:var(--red-dim); color:var(--red); border-color:var(--red)}
.form-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:24px}
.msg-err { font-family:var(--mono); font-size:12px; color:var(--red); background:var(--red-dim);
border:1px solid var(--red); border-radius:var(--radius); padding:12px 14px; margin-bottom:16px}
.count-badge { flex:0 0 auto; font-family:var(--mono); font-size:11px; color:var(--cyan);
background:var(--bg3); border:1px solid var(--border2); border-radius:var(--radius); padding:5px 10px}
/* A neutral note: something the reader should know that is not a fault. Before
this existed, explanatory boxes borrowed .msg-err and every visit to a board
opened on a red panel that reported no error. */
.msg-note { font-family:var(--mono); font-size:12px; line-height:1.55; color:var(--muted2); background:var(--bg2);
border:1px solid var(--border2); border-left:3px solid var(--border2); border-radius:var(--radius);
padding:12px 14px; margin-bottom:16px}
.empty-row { text-align:center; padding:28px 12px !important; color:var(--muted); font-style:italic}
/* ── Account login card (/Account/Login) ──
Phone-first: these apps render inside a MAUI WebView, so the card stays
narrow, tap targets stay >= 44px and the inputs stay at 16px so iOS does
not zoom the viewport on focus. Accent is set per app on .login-card. */
/* Centred both ways. This was align-items:flex-start, which pinned the card
to the top of a full-height flex container - horizontally centred, but
sitting under the topbar with the rest of the viewport empty below it.
The six projects that style .login-wrap inline in Login.razor already
centre it this way; these six were the odd ones out.
min-height uses svh where supported so the card does not jump when a
mobile browser's address bar collapses; vh is the fallback. */
.login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
min-height: 80svh;
padding: 24px 16px}
.login-card { --login-accent:var(--accent); --login-ink:var(--on-accent); width:100%; max-width:360px; background:var(--bg2); border:1px solid var(--border2); border-radius:14px; padding:24px 20px; box-shadow:0 12px 32px rgba(0,0,0,.45)}
.login-header { text-align:center; margin-bottom:20px}
.login-logo { font-size:40px; line-height:1; margin-bottom:8px}
.login-title { font-family:var(--mono); font-size:20px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:var(--login-accent, var(--accent)); margin:0 0 4px}
.login-sub { color:var(--muted); font-size:12px; margin:0}
.login-field { margin-bottom:14px}
.login-label { display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.login-input { width:100%; min-height:46px; padding:12px 14px; background:var(--bg); border:1px solid var(--border2); border-radius:10px; color:var(--text); font-size:16px; outline:none; transition:border-color .15s, box-shadow .15s}
.login-input:focus { border-color:var(--login-accent, var(--accent)); box-shadow:0 0 0 3px rgba(15,23,42,.07)}
/* No opacity: #8e96a6 at .7 over #0e1014 was about 3.7:1; at full strength it is
about 6:1. The fields carry visible labels, but a hint should still be legible. */
.login-input::placeholder { color:var(--muted); opacity:1}
.login-remember { margin-bottom:18px; color:var(--muted2); font-size:13px}
.login-remember label { display:flex; align-items:center; gap:10px; min-height:44px; margin:0; cursor:pointer}
.login-btn { width:100%; min-height:48px; padding:13px 20px; background:var(--login-accent, var(--accent)); border:none; border-radius:10px; color:var(--login-ink, var(--on-accent)); font-family:var(--mono); font-size:15px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:filter .15s, transform .1s}
.login-btn:hover { filter:brightness(1.08)}
.login-btn:active { transform:translateY(1px)}
/* ── Voter record (/voters/edit) ──────────────────────────────────────────
Ported from AssemblyWeb's redesigned voter record. The old layout stacked
.form-card/.form-row blocks with labels at 11px --muted2, which gave every
section the same weight — nothing told you where the identity ended and the
survey began. The hero + accented .vr-sec blocks restore that hierarchy.
Accents are taken from WarRoomWeb's own tokens, not AssemblyWeb's greens:
this app is red-accented, so --vr-accent falls back to --accent (#ef4444)
and the identity chrome (hero rule, avatar, EPIC) is red rather than green.
--green/--amber survive only where they carry status meaning, not identity. */
.vr-hero {
background: linear-gradient(150deg, var(--bg3) 0%, var(--bg2) 60%);
border: 1px solid var(--border2); border-left: 3px solid var(--accent);
border-radius: 12px; padding: 16px; margin-bottom: 14px}
.vr-hero-top { display: flex; gap: 13px; align-items: center}
.vr-avatar {
flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(150deg, var(--accent), #b91c1c);
color: #f5f7fa; font-family: var(--mono); font-size: 16px; font-weight: 800}
.vr-name { font-size: 18px; font-weight: 700; color: #f5f7fa; line-height: 1.25}
.vr-name-hi { font-size: 14px; color: var(--muted2); margin-top: 1px}
.vr-epic { font-size: 11px; color: var(--accent); margin-top: 4px; letter-spacing: .06em}
.vr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px}
.vr-chip {
font-family: var(--mono); font-size: 10.5px; color: var(--muted2);
background: rgba(255,255,255,0.048); border: 1px solid var(--border2);
border-radius: 999px; padding: 4px 10px; white-space: nowrap}
.vr-chip b { color: var(--text); font-weight: 700}
.vr-ok { color: var(--green); border-color: var(--green)}
.vr-warn { color: var(--amber); border-color: var(--amber)}
/* P/D/A/G take WarRoomWeb's own bucket colours (.pdag-* above), not
AssemblyWeb's — a voter's badge here must read the same hue as the same
bucket on /voters/pdag and the PDA-G overview tiles. */
.vr-pdag { font-weight: 700}
.vr-pdag.pd-p { color: var(--amber); border-color: var(--amber)}
.vr-pdag.pd-d { color: var(--blue); border-color: var(--blue)}
.vr-pdag.pd-a { color: var(--green); border-color: var(--green)}
.vr-pdag.pd-g { color: var(--purple); border-color: var(--purple)}
.vr-sec {
background: var(--bg2); border: 1px solid var(--border);
border-left: 3px solid var(--vr-accent, var(--accent));
border-radius: 10px; margin-bottom: 12px; overflow: hidden}
.vr-sec-hdr {
font-family: var(--mono); font-size: 10px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: var(--vr-accent, var(--accent));
padding: 11px 14px 9px; border-bottom: 1px solid var(--border)}
.vr-list {
padding: 2px 0;
/* Two pairs across. One field per full-width line left most of the row empty,
which pushed the later sections below the fold for no gain. */
display: grid;
grid-template-columns: 1fr 1fr}
/* Vertical rule between the columns, matching the horizontal one in weight. */
.vr-list > .vr-row:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.048)}
/* Both columns end at the last two children, not just the final one. */
.vr-list > .vr-row:nth-last-child(-n+2) { border-bottom: 0}
@media (max-width: 560px) {
.vr-list { grid-template-columns: 1fr}
.vr-list > .vr-row:nth-child(odd) { border-right: 0}
.vr-list > .vr-row:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.048)}
.vr-list > .vr-row:last-child { border-bottom: 0}
}
.vr-row {
display: flex; align-items: baseline; gap: 12px;
padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,0.048);
min-width: 0; /* let a long value shrink rather than widen its grid column */
}
.vr-row:last-child { border-bottom: 0}
.vr-k {
flex: 0 0 42%; font-family: var(--mono); font-size: 10px;
letter-spacing: .1em; text-transform: uppercase; color: var(--muted2)}
.vr-v { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--text); word-break: break-word}
.vr-empty { color: var(--muted); opacity: .55}
/* survey form */
.vr-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px}
.vr-f { display: flex; flex-direction: column; gap: 4px; min-width: 0}
.vr-f.vr-wide { grid-column: 1 / -1}
.vr-f label {
font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted2);
/* .form-row label is display:block with a bottom margin; the flex column
here owns the spacing, so neither is inherited. */
display: block; margin: 0}
/* background-COLOR, never the `background` shorthand: the global `select` rule
is appearance:none and draws its chevron as a background-image, which the
shorthand would silently erase and leave the control looking like a text box. */
.vr-f select, .vr-f input, .vr-f textarea {
width: 100%; background-color: var(--bg); color: var(--text);
border: 1px solid var(--border2); border-radius: 7px;
padding: 8px 10px; font-size: 13px; font-family: var(--sans)}
/* Same reason: keep room on the right for that chevron. */
.vr-f select { padding-right: 30px; background-position: right 10px center}
.vr-f select:focus, .vr-f input:focus, .vr-f textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-dim)}
/* sub-label under an input: the roll's age beside the date-of-birth box, and the
"leave blank to keep it" note under a masked Aadhaar. */
.vr-hint {
display: block; margin-top: 4px;
font-size: 11px; line-height: 1.35; color: var(--muted, #7c8494)}
.vr-f.vr-check { flex-direction: row; align-items: center; gap: 8px}
.vr-f.vr-check input { width: auto}
.vr-f.vr-check label { text-transform: none; font-size: 12px; letter-spacing: 0}
.vr-actions {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 0 14px 14px}
/* Scoped to the record rather than redefining the global .btn-primary, which
several other WarRoomWeb pages rely on being green. */
.vr-actions .btn-primary { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700}
.vr-actions .btn-primary[disabled] { opacity: .6; cursor: default}
@media (max-width: 560px) {
.vr-form { grid-template-columns: 1fr}
.vr-k { flex-basis: 46%}
}
/* ── Dropdown affordance ──
Every