#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 999999;
    align-items: center;
    justify-content: center;
}

/* Delay showing the modal for 3s so brief network blips don't flash it */
#components-reconnect-modal.components-reconnect-show {
    display: flex;
    animation: reconnect-fade-in 0.3s ease 3s both;
}

#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

@keyframes reconnect-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reconnect-content {
    background: #fff;
    padding: 2rem 3rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
}

.reconnect-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
}

.reconnect-content p {
    color: #666;
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

.reconnect-content button {
    display: block;
    width: 100%;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    background: #757575;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.reconnect-content button:hover {
    background: #616161;
}

.reconnect-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e0e0e0;
    border-top-color: #1976d2;
    border-radius: 50%;
    animation: reconnect-spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes reconnect-spin {
    to { transform: rotate(360deg); }
}

/* Hide spinner on terminal states */
#components-reconnect-modal.components-reconnect-failed .reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .reconnect-spinner {
    display: none;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

:root {
    --noise-contour-width: 3;
    --noise-color-50: rgba(70, 180, 100, 0.9);
    --noise-color-55: rgba(160, 210, 60, 0.9);
    --noise-color-60: rgba(255, 220, 0, 0.9);
    --noise-color-65: rgba(255, 140, 0, 0.9);
    --noise-color-70: rgba(220, 40, 40, 0.9);
    --noise-color-75: rgba(140, 0, 140, 0.9);
    --parcel-stroke-color: rgba(64, 64, 64, 0.8);
    --parcel-stroke-width: 2;
    --parcel-fill-color: rgba(128, 128, 128, 0.3);
    --building-radius: 6;
    --building-fill-color: rgba(35, 153, 204, 1);
    --building-stroke-color: white;
    --building-stroke-width: 2;
    
    /* Program Lifecycle Swimlane - Status Colors */
    --status-complete: #28a745;         /* Forest Green */
    --status-in-progress: #17a2b8;      /* Teal */
    --status-dropped: #dc3545;          /* Muted Red */
    --status-superseded: #ffc107;       /* Amber/Gold */
    
    /* Program Lifecycle Swimlane - Text Colors */
    --status-text-light: #ffffff;
    --status-text-dark: #212529;        /* For Superseded tiles */
    
    /* Program Lifecycle Swimlane - UI Colors */
    --bg-header: #f8f9fa;
    --bg-cell: #fafafa;
    --bg-cell-alt: #ffffff;
    --border-primary: #dee2e6;
    --border-secondary: #e9ecef;
    --text-muted: #6c757d;

    /* Program Lifecycle Swimlane - Badge Colors */
    --badge-optional-bg: #e9ecef;       /* Neutral gray instead of amber to avoid confusion with Superseded */
    --badge-optional-text: #495057;
}

/* Material 3 default --rz-warning (#e8e971) is a fill, not a foreground. As icon/text
   color on a white grid it is nearly invisible. Darker amber stays readable on white
   and still contrasts with --rz-on-warning (#1b1d20) on filled warning buttons.
   html:root beats RadzenTheme's later :root. Scoped off dark so material3-dark keeps
   the pale fill that sits on a dark surface. */
html:root:not(.dark):not(:has(.rz-material3-dark)) {
    --rz-warning: #c47f00;
}

body {
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    background-color: var(--rz-body-background-color);
}

.rz-body {
    --rz-body-padding: 0;
}

a {
    color: var(--rz-link-color);
}

a:hover,
a:focus {
    color: var(--rz-link-hover-color);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}


/* Ensure map container maintains exact sizing */
.noise-map-card #noisemap {
    height: 400px !important;
    width: 100% !important;
    max-height: 400px !important;
    min-height: 400px !important;
    overflow: hidden !important;
    border: 1px solid #ccc !important;
}


/* Noise contour legend styling for OpenLayers control */
.noise-legend {
    position: absolute;
    top: 38px;
    right: 7px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    font-size: 12px;
    min-width: 20px;
    max-width: 1300px;
}

.noise-legend-title {
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center;
    color: #333;
    font-size: 13px;
}

.noise-legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.noise-legend-item:last-child {
    margin-bottom: 0;
}

.noise-legend-color {
    width: 18px;
    height: 12px;
    border: 1px solid #666;
    margin-right: 8px;
    border-radius: 2px;
}

.noise-legend span {
    color: #333;
    font-size: 11px;
    white-space: nowrap;
}

.legend-toggle {
    background: none;
    border: none;
    font-size: 16px !important;
    cursor: pointer;
    padding: 8px;
    display: block;
    width: 100%;
    text-align: left;
    color: black;
}

.legend-content {
    display: none;
}

.noise-legend-inner {
    padding: 8px;
    border-top: 1px solid #ddd;
}

.noise-color-50 {
    background-color: var(--noise-color-50);
    border: 1px solid #999;
}

.noise-color-55 {
    background-color: var(--noise-color-55);
    border: 1px solid #999;
}

.noise-color-60 {
    background-color: var(--noise-color-60);
    border: 1px solid #999;
}

.noise-color-65 {
    background-color: var(--noise-color-65);
    border: 1px solid #999;
}

.noise-color-70 {
    background-color: var(--noise-color-70);
    border: 1px solid #999;
}

.noise-color-75 {
    background-color: var(--noise-color-75);
    border: 1px solid #999;
}

.noise-legend-separator {
    height: 1px;
    background-color: #ddd;
    margin: 8px 0;
}

.noise-legend-symbol {
    width: 18px;
    height: 12px;
    margin-right: 8px;
    border-radius: 2px;
}

.building-symbol {
    background-color: var(--building-fill-color);
    border: 1px solid var(--building-stroke-color);
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

.parcel-symbol {
    background-color: var(--parcel-fill-color);
    border: 1px solid var(--parcel-stroke-color);
}

/* Export control styling */
.export-control {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
}

.export-button {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.export-button:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transform: translateY(-1px);
}

.export-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Base layer radio buttons - extends existing noise legend */
.noise-legend-item input[type="radio"] {
    margin-right: 6px;
    margin-left: 0;
}

.noise-legend-item label {
    cursor: pointer;
    font-size: 11px;
    margin: 0;
    color: #333;
}

/* Property legend styling - matches noise legend design */
.property-legend {
    position: absolute;
    top: 38px;
    right: 7px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 1000;
    font-size: 12px;
    min-width: 20px;
    max-width: 200px;
}

.property-legend-title {
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center;
    color: #333;
    font-size: 13px;
}

.property-legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.property-legend-item:last-child {
    margin-bottom: 0;
}

.property-legend-separator {
    height: 1px;
    background-color: #ddd;
    margin: 8px 0;
}

.property-legend-inner {
    padding: 8px;
    border-top: 1px solid #ddd;
}

.property-legend-symbol {
    width: 18px;
    height: 12px;
    margin-right: 8px;
    border-radius: 2px;
}

.property-legend-item input[type="radio"],
.property-legend-item input[type="checkbox"] {
    margin-right: 6px;
    margin-left: 0;
}

.property-legend-item label {
    cursor: pointer;
    font-size: 11px;
    margin: 0;
    color: #333;
}

.building-symbol {
    background: var(--building-fill-color);
    border: 1px solid var(--building-stroke-color);
    border-radius: 50%;
}

.parcel-symbol {
    background: var(--parcel-fill-color);
    border: 1px solid var(--parcel-stroke-color);
}

/* ============================================
   PROGRAM LIFECYCLE SWIMLANE STYLES
   ============================================ */

.swimlane-loading-card {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* One scrollport for both axes so sticky header (top) and property/DNL
   columns (left) stay in sync while Virtualize only mounts visible rows. */
.swimlane-shell {
    max-height: calc(100vh - 350px);
    overflow: auto;
    border: 1px solid var(--border-primary);
    position: relative;
}

.swimlane-header-row,
.swimlane-row {
    display: grid;
}

.swimlane-header-row {
    position: sticky;
    top: 0;
    z-index: 12;
    background-color: var(--bg-header);
}

.swimlane-header {
    position: sticky;
    top: 0;
    background-color: var(--bg-header);
    z-index: 10;
    border-bottom: 2px solid var(--border-primary);
    font-weight: bold;
    padding: 12px;
    text-align: center;
}

.swimlane-property-header {
    position: sticky;
    left: 0;
    background-color: var(--bg-header);
    z-index: 13;
    border-right: 2px solid var(--border-primary);
    padding: 12px;
    font-weight: bold;
}

.swimlane-property-cell {
    position: sticky;
    left: 0;
    background-color: var(--bg-cell-alt);
    z-index: 8;
    border-right: 2px solid var(--border-primary);
    border-bottom: 1px solid var(--border-secondary);
    padding: 12px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.swimlane-dnl-header {
    position: sticky;
    left: 200px;
    background-color: var(--bg-header);
    z-index: 13;
    border-right: 2px solid var(--border-primary);
    padding: 12px;
    font-weight: bold;
    text-align: center;
}

.swimlane-dnl-cell {
    position: sticky;
    left: 200px;
    background-color: var(--bg-cell-alt);
    z-index: 8;
    border-right: 2px solid var(--border-primary);
    border-bottom: 1px solid var(--border-secondary);
    padding: 8px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
}

.swimlane-step-cell {
    padding: 8px;
    min-height: 80px;
    border-right: 1px solid var(--border-secondary);
    border-bottom: 1px solid var(--border-secondary);
    background-color: var(--bg-cell);
}

/* Status Tile Cards */
.step-card {
    margin-bottom: 6px;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.2s, box-shadow 0.2s;
    color: var(--status-text-light);
}

.step-card:last-child {
    margin-bottom: 0;
}

.step-card:hover {
    opacity: 0.9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Status-specific card styles */
.step-card.status-complete {
    background-color: var(--status-complete);
}

.step-card.status-in-progress {
    background-color: var(--status-in-progress);
}

.step-card.status-not-started {
    background-color: var(--bg-header);
    color: var(--text-muted);
    border: 1px dashed var(--border-primary);
}

.step-card.status-dropped {
    background-color: var(--status-dropped);
}

.step-card.status-superseded {
    background-color: var(--status-superseded);
    color: var(--status-text-dark);  /* Dark text for accessibility on amber */
    opacity: 0.85;
    font-size: 11px;
    font-style: italic;
    padding: 6px;
}

.step-card.status-superseded .step-card-title,
.step-card.status-superseded .step-card-status {
    color: var(--status-text-dark);
}

/* Legacy superseded class for backwards compatibility */
.step-card.superseded {
    background-color: var(--status-superseded);
    color: var(--status-text-dark);
    opacity: 0.85;
    font-size: 11px;
    font-style: italic;
    padding: 6px;
}

.step-card-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.step-card-status {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
}

/* Property Info */
.property-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.property-text {
    line-height: 1.4;
    flex: 1;
    min-width: 0; /* Allows text to shrink */
}

.property-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.property-address {
    font-weight: 500;
    margin-bottom: 4px;
}

.property-apn {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.property-city {
    font-size: 11px;
    color: var(--text-muted);
}

.property-building-info {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.property-building-info span {
    white-space: nowrap;
}

/* Badges */
.optional-badge {
    display: inline-block;
    background-color: var(--badge-optional-bg);
    color: var(--badge-optional-text);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    font-weight: 500;
}

/* Status Filter Indicator Rectangle */
.status-indicator-rectangle {
    width: 100%;
    height: 8px;
    border-radius: 2px;
    border: 1px solid var(--border-primary);
    margin-top: 4px;
}

/* Kanban Board Styles - Using Swimlane Color Palette */
.kanban-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem;
    min-height: 500px;
    background-color: var(--bg-cell-alt, #ffffff);
}

.kanban-column {
    min-width: 280px;
    max-width: 320px;
    flex: 0 0 auto;
    background: var(--bg-cell-alt, #ffffff);
    border: 1px solid var(--border-primary, #dee2e6);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: calc(100vh - 300px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.kanban-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 3px solid var(--border-primary, #dee2e6);
    background: var(--bg-header, #f8f9fa);
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
    color: var(--status-text-dark, #212529);
}

.kanban-header.is-default {
    border-bottom-color: var(--status-in-progress, #17a2b8);
    background: linear-gradient(to bottom, var(--bg-header, #f8f9fa), var(--bg-cell, #fafafa));
}

.kanban-header.count-scheduled {
    border-bottom-color: var(--status-superseded, #ffc107);
}

.kanban-header.count-complete {
    border-bottom-color: var(--status-complete, #28a745);
}

.kanban-cards {
    padding: 0.5rem;
    min-height: 200px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--bg-cell, #fafafa);
}

.kanban-cards.drag-over {
    background-color: rgba(23, 162, 184, 0.1); /* Teal with opacity */
    border: 2px dashed var(--status-in-progress, #17a2b8);
    border-radius: 4px;
}

.kanban-empty-state {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted, #6c757d);
}

.kanban-card {
    background: var(--bg-cell-alt, #ffffff);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s, transform 0.2s;
    border: 1px solid var(--border-secondary, #e9ecef);
}

.kanban-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    border-color: var(--border-primary, #dee2e6);
}

.kanban-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: rotate(2deg);
    border-color: var(--status-in-progress, #17a2b8);
}

.kanban-card:active {
    cursor: grabbing;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kanban-column {
        min-width: 250px;
    }
    
    .kanban-board {
        padding: 0.5rem;
        gap: 0.5rem;
    }
}

/* Property Activity Timeline Styles */
.activity-timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline-item {
    position: relative;
    padding-bottom: 0.75rem;
    padding-left: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e0e0e0;
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    z-index: 1;
}

.timeline-content {
    background: #f9f9f9;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    border-left: 3px solid #e0e0e0;
}

.category-external-sync .timeline-content {
    border-left-color: #2196F3;
}

.category-noise-calculation .timeline-content {
    border-left-color: #FF9800;
}

.category-user-edit .timeline-content {
    border-left-color: #4CAF50;
}

.category-event .timeline-content {
    border-left-color: #9C27B0;
}

.category-communication .timeline-content {
    border-left-color: #00BCD4;
}

.category-form .timeline-content {
    border-left-color: #3F51B5;
}

.category-milestone .timeline-content {
    border-left-color: #F44336;
}

.category-program-assignment .timeline-content {
    border-left-color: #FF5722;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
}

.timeline-title-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.timeline-type {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.timeline-user-inline {
    font-size: 0.8rem;
    color: #666;
    font-weight: normal;
}

.timeline-date {
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
}

.timeline-changes {
    font-size: 0.875rem;
    color: #333;
    margin: 0.25rem 0;
    font-weight: 500;
}

.timeline-summary {
    font-size: 0.875rem;
    color: #555;
    margin: 0.25rem 0;
}

.timeline-user {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.timeline-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.timeline-structured {
    margin: 0.25rem 0;
}

.timeline-detail-lines {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.timeline-detail-line {
    font-size: 0.875rem;
    color: #555;
    line-height: 1.4;
}

/* Article links inside category cards on the Help index page */
.help-article-link {
    display: block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--rz-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.help-article-link:hover {
    background-color: var(--rz-primary-lighter);
    text-decoration: underline;
}

/* Print styles for help articles.
   NOTE: Layout manipulation (grid, width, visibility) is handled by print-help-article.js
   because Radzen sets those as inline styles which @media print cannot override.
   CSS handles color resets and page-break hints only. */
@media print {
    /* Reset colors — Radzen CSS vars don't resolve correctly in print context */
    body, .rz-body, .help-article-page, .help-article-card,
    .help-article-content, .help-article-content * {
        color: #000 !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    body {
        background: #fff !important;
    }

    .rz-card {
        box-shadow: none !important;
        border: none !important;
    }

    /* Keep headings with their following content */
    .help-article-content h1,
    .help-article-content h2,
    .help-article-content h3 {
        page-break-after: avoid;
    }

    .help-article-content p,
    .help-article-content li {
        page-break-inside: avoid;
    }

    .help-article-content pre {
        page-break-inside: avoid;
        white-space: pre-wrap;
    }
}

/* ============================================
   DOCUMENT TEMPLATE EDITOR
   ============================================ */

/* EasyMDE overrides to match Radzen Material3 theme */
.EasyMDEContainer .CodeMirror {
    border: 1px solid var(--rz-input-border, #ced4da);
    border-radius: var(--rz-border-radius, 4px);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 14px;
}

.EasyMDEContainer .editor-toolbar {
    border-top: 1px solid var(--rz-input-border, #ced4da);
    border-left: 1px solid var(--rz-input-border, #ced4da);
    border-right: 1px solid var(--rz-input-border, #ced4da);
    border-radius: var(--rz-border-radius, 4px) var(--rz-border-radius, 4px) 0 0;
}

.EasyMDEContainer .editor-toolbar button {
    color: var(--rz-text-color, #333);
}

.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
    background: var(--rz-primary-lighter, #e3f2fd);
    border-color: var(--rz-primary, #1976d2);
}

/* Template editor layout — side-by-side editor + preview */
.template-editor-container {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.template-editor-panel {
    flex: 1;
    min-width: 0;
}

.template-preview-panel {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--rz-input-border, #ced4da);
    border-radius: var(--rz-border-radius, 4px);
    padding: 1rem 1.25rem;
    background-color: #fff;
    /* Push down to align with the editor text area (clears the EasyMDE toolbar) */
    margin-top: 80px;
    /* No max-height — grows with content, dialog scrolls */
}

.template-preview-panel h1,
.template-preview-panel h2,
.template-preview-panel h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.template-preview-panel p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Blockquotes in the preview look like indented paragraphs, not quoted text.
   Matches how QuestPDF.Markdown renders them in the PDF (left margin, no border). */
.template-preview-panel blockquote {
    margin: 0 0 0.5rem 2rem;
    padding: 0;
    border-left: none;
    font-style: normal;
    color: inherit;
}

/* Page break indicator — visible dashed line in the preview panel.
   Mirrors the forced page break in the PDF (<!-- pagebreak --> sentinel). */
.template-preview-panel .page-break-indicator {
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    font-style: italic;
    border-top: 2px dashed #ccc;
    margin: 1.5rem 0;
    padding-top: 0.5rem;
}

/* Placeholder dropdown button group */
.placeholder-insert-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Responsive: stack vertically on narrow screens */
@media (max-width: 1024px) {
    .template-editor-container {
        flex-direction: column;
    }
}

/* Viewport-bound DataGrid: keep Radzen's H-bar on screen.
   Chrome media queries match Radzen Material3 (md=1024, lg=1280, xl=1920),
   not Bootstrap 992/1200. SizeMD columns side-by-side from 1024px.
   13.5rem from lg is empirical leftover (header + padding formula was short). */
:root {
    --np-layout-chrome: 5rem; /* header ~4rem + rz-pt-2 + rz-pb-2 */
}

@media (min-width: 1024px) {
    :root { --np-layout-chrome: 8.5rem; } /* md split is on; 5.5rem still page-scrolled in 1024–1279 */
}

@media (min-width: 1280px) {
    :root { --np-layout-chrome: 13.5rem; } /* lg/xl leftover; 8.5rem still page-scrolled at 1366/1440 */
}

.np-grid-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--np-layout-chrome));
    min-height: 0;
    min-width: 0;
    overflow: hidden; /* children that miss min-height:0 must not grow .rz-body */
}

.np-grid-page-body,
.rz-row.np-grid-page-body {
    display: flex;
    flex-wrap: nowrap; /* beat .rz-row { flex-wrap: wrap } from RadzenTheme loaded after site.css */
    align-items: stretch;
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.np-grid-page [class*="rz-col-"] {
    min-width: 0;
}

.np-grid-tree-col,
.np-grid-main-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.np-grid-tree-col > .rz-card {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.np-grid-fill {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.np-grid-fill .rz-data-grid {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    height: 100%;
    width: 100%;
}

.np-grid-fill .rz-data-grid-data {
    min-height: 0; /* Radzen default min-height:auto refuses to shrink below row content */
}

.np-eligibility-body {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* Paint td — Material3 stripes cells after site.css (RadzenTheme). Extra
   wrappers beat .rz-grid-table-striped tbody>tr:nth-child(*)>td and hover. */
.np-eligibility-body .np-grid-fill .rz-grid-table-striped tbody > tr.np-acoustical-row-green:not(.rz-expanded-row-content):nth-child(odd) > td,
.np-eligibility-body .np-grid-fill .rz-grid-table-striped tbody > tr.np-acoustical-row-green:not(.rz-expanded-row-content):nth-child(odd):hover > td {
    background-color: color-mix(in srgb, var(--rz-success) 14%, var(--rz-grid-stripe-odd-background-color));
}

.np-eligibility-body .np-grid-fill .rz-grid-table-striped tbody > tr.np-acoustical-row-green:not(.rz-expanded-row-content):nth-child(even) > td,
.np-eligibility-body .np-grid-fill .rz-grid-table-striped tbody > tr.np-acoustical-row-green:not(.rz-expanded-row-content):nth-child(even):hover > td {
    background-color: color-mix(in srgb, var(--rz-success) 14%, var(--rz-grid-stripe-background-color));
}

.np-eligibility-body .np-grid-fill .rz-grid-table-striped tbody > tr.np-acoustical-row-red:not(.rz-expanded-row-content):nth-child(odd) > td,
.np-eligibility-body .np-grid-fill .rz-grid-table-striped tbody > tr.np-acoustical-row-red:not(.rz-expanded-row-content):nth-child(odd):hover > td {
    background-color: color-mix(in srgb, var(--rz-danger) 14%, var(--rz-grid-stripe-odd-background-color));
}

.np-eligibility-body .np-grid-fill .rz-grid-table-striped tbody > tr.np-acoustical-row-red:not(.rz-expanded-row-content):nth-child(even) > td,
.np-eligibility-body .np-grid-fill .rz-grid-table-striped tbody > tr.np-acoustical-row-red:not(.rz-expanded-row-content):nth-child(even):hover > td {
    background-color: color-mix(in srgb, var(--rz-danger) 14%, var(--rz-grid-stripe-background-color));
}

.np-eligibility-body .np-grid-fill .rz-grid-table-striped tbody > tr.np-acoustical-row-yellow:not(.rz-expanded-row-content):nth-child(odd) > td,
.np-eligibility-body .np-grid-fill .rz-grid-table-striped tbody > tr.np-acoustical-row-yellow:not(.rz-expanded-row-content):nth-child(odd):hover > td {
    background-color: color-mix(in srgb, var(--rz-warning) 16%, var(--rz-grid-stripe-odd-background-color));
}

.np-eligibility-body .np-grid-fill .rz-grid-table-striped tbody > tr.np-acoustical-row-yellow:not(.rz-expanded-row-content):nth-child(even) > td,
.np-eligibility-body .np-grid-fill .rz-grid-table-striped tbody > tr.np-acoustical-row-yellow:not(.rz-expanded-row-content):nth-child(even):hover > td {
    background-color: color-mix(in srgb, var(--rz-warning) 16%, var(--rz-grid-stripe-background-color));
}

@media (max-width: 1023px) {
    /* SizeMD is Radzen md = 1024px, not Bootstrap 768. Stacked panes must page-scroll. */
    .np-grid-page {
        height: auto;
        overflow: visible;
    }

    .np-grid-page-body,
    .rz-row.np-grid-page-body {
        flex: none;
        flex-wrap: wrap;
        overflow: visible;
    }

    .np-grid-tree-col,
    .np-grid-main-col {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .np-grid-tree-col {
        max-height: 40vh;
        overflow: auto;
    }

    .np-grid-fill {
        flex: none;
        height: min(70vh, 36rem);
        min-height: 20rem;
        overflow: hidden;
    }

    .np-eligibility-body {
        flex: none;
        overflow: visible;
    }
}

/* WO-65: Categorization Table grid floor and page scroll.
   The data area is at least the header row plus 5 full rows. The page
   scrolls to reach the rest, including the pager. That applies at every
   viewport height. Banner padding, count-line placement, and the compact
   photo apply only on short viewports. At 900px tall or more the layout
   matches the old one only where the grid already gets 5 rows or more.
   Flex-grow fills the same space the old fixed-height page gave.
   Eligibility also uses .np-grid-page / .np-grid-fill. The shared rules
   above are unchanged and every selector here is under .np-cat-table-page.
   No overscroll-behavior: the wheel scrolls .rz-data-grid-data, then the
   page, and the header row stays sticky inside the grid.

   Grid floor: the data area (.rz-data-grid-data) is at least the header
   row + 5 data rows + the horizontal scrollbar tall. The column-picker row
   and the pager keep their natural height on top of that, so a pager that
   wraps on a narrow column does not eat a row. Measured with Playwright
   (Material3, 16px root): header row 49px, data row = photo + 21px (cell
   padding + border). The 15px scrollbar value is a classic Windows
   scrollbar, not measured by headless Chromium. Retune these if the theme
   or grid chrome changes. */
.np-cat-table-page {
    --np-cat-photo-h: 120px;
    --np-cat-row-pad: 21px;
    --np-cat-row-h: calc(var(--np-cat-photo-h) + var(--np-cat-row-pad));
    --np-cat-grid-header-h: 49px;
    --np-cat-grid-hscroll-h: 15px;
    --np-cat-grid-data-min: calc(var(--np-cat-grid-header-h) + (5 * var(--np-cat-row-h)) + var(--np-cat-grid-hscroll-h));
}

/* Default Street View box. The 64px height applies only below 820px tall. */
.np-cat-table-page .np-cat-streetview {
    width: 100%;
    height: 120px;
    border: 1px solid #ccc;
    position: relative;
}

/* .rz-mb-3 is `margin-bottom: 0.75rem !important` (12px at a 16px root). */
.np-cat-table-page .np-cat-banner {
    margin-bottom: 0.75rem !important;
}

/* Hidden here. Below 900px tall this count moves onto the pager line. */
.np-cat-table-page .np-cat-count-footer {
    display: none;
}

/* Page grows with the grid at every height. .rz-body (Radzen layout)
   scrolls content that is taller than the viewport. min-height keeps a
   short table filling the screen. overflow stays with the shared
   .np-grid-page rules. With height: auto, hidden clips nothing vertically,
   and the toolbar card's side shadows stay clipped as before. */
.np-grid-page.np-cat-table-page {
    height: auto;
    min-height: calc(100dvh - var(--np-layout-chrome));
}

/* Side-by-side (Radzen md = 1024). Stacked rules below 1024 stay in the
   max-width block above; do not reset column flex-basis (that is the 4/8). */
@media (min-width: 1024px) {
    .np-cat-table-page .np-grid-page-body,
    .np-cat-table-page .rz-row.np-grid-page-body {
        flex: 1 0 auto;
        overflow: visible;
    }

    .np-cat-table-page .np-grid-tree-col,
    .np-cat-table-page .np-grid-main-col {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    /* A long group list must not stretch the row past the grid. The card
       is pulled out of flow and scrolls inside the column, which stretches
       to the grid's height. contain:size would also zero the width (Radzen
       sets flex-basis, not width), so the card uses an absolute fill. */
    .np-cat-table-page .np-grid-tree-col {
        position: relative;
        overflow: hidden;
    }

    .np-cat-table-page .np-grid-tree-col > .rz-card {
        position: absolute;
        inset: 0;
        height: auto;
        max-height: none;
        overflow: auto;
    }

    /* The fill starts at the grid's own height (column picker + data floor
       + pager). flex-grow adds height when the page min-height leaves free
       space. That is the same space the old fixed-height page gave when the
       grid already has 5 rows or more. On a short window the banners can
       use that space, so the grid stays at its floor and the page scrolls. */
    .np-cat-table-page .np-grid-fill {
        flex: 1 0 auto;
        min-height: 0;
    }
}

/* Stacked Categorization Table: today's height is min(70vh, 36rem) with
   min-height 20rem (about 2 photo rows). Keep min(70vh, 36rem) as the
   lower bound and let the 5-row floor below make it taller. */
@media (max-width: 1023px) {
    .np-cat-table-page .np-grid-fill {
        height: auto;
        min-height: min(70vh, 36rem);
    }
}

/* contain:size stops the 20 rendered rows from sizing the grid, so the
   data area takes the 5-row floor or the space the flex layout gives it,
   and scrolls the rest. */
.np-cat-table-page .np-grid-fill .rz-data-grid {
    flex: 1 0 auto;
    min-height: 0;
    height: auto;
}

.np-cat-table-page .np-grid-fill .rz-data-grid-data {
    contain: size;
    flex: 1 0 0%;
    min-height: var(--np-cat-grid-data-min);
}

/* Short viewports only: tighter banners, count line on the pager. */
@media (max-height: 899.98px) {
    /* Medium flat alert padding is 1rem via --rz-alert-padding. Tighten the
       alert and the item/message row. Banners stay non-dismissible. */
    .np-cat-table-page .np-cat-banner {
        margin-bottom: 4px !important;
        --rz-alert-padding: 0.25rem 0.5rem;
        --rz-alert-gap: 0.375rem;
        --rz-alert-message-margin: 0;
        --rz-alert-icon-margin: 0;
        padding: 0.25rem 0.5rem;
        gap: 0.375rem;
    }

    /* .rz-alert-md also has a 1rem top margin, and flex items do not collapse
       margins. Zero it between banners so the gap is the 4px above. */
    .np-cat-table-page .np-cat-banner + .np-cat-banner {
        margin-top: 0;
    }

    .np-cat-table-page .np-cat-banner .rz-alert-item,
    .np-cat-table-page .np-cat-banner .rz-alert-message,
    .np-cat-table-page .np-cat-banner .rz-alert-icon {
        gap: 0.375rem;
        margin-top: 0;
        margin-bottom: 0;
    }

    .np-cat-table-page .np-cat-count-top {
        display: none;
    }

    .np-cat-table-page .np-cat-count-footer {
        display: inline;
    }
}

/* Compact photo only. The smaller photo also shrinks the 5-row floor. */
@media (max-height: 819.98px) {
    .np-cat-table-page {
        --np-cat-photo-h: 64px;
    }

    /* ExtraSmall Get Street View button is min-height 1.25rem, anchored
       4px from the bottom, so it stays inside this border-box. */
    .np-cat-table-page .np-cat-streetview {
        height: 64px;
    }
}

.np-hub-readiness-step {
    min-width: 8.5rem;
}

.np-nav-section .rz-navigation-item-link,
.np-nav-section .rz-navigation-item-wrapper {
    border-top: 1px solid var(--rz-panel-menu-item-border, var(--rz-base-300));
    margin-top: 0.35rem;
    padding-top: 0.65rem;
    pointer-events: none;
    opacity: 0.72;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

.cp-page h1 { font-size: 1.35rem; margin: 0; color: var(--rz-text-color); }
.cp-sub { color: var(--rz-text-secondary-color); margin: 0.2rem 0 0.8rem; }
.cp-top { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; margin-bottom: 0.75rem; }
.cp-search { flex: 1; min-width: 16rem; border: 2px solid var(--rz-primary); border-radius: 6px; padding: 0.55rem 0.75rem; font-size: 1rem; background: var(--rz-base-background-color); color: var(--rz-text-color); }
.cp-sel { display: flex; flex-direction: column; font-size: 0.7rem; color: var(--rz-text-secondary-color); min-width: 10rem; }
.cp-views { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.cp-lab { color: var(--rz-text-secondary-color); font-size: 0.8rem; }
.cp-view { border: 1px solid var(--rz-base-300); border-radius: 14px; padding: 0.2rem 0.7rem; background: var(--rz-base-background-color); color: var(--rz-text-color); }
.cp-view span { color: var(--rz-text-secondary-color); margin-left: 0.25rem; }
.cp-view.on { background: #1d4f86; color: #fff; border-color: #1d4f86; }
.cp-view.on span { color: #cfe0f3; }
.cp-sp { flex: 1; }
.cp-textbtn { border: 1px solid var(--rz-base-300); border-radius: 4px; background: var(--rz-base-background-color); color: var(--rz-text-color); padding: 0.25rem 0.6rem; }
.cp-filters { display: flex; gap: 0.75rem; overflow: auto; margin-bottom: 0.75rem; }
.cp-filters fieldset { border: 1px solid var(--rz-base-300); border-radius: 6px; min-width: 11rem; max-height: 14rem; overflow: auto; background: var(--rz-base-background-color); color: var(--rz-text-color); }
.cp-filters label { display: flex; gap: 0.35rem; align-items: center; font-size: 0.8rem; }
.cp-filter-search { width: 100%; margin-bottom: 0.35rem; background: var(--rz-base-background-color); color: var(--rz-text-color); border: 1px solid var(--rz-base-300); }
.cp-meta { color: var(--rz-text-secondary-color); font-size: 0.8rem; }
.cp-table-wrap { overflow: auto; }
.cp-table { border-collapse: collapse; width: 100%; font-size: 0.8rem; color: var(--rz-text-color); }
.cp-table th { text-align: left; padding: 0.35rem; border-bottom: 2px solid var(--rz-base-300); background: var(--rz-grid-header-background-color); color: var(--rz-text-color); white-space: nowrap; }
.cp-table td { padding: 0.35rem; border-bottom: 1px solid var(--rz-base-300); vertical-align: middle; }
.cp-click { cursor: pointer; }
.cp-click:hover td { background: var(--rz-grid-hover-background-color); }
.cp-addr { font-weight: 600; white-space: nowrap; }
.cp-addr small { display: block; font-weight: 400; color: var(--rz-text-secondary-color); }
.cp-chip { display: inline-flex; align-items: center; border-radius: 11px; padding: 0 0.4rem; font-size: 0.75rem; font-weight: 600; margin: 0.1rem; text-decoration: none; }
.cp-chip-done { background: #1d4f86; color: #fff; }
.cp-chip-prog { background: var(--rz-base-background-color); color: var(--rz-primary); border: 1.5px solid var(--rz-primary); }
.cp-chip-inc { background: #fff6d6; color: #7a5a00; border: 1.5px solid #e0b400; }
.cp-chip-none { color: var(--rz-text-secondary-color); border: 1.5px dashed var(--rz-base-300); background: var(--rz-base-background-color); font-weight: 400; }
.cp-badge { border-radius: 3px; padding: 0.1rem 0.35rem; font-size: 0.75rem; font-weight: 600; display: inline-block; }
.cp-badge.yt { background: color-mix(in srgb, var(--rz-success) 18%, var(--rz-base-background-color)); color: color-mix(in srgb, var(--rz-success) 35%, var(--rz-text-color)); border: 1px solid color-mix(in srgb, var(--rz-success) 45%, var(--rz-base-300)); }
.cp-badge.yc { background: color-mix(in srgb, var(--rz-success) 10%, var(--rz-base-background-color)); color: color-mix(in srgb, var(--rz-success) 35%, var(--rz-text-color)); border: 1px dashed color-mix(in srgb, var(--rz-success) 45%, var(--rz-base-300)); }
.cp-badge.ne { background: color-mix(in srgb, var(--rz-danger) 16%, var(--rz-base-background-color)); color: color-mix(in srgb, var(--rz-danger) 35%, var(--rz-text-color)); border: 1px solid color-mix(in srgb, var(--rz-danger) 45%, var(--rz-base-300)); }
.cp-badge.un { background: color-mix(in srgb, var(--rz-warning) 28%, var(--rz-base-background-color)); color: color-mix(in srgb, var(--rz-warning) 35%, var(--rz-text-color)); border: 1px solid color-mix(in srgb, var(--rz-warning) 45%, var(--rz-base-300)); }
.cp-badge.dr { background: color-mix(in srgb, var(--rz-base-300) 55%, var(--rz-base-background-color)); color: var(--rz-text-secondary-color); border: 1px solid var(--rz-base-300); }
.cp-disp, .cp-src { display: block; color: var(--rz-text-secondary-color); font-size: 0.7rem; }
.cp-ac-no { color: color-mix(in srgb, var(--rz-success) 35%, var(--rz-text-color)); font-weight: 600; }
.cp-ac-yes { color: color-mix(in srgb, var(--rz-danger) 35%, var(--rz-text-color)); font-weight: 600; }
.cp-ac-q { color: color-mix(in srgb, var(--rz-warning) 35%, var(--rz-text-color)); font-weight: 600; }
.cp-life { border-left: 3px solid var(--rz-base-300); padding-left: 0.3rem; color: var(--rz-text-secondary-color); font-style: italic; }
.cp-cmt { cursor: help; }
.cp-pager { display: flex; justify-content: space-between; color: var(--rz-text-secondary-color); font-size: 0.8rem; margin-top: 0.5rem; }
.cp-empty { text-align: center; padding: 1.5rem 0.5rem; color: var(--rz-text-secondary-color); }
.cp-empty b { display: block; color: var(--rz-text-color); margin-bottom: 0.35rem; }