/* =========================================================
   Election Results Component — electionresults.css
   Themes: default | dark | minimal | bold
   All colours driven by CSS custom properties so they can
   be overridden by the component params at runtime.
   ========================================================= */

/* ---- Base variables (fallback; overridden by inline style from view) ---- */
:root {
    /* Colours — overridden at runtime by component params */
    --er-primary:           #1a56db;
    --er-secondary:         #e02424;
    --er-accent:            #057a55;
    --er-winner-row-bg:     #065f46;
    --er-winner-row-text:   #ffffff;
    --er-leading-row-bg:    #92400e;
    --er-leading-row-text:  #ffffff;

    /* Surface colours — inherit from the site template where possible */
    --er-bg:            transparent;
    --er-surface:       rgba(0,0,0,.03);
    --er-border:        rgba(0,0,0,.12);
    --er-text:          inherit;
    --er-text-muted:    rgba(0,0,0,.55);
    --er-winner-bg:     #ecfdf5;
    --er-winner-border: #059669;

    /* Sizing */
    --er-radius:    .625rem;
    --er-radius-sm: .375rem;
    --er-shadow:    0 1px 4px rgba(0,0,0,.07);
    --er-shadow-md: 0 4px 16px rgba(0,0,0,.10);

    /* Typography — inherit everything from the site template */
    --er-font:          inherit;
    --er-font-size:     1rem;
    --er-line-height:   1.6;
}

/* =========================================================
   TEMPLATE INHERITANCE — reads from the host template
   All sizing is relative so it scales with the template's
   base font size. Backgrounds are transparent by default so
   the template's page colour shows through.
   ========================================================= */

.er-wrap {
    /* Ensure we pick up the template's link colour for the
       primary variable if no explicit colour has been set */
    --er-primary: var(--link-color, #1a56db);
}

/* Let headings inside the component inherit the template's
   heading font and weight rather than forcing our own */
.er-wrap h1, .er-wrap h2, .er-wrap h3,
.er-wrap h4, .er-wrap h5, .er-wrap h6 {
    font-family: inherit;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

/* Cards and panels — transparent bg so template colour shows */
.er-card, .er-office, .er-candidate,
.er-election-card, .er-wrap .well {
    background: var(--er-bg, transparent);
}

/* Ensure form elements within the component inherit template styles */
.er-wrap input,
.er-wrap select,
.er-wrap textarea {
    font-family: inherit;
    font-size: inherit;
}


/* ---- Reset & base ---- */
.er-wrap {
    font-family: var(--er-font, inherit);
    font-size:   var(--er-font-size, 1rem);
    line-height: var(--er-line-height, 1.6);
    color:       var(--er-text, inherit);
    background:  var(--er-bg, transparent);
}
.er-wrap *, .er-wrap *::before, .er-wrap *::after { box-sizing: border-box; }
.er-wrap a { color: var(--er-primary, inherit); text-decoration: none; }
.er-wrap a:hover { text-decoration: underline; }

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

/* ---- Page titles ---- */
.er-page-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    color: var(--er-text);
}
.er-back-link {
    display: inline-block;
    font-size: .875rem;
    color: var(--er-text-muted);
    margin-bottom: .5rem;
}
.er-back-link:hover { color: var(--er-primary); }

/* ---- Election cards (listing) ---- */
.er-election-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}
.er-election-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem 1.5rem;
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius);
    box-shadow: var(--er-shadow);
    transition: box-shadow .15s, transform .15s;
    text-decoration: none;
    color: var(--er-text);
}
.er-election-card:hover {
    box-shadow: var(--er-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}
.er-election-card__header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.er-election-card__title { font-size: 1.1rem; font-weight: 700; margin: 0; flex: 1; }
.er-election-card__date { font-size: .85rem; color: var(--er-text-muted); }
.er-election-card__desc { font-size: .9rem; color: var(--er-text-muted); margin: 0; }
.er-election-card__cta { font-size: .875rem; font-weight: 600; color: var(--er-primary); margin-top: auto; padding-top: .5rem; }

/* ---- Badges ---- */
.er-badge {
    display: inline-block;
    padding: .2em .65em;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}
.er-badge--active   { background: #d1fae5; color: #065f46; }
.er-badge--draft    { background: #f3f4f6; color: #374151; }
.er-badge--closed   { background: #fee2e2; color: #991b1b; }
.er-badge--winner   { background: var(--er-accent); color: #ffffff; }

/* ---- Buttons ---- */
.er-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.2rem;
    font-size: .9rem;
    font-weight: 600;
    border-radius: var(--er-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
}
.er-btn--primary {
    background: var(--er-primary);
    color: #ffffff;
    border-color: var(--er-primary);
}
.er-btn--primary:hover {
    filter: brightness(1.1);
    color: #ffffff;
    text-decoration: none;
}
.er-btn--secondary {
    background: transparent;
    color: var(--er-primary);
    border-color: var(--er-primary);
}
.er-btn--secondary:hover {
    background: var(--er-primary);
    color: #ffffff;
    text-decoration: none;
}
.er-btn--large { padding: .75rem 1.75rem; font-size: 1rem; }

/* ---- Results header ---- */
.er-results__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--er-border);
}
.er-results__title-row { display: flex; flex-direction: column; gap: .25rem; }
.er-results__title { font-size: 1.8rem; font-weight: 800; margin: 0; color: var(--er-text); }
.er-results__date { font-size: .9rem; color: var(--er-text-muted); }

/* ---- Office block ---- */
.er-office {
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--er-shadow);
}
.er-office__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}
.er-office__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--er-primary);
}
.er-office__total { font-size: .85rem; color: var(--er-text-muted); }
.er-office__desc { font-size: .9rem; color: var(--er-text-muted); margin: 0 0 1rem; }

