/**

 * Edge Vote Tracker - Frontend Styles

 */



/* Container */

.evt-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 20px;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

}



/* Filters */

.evt-filters {

    display: flex;

    flex-wrap: nowrap;

    align-items: center;

    gap: 8px;

    margin-bottom: 25px;

    padding: 12px 15px;

    background: #f8f9fa;

    border-radius: 8px;

}



.evt-filters input,

.evt-filters select {

    padding: 8px 10px;

    border: 1px solid #ddd;

    border-radius: 5px;

    font-size: 13px;

    min-width: 0;

    flex-shrink: 1;

    height: 38px;

    box-sizing: border-box;

}



.evt-filters input#evt-filter-name {

    width: 140px;

    flex-shrink: 0;

}



.evt-filters select {

    width: auto;

    max-width: 130px;

}



.evt-filters input:focus,

.evt-filters select:focus {

    outline: none;

    border-color: #0073aa;

    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);

}



/* Responsive: allow wrap on smaller screens */

@media (max-width: 1200px) {

    .evt-filters {

        flex-wrap: wrap;

    }

    

    .evt-filters input,

    .evt-filters select {

        min-width: 120px;

    }

}



/* Summary Stats */

.evt-summary {

    display: flex;

    gap: 30px;

    margin-bottom: 30px;

    padding: 20px;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    border-radius: 10px;

    color: white;

}



/* Year Filter */

.evt-year-filter {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 30px;

    padding: 15px 20px;

    background: #e8f4fd;

    border: 1px solid #b8daff;

    border-radius: 8px;

}



.evt-year-filter label {

    font-weight: 600;

    color: #004085;

    margin: 0;

}



.evt-year-filter select {

    padding: 8px 15px;

    border: 1px solid #b8daff;

    border-radius: 5px;

    font-size: 14px;

    background: white;

    min-width: 120px;

}



.evt-year-filter select:focus {

    outline: none;

    border-color: #0073aa;

    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);

}



.evt-year-filter select:disabled {

    opacity: 0.7;

    cursor: not-allowed;

}



.evt-year-loading {

    color: #004085;

    font-style: italic;

    font-size: 13px;

}



.evt-stat {

    text-align: center;

}



.evt-stat-number {

    display: block;

    font-size: 2.5em;

    font-weight: bold;

    line-height: 1.2;

}



.evt-stat-label {

    font-size: 0.9em;

    opacity: 0.9;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* Grid Layout */

.evt-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 25px;

}



/* Cards */

.evt-card {

    background: white;

    border-radius: 12px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    overflow: hidden;

    transition: transform 0.2s, box-shadow 0.2s;

}



.evt-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

}



/* Card Photo */

.evt-card-photo {

    position: relative;

    text-align: center;

    padding: 25px 20px 15px;

    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);

}



.evt-card-photo img {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    object-fit: cover;

    border: 4px solid white;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

}



.evt-party-badge {

    position: absolute;

    bottom: 10px;

    left: 50%;

    transform: translateX(30px);

    width: 30px;

    height: 30px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    font-size: 14px;

    color: white;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}



.evt-party-republican {

    background: #e53935;

}



.evt-party-democrat {

    background: #1e88e5;

}



.evt-party-independent {

    background: #757575;

}



/* Card Info */

.evt-card-info {

    padding: 15px 20px;

    text-align: center;

    border-bottom: 1px solid #eee;

}



.evt-card-name {

    margin: 0 0 5px 0;

    font-size: 1.1em;

    font-weight: 600;

    color: #333;

}



