/* ===================================
   Car Show Registration Viewer
   Styles for DataTables registration viewer
   =================================== */

.csr-viewer-wrapper {
    margin: 20px 0;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

.csr-viewer-title {
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

/* Empty state */
.csr-viewer-empty {
    padding: 40px 20px;
    text-align: center;
    color: #666;
}

.csr-viewer-empty p {
    margin: 10px 0;
    font-size: 16px;
}

.csr-viewer-filter-note {
    font-size: 14px;
    color: #999;
    font-style: italic;
}

/* Error state */
.csr-viewer-error {
    padding: 20px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
}

/* Quick Filters */
.csr-quick-filters {
    margin-bottom: 20px;
    padding: 15px;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

/* Filter rows */
.csr-filter-row {
    display: block;
    margin-bottom: 10px;
}

.csr-filter-row:last-child {
    margin-bottom: 0;
}

.csr-filter-row-controls {
    padding-top: 5px;
    border-top: 1px solid #e5e7eb;
    /* Flex so Show + Search stay left and the toolbar buttons hug the right edge.
       Wraps only when the viewport is too narrow to fit everything on one line. */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 30px;
}

.csr-filter-row-controls .csr-filter-group {
    margin: 0 !important;
}

/* Push the toolbar-buttons group to the right edge of the row. */
.csr-filter-row-controls .csr-buttonbar {
    margin-left: auto !important;
    margin-top:  auto !important;
}

.csr-filter-group {
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 10px;
}

.csr-filter-group:last-child {
    margin-right: 0;
}

.csr-filter-group label {
    display: inline-block;
    margin-right: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    vertical-align: middle;
}

/* Filter group buttons (Print and CSV Export) alignment */
.csr-filter-group .button-secondary {
    vertical-align: middle;
}

/* Quick Print container - hidden by default */
#csr-quick-print-container {
    display: none;
}

.csr-export-csv-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading spinner animation */
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.csr-filter-dropdown {
    display: inline-block;
    padding: 8px 30px 8px 12px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
}

.csr-filter-dropdown:hover {
    border-color: #9ca3af;
}

.csr-filter-dropdown:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.csr-filter-dropdown:disabled {
    background: #f3f4f6;
    color: #374151;
    cursor: not-allowed;
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Custom page length dropdown */
.csr-length-dropdown {
    display: inline-block;
    padding: 8px 30px 8px 12px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.csr-length-dropdown:hover {
    border-color: #9ca3af;
}

.csr-length-dropdown:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Custom search input */
.csr-search-input {
    display: inline-block;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    color: #374151;
    transition: all 0.2s ease;
    min-width: 250px;
}

.csr-search-input:hover {
    border-color: #9ca3af;
}

.csr-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.csr-search-input::placeholder {
    color: #9ca3af;
}

/* Table styling */
.csr-viewer-table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: auto;
}

/* Ensure DataTables wrapper takes full width */
.dataTables_wrapper {
    width: 100%;
}

/* Column headers */
.csr-viewer-table thead th {
    background: #fafafa;
    border-bottom: 1px solid #ddd;
    padding: 12px;
    font-weight: 600;
    text-align: left;
    font-size: 12px;
    white-space: nowrap;
}

/* Column header group colors (lighter shades) */
.csr-viewer-table thead th.group-record {
    background: #e2e8f0;
    border-bottom: 2px solid #64748b;
    color: #475569;
}

.csr-viewer-table thead th.group-event {
    background: #cffafe;
    border-bottom: 2px solid #0891b2;
    color: #0e7490;
}

.csr-viewer-table thead th.group-personal {
    background: #dbeafe;
    border-bottom: 2px solid #2563eb;
    color: #1e40af;
}

.csr-viewer-table thead th.group-vehicle {
    background: #fed7aa;
    border-bottom: 2px solid #ea580c;
    color: #c2410c;
}

.csr-viewer-table thead th.group-events {
    background: #dcfce7;
    border-bottom: 2px solid #16a34a;
    color: #15803d;
}

.csr-viewer-table thead th.group-payment {
    background: #e9d5ff;
    border-bottom: 2px solid #9333ea;
    color: #7c3aed;
}

.csr-viewer-table thead th.group-debug {
    background: #fef3c7;
    border-bottom: 2px solid #f59e0b;
    color: #d97706;
}

/* Table cells */
.csr-viewer-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    white-space: normal;
    word-wrap: break-word;
}

/* Reduced row height */
.csr-viewer-table tbody tr {
    line-height: 1.4;
}

/* Hover effect */
.csr-viewer-table tbody tr:hover {
    background: #f9f9f9;
}

/* Status dropdown */
.csr-status-dropdown {
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
}

.csr-status-dropdown:hover {
    border-color: #999;
}

.csr-status-dropdown:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

/* Status dropdown - disabled state */
.csr-status-dropdown:disabled {
    background-color: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
    opacity: 0.6;
    border-color: #e5e7eb;
}

.csr-status-dropdown:disabled:hover {
    border-color: #e5e7eb;
}

/* Status dropdown with color indicators */
.csr-status-dropdown option[value="pending"] {
    color: #f59e0b;
}

.csr-status-dropdown option[value="completed"] {
    color: #16a34a;
}

.csr-status-dropdown option[value="cancelled"] {
    color: #dc2626;
}

/* Email mailto links */
td a[href^="mailto:"] {
    color: #2271b1;
    text-decoration: none;
    transition: color 0.2s;
}

td a[href^="mailto:"]:hover {
    color: #135e96;
    text-decoration: underline;
}

/* Action buttons in Actions column (shared base style) */
.csr-edit-btn,
.csr-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Adjust these icons to be uniformly sized */
.dashicons-printer {
    font-size: 14px;
}

.dashicons-list-view {
    font-size: 12px;
}

.dashicons-id-alt {
    font-size: 14px;
}

.dashicons-email {
    font-size: 14px;
}


/* Edit button colors (blue) */
.csr-edit-btn {
    color: #9ca3af;
}

.csr-edit-btn:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #2563eb;
}

/* Event ledger rows in modal */
.csr-event-row {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin-bottom: 4px;
    transition: background 0.2s, border-color 0.2s;
}

.csr-event-row.csr-event-selected {
    background: #fff;
    border-color: #d1d5db;
}

.csr-event-row.csr-event-added {
    background: #f0fdf4;
    border-color: #86efac;
}

.csr-event-row.csr-event-removed {
    background: #fefce8;
    border-color: #fde047;
}

.csr-event-row .csr-event-name {
    flex: 1;
    font-size: 13px;
    color: #374151;
}

.csr-event-row .csr-event-price {
    font-size: 13px;
    color: #6b7280;
    margin-right: 8px;
    white-space: nowrap;
    min-width: 55px;
    text-align: right;
}

.csr-event-toggle-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    padding: 0 6px;
    line-height: 1;
    transition: all 0.2s;
    width: 28px;
    text-align: center;
}