/* ---- Candidate result row ---- */
.er-candidates { display: flex; flex-direction: column; gap: .85rem; }
.er-candidate {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    background: var(--er-bg);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    flex-wrap: wrap;
}
.er-candidate--winner {
    border-color: var(--er-winner-border);
    background: var(--er-winner-row-bg);
}
.er-candidate--winner .er-candidate__name,
.er-candidate--winner .er-candidate__votes,
.er-candidate--winner .er-candidate__pct {
    color: var(--er-winner-row-text);
}
.er-candidate--winner .er-candidate__party {
    color: rgba(255,255,255,.75);
}
.er-candidate__identity { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 180px; }
.er-candidate__photo {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.er-candidate__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.er-candidate__info { display: flex; flex-direction: column; gap: .2rem; }
.er-candidate__name-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.er-candidate__name { font-size: 1rem; font-weight: 700; color: var(--er-text); }
.er-candidate__party {
    font-size: .8rem;
    color: var(--er-text-muted);
    padding-left: .4rem;
}
.er-candidate__results { display: flex; flex-direction: column; gap: .35rem; flex: 2; min-width: 160px; }
.er-progress-bar {
    height: 10px;
    background: var(--er-border);
    border-radius: 999px;
    overflow: hidden;
}
.er-progress-bar__fill {
    height: 100%;
    border-radius: 999px;
    transition: width .6s ease;
    min-width: 2px;
}
.er-candidate__vote-info { display: flex; align-items: baseline; gap: .75rem; }
.er-candidate__votes { font-size: 1rem; font-weight: 700; color: var(--er-text); }
.er-candidate__pct {
    font-size: .9rem;
    font-weight: 600;
    color: var(--er-text-muted);
}

/* ---- Recent submissions table ---- */
.er-recent-submissions { margin-top: 2.5rem; }
.er-recent-submissions__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--er-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .75rem;
}
.er-submissions-table-wrap { overflow-x: auto; }
.er-submissions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.er-submissions-table th,
.er-submissions-table td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--er-border);
    text-align: left;
}
.er-submissions-table th { font-weight: 600; color: var(--er-text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.er-submissions-table tbody tr:hover { background: var(--er-surface); }

/* ---- Vote entry form ---- */
.er-vote-entry__header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--er-border); }
.er-vote-entry__subtitle { color: var(--er-text-muted); margin: .25rem 0 0; }
.er-vote-form__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius);
}
@media (max-width: 600px) { .er-vote-form__meta { grid-template-columns: 1fr; } }
.er-form-group { display: flex; flex-direction: column; gap: .35rem; }
.er-form-label { font-size: .875rem; font-weight: 600; color: var(--er-text); }
.er-form-hint { font-size: .8rem; font-weight: 400; color: var(--er-text-muted); margin-left: .4rem; }
.er-form-control {
    padding: .5rem .75rem;
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    font-size: .9rem;
    background: var(--er-bg);
    color: var(--er-text);
    transition: border-color .15s;
}
.er-form-control:focus { border-color: var(--er-primary); outline: none; box-shadow: 0 0 0 3px rgba(26,86,219,.15); }
textarea.er-form-control { resize: vertical; }