.evt-card-meta {

    margin: 0;

    font-size: 0.85em;

    color: #666;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



/* Crossover Section */

.evt-card-crossover {

    padding: 20px;

    text-align: center;

}



.evt-crossover-label {

    display: block;

    font-size: 0.85em;

    color: #666;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    font-weight: 600;

    margin: 0;

}



.evt-crossover-percent {

    display: block;

    font-size: 3em;

    font-weight: bold;

    line-height: 1;

    margin: 10px 0;

}



.evt-crossover-detail {

    display: block;

    font-size: 0.85em;

    color: #999;

}



/* Party-aware Color System - uses CSS custom properties for configurability */

/* Republican color (red) - for Rs voting with their party */

.evt-color-republican .evt-crossover-percent {

    color: var(--color-republican, #c62828);

}



.evt-color-republican {

    background: linear-gradient(135deg, rgba(198, 40, 40, 0.05) 0%, rgba(198, 40, 40, 0.1) 100%);

}



/* Warning = concerning crossover (purple) */

.evt-color-warning .evt-crossover-percent {

    color: var(--color-warning, #7b1fa2);

}



.evt-color-warning {

    background: linear-gradient(135deg, rgba(123, 31, 162, 0.05) 0%, rgba(123, 31, 162, 0.1) 100%);

}



/* Democrat color (blue) - for Ds voting with their party, or Rs voting with Ds */

.evt-color-democrat .evt-crossover-percent {

    color: var(--color-democrat, #1565c0);

}



.evt-color-democrat {

    background: linear-gradient(135deg, rgba(21, 101, 192, 0.05) 0%, rgba(21, 101, 192, 0.1) 100%);

}



/* Legacy classes - keep for backwards compatibility */

.evt-crossover-high .evt-crossover-percent {

    color: #c62828;

}



.evt-crossover-medium .evt-crossover-percent {

    color: #7b1fa2;

}



.evt-crossover-low .evt-crossover-percent {

    color: #1565c0;

}



.evt-crossover-none .evt-crossover-percent {

    color: #1565c0;

}



/* View Bills Button */

.evt-view-bills {

    display: block;

    width: 100%;

    padding: 12px;

    background: #f8f9fa;

    border: none;

    border-top: 1px solid #eee;

    color: #0073aa;

    font-size: 0.9em;

    font-weight: 500;

    cursor: pointer;

    transition: background 0.2s;

}



.evt-view-bills:hover {

    background: #e9ecef;

}



/* No Results */

.evt-no-results {

    text-align: center;

    padding: 50px 20px;

    color: #666;

}



/* Modal */

.evt-modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.6);

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

}



.evt-modal-content {

    background: white;

    border-radius: 12px;

    max-width: 700px;

    width: 90%;

    max-height: 80vh;

    overflow-y: auto;

    position: relative;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

}



.evt-modal-close {

    position: absolute;

    top: 15px;

    right: 20px;

    font-size: 28px;

    color: #999;

    cursor: pointer;

    line-height: 1;

}



.evt-modal-close:hover {

    color: #333;

}



.evt-modal-body {

    padding: 30px;

}



.evt-modal-body h2 {

    margin: 0 0 5px 0;

    font-size: 1.5em;

}



.evt-modal-meta {

    color: #666;

    margin: 0 0 25px 0;

    font-size: 0.95em;

}



.evt-modal-stats {

    display: flex;

    gap: 20px;

    margin-bottom: 30px;

    padding: 20px;

    background: #f8f9fa;

    border-radius: 8px;

}



.evt-modal-stat {

    flex: 1;

    text-align: center;

}



.evt-modal-stat-number {

    display: block;

    font-size: 1.8em;

    font-weight: bold;

    color: #333;

}



.evt-modal-stat-label {

    font-size: 0.8em;

    color: #666;

    text-transform: uppercase;

}



.evt-modal-body h3 {

    margin: 0 0 15px 0;

    font-size: 1.1em;

    color: #333;

}



/* Bills Table */

.evt-bills-table {

    width: 100%;

    border-collapse: collapse;

}



.evt-bills-table th,

.evt-bills-table td {

    padding: 12px;

    text-align: left;

    border-bottom: 1px solid #eee;

}



.evt-bills-table th {

    background: #f8f9fa;

    font-weight: 600;

    font-size: 0.85em;

    text-transform: uppercase;

    color: #666;

}



.evt-bills-table td small {

    color: #888;

}



.evt-vote {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 4px;

    font-size: 0.85em;

    font-weight: 600;

}



.evt-vote-yea {

    background: #e8f5e9;

    color: #2e7d32;

}



.evt-vote-nay {

    background: #ffebee;

    color: #c62828;

}



/* Responsive */

@media (max-width: 768px) {

    .evt-filters {

        flex-direction: column;

    }

    

    .evt-filters input,

    .evt-filters select {

        width: 100%;

    }

    

    .evt-summary {

        flex-direction: column;

        gap: 15px;

    }

    

    .evt-grid {

        grid-template-columns: 1fr;

    }

    

    .evt-modal-stats {

        flex-direction: column;

    }

}



/* ========================================

   LIST/TABLE LAYOUT

   ======================================== */



.evt-list {

    overflow-x: auto;

}



.evt-table {

    width: 100%;

    border-collapse: collapse;

    background: white;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.evt-table thead {

    background: #f8f9fa;

}



.evt-table th {

    padding: 15px 12px;

    text-align: left;

    font-weight: 600;

    font-size: 0.85em;

    text-transform: uppercase;

    color: #666;

    border-bottom: 2px solid #e9ecef;

}



.evt-table td {

    padding: 12px;

    border-bottom: 1px solid #eee;

    vertical-align: middle;

}



.evt-table tbody tr:hover {

    background: #f8f9fa;

}



.evt-table-photo {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

}



.evt-col-photo {

    width: 60px;

}



.evt-col-party {

    width: 60px;

    text-align: center;

}



.evt-col-crossover {

    width: 100px;

}



.evt-col-votes {

    width: 80px;

    color: #666;

    font-size: 0.9em;

}



.evt-col-action {

    width: 80px;

    text-align: right;

}



.evt-crossover-badge {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 20px;

    font-weight: 600;

    font-size: 0.9em;

}



.evt-crossover-badge.evt-crossover-high {

    background: #ffebee;

    color: #c62828;

}



.evt-crossover-badge.evt-crossover-medium {

    background: #fff3e0;

    color: #e65100;

}



.evt-crossover-badge.evt-crossover-low {

    background: #fffde7;

    color: #f9a825;

}



.evt-crossover-badge.evt-crossover-none {

    background: #e8f5e9;

    color: #2e7d32;

}



.evt-view-bills-btn {

    padding: 6px 12px;

    background: #f0f0f0;

    border: 1px solid #ddd;

    border-radius: 4px;

    color: #0073aa;

    font-size: 0.85em;

    cursor: pointer;

    transition: background 0.2s;

}



.evt-view-bills-btn:hover {

    background: #e0e0e0;

}



/* Compact Grid */

.evt-grid-compact {

    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

    gap: 15px;

}



.evt-grid-compact .evt-card {

    padding: 0;

}



.evt-grid-compact .evt-card-photo img {

    width: 70px;

    height: 70px;

}



.evt-grid-compact .evt-card-name {

    font-size: 0.95em;

}



.evt-grid-compact .evt-crossover-percent {

    font-size: 2em;

}



/* Header Section */

.evt-header {

    text-align: center;

    margin-bottom: 30px;

}



.evt-page-title {

    margin: 0 0 10px 0;

    font-size: 2em;

    color: #333;

}



.evt-page-description {

    margin: 0;

    color: #666;

    font-size: 1.1em;

    max-width: 800px;

    margin: 0 auto;

}



/* Table Responsive */

@media (max-width: 768px) {

    .evt-table th,

    .evt-table td {

        padding: 8px 6px;

        font-size: 0.85em;

    }

    

    .evt-col-chamber,

    .evt-col-votes {

        display: none;

    }

}



/* ===== LIST/TABLE LAYOUT ===== */

.evt-layout-list .evt-list {

    overflow-x: auto;

}



.evt-table {

    width: 100%;

    border-collapse: collapse;

    background: white;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.evt-table thead {

    background: #f8f9fa;

}



.evt-table th {

    padding: 15px 12px;

    text-align: left;

    font-size: 0.8em;

    font-weight: 600;

    text-transform: uppercase;

    color: #666;

    border-bottom: 2px solid #eee;

}



.evt-table td {

    padding: 12px;

    border-bottom: 1px solid #eee;

    vertical-align: middle;

}



.evt-table tbody tr:hover {

    background: #f8f9fa;

}



.evt-table-photo {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

}



.evt-col-photo {

    width: 60px;

}



.evt-col-party {

    width: 60px;

}



.evt-col-chamber,

.evt-col-district {

    width: 100px;

}



.evt-col-crossover {

    width: 100px;

}



.evt-col-votes {

    width: 80px;

    color: #888;

    font-size: 0.9em;

}



.evt-col-action {

    width: 80px;

    text-align: center;

}



.evt-crossover-badge {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 20px;

    font-weight: 600;

    font-size: 0.95em;

}



.evt-crossover-badge.evt-crossover-high {

    background: #ffebee;

    color: #c62828;

}



.evt-crossover-badge.evt-crossover-medium {

    background: #fff3e0;

    color: #e65100;

}



.evt-crossover-badge.evt-crossover-low {

    background: #fffde7;

    color: #f9a825;

}



.evt-crossover-badge.evt-crossover-none {

    background: #e8f5e9;

    color: #2e7d32;

}



.evt-view-bills-btn {

    padding: 6px 12px;

    background: #0073aa;

    color: white;

    border: none;

    border-radius: 4px;

    font-size: 0.85em;

    cursor: pointer;

    transition: background 0.2s;

}



.evt-view-bills-btn:hover {

    background: #005a87;

}



/* Table party badge (smaller) */

.evt-table .evt-party-badge {

    width: 26px;

    height: 26px;

    font-size: 12px;

    position: static;

    transform: none;

    display: inline-flex;

}



/* ===== COMPACT GRID LAYOUT ===== */

.evt-grid-compact {

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 15px;

}



.evt-grid-compact .evt-card {

    border-radius: 8px;

}



.evt-grid-compact .evt-card-photo {

    padding: 15px 15px 10px;

}



.evt-grid-compact .evt-card-photo img {

    width: 60px;

    height: 60px;

}



.evt-grid-compact .evt-party-badge {

    width: 24px;

    height: 24px;

    font-size: 11px;

    transform: translateX(20px);

}



.evt-grid-compact .evt-card-info {

    padding: 10px 15px;

}



.evt-grid-compact .evt-card-name {

    font-size: 0.95em;

}



.evt-grid-compact .evt-card-meta {

    font-size: 0.75em;

}



.evt-grid-compact .evt-card-crossover {

    padding: 12px;

}



.evt-grid-compact .evt-crossover-percent {

    font-size: 1.8em;

}



.evt-grid-compact .evt-crossover-label {

    font-size: 0.7em;

}



.evt-grid-compact .evt-crossover-detail {

    font-size: 0.75em;

}



.evt-grid-compact .evt-view-bills {

    padding: 8px;

    font-size: 0.8em;

}



/* ===== PAGE HEADER ===== */

.evt-header {

    text-align: center;

    margin-bottom: 30px;

}



.evt-page-title {

    margin: 0 0 10px 0;

    font-size: 2em;

    color: #333;

}



.evt-page-description {

    margin: 0;

    font-size: 1.1em;

    color: #666;

    max-width: 700px;

    margin: 0 auto;

}



/* ========================================

   YEAR BREAKDOWN STYLES

   ======================================== */



.evt-year-breakdown {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 25px;

    padding: 15px;

    background: #f8f9fa;

    border-radius: 8px;

}



.evt-year-stat {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 15px;

    background: white;

    border-radius: 6px;

    box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}



.evt-year-label {

    font-weight: 600;

    color: #333;

}



.evt-year-percent {

    font-size: 1.2em;

    font-weight: 700;

    color: #c62828;

}



.evt-year-detail {

    font-size: 0.85em;

    color: #666;

}



/* ========================================

   OPPOSITION SUPPORT STYLES

   ======================================== */



.evt-bills-note {

    font-size: 0.9em;

    color: #666;

    font-style: italic;

    margin-bottom: 15px;

}



.evt-bill-year {

    font-size: 0.85em;

    color: #888;

    font-weight: normal;

}



.evt-opposition-support {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 4px;

    font-weight: 600;

    font-size: 0.9em;

}



.evt-opposition-support.high {

    background: #ffebee;

    color: #c62828;

}



.evt-opposition-support.medium {

    background: #fff3e0;

    color: #e65100;

}



.evt-opposition-support.low {

    background: #e8f5e9;

    color: #2e7d32;

}



/* Show More Button */

.evt-show-more-container {

    text-align: center;

    margin-top: 30px;

    padding: 20px;

}



.evt-show-more-btn {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    border: none;

    padding: 15px 40px;

    font-size: 16px;

    font-weight: 600;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

}



.evt-show-more-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);

}



.evt-show-more-btn:active {

    transform: translateY(0);

}





/* Year note at bottom of card */

.evt-card-year-note {

    display: block;

    font-size: 0.7em;

    color: #999;

    text-align: center;

    margin-top: 10px;

    font-style: italic;

}



/* View Controls */

.evt-view-controls {

    display: flex;

    gap: 3px;

    margin-left: auto;

    flex-shrink: 0;

}



.evt-view-toggle,

.evt-print-btn {

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 4px;

    padding: 6px 8px;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.evt-view-toggle:hover,

.evt-print-btn:hover {

    background: #f0f0f0;

    border-color: #999;

}



.evt-view-toggle.active {

    background: #0073aa;

    border-color: #0073aa;

    color: #fff;

}



.evt-view-toggle .dashicons,

.evt-print-btn .dashicons {

    font-size: 18px;

    width: 18px;

    height: 18px;

}



.evt-print-btn {

    background: #4CAF50;

    border-color: #4CAF50;

    color: #fff;

}



.evt-print-btn:hover {

    background: #45a049;

    border-color: #45a049;

}



/* ========================================

   LIST VIEW - Single Line Table Format

   ======================================== */



.evt-container.evt-list-view .evt-grid {

    display: table;

    width: 100%;

    border-collapse: collapse;

    counter-reset: rank-counter;

}



/* List view card becomes a table row */

.evt-container.evt-list-view .evt-card {

    display: table-row;

    width: 100%;

    max-width: 100%;

    margin: 0;

    padding: 0;

    border-radius: 0;

    box-shadow: none;

    background: #fff;

}



.evt-container.evt-list-view .evt-card:nth-child(even) {

    background: #f9f9f9;

}



.evt-container.evt-list-view .evt-card:hover {

    background: #f0f7ff;

}



/* Hide photo in list view */

.evt-container.evt-list-view .evt-card-photo {

    display: none;

}



/* Rank number column */

.evt-container.evt-list-view .evt-card::before {

    counter-increment: rank-counter;

    content: counter(rank-counter);

    display: table-cell;

    width: 40px;

    padding: 8px 5px;

    text-align: center;

    font-weight: bold;

    color: #666;

    font-size: 0.85em;

    border-bottom: 1px solid #eee;

    vertical-align: middle;

}



/* Name/Info column */

.evt-container.evt-list-view .evt-card-info {

    display: table-cell;

    padding: 8px 10px;

    text-align: left;

    vertical-align: middle;

    border-bottom: 1px solid #eee;

}



.evt-container.evt-list-view .evt-card-name {

    font-size: 0.9em;

    margin: 0;

    font-weight: 600;

    display: inline;

}



.evt-container.evt-list-view .evt-card-meta {

    display: inline;

    margin: 0;

    margin-left: 10px;

    font-size: 0.85em;

    color: #666;

}



.evt-container.evt-list-view .evt-card-meta::before {

    content: "";

}



/* Crossover/Score column */

.evt-container.evt-list-view .evt-card-crossover {

    display: table-cell;

    width: 100px;

    padding: 8px 10px;

    text-align: center;

    vertical-align: middle;

    border-bottom: 1px solid #eee;

    cursor: pointer;

    transition: all 0.2s ease;

}



.evt-container.evt-list-view .evt-card-crossover:hover {

    background: rgba(0,0,0,0.05);

}



/* Hide labels in list view, only show percent */

.evt-container.evt-list-view .evt-crossover-label,

.evt-container.evt-list-view .evt-card-year-note,

.evt-container.evt-list-view .evt-crossover-detail {

    display: none;

}



.evt-container.evt-list-view .evt-crossover-percent {

    font-size: 1em;

    font-weight: bold;

    margin: 0;

}



/* Hide the separate View Bills button in list view */

.evt-container.evt-list-view .evt-view-bills {

    display: none;

}



/* ========================================

   PRINT STYLES - Updated for clean list

   ======================================== */



@media print {

    /* Hide non-essential elements */

    .evt-filters,

    .evt-view-controls,

    .evt-print-btn,

    .evt-show-more-container,

    .evt-modal,

    .evt-year-filter,

    .evt-card-photo,

    .evt-view-bills {

        display: none !important;

    }

    

    body {

        background: white !important;

        margin: 0;

        padding: 10px;

        font-size: 11px;

    }

    

    .evt-container {

        max-width: 100% !important;

        padding: 0 !important;

    }

    

    .evt-header {

        margin-bottom: 10px !important;

        text-align: center !important;

        border-bottom: 2px solid #333;

        padding-bottom: 10px;

    }

    

    .evt-page-title {

        font-size: 18px !important;

        margin: 0 0 5px 0 !important;

    }

    

    .evt-page-description {

        font-size: 10px !important;

        margin: 0 !important;

    }

    

    .evt-summary {

        display: none !important;

    }

    

    /* Force list layout for print */

    .evt-grid {

        display: flex !important;

        flex-direction: column !important;

        gap: 0 !important;

        counter-reset: rank-counter !important;

    }

    

    .evt-card {

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 6px 10px !important;

        border: none !important;

        border-bottom: 1px solid #ddd !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        page-break-inside: avoid;

        background: transparent !important;

    }

    

    .evt-card:nth-child(even) {

        background: #f5f5f5 !important;

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }

    

    /* Rank number */

    .evt-card::before {

        counter-increment: rank-counter !important;

        content: counter(rank-counter) !important;

        width: 35px !important;

        min-width: 35px !important;

        text-align: center !important;

        font-weight: bold !important;

        font-size: 10px !important;

        color: #333 !important;

    }

    

    .evt-card-info {

        flex: 1 !important;

        padding: 0 !important;

        text-align: left !important;

        display: block !important;

    }

    

    .evt-card-name {

        font-size: 11px !important;

        margin: 0 !important;

        font-weight: 600 !important;

        display: inline !important;

    }

    

    .evt-card-meta {

        display: inline !important;

        margin: 0 !important;

        font-size: 10px !important;

        color: #666 !important;

    }

    

    .evt-card-meta::before {

        content: " — " !important;

    }

    

    .evt-card-crossover {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 80px !important;

        min-width: 80px !important;

        padding: 4px 8px !important;

        margin: 0 !important;

        margin-left: auto !important;

        border-radius: 3px !important;

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }

    

    .evt-crossover-label,

    .evt-card-year-note,

    .evt-crossover-detail {

        display: none !important;

    }

    

    .evt-crossover-percent {

        font-size: 11px !important;

        font-weight: bold !important;

        margin: 0 !important;

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }

    

    /* Preserve colors */

    .evt-color-republican {

        background: rgba(198, 40, 40, 0.15) !important;

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }

    

    .evt-color-republican .evt-crossover-percent {

        color: #c62828 !important;

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }

    

    .evt-color-warning {

        background: rgba(123, 31, 162, 0.15) !important;

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }

    

    .evt-color-warning .evt-crossover-percent {

        color: #7b1fa2 !important;

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }

    

    .evt-color-democrat {

        background: rgba(21, 101, 192, 0.15) !important;

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }

    

    .evt-color-democrat .evt-crossover-percent {

        color: #1565c0 !important;

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }

}



/* =========================================

   ENHANCED STATS STYLES

   ========================================= */



/* Highlighted stat in summary */

.evt-stat-highlight {

    background: rgba(255, 255, 255, 0.2);

    border-radius: 8px;

    padding: 15px 20px;

}



.evt-stat-warning {

    background: rgba(198, 40, 40, 0.3) !important;

    border: 2px solid rgba(255, 255, 255, 0.5);

}



.evt-stat-warning .evt-stat-number {

    color: #ffcdd2;

}



/* Extended Stats Section */

.evt-extended-stats {

    background: #fff;

    border-radius: 10px;

    padding: 25px;

    margin-bottom: 30px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

}



.evt-stats-heading {

    margin: 0 0 20px 0;

    font-size: 1.3em;

    color: #333;

    border-bottom: 2px solid #eee;

    padding-bottom: 10px;

}



.evt-stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 20px;

}



.evt-stats-card {

    background: #f8f9fa;

    border-radius: 8px;

    padding: 20px;

    border-left: 4px solid #ccc;

}



.evt-stats-card h4 {

    margin: 0 0 15px 0;

    font-size: 1.1em;

}



.evt-stats-republican {

    border-left-color: #c62828;

}



.evt-stats-republican h4 {

    color: #c62828;

}



.evt-stats-democrat {

    border-left-color: #1565c0;

}



.evt-stats-democrat h4 {

    color: #1565c0;

}



.evt-stats-row {

    display: flex;

    justify-content: space-between;

    padding: 8px 0;

    border-bottom: 1px solid #e0e0e0;

}



.evt-stats-row:last-child {

    border-bottom: none;

}



.evt-stats-label {

    color: #666;

}



.evt-stats-value {

    font-weight: 600;

    color: #333;

}



.evt-stats-danger {

    background: #ffebee;

    margin: 0 -10px;

    padding: 8px 10px;

    border-radius: 4px;

}



.evt-stats-danger .evt-stats-value {

    color: #c62828;

    font-weight: 700;

}



/* =========================================

   STANDALONE STATS SHORTCODE

   ========================================= */



/* Card-style stats (summary style) */

.evt-summary-card {

    background: white;

    border-radius: 12px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    overflow: hidden;

    max-width: 350px;

    margin-bottom: 30px;

}



.evt-summary-card-header {

    padding: 25px 20px;

    text-align: center;

    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);

    border-bottom: 1px solid #eee;

}



.evt-summary-card-intro {

    display: block;

    font-size: 1em;

    color: #555;

    margin-bottom: 10px;

}



.evt-summary-card-label {

    display: block;

    font-size: 1em;

    color: #666;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    font-weight: 600;

}



.evt-summary-card-percent {

    display: block;

    font-size: 3.5em;

    font-weight: bold;

    line-height: 1.1;

    margin: 10px 0;

    color: #1565c0;

}



.evt-summary-card-sublabel {

    display: block;

    font-size: 1em;

    color: #888;

    margin-top: 5px;

}



.evt-summary-card-footer {

    display: flex;

    border-top: 1px solid #eee;

}



.evt-summary-card-stat {

    flex: 1;

    padding: 15px;

    text-align: center;

    border-right: 1px solid #eee;

}



.evt-summary-card-stat:last-child {

    border-right: none;

}



.evt-summary-card-num {

    display: block;

    font-size: 1.8em;

    font-weight: 700;

    color: #333;

}



.evt-summary-card-desc {

    display: block;

    font-size: 0.75em;

    color: #666;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    margin-top: 3px;

}



/* Full style stats (with names list) */

.evt-stats-standalone {

    background: #fff;

    border-radius: 12px;

    padding: 30px;

    margin-bottom: 30px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    border: 1px solid #e0e0e0;

}



.evt-stats-headline {

    text-align: center;

    margin-bottom: 25px;

    padding-bottom: 20px;

    border-bottom: 2px solid #f0f0f0;

}



.evt-stats-big-number {

    display: block;

    font-size: 4em;

    font-weight: 800;

    line-height: 1;

    color: #c62828;

}



.evt-stats-big-label {

    display: block;

    font-size: 1.2em;

    margin-top: 10px;

    color: #333;

}



.evt-stats-breakdown {

    display: flex;

    justify-content: center;

    gap: 40px;

    padding: 20px 0;

    border-bottom: 1px solid #e0e0e0;

    margin-bottom: 20px;

}



.evt-stats-item {

    text-align: center;

}



.evt-stats-number {

    display: block;

    font-size: 2em;

    font-weight: 700;

    color: #333;

}



.evt-stats-item .evt-stats-label {

    color: #666;

    font-size: 0.9em;

}



.evt-stats-names {

    background: #f8f9fa;

    border-radius: 8px;

    padding: 20px;

    border: 1px solid #e0e0e0;

}



.evt-stats-names h4 {

    margin: 0 0 15px 0;

    font-size: 1em;

    color: #333;

}



.evt-stats-names ul {

    margin: 0;

    padding: 0;

    list-style: none;

}



.evt-stats-names li {

    padding: 8px 0;

    border-bottom: 1px solid #e0e0e0;

    color: #333;

}



.evt-stats-names li:last-child {

    border-bottom: none;

}



.evt-highlight-bad {

    background: #ffebee;

    padding: 2px 8px;

    border-radius: 4px;

    font-weight: 700;

    color: #c62828;

}



/* Compact stats */

.evt-stats-compact {

    background: #ffebee;

    border-left: 4px solid #c62828;

    padding: 15px 20px;

    margin-bottom: 20px;

    border-radius: 0 8px 8px 0;

    font-size: 1.1em;

}



.evt-stats-compact strong {

    color: #c62828;

    font-size: 1.3em;

}



.evt-stats-detail {

    color: #666;

    font-size: 0.9em;

}



/* Inline stat */

.evt-stat-inline {

    font-weight: 700;

    color: #c62828;

}



/* =========================================

   WALL OF SHAME STYLES

   ========================================= */



.evt-shame-wall {

    margin-bottom: 30px;

}



.evt-shame-title {

    color: #333;

    text-align: center;

    font-size: 1.5em;

    margin: 0 0 10px 0;

}



.evt-shame-subtitle {

    color: #666;

    text-align: center;

    margin: 0 0 30px 0;

}



.evt-shame-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 20px;

}