.csr-event-toggle-btn.csr-event-add-btn {
    color: #16a34a;
}

.csr-event-toggle-btn.csr-event-add-btn:hover {
    background: #dcfce7;
    border-color: #86efac;
}

.csr-event-toggle-btn.csr-event-remove-btn {
    color: #dc2626;
}

.csr-event-toggle-btn.csr-event-remove-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.csr-event-toggle-btn:disabled {
    color: #d1d5db;
    cursor: not-allowed;
}

.csr-event-toggle-btn:disabled:hover {
    background: none;
    border-color: transparent;
}

/* Events total wrapper */
#csr-events-total-wrapper {
    margin-top: 10px;
    padding: 8px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 13px;
    display: flex;
    gap: 16px;
    align-items: center;
    transition: all 0.3s ease;
}

#csr-events-total-wrapper.csr-events-refund {
    background: #fefce8;
    border-color: #fde047;
}

#csr-events-total-wrapper.csr-events-payment-due {
    background: #f0fdf4;
    border-color: #86efac;
}

#csr-events-total-diff {
    font-weight: 600;
    margin-left: auto;
}

#csr-events-total-diff.csr-diff-refund {
    color: #92400e;
}

#csr-events-total-diff.csr-diff-payment {
    color: #166534;
}

/* Events truncation */
.events-more {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    background: #e7f3ff;
    border-radius: 3px;
    font-size: 11px;
    color: #0073aa;
    cursor: help;
}

/* Waitlisted row indicator — amber left border */
tr[data-has-waitlisted="1"] {
    border-left: 4px solid #f59e0b;
}