.er-vote-office {
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-left: 4px solid var(--er-primary);
    border-radius: var(--er-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.er-vote-office__title { font-size: 1.2rem; font-weight: 700; color: var(--er-primary); margin: 0 0 .5rem; }
.er-vote-office__desc { font-size: .9rem; color: var(--er-text-muted); margin: 0 0 1rem; }

.er-vote-candidates { display: flex; flex-direction: column; gap: .75rem; }
.er-vote-candidate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--er-bg);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    flex-wrap: wrap;
}
.er-vote-candidate__identity { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 180px; }
.er-vote-candidate__info { display: flex; flex-direction: column; gap: .15rem; }
.er-vote-candidate__name { font-size: .95rem; font-weight: 700; }
.er-vote-candidate__party { font-size: .8rem; color: var(--er-text-muted); padding-left: .4rem; }
.er-vote-candidate__input-wrap { display: flex; align-items: center; gap: .5rem; }
.er-vote-input {
    width: 90px;
    padding: .45rem .6rem;
    border: 2px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: right;
    color: var(--er-text);
    background: var(--er-bg);
    transition: border-color .15s;
}
.er-vote-input:focus { border-color: var(--er-primary); outline: none; }
.er-vote-input__label { font-size: .8rem; color: var(--er-text-muted); }

.er-office-total {
    margin-top: .75rem;
    font-size: .875rem;
    color: var(--er-text-muted);
    text-align: right;
}
.er-office-total__value { color: var(--er-text); font-size: 1rem; }

.er-vote-form__actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--er-border);
    flex-wrap: wrap;
}

/* ---- Empty states ---- */
.er-empty { padding: 2.5rem; text-align: center; color: var(--er-text-muted); background: var(--er-surface); border-radius: var(--er-radius); border: 1px dashed var(--er-border); }
.er-empty-office { font-size: .9rem; color: var(--er-text-muted); font-style: italic; }

/* =========================================================
   THEME: dark
   ========================================================= */
.er-theme-dark {
    --er-bg:            #1f2937;
    --er-surface:       #111827;
    --er-border:        #374151;
    --er-text:          #f9fafb;
    --er-text-muted:    #9ca3af;
    --er-winner-bg:     #064e3b;
    --er-winner-border: #10b981;
    --er-shadow:        0 1px 4px rgba(0,0,0,.4);
    --er-shadow-md:     0 4px 16px rgba(0,0,0,.5);
    color: #f9fafb;
    background: #111827;
}

/* =========================================================
   THEME: minimal
   ========================================================= */
.er-theme-minimal {
    --er-bg:      #ffffff;
    --er-surface: #ffffff;
    --er-border:  #e5e7eb;
    --er-shadow:  none;
    --er-shadow-md: none;
    --er-radius:  4px;
    --er-radius-sm: 2px;
}
.er-theme-minimal .er-office { border: none; border-top: 3px solid var(--er-primary); border-radius: 0; padding: 1.25rem 0; }
.er-theme-minimal .er-candidate { border: none; border-bottom: 1px solid var(--er-border); border-radius: 0; }
.er-theme-minimal .er-election-card { box-shadow: none; border: 1px solid var(--er-border); }

/* =========================================================
   THEME: bold
   ========================================================= */
.er-theme-bold {
    --er-bg:      #f0f4ff;
    --er-surface: #ffffff;
    --er-border:  #c7d2fe;
    --er-radius:  16px;
    --er-radius-sm: 10px;
    --er-shadow:  0 2px 8px rgba(99,102,241,.12);
    --er-shadow-md: 0 8px 24px rgba(99,102,241,.18);
}
.er-theme-bold .er-office { border-left-width: 6px; }
.er-theme-bold .er-candidate--winner { border-width: 2px; }
.er-theme-bold .er-page-title { font-size: 2rem; }
.er-theme-bold .er-results__title { font-size: 2.25rem; }
.er-theme-bold .er-progress-bar { height: 14px; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .er-results__header { flex-direction: column; }
    .er-candidate { flex-direction: column; align-items: flex-start; }
    .er-candidate__results { width: 100%; }
    .er-vote-candidate { flex-direction: column; align-items: flex-start; }
    .er-vote-form__actions { flex-direction: column; }
    .er-election-cards { grid-template-columns: 1fr; }
}

/* =========================================================
   PRECINCT SELECTOR
   ========================================================= */
.er-precinct-selector {
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.er-precinct-selector__header {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.er-precinct-selector__label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--er-text);
}
.er-precinct-selector__hint {
    font-size: .85rem;
    color: var(--er-text-muted);
}
.er-required-star {
    color: var(--er-secondary);
    margin-left: .15rem;
}

/* Tile grid */
.er-precinct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .65rem;
}

/* Each precinct is a radio wrapped in a label */
.er-precinct-tile {
    cursor: pointer;
    display: block;
}
.er-precinct-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.er-precinct-tile__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .75rem .5rem;
    border: 2px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    background: var(--er-bg);
    text-align: center;
    transition: border-color .15s, background .15s, transform .1s;
    min-height: 64px;
}
.er-precinct-tile:hover .er-precinct-tile__inner {
    border-color: var(--er-primary);
    background: var(--er-surface);
}
.er-precinct-radio:checked + .er-precinct-tile__inner {
    border-color: var(--er-primary);
    background: var(--er-primary);
}
.er-precinct-tile__name {
    font-size: .875rem;
    font-weight: 700;
    color: var(--er-text);
    line-height: 1.2;
}
.er-precinct-radio:checked + .er-precinct-tile__inner .er-precinct-tile__name {
    color: #ffffff;
}
.er-precinct-tile__desc {
    font-size: .75rem;
    color: var(--er-text-muted);
    line-height: 1.3;
}
.er-precinct-radio:checked + .er-precinct-tile__inner .er-precinct-tile__desc {
    color: rgba(255,255,255,.8);
}

/* Dark theme adjustments */
.er-theme-dark .er-precinct-radio:checked + .er-precinct-tile__inner {
    border-color: var(--er-primary);
    background: var(--er-primary);
}

/* Bold theme */
.er-theme-bold .er-precinct-grid {
    gap: .85rem;
}
.er-theme-bold .er-precinct-tile__inner {
    border-radius: 12px;
    min-height: 72px;
}

/* Responsive */
@media (max-width: 480px) {
    .er-precinct-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

/* =========================================================
   LEADING / WINNER / CERTIFIED — v1.2.0
   ========================================================= */

/* "Currently leading" candidate row highlight */
.er-candidate--leading {
    border-color: var(--er-leading-row-bg);
    background: var(--er-leading-row-bg);
}
.er-candidate--leading .er-candidate__name,
.er-candidate--leading .er-candidate__votes,
.er-candidate--leading .er-candidate__pct {
    color: var(--er-leading-row-text);
}
.er-candidate--leading .er-candidate__party {
    color: rgba(255,255,255,.75);
}

/* Meta row under the election title */
.er-results__meta-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

/* "Currently leading" badge — amber */
.er-badge--leading {
    background: #fef3c7;
    color: #92400e;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* Pulsing dot inside the "Currently leading" badge */
.er-pulse-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d97706;
    animation: er-pulse 1.4s ease-in-out infinite;
}

@keyframes er-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.75); }
}

/* "Certified on …" badge — green */
.er-certified-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #d1fae5;
    color: #065f46;
    font-size: .8rem;
    font-weight: 500;
    padding: .25em .75em;
    border-radius: 999px;
}

/* "Counting in progress" badge — amber, pulsing border */
.er-counting-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fffbeb;
    color: #92400e;
    font-size: .8rem;
    font-weight: 500;
    padding: .25em .75em;
    border-radius: 999px;
    border: 1px solid #fde68a;
}

/* Live dot inside "Counting in progress" */
.er-counting-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d97706;
    animation: er-pulse 1.2s ease-in-out infinite;
}

/* Dark theme overrides */
/* dark theme: leading/winner rows use the same CSS vars, already configurable */
.er-theme-dark .er-badge--leading {
    background: #422006;
    color: #fcd34d;
}
.er-theme-dark .er-certified-badge {
    background: #064e3b;
    color: #6ee7b7;
}
.er-theme-dark .er-counting-badge {
    background: #1c1600;
    color: #fcd34d;
    border-color: #78350f;
}

/* Admin election list — certified_date column hint */
.er-certified-hint {
    font-size: .75rem;
    color: #065f46;
    font-weight: 500;
}

/* =========================================================
   PRECINCT BREAKDOWN TABLE — v1.4.0
   ========================================================= */

