/* =============================================================
   ballot-receipt.css — Paper Ballot Receipt Component
   Human-readable ballot receipt that satisfies both machine-scanning
   and hand-recount requirements (GA §21-2-379.22 compliant).

   On-screen: glassmorphic v2 styling
   Print: high-contrast black/white for paper output
   ============================================================= */

/* ── Screen Styles ───────────────────────────────────────── */
.ballot-receipt {
    max-width: 640px;
    margin: 0 auto;
    background: var(--bg-card, rgba(255, 255, 255, 0.07));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
}

/* Receipt header */
.ballot-receipt-header {
    text-align: center;
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

.ballot-receipt-header .receipt-star {
    color: var(--gold, #C5A55A);
    font-size: 1.1rem;
}

.ballot-receipt-header h2 {
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-primary, #FFFFFF);
    margin: 0.25rem 0;
}

.ballot-receipt-header .receipt-system {
    color: var(--text-muted, #9CA3AF);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

/* Election info block */
.ballot-election-info {
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    font-size: 0.82rem;
}

.ballot-election-info .info-label {
    color: var(--text-muted, #9CA3AF);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.ballot-election-info .info-value {
    color: var(--text-body, #E8E8EC);
}

/* Selections area — human-readable votes */
.ballot-selections {
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

.ballot-contest {
    margin-bottom: 1.25rem;
}

.ballot-contest:last-child {
    margin-bottom: 0;
}

.ballot-contest-title {
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold, #C5A55A);
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ballot-candidate {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary, #B8B8C0);
}

.ballot-candidate.selected {
    background: rgba(16, 185, 129, 0.08);
    color: var(--text-primary, #FFFFFF);
}

.ballot-mark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--glass-border, rgba(255, 255, 255, 0.15));
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: transparent;
}

.ballot-candidate.selected .ballot-mark {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

.ballot-candidate-name {
    flex: 1;
}

.ballot-candidate-party {
    color: var(--text-muted, #9CA3AF);
    font-size: 0.75rem;
    white-space: nowrap;
}

.ballot-selected-indicator {
    color: #10b981;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--font-heading, 'Poppins', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Verification section */
.ballot-verification {
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

.ballot-verification h3 {
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted, #9CA3AF);
    margin-bottom: 0.75rem;
}

.ballot-crypto-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.75rem;
    font-size: 0.78rem;
    margin-bottom: 1rem;
}

.ballot-crypto-label {
    color: var(--text-muted, #9CA3AF);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    white-space: nowrap;
}

.ballot-crypto-value {
    color: var(--text-body, #E8E8EC);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.72rem;
    word-break: break-all;
}

.ballot-qr-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.ballot-qr-code {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ballot-qr-code canvas,
.ballot-qr-code img {
    width: 72px;
    height: 72px;
}

.ballot-qr-text {
    font-size: 0.75rem;
    color: var(--text-muted, #9CA3AF);
    line-height: 1.5;
}

.ballot-qr-text a {
    color: var(--steel-blue, #4A7BC7);
}

/* Voter key section */
.ballot-voter-key {
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    background: rgba(245, 158, 11, 0.04);
}

.ballot-voter-key h3 {
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #f59e0b;
    margin-bottom: 0.4rem;
}

.ballot-voter-key .key-value {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #FFFFFF);
    letter-spacing: 0.15em;
}

.ballot-voter-key .key-note {
    font-size: 0.7rem;
    color: var(--text-muted, #9CA3AF);
    margin-top: 0.3rem;
}

/* Footer / compliance note */
.ballot-receipt-footer {
    padding: 1rem 2rem;
    text-align: center;
}

.ballot-receipt-footer p {
    font-size: 0.7rem;
    color: var(--text-muted, #9CA3AF);
    line-height: 1.5;
}

.ballot-receipt-footer .compliance-ref {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.65rem;
    color: var(--text-secondary, #B8B8C0);
}

/* Print button */
.ballot-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-card, rgba(255, 255, 255, 0.07));
    color: var(--text-body, #E8E8EC);
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 200ms, background 200ms;
}

.ballot-print-btn:hover {
    border-color: rgba(197, 165, 90, 0.3);
    background: rgba(255, 255, 255, 0.12);
}

/* ── Print Styles ────────────────────────────────────────── */
@media print {
    /* Reset to clean black-on-white */
    body {
        background: #fff !important;
        color: #000 !important;
    }

    body::before { display: none !important; }

    /* Hide non-receipt elements */
    .demo-header,
    .demo-footer,
    .demo-back,
    .ballot-print-btn,
    nav,
    footer { display: none !important; }

    .ballot-receipt {
        max-width: 100%;
        background: #fff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 2px solid #000 !important;
        border-radius: 0 !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    .ballot-receipt * {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }

    .ballot-receipt-header {
        border-bottom: 2px solid #000 !important;
        padding: 1rem;
    }

    .ballot-receipt-header h2 {
        font-size: 14pt;
        color: #000 !important;
    }

    .ballot-receipt-header .receipt-star {
        color: #000 !important;
    }

    .ballot-election-info {
        border-bottom: 1px solid #000 !important;
        padding: 0.75rem 1rem;
    }

    .ballot-election-info .info-label,
    .ballot-election-info .info-value {
        color: #000 !important;
    }

    .ballot-selections {
        border-bottom: 1px solid #000 !important;
        padding: 0.75rem 1rem;
    }

    .ballot-contest-title {
        color: #000 !important;
        border-bottom: 1px solid #666 !important;
        font-size: 10pt;
    }

    .ballot-candidate {
        color: #000 !important;
        font-size: 11pt;
    }

    .ballot-candidate.selected {
        background: none !important;
        font-weight: 700;
    }

    .ballot-mark {
        border: 2px solid #000 !important;
        width: 16px;
        height: 16px;
    }

    .ballot-candidate.selected .ballot-mark {
        background: #000 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    .ballot-candidate-party {
        color: #333 !important;
    }

    .ballot-selected-indicator {
        color: #000 !important;
        font-weight: 700;
    }

    .ballot-verification {
        border-bottom: 1px solid #000 !important;
        padding: 0.75rem 1rem;
    }

    .ballot-verification h3 {
        color: #000 !important;
    }

    .ballot-crypto-label,
    .ballot-crypto-value {
        color: #000 !important;
    }

    .ballot-qr-code {
        border: 1px solid #000;
    }

    .ballot-qr-text { color: #000 !important; }
    .ballot-qr-text a { color: #000 !important; text-decoration: underline; }

    .ballot-voter-key {
        background: #f5f5f5 !important;
        border-bottom: 1px solid #000 !important;
        padding: 0.5rem 1rem;
    }

    .ballot-voter-key h3 { color: #000 !important; }
    .ballot-voter-key .key-value { color: #000 !important; }
    .ballot-voter-key .key-note { color: #333 !important; }

    .ballot-receipt-footer {
        padding: 0.5rem 1rem;
    }

    .ballot-receipt-footer p,
    .ballot-receipt-footer .compliance-ref {
        color: #000 !important;
    }
}