tr[data-has-waitlisted="1"] td:first-child {
    border-left: 4px solid #f59e0b;
}

.csr-activity-waitlisted {
    color: #92400e;
}

.csr-wl-badge {
    display: inline-block;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1;
    letter-spacing: 0.5px;
    margin-left: 2px;
}

/* DataTables overrides */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin: 10px 0;
}

.dataTables_wrapper .dataTables_filter input {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-left: 8px;
}

.dataTables_wrapper .dataTables_length select {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 0 8px;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px;
    margin: 0 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f5f5f5;
    border-color: #999;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sorting - minimal styling, let DataTables handle arrows */
.csr-viewer-table thead th.sorting,
.csr-viewer-table thead th.sorting_asc,
.csr-viewer-table thead th.sorting_desc {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

/* Hover effect for sortable columns */
.csr-viewer-table thead th.sorting:hover,
.csr-viewer-table thead th.sorting_asc:hover,
.csr-viewer-table thead th.sorting_desc:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Non-sortable columns (like payment status with dropdown) */
.csr-viewer-table thead th.sorting_disabled {
    cursor: default;
    padding-right: 12px !important;
}

.csr-viewer-table thead th.sorting_disabled:hover {
    background-color: inherit !important;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .csr-viewer-wrapper {
        padding: 15px;
    }

    .csr-viewer-title {
        font-size: 20px;
    }

    .csr-viewer-table {
        font-size: 12px;
    }

    .csr-viewer-table thead th,
    .csr-viewer-table tbody td {
        padding: 6px 4px;
    }
}

/* ===================================
   Delete Functionality Styles
   =================================== */

/* Actions cell layout */
.csr-viewer-table td[data-column="actions"] {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

.csr-viewer-table td[data-column="actions"] > * {
    vertical-align: middle;
    margin: 0 3px;
}

/* Actions column header */
.csr-viewer-table thead th.group-actions {
    background: #fee2e2;
    border-bottom: 2px solid #dc2626;
    color: #991b1b;
}

/* Delete button colors (red) */
.csr-delete-button {
    color: #dc2626;
}

.csr-delete-button:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.csr-delete-button:disabled {
    background: #f9fafb;
    color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Modal overlay */
.csr-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
}

.csr-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* Modal content box */
.csr-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 30px;
}

/* Modal header */
.csr-modal-header {
    text-align: center;
    margin: -30px -30px 20px -30px;
    padding: 20px 30px;
    background: #dc2626;
    border-radius: 8px 8px 0 0;
}

.csr-modal-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
    color: #ffffff !important;
}

.csr-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff !important;
}

/* Modal body */
.csr-modal-body {
    margin-bottom: 20px;
}

.csr-modal-body p {
    margin: 10px 0;
    font-size: 15px;
    line-height: 1.5;
    color: #4b5563;
}

.csr-modal-details {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 15px;
    margin: 15px 0;
}

.csr-modal-details p {
    margin: 8px 0;
    font-size: 14px;
}

.csr-modal-details strong {
    display: inline-block;
    min-width: 120px;
    color: #374151;
}

.csr-modal-details span {
    font-family: 'Courier New', monospace;
    color: #1f2937;
}

.csr-modal-warning {
    color: #dc2626 !important;
    font-weight: 600;
    text-align: center;
}


/* Modal footer */
.csr-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.csr-modal-cancel {
    flex: 0 0 auto;
}

.csr-modal-confirm {
    flex: 1;
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}

.csr-modal-confirm:hover {
    background: #991b1b !important;
    border-color: #991b1b !important;
}

.csr-modal-confirm:disabled {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed;
}

/* ===================================
   Edit Registration Modal
   =================================== */

/* Edit modal - constrain height with scrollable body */
#csr-edit-modal .csr-modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#csr-edit-modal .csr-modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Edit modal header (blue) */
.csr-edit-modal-header {
    background: #2563eb !important;
}

/* Section grouping */
.csr-edit-reg-section {
    margin-top: 18px;
}

.csr-edit-reg-section h4 {
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    color: #374151;
}

/* Field layout */
.csr-edit-reg-field {
    margin-bottom: 10px;
}

.csr-edit-reg-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
}

.csr-edit-reg-field label .required {
    color: #dc2626;
}

.csr-edit-reg-field input[type="text"],
.csr-edit-reg-field input[type="email"],
.csr-edit-reg-field input[type="number"],
.csr-edit-reg-field select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.csr-edit-reg-field input:focus,
.csr-edit-reg-field select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Inline field row (year + make side by side) */
.csr-edit-reg-field-row {
    display: flex;
    gap: 10px;
}

/* Checkbox label */
.csr-edit-reg-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-weight: normal !important;
    cursor: pointer;
}

.csr-edit-reg-checkbox-label input[type="checkbox"] {
    margin: 0;
}

/* Read-only value display */
.csr-edit-reg-readonly {
    display: block;
    padding: 6px 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 14px;
    color: #6b7280;
    box-sizing: border-box;
}

/* Error message */
.csr-edit-reg-error {
    margin-top: 12px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    color: #dc2626;
    font-size: 13px;
}

/* Validation error state */
.csr-edit-reg-field input.csr-field-error,
.csr-edit-reg-field select.csr-field-error {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    /* Regular Print: the JS hoists the active viewer wrapper to <body> root
       and adds `csr-regular-print-mode`. Hide every OTHER direct child of body
       so theme heroes/banners/footers/sibling shortcodes can't push the table
       off page 1. Mirrors the pattern used for Labels (.csr-quick-print-mode)
       and Plaques (.csr-plaque-print-mode). */
    body.csr-regular-print-mode > *:not(.csr-viewer-wrapper) {
        display: none !important;
    }

    /* Hide all viewers except the one being printed */
    .csr-viewer-wrapper:not(.csr-printing-active):not(.csr-quick-printing) {
        display: none !important;
    }

    /* Hide non-essential elements when printing */
    .csr-quick-filters,
    .csr-print-button,
    .csr-export-csv-button,
    .csr-quick-print-button,
    .csr-delete-button,
    .csr-edit-btn,
    .csr-modal,
    td[data-column="actions"],
    th[data-column="actions"],
    .dataTables_filter,
    .dataTables_length,
    .dataTables_info,
    .dataTables_paginate,
    .csr-status-dropdown,
    /* Hide WordPress theme header and footer */
    .site-header,
    header.site-header,
    #masthead,
    .wp-site-blocks > header,
    nav,
    .navigation,
    .site-footer,
    footer.site-footer,
    #colophon,
    .wp-site-blocks > footer,
    #wpadminbar,
    .site-branding,
    .main-navigation,
    /* Hide WP admin chrome (only relevant when printing from wp-admin viewer) */
    #adminmenuback,
    #adminmenuwrap,
    #adminmenu,
    #adminmenumain,
    #wpfooter,
    .update-nag,
    .notice,
    .wrap > h1,
    .wrap > h2,
    /* Hide page title */
    .entry-title,
    h1.page-title,
    h1.entry-title,
    .page-header,
    .entry-header,
    .site-title,
    .wp-block-post-title,
    article h1,
    main h1,
    .content h1,
    h1,
    /* Hide all theme/page elements - keep only table */
    header,
    footer,
    aside,
    .sidebar,
    #sidebar,
    .widget,
    .breadcrumb,
    .breadcrumbs {
        display: none !important;
    }

    /* Hide DataTables sort arrows */
    .csr-viewer-table thead th.sorting:before,
    .csr-viewer-table thead th.sorting:after,
    .csr-viewer-table thead th.sorting_asc:before,
    .csr-viewer-table thead th.sorting_asc:after,
    .csr-viewer-table thead th.sorting_desc:before,
    .csr-viewer-table thead th.sorting_desc:after {
        display: none !important;
    }

    /* Page setup */
    @page {
        size: landscape;
        margin: 0.5in;
    }

    body {
        padding: 0;
        margin: 0;
        background: white;
        color: black;
    }

    /* WP admin reserves left space for the admin menu via margin-left on #wpcontent.
       With the menu hidden in print, reset those offsets so the table starts at the edge. */
    #wpcontent, #wpbody, #wpbody-content, .wrap {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-top: 0 !important;
    }

    /* Table styles for printing */
    .csr-viewer-table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 9pt !important;
        page-break-inside: avoid;
    }

    .csr-viewer-table thead {
        display: table-header-group; /* Repeat header on each page */
    }

    .csr-viewer-table tbody {
        display: table-row-group;
    }

    .csr-viewer-table th,
    .csr-viewer-table td {
        border: 1px solid #000 !important;
        padding: 4px !important;
        text-align: left;
        page-break-inside: avoid;
    }

    /* Column headers */
    .csr-viewer-table thead th {
        background: #e0e0e0 !important;
        color: #000 !important;
        font-weight: bold;
    }

    /* Zebra striping for better readability */
    .csr-viewer-table tbody tr:nth-child(even) {
        background: #f9f9f9 !important;
    }

    /* Payment status - show text instead of dropdown */
    .csr-viewer-table td[data-column="payment_status"] select {
        border: none !important;
        background: transparent !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

    /* Ensure text is black for readability */
    .csr-viewer-table * {
        color: #000 !important;
    }

    /* Email links - print as plain text */
    .csr-viewer-table a[href^="mailto:"] {
        text-decoration: none !important;
        color: #000 !important;
    }

    /* Prevent page breaks inside rows */
    .csr-viewer-table tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    /* Style the actual title for print */
    .csr-viewer-title {
        font-size: 18pt !important;
        font-weight: bold !important;
        margin: 0 0 10px 0 !important;
        text-align: center !important;
        color: #000 !important;
        page-break-after: avoid !important;
    }

    /* ============================================
       Quick Print Styles (Avery 5160 label sheet)
       30 labels per Letter page, 3 cols × 10 rows, 2.625" × 1" each.
       Page margins 0.5"/0.1875"; 0.125" column gap; no row gap.

       JS hoists #csr-quick-print-container to <body> and adds `csr-quick-print-mode`
       to <body>. We then hide every other body child so the Avery grid starts at the
       physical top-left of page 1 (the WordPress theme header, sidebar, admin bar,
       block-editor wrappers, etc. would otherwise push the grid down and break
       die-cut alignment).
       ============================================ */

    /* Named @page so it only applies to Avery sheets (via `page: avery5160` below).
       The default @page (landscape, 0.5in margin) for the regular Print button
       remains in effect for non-Avery print output. */
    @page avery5160 { size: 8.5in 11in; margin: 0; }

    html.csr-quick-print-html, body.csr-quick-print-mode {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        /* Defeat Bootstrap (and other framework) print rules that force a
           min-width on body/html. Without this, Chrome scales our 8.5in pages
           down to fit body's forced ≥992px width — about 82 % size, breaking
           Avery die-cut alignment. */
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }
    body.csr-quick-print-mode > *:not(#csr-quick-print-container) {
        display: none !important;
    }

    body.csr-quick-print-mode #csr-quick-print-container {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* One Avery 5160 sheet. grid-auto-flow: column fills col 1 top→bottom first.
       Explicit width/height + overflow:hidden prevents sub-pixel rounding from spilling
       the page onto a 2nd physical sheet (which would force the next .csr-label-page
       to page 3, leaving page 2 blank). page-break-before:always on subsequent pages
       guarantees each sheet starts at a fresh page boundary. */
    #csr-quick-print-container .csr-label-page {
        page: avery5160 !important;
        width: 8.5in !important;
        height: 11in !important;
        padding: 0.5in 0.1875in !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: grid !important;
        grid-template-columns: 2.625in 2.625in 2.625in !important;
        grid-template-rows: repeat(10, 1in) !important;
        grid-auto-flow: column !important;
        column-gap: 0.125in !important;
        row-gap: 0 !important;
        margin: 0 !important;
    }
    #csr-quick-print-container .csr-label-page + .csr-label-page {
        page-break-before: always !important;
    }

    #csr-quick-print-container .csr-label-cell {
        page-break-inside: avoid !important;
        overflow: hidden !important;
        padding: 0.08in 0.12in !important;
        box-sizing: border-box !important;
        font-size: 12pt !important;
        line-height: 1.2 !important;
        color: #000 !important;
    }

    #csr-quick-print-container .csr-label-id {
        font-size: 28pt !important;
        font-weight: bold !important;
        line-height: 1.0 !important;
        margin-bottom: 0.02in !important;
        color: #000 !important;
        text-align: right !important;
    }

    #csr-quick-print-container .csr-label-line {
        margin: 0 !important;
        color: #000 !important;
    }

    /* Pending registrations: only the Reg# turns red; other lines stay black. */
    #csr-quick-print-container .csr-label-cell.csr-quick-pending .csr-label-id {
        color: red !important;
    }

    /* ============================================
       Dash Plaque Styles (landscape, one per car)
       Letter landscape (11" × 8.5"), one filled or blank plaque per page.
       Upper-right ~2.625" × 1" reserved (whitespace, no visible outline) for
       an Avery 5160 sticker. Label-value rows with fill-in line under each value.

       JS hoists #csr-plaque-print-container to <body> and toggles
       `csr-plaque-print-mode` on <body> / `csr-plaque-print-html` on <html> so
       theme/admin chrome is hidden during print (same pattern as Labels).
       ============================================ */

    @page dashplaque { size: 11in 8.5in; margin: 0; }

    html.csr-plaque-print-html, body.csr-plaque-print-mode {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        /* Same defeat-Bootstrap-min-width fix as Labels — without this,
           Chrome scales 11in landscape plaques down by ~82 %. */
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }
    body.csr-plaque-print-mode > *:not(#csr-plaque-print-container) {
        display: none !important;
    }
    body.csr-plaque-print-mode #csr-plaque-print-container {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #csr-plaque-print-container .csr-plaque-page {
        page: dashplaque !important;
        width: 11in !important;
        height: 8.5in !important;
        /* Top 1.5" reserved as whitespace for an Avery 5160 sticker (placed in
           the upper-right). Side and bottom padding for breathing room. */
        padding: 1.5in 0.75in 0.75in 0.75in !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        position: relative !important;
        color: #000 !important;
        font-family: Georgia, "Times New Roman", serif !important;
    }
    /* Dashed outline showing where to place the Avery 5160 sticker (2.625" × 1"). */
    #csr-plaque-print-container .csr-plaque-page::before {
        content: 'Affix Here' !important;
        position: absolute !important;
        top: 0.25in !important;
        right: 0.75in !important;
        width: 2.625in !important;
        height: 1in !important;
        border: 1.5pt dashed #999 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #bbb !important;
        font-size: 14pt !important;
        font-style: italic !important;
        font-family: Georgia, "Times New Roman", serif !important;
    }
    #csr-plaque-print-container .csr-plaque-page + .csr-plaque-page {
        page-break-before: always !important;
    }

    #csr-plaque-print-container .csr-plaque-row {
        display: grid !important;
        grid-template-columns: 1.5in 1fr !important;
        align-items: baseline !important;
        border-bottom: 1px solid #000 !important;
        padding: 0.1in 0 0.15in 0 !important;
        margin: 0 0 0.25in 0 !important;
        font-size: 18pt !important;
        line-height: 1.2 !important;
    }
    #csr-plaque-print-container .csr-plaque-label {
        font-weight: bold !important;
    }
    #csr-plaque-print-container .csr-plaque-value {
        padding-left: 0.15in !important;
    }

    /* City / Color split row — two equal halves, each with its own underline. */
    #csr-plaque-print-container .csr-plaque-row-split {
        grid-template-columns: 1fr 1fr !important;
        border-bottom: none !important;
        column-gap: 0.4in !important;
    }
    #csr-plaque-print-container .csr-plaque-half {
        border-bottom: 1px solid #000 !important;
        padding: 0.1in 0 0.15in 0 !important;
    }

    /* Emphasise Make / Model / Year — the car-identity fields. */
    #csr-plaque-print-container .csr-plaque-row-car .csr-plaque-value {
        font-size: 28pt !important;
        font-weight: bold !important;
    }

    #csr-plaque-print-container .csr-plaque-footer {
        position: absolute !important;
        bottom: 0.5in !important;
        left: 0.75in !important;
        right: 0.75in !important;
        text-align: center !important;
        padding-top: 0.2in !important;
        font-size: 24pt !important;
        font-style: italic !important;
    }

    /* Club credit, bottom-left corner, small italic. */
    #csr-plaque-print-container .csr-plaque-credit {
        position: absolute !important;
        left: 0.25in !important;
        bottom: 0px !important;
        font-size: 9pt !important;
        font-style: italic !important;
    }

    /* Tagline, bottom-right corner, small italic. */
    #csr-plaque-print-container .csr-plaque-tagline {
        position: absolute !important;
        right: 0.25in !important;
        bottom: 0px !important;
        font-size: 9pt !important;
        font-style: italic !important;
    }

}