/* Office header now has a right-side info cluster */
.er-office__header {
    flex-wrap: wrap;
    gap: .5rem .75rem;
}
.er-office__header-right {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.er-office__precinct-count {
    font-size: .8rem;
    color: var(--er-text-muted);
    padding: .15em .55em;
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: 999px;
}

/* Each candidate card now has a summary row + breakdown table */
.er-candidate__summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.er-candidate__summary .er-candidate__identity { flex: 1; min-width: 160px; }
.er-candidate__summary .er-candidate__results  { flex: 2; min-width: 160px; }

/* Precinct breakdown table */
.er-precinct-breakdown {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--er-border);
    overflow-x: auto;
}

.er-precinct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    min-width: 320px;
}

.er-precinct-table__head {
    padding: .3em .6em;
    text-align: center;
    font-weight: 600;
    font-size: .75rem;
    color: var(--er-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    white-space: nowrap;
}

.er-precinct-table__head.er-precinct-table__total {
    color: var(--er-text);
    background: var(--er-border);
    font-size: .75rem;
}

.er-precinct-table__cell {
    padding: .35em .6em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--er-border);
    background: var(--er-bg);
    font-size: .8rem;
}

.er-precinct-table__cell--empty {
    color: var(--er-text-muted);
    font-style: italic;
}

.er-precinct-table__total-cell {
    font-weight: 700;
    background: var(--er-surface);
    border-left: 2px solid var(--er-border);
}

/* On the winner row, tint the breakdown table to match */
.er-candidate--winner .er-precinct-breakdown {
    border-top-color: rgba(255,255,255,.25);
}
.er-candidate--winner .er-precinct-table__head,
.er-candidate--winner .er-precinct-table__cell {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,.9);
}
.er-candidate--winner .er-precinct-table__head.er-precinct-table__total,
.er-candidate--winner .er-precinct-table__total-cell {
    background: rgba(255,255,255,.2);
    color: #fff;
}
.er-candidate--winner .er-precinct-table__cell--empty {
    color: rgba(255,255,255,.45);
}

/* On the leading row, same treatment */
.er-candidate--leading .er-precinct-breakdown {
    border-top-color: rgba(255,255,255,.25);
}
.er-candidate--leading .er-precinct-table__head,
.er-candidate--leading .er-precinct-table__cell {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,.9);
}
.er-candidate--leading .er-precinct-table__head.er-precinct-table__total,
.er-candidate--leading .er-precinct-table__total-cell {
    background: rgba(255,255,255,.2);
    color: #fff;
}
.er-candidate--leading .er-precinct-table__cell--empty {
    color: rgba(255,255,255,.45);
}

/* Dark theme */
.er-theme-dark .er-precinct-table__head,
.er-theme-dark .er-precinct-table__cell {
    background: var(--er-surface);
    border-color: var(--er-border);
}

/* Responsive — allow horizontal scroll on small screens */
@media (max-width: 640px) {
    .er-precinct-breakdown { margin-top: .5rem; }
    .er-candidate__summary { gap: .65rem; }
}

/* =========================================================
   ADMIN COLOR PICKER PREVIEW SWATCHES — v1.5.0
   Applied to front-end CSS as well for any overrides
   ========================================================= */
.er-color-field .er-color-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--er-surface);
    border-radius: var(--er-radius-sm);
    border: 1px solid var(--er-border);
    margin-top: 6px;
}
.er-color-field .er-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 2px solid rgba(0,0,0,.15);
    flex-shrink: 0;
    transition: background .2s;
}
.er-color-field .er-color-preview-label {
    font-weight: 700;
    font-size: .85rem;
    font-family: monospace;
    transition: color .2s;
}

/* =========================================================
   RESULTS LEGEND / OFFICE ANCHOR NAV — v1.8.0
   ========================================================= */

.er-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
    padding: .6rem .9rem;
    margin-bottom: 1.1rem;
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-sm);
    font-size: .85rem;
}

.er-legend__label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--er-text-muted);
    margin-right: .3rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.er-legend__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25em .7em;
    border-radius: 999px;
    border: 1px solid var(--er-border);
    background: var(--er-bg);
    color: var(--er-primary) !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .14s, border-color .14s, color .14s;
    white-space: nowrap;
    font-size: .85rem;
}

.er-legend__link:hover,
.er-legend__link:focus {
    background: var(--er-primary);
    border-color: var(--er-primary);
    color: #ffffff !important;
    text-decoration: none !important;
}

/* The arrow icon inside each link */
.er-legend__arrow {
    font-size: .7em;
    opacity: .6;
}

/* Office section gets scroll-margin so sticky headers don't cover the target */
.er-office[id] {
    scroll-margin-top: 4rem;
}