.evt-shame-card {

    background: white;

    border-radius: 12px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    overflow: hidden;

    position: relative;

    transition: transform 0.2s, box-shadow 0.2s;

}



.evt-shame-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

}



.evt-shame-rank {

    position: absolute;

    top: 10px;

    right: 10px;

    background: #666;

    color: white;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 0.85em;

}



.evt-shame-card[data-rank="1"] .evt-shame-rank {

    background: #ffd700;

    color: #333;

    width: 35px;

    height: 35px;

    font-size: 0.9em;

}



.evt-shame-card[data-rank="2"] .evt-shame-rank {

    background: #c0c0c0;

    color: #333;

}



.evt-shame-card[data-rank="3"] .evt-shame-rank {

    background: #cd7f32;

    color: #fff;

}



.evt-shame-photo {

    text-align: center;

    padding: 25px 20px 15px;

    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);

}



.evt-shame-photo img {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    object-fit: cover;

    border: 4px solid white;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

}



.evt-shame-info {

    text-align: center;

    padding: 15px 20px;

    border-bottom: 1px solid #eee;

}



.evt-shame-info h3 {

    color: #333;

    margin: 0 0 5px 0;

    font-size: 1.1em;

    font-weight: 600;

}



.evt-shame-meta {

    color: #666;

    margin: 0;

    font-size: 0.85em;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.evt-shame-score {

    padding: 20px;

    text-align: center;

}



.evt-shame-percent {

    display: block;

    font-size: 3em;

    font-weight: bold;

    line-height: 1;

}



.evt-shame-label {

    display: block;

    color: #666;

    font-size: 0.85em;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    font-weight: 600;

    margin-top: 5px;

}



.evt-shame-detail {

    display: block;

    color: #888;

    font-size: 0.8em;

    margin-top: 3px;

}



.evt-no-shame {

    color: #4caf50;

    text-align: center;

    padding: 30px;

    background: #e8f5e9;

    border-radius: 8px;

}



/* =========================================

   MAP STYLES

   ========================================= */



.evt-map-container {

    border-radius: 12px;

    overflow: hidden;

    margin-bottom: 20px;

    background: #e8e8e8;

    position: relative;

}



.evt-map-loading {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: white;

    padding: 20px 40px;

    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.evt-map-legend {

    background: #fff;

    border-radius: 8px;

    padding: 15px 20px;

    margin-bottom: 30px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

}



.evt-map-legend h4 {

    margin: 0 0 10px 0;

    font-size: 0.95em;

    color: #666;

}



.evt-legend-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 5px 0;

}



.evt-legend-color {

    width: 20px;

    height: 20px;

    border-radius: 4px;

}



/* =========================================

   CHART STYLES

   ========================================= */



.evt-chart-container {

    background: #fff;

    border-radius: 12px;

    padding: 20px;

    margin-bottom: 30px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

}



.evt-chart-container canvas {

    width: 100% !important;

    height: 100% !important;

}



/* =========================================

   RESPONSIVE ADJUSTMENTS

   ========================================= */



@media (max-width: 768px) {

    .evt-stats-breakdown {

        flex-direction: column;

        gap: 15px;

    }

    

    .evt-stats-big-number {

        font-size: 3em;

    }

    

    .evt-shame-grid {

        grid-template-columns: 1fr;

    }

    

    .evt-stats-grid {

        grid-template-columns: 1fr;

    }

}