/* Data Monitor page (merged DCD Data Monitor + Zero Point Check).
   Slim 5-column table that NEVER scrolls sideways — everything that would
   widen it (developer, source, units, note) lives in the expanded detail. */
.dm-view-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--spacing-3, 12px);
    border-bottom: 1px solid var(--color-border, #d1d5db);
}

.dm-view-tab {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
    background: transparent;
    color: var(--color-text-secondary, #6b7280);
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
}

.dm-view-tab:hover,
.dm-view-tab--active {
    color: var(--color-text-primary, #111827);
    border-bottom-color: var(--dm-selection-border);
    background: var(--color-bg-tertiary, rgba(127, 127, 127, 0.08));
}

.dm-view-panel[hidden] { display: none; }

.dm-view-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 0 14px;
}

.dm-view-toolbar .input { max-width: 320px; }
.dm-review-date-filters {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3, 12px);
}
.dm-review-date-filters .run-filter-field {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 8px);
    color: var(--color-text-secondary, #6b7280);
    font-size: var(--font-size-xs, 0.75rem);
}
.dm-review-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3, 12px);
    flex-wrap: wrap;
}
.dm-review-history-header h4 { margin: 0; }
.dm-view-toolbar .text-sm { margin-left: auto; }
.dm-market-options { align-items: center; }

.dm-review-detail { gap: 10px; }
.dm-review-history-table { margin-top: 0; }
.dm-review-history-table th,
.dm-review-history-table td { vertical-align: middle; }

.dm-availability-overview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border, #d1d5db);
}
.dm-availability-overview > h4 { margin: 0; }
.dm-availability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
.dm-availability-panel { min-width: 0; }
.dm-availability-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 34px;
}
.dm-availability-panel-heading h5,
.dm-availability-db-heading h5 { margin: 0; font-size: var(--font-size-sm, 0.875rem); }
.dm-availability-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.dm-availability-filters { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.dm-availability-filters:empty { display: none; }
.dm-availability-filter-row { display: grid; grid-template-columns: minmax(100px, 1fr) 66px minmax(86px, 1fr) 28px; gap: 6px; align-items: center; }
.dm-availability-filter-row .select,
.dm-availability-filter-row .input { min-width: 0; width: 100%; height: 32px; padding: 4px 7px; font-size: var(--font-size-xs, 0.75rem); }
.dm-availability-table-scroll {
    height: 508px;
    max-height: 508px;
    overflow: auto;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
}
.dm-availability-table { width: 100%; margin: 0; }
.dm-availability-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-bg-secondary, var(--color-bg-primary, white));
}
.dm-availability-table th,
.dm-availability-table td { vertical-align: middle; }
.dm-availability-date,
.dm-sale-history-date {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary, #2563eb);
    font: inherit;
    cursor: pointer;
}
.dm-availability-date:hover,
.dm-sale-history-date:hover { text-decoration: underline; }
.dm-availability-table td.dm-cell--change,
.dm-availability-table td.dm-cell--fail { font-weight: 600; }
.dm-availability-db-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-primary, #111827);
    cursor: pointer;
}
.dm-availability-db-heading:hover h5 { color: var(--color-primary, #2563eb); }
.dm-availability-db-heading .db-lookup-icon { width: 18px; height: 18px; }
.dm-availability-state { min-height: 56px; padding: 14px 8px; color: var(--color-text-secondary, #6b7280); }
.dm-sale-history { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; }
.dm-sale-history-event { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.dm-sale-history-status { font-size: var(--font-size-xs, 0.75rem); font-weight: 600; }
.dm-sale-history-status--available { color: var(--color-success-dark, #047857); }
.dm-sale-history-status--reserved { color: var(--color-warning-dark, #b45309); }
.dm-sale-history-status--sold { color: var(--color-danger-dark, #dc2626); }
.dm-sale-history-status--not-seen { color: var(--color-text-secondary, #6b7280); }
.dm-sale-history-status--unknown { color: var(--color-text-secondary, #6b7280); }
.dm-sale-history-arrow { color: var(--color-text-secondary, #6b7280); }
.dm-units-history-table th:first-child,
.dm-units-history-table td:first-child { width: 22%; white-space: nowrap; }

/* Focus treatment for the selected unit in the shared CSV comparison modal. */
.project-header__csv-compare-table tbody tr[data-csv-focused="true"] td {
    background: var(--color-bg-tertiary, rgba(127, 127, 127, 0.1)) !important;
}
.project-header__csv-compare-table tbody tr[data-csv-focused="true"] td.project-header__csv-compare-id {
    box-shadow: inset 3px 0 var(--color-primary, #2563eb);
}

.dm-review-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dm-review-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    color: var(--color-text-secondary, #6b7280);
    font-size: var(--font-size-sm, 0.85rem);
}

.dm-review-pagination > span { margin-right: auto; }
.dm-review-pagination .run-history-page-input {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dm-review-pagination .input { width: 72px; }

@media (max-width: 700px) {
    .dm-view-toolbar .text-sm { width: 100%; margin-left: 0; }
    .dm-review-pagination > span { width: 100%; margin-right: 0; }
    .dm-availability-grid { grid-template-columns: 1fr; }
    .dm-availability-filter-row { grid-template-columns: minmax(90px, 1fr) 56px minmax(76px, 1fr) 28px; }
}

.dm-filters {
    position: relative;
    padding: var(--spacing-4, 16px);
    margin-bottom: var(--spacing-4, 16px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dm-filter-settings {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    background: var(--color-gray-100, rgba(127, 127, 127, 0.12));
    color: var(--color-text-secondary, #4b5563);
    cursor: pointer;
}

.dm-filter-settings:hover {
    background: var(--color-gray-200, rgba(127, 127, 127, 0.2));
}

.dm-filter-settings svg {
    width: 16px;
    height: 16px;
}

.dm-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.dm-filter-row--jdes {
    align-items: center;
}

.dm-filter-label {
    display: inline-flex;
    align-items: center;
    min-width: 70px;
    font-weight: 600;
    font-size: var(--font-size-sm, 0.85rem);
    min-height: 28px;
    color: var(--color-text-secondary, #4b5563);
}

.dm-chip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.dm-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border, #d1d5db);
    background: transparent;
    color: var(--color-text-secondary, #4b5563);
    border-radius: var(--radius-md, 8px);
    padding: 4px 12px;
    font-size: var(--font-size-xs, 0.8rem);
    cursor: pointer;
    transition: border-color 0.15s;
}

.dm-chip:hover {
    background: var(--color-bg-tertiary, rgba(127, 127, 127, 0.08));
}

.dm-chip--selected {
    background: var(--dm-selection-bg);
    border-color: var(--dm-selection-border);
    color: var(--dm-selection-text);
}

/* Selected-but-not-filled: ring only (default All before first load). */
.dm-chip--ring {
    background: transparent;
    border: 1px solid var(--dm-selection-border);
    color: var(--color-text-secondary, #4b5563);
    padding: 4px 12px;
}

.dm-chip--selected .dm-chip-count,
.dm-market-label--selected .dm-chip-count {
    opacity: 0.85;
    color: var(--dm-selection-text);
}

/* Active markets are highlighted red, like DCD's :red[...] labels. */
.dm-chip--active-market:not(.dm-chip--selected) { color: #ef4444; border-color: #ef4444; }

.dm-chip-count { opacity: 0.75; }

.dm-filter-controls { align-items: center; }
.dm-filter-controls .input { max-width: 320px; }

/* Markets — country columns (same layout idea as dashboard msf-columns). */
.dm-market-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.dm-market-column {
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.dm-market-group {
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dm-market-group-head {
    font-weight: 600;
    font-size: var(--font-size-sm, 0.85rem);
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--color-border, #d1d5db);
    color: var(--color-text-secondary, #4b5563);
    white-space: nowrap;
}

.dm-market-group-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.dm-market-group--compact .dm-market-group-items {
    display: grid;
    grid-template-rows: repeat(3, 24px);
    row-gap: 2px;
    align-content: start;
}

.dm-market-group--compact .dm-market-label { height: 24px; }

.dm-market-group--split { width: max-content; }

.dm-market-group-items--split {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 12px;
}

.dm-market-group-items-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.dm-market-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    padding: 2px 8px;
    font-size: var(--font-size-xs, 0.8rem);
    background: transparent;
    color: var(--color-text-secondary, #4b5563);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.dm-market-label:hover {
    background: var(--color-bg-tertiary, rgba(127, 127, 127, 0.08));
}

.dm-market-label--active:not(.dm-market-label--ring):not(.dm-market-label--selected) {
    color: var(--color-danger-dark, #dc2626);
}

/* Import non-active only — do not restyle active/important markets. */
.dm-market-label--inactive {
    color: var(--color-text-muted, #9ca3af);
    font-style: italic;
}

.dm-market-label--inactive:not(.dm-market-label--ring):not(.dm-market-label--selected) {
    color: var(--color-text-muted, #9ca3af);
}

.dm-market-label--inactive.dm-market-label--selected {
    font-style: italic;
}

.dm-market-label--ring {
    border: 1px solid var(--dm-selection-border);
    padding: 2px 8px;
}

.dm-market-label--selected {
    background: var(--dm-selection-bg);
    border: 1px solid var(--dm-selection-border);
    color: var(--dm-selection-text);
}

.dm-market-label--selected.dm-market-label--ring {
    padding: 2px 8px;
}

.dm-prompt {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-text-secondary, #6b7280);
}

.dm-loading, .dm-empty {
    padding: 32px;
    text-align: center;
    color: var(--color-text-secondary, #6b7280);
}

/* ── main table: fixed layout, wrapping cells, NO sideways scroll ───────── */

.dm-table-wrap { overflow-x: hidden; }

.dm-table {
    width: 100%;
    table-layout: fixed;
}

.dm-table td {
    vertical-align: top;
    padding-top: 12px;
    padding-bottom: 12px;
    overflow-wrap: break-word;
}

.dm-col-expander { width: 32px; }
.dm-col-project { width: calc(20% + 50px); }
.dm-col-developer { width: 14%; }
.dm-col-market { width: calc(9% + 10px); }
/* Issues gets the lion's share of the width (user request). */
.dm-col-issues { width: auto; }
.dm-col-unit-status { width: 148px; }
.dm-col-notion-status { width: 172px; min-width: 172px; }
/* Keep room for three icons on each row. */
.dm-col-links { width: 112px; }

.dm-row { cursor: pointer; }
.dm-row:hover td { background: var(--color-bg-tertiary, rgba(127, 127, 127, 0.05)); }
.dm-row--important .dm-project-name { color: #ef4444; }
.dm-expander { color: var(--color-text-secondary, #6b7280); }

.dm-links {
    overflow: visible;
    padding-left: 4px;
    padding-right: 4px;
}

.dm-project-cell {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 100%;
}

.dm-project-main {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dm-project-name { font-weight: 600; }

.dm-project-source {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    color: var(--color-text-secondary, #6b7280);
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
    user-select: text;
    cursor: text;
}

.dm-note-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    flex-shrink: 0;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--color-border, #d1d5db);
    background: var(--color-bg-secondary, #fff);
    color: var(--color-text-secondary, #4b5563);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.dm-note-btn--add {
    font-size: 18px;
    font-weight: 600;
}

.dm-note-btn:hover,
.dm-note-btn:focus-visible {
    color: var(--color-text-primary, #111827);
    border-color: var(--color-gray-400, #9ca3af);
    background: var(--color-bg-tertiary, rgba(127, 127, 127, 0.08));
    outline: none;
}

.dm-note-btn:hover::after,
.dm-note-btn:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 70;
    background: var(--color-bg-tertiary, #1f2937);
    color: var(--color-text-primary, #f9fafb);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    padding: 6px 10px;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 400;
    white-space: pre-line;
    width: max-content;
    max-width: 320px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.25));
    pointer-events: none;
}

.dm-note-modal { max-width: 480px; }
.dm-note-label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, #6b7280);
}
.dm-note-input { width: 100%; resize: vertical; min-height: 110px; }

.dm-market-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.dm-market-cell .dm-link-icon--market {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.dm-market-cell .dm-link-icon--market img {
    width: 16px;
    height: 16px;
}

.dm-developer,
.dm-market,
.dm-notion { color: var(--color-text-secondary, #6b7280); }

.dm-notion-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.dm-notion-states {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dm-notion-state {
    color: var(--color-text-secondary, #6b7280);
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.35;
    white-space: nowrap;
    overflow-wrap: normal;
}

.dm-notion-state--warning {
    color: var(--color-warning-dark, #b45309);
}

.dm-notion-state--danger {
    color: var(--color-danger-dark, #dc2626);
}

.dm-notion-state--success {
    color: var(--color-success-dark, #047857);
}

.dm-notion-state--unverified {
    color: var(--color-text-tertiary, #9ca3af);
    font-style: italic;
}

.dm-notion-status {
    display: inline-block;
    max-width: 100%;
    color: var(--color-text-secondary, #6b7280);
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dm-notion-status--removed {
    color: var(--color-danger-dark, #dc2626);
}

.dm-notion-status--loading {
    color: var(--color-text-tertiary, #9ca3af);
    font-style: italic;
}

.dm-notion-status--unavailable {
    color: var(--color-text-tertiary, #9ca3af);
}

.dm-notion-status--failed {
    color: var(--color-warning-dark, #b45309);
    font-style: italic;
}

.dm-link-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.dm-link-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-height: 28px;
}

.dm-link-icon-spacer {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.dm-link-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--color-border, #d1d5db);
    background: var(--color-bg-secondary, #fff);
    color: var(--color-text-secondary, #4b5563);
    text-decoration: none;
    flex-shrink: 0;
    padding: 0;
    cursor: pointer;
}

.dm-link-icon:hover,
.dm-link-icon:focus-visible {
    color: var(--color-text-primary, #111827);
    border-color: var(--color-gray-400, #9ca3af);
    background: var(--color-bg-tertiary, rgba(127, 127, 127, 0.08));
    outline: none;
}

.dm-link-icon--resolve,
.dm-link-icon--resolve:hover,
.dm-link-icon--resolve:focus-visible {
    color: var(--color-danger-dark, #b91c1c);
}

.dm-link-icon svg,
.dm-link-icon img {
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain;
    border-radius: 3px;
}

/* Brand logos: no chrome — smaller mark, vertically centered with boxed icons. */
.dm-link-icon--bare {
    border: none;
    background: transparent;
    padding: 0 5px 0 0;
}

.dm-link-icon--bare:hover,
.dm-link-icon--bare:focus-visible {
    border: none;
    background: transparent;
    opacity: 0.85;
}

.dm-link-icon--bare img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.dm-link-icon:hover::after,
.dm-link-icon:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    /* Right-align: Links is the last column; a centered tip gets clipped by
       .dm-table-wrap { overflow-x: hidden }. */
    left: auto;
    right: 0;
    bottom: calc(100% + 6px);
    transform: none;
    z-index: 70;
    background: var(--color-bg-tertiary, #1f2937);
    color: var(--color-text-primary, #f9fafb);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    padding: 4px 8px;
    font-size: var(--font-size-xs, 0.75rem);
    white-space: nowrap;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.25));
    pointer-events: none;
}

/* ── expanded detail ────────────────────────────────────────────────────── */

.dm-detail-row td {
    background: var(--color-gray-50);
    cursor: default;
}
.dm-detail {
    padding: var(--spacing-4, 16px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dm-detail h4 {
    margin: 4px 0 0;
    font-size: var(--font-size-sm, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary, #6b7280);
}

.dm-detail-note {
    padding: 10px 14px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary, transparent);
    color: #fcba03;
    font-size: var(--font-size-sm, 0.85rem);
    overflow-wrap: anywhere;
}

.dm-meta-label {
    display: block;
    font-size: var(--font-size-xs, 0.7rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary, #6b7280);
    margin-bottom: 2px;
}

.dm-unit-counts {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.4;
    white-space: nowrap;
}

.dm-unit-count {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dm-unit-separator { color: var(--color-text-tertiary, var(--color-text-secondary, #6b7280)); }
.dm-unit-count--available { color: var(--color-success-dark, #047857); }
.dm-unit-count--reserved { color: var(--color-warning-dark, #b45309); }
.dm-unit-count--sold { color: var(--color-danger-dark, #dc2626); }
.dm-unit-count--not-seen { color: var(--color-text-secondary, #6b7280); }
.dm-unit-count--total { font-weight: 600; color: var(--color-text-primary, #111827); }

.dm-detail-issues {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .dm-detail-issues {
        grid-template-columns: 1fr;
    }
}

.dm-detail-issue {
    border-left: 3px solid var(--color-border, #d1d5db);
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    min-width: 0;
}

.dm-detail-issues-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}

.dm-issue-data {
    font-size: var(--font-size-xs, 0.75rem);
    max-height: 200px;
    overflow: auto;
    background: var(--color-bg-secondary, rgba(127, 127, 127, 0.08));
    padding: 8px 10px;
    border-radius: var(--radius-md, 6px);
    margin: 0;
    max-width: 100%;
}

.dm-zp-file {
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
    padding: 10px;
    margin-bottom: 8px;
    background: var(--color-gray-50);
}

.dm-zp-file-body {
    background: var(--color-gray-50);
}

.dm-zp-file-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dm-zp-file-head code { flex: 1; font-size: var(--font-size-xs, 0.75rem); word-break: break-all; }

.dm-zp-reasons { font-size: var(--font-size-sm, 0.85rem); margin-top: 8px; }
.dm-zp-reasons ul { margin: 4px 0 0 18px; }

/* The raw failed CSV is inherently wide — it scrolls inside its own box so
   the page and main table never scroll sideways. */
.dm-zp-table-wrap { margin-top: 8px; }
.dm-zp-table { font-size: var(--font-size-xs, 0.75rem); }

/* Cell highlighting — DCD SIMPLE_CHANGE_STYLE / FAIL_CHANGE_STYLE,
   tuned for visible contrast on both light/dark page backgrounds. */
:root[data-theme="light"] {
    --dm-selection-border: #991b1b;
    --dm-selection-bg: color-mix(in srgb, var(--dm-selection-border) 22%, white);
    --dm-selection-text: #7f1d1d;
    --dm-cell-change-bg: var(--color-warning-100, #fef3c7);
    --dm-cell-change-fg: var(--color-warning-800, #92400e);
    --dm-cell-fail-bg: #fecaca;
    --dm-cell-fail-fg: #7f1d1d;
}

:root[data-theme="dark"] {
    --dm-selection-border: #dc2626;
    --dm-selection-bg: color-mix(in srgb, var(--dm-selection-border) 30%, var(--color-bg-secondary));
    --dm-selection-text: #fca5a5;
    /* Subtle blue-grey lift from site surfaces + primary tint (similar to #232334). */
    --dm-cell-change-bg: color-mix(in srgb, var(--color-primary) 11%, var(--color-bg-secondary));
    --dm-cell-change-fg: var(--color-text-primary, #f9fafb);
    --dm-cell-fail-bg: #610000;
    --dm-cell-fail-fg: #ffffff;
}

/* Generic fallbacks when used outside .dm-zp-table */
.dm-cell--change {
    background-color: var(--dm-cell-change-bg, #fef3c7);
    color: var(--dm-cell-change-fg, inherit);
}

.dm-cell--fail {
    background-color: var(--dm-cell-fail-bg, #fecaca);
    color: var(--dm-cell-fail-fg, inherit);
    font-weight: 600;
}

/* Beat generic .table hover/background rules — highlights must stay visible. */
.table.dm-zp-table tbody tr:hover td:not(.dm-cell--change):not(.dm-cell--fail) {
    background-color: var(--color-gray-100);
}

.table.dm-zp-table td.dm-cell--change {
    background-color: var(--dm-cell-change-bg, #fef3c7) !important;
    color: var(--dm-cell-change-fg, var(--color-text-primary));
}

.table.dm-zp-table td.dm-cell--fail {
    background-color: var(--dm-cell-fail-bg, #fecaca) !important;
    color: var(--dm-cell-fail-fg, var(--color-text-primary));
    font-weight: 600;
}

.table.dm-zp-table tbody tr:hover td.dm-cell--change {
    background-color: var(--dm-cell-change-bg, #fef3c7) !important;
}

.table.dm-zp-table tbody tr:hover td.dm-cell--fail {
    background-color: var(--dm-cell-fail-bg, #fecaca) !important;
}

.dm-error { color: #ef4444; }