/* ===========================================
   TABLES.CSS - CENTRALIZED TABLE STYLES
   For Dash DataTables
   Uses UI Kit color palette
   =========================================== */

/* === CSS VARIABLES FOR TABLES === */
:root {
    /* Table Colors - Light Mode */
    --table-bg: #ffffff;
    --table-header-bg: #E9DCCB;
    --table-header-text: #4a4a4a;
    --table-cell-text: #4a4a4a;
    --table-border-color: #d4c4b0;
    --table-row-hover: #f5ebe0;
    --table-row-selected: #dceef3;
    --table-row-stripe: #faf7f4;
    
    /* Filter/Input Colors */
    --table-input-bg: #ffffff;
    --table-input-border: #d4c4b0;
    --table-input-text: #4a4a4a;
    --table-input-placeholder: #999999;
    
    /* Pagination Colors */
    --table-pagination-text: #4a4a4a;
    --table-pagination-active-bg: var(--color-slate, #92B7C2);
    --table-pagination-active-text: #ffffff;
}

/* === BASE TABLE CONTAINER === */
.dash-table-container {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: none !important;
    outline: none !important;
}

/* === TABLE WRAPPER === */
.dash-spreadsheet-container {
    border-radius: 12px;
    overflow: hidden;
    border: none !important;
    outline: none !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner {
    border-radius: 12px;
    border: none !important;
    outline: none !important;
}

/* === EMPTY TABLE STATE === */
/* Target the specific empty/no-data classes */
.dash-spreadsheet-inner.dash-empty-01,
.dash-spreadsheet-inner.dash-no-data,
.dash-spreadsheet-container.dash-empty-01,
.dash-spreadsheet-container.dash-no-data,
.dash-spreadsheet.dash-empty-01,
.dash-spreadsheet.dash-no-data,
div.dash-spreadsheet-inner.dash-spreadsheet.dash-empty-01.dash-no-data,
div.dash-spreadsheet-inner.dash-spreadsheet.dash-empty-01.dash-no-data.dash-fill-width {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove thick border when table is empty/filtered to no results */
.dash-table-container,
.dash-spreadsheet-container,
.dash-spreadsheet-inner,
.dash-spreadsheet-container .dash-spreadsheet-inner,
.dash-spreadsheet-container .dash-spreadsheet-inner table,
.dash-spreadsheet-container .dash-spreadsheet-inner tbody,
.dash-spreadsheet-container .dash-spreadsheet-inner tbody:empty {
    border: none !important;
    outline: none !important;
    box-shadow: none;
}

/* Target the cell-table which has inline border styles */
.dash-spreadsheet-container .cell-table,
.dash-spreadsheet-inner .cell-table,
table.cell-table {
    border: none !important;
    border-collapse: collapse !important;
    outline: none !important;
}

/* Target dt-table-container__row elements */
.dt-table-container__row,
.dt-table-container__row-0,
.dt-table-container__row-1,
div[class*="dt-table-container__row"] {
    border: none !important;
    outline: none !important;
}

/* Target the cell elements */
.dash-spreadsheet-inner .cell,
.dash-spreadsheet-inner div[class*="cell-"],
.dash-fixed-content {
    border: none !important;
    outline: none !important;
}

/* Override the thick gray border on empty/no-data state */
.dash-no-data,
.dash-empty-01,
.dash-spreadsheet-inner.dash-no-data,
.dash-spreadsheet-container.dash-no-data {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-width: 0 !important;
}

/* Re-apply only the subtle shadow to the main container */
.dash-table-container {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Maintain rounded corners when empty */
.dash-table-container:empty,
.dash-spreadsheet-container:empty,
.dash-spreadsheet-inner:empty {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Remove any focus/active borders on the table elements */
.dash-spreadsheet-container .dash-spreadsheet-inner table,
.dash-spreadsheet-container .dash-spreadsheet-inner table:focus,
.dash-spreadsheet-container .dash-spreadsheet-inner table:active,
.dash-spreadsheet-inner:focus,
.dash-spreadsheet-inner:active,
.dash-spreadsheet-container:focus,
.dash-spreadsheet-container:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* === REMOVE TABLE FOCUS/SELECTION OUTLINES === */
/* This removes the border/stroke that appears when clicking elements */
.dash-spreadsheet-container .dash-spreadsheet-inner table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Remove ALL focus-related borders that cause table to "shrink" */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input-active,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.cell--selected,
.dash-table-container.focused,
.dash-spreadsheet-container.focused,
.dash-spreadsheet-inner.focused {
    box-shadow: none !important;
    outline: none !important;
}

/* Remove the "focused" box shadow on cells */
.dash-spreadsheet-container .dash-spreadsheet-inner .input-active,
.dash-spreadsheet-container .dash-spreadsheet-inner td.focused,
.dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected,
.dash-spreadsheet-container .dash-spreadsheet-inner .dash-select-cell,
.dash-spreadsheet-container .focused,
.dash-spreadsheet-inner .focused {
    box-shadow: none !important;
    outline: none !important;
}

/* Remove active cell highlight completely */
.dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell.cell--active,
.dash-spreadsheet-container .dash-spreadsheet-inner td.focused,
.dash-spreadsheet-inner td[data-dash-column].focused,
td.dash-cell.focused {
    box-shadow: none !important;
    outline: none !important;
}

/* If Dash applies a special focus border to the active cell, normalize it back to the table border color */
.dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected,
.dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell.cell--active,
.dash-spreadsheet-container .dash-spreadsheet-inner td.focused,
.dash-spreadsheet-container .dash-spreadsheet-inner td.selected {
    border-color: var(--table-border-color) !important;
}

/* Target the table container focus state that causes shrinking */
.dash-table-container:focus,
.dash-table-container:focus-within,
.dash-table-container:focus-visible,
.dash-spreadsheet-container:focus,
.dash-spreadsheet-container:focus-within,
.dash-spreadsheet-container:focus-visible,
.dash-spreadsheet-inner:focus,
.dash-spreadsheet-inner:focus-within,
.dash-spreadsheet-inner:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove any inset borders/shadows on focus */
.dash-table-container *:focus,
.dash-table-container *:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
}

/* === TABLE BORDERS === */
.dash-spreadsheet-container .dash-spreadsheet-inner *,
.dash-spreadsheet-container .dash-spreadsheet-inner *:before,
.dash-spreadsheet-container .dash-spreadsheet-inner *:after {
    border-color: var(--table-border-color) !important;
}

/* === TABLE HEADER === */
.dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--table-border-color) !important;
}

/* Add gap between column name and sort arrows */
.dash-spreadsheet-container .dash-spreadsheet-inner th .column-header--sort,
.dash-spreadsheet-container .dash-spreadsheet-inner th .dash-header-column {
    gap: 8px !important;
}

/* Alternative: target the header cell content div */
.dash-spreadsheet-container .dash-spreadsheet-inner th > div {
    gap: 8px !important;
}

/* Round the top corners of first/last header cells */
.dash-spreadsheet-container .dash-spreadsheet-inner tr:first-child th:first-child {
    border-top-left-radius: 20px !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner tr:first-child th:last-child {
    border-top-right-radius: 20px !important;
}

/* Round the bottom corners of last row cells */
.dash-spreadsheet-container .dash-spreadsheet-inner tbody tr:last-child td:first-child {
    border-bottom-left-radius: 20px !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner tbody tr:last-child td:last-child {
    border-bottom-right-radius: 20px !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner th .column-header-name {
    color: var(--table-header-text) !important;
}

/* === TABLE CELLS === */
.dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: var(--table-bg) !important;
    color: var(--table-cell-text) !important;
    font-size: 0.95rem !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--table-border-color) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Ensure inner cell value container also clips text */
.dash-spreadsheet-container .dash-spreadsheet-inner td .dash-cell-value {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}

/* === STRIPED ROWS === */
.dash-spreadsheet-container .dash-spreadsheet-inner tbody tr:nth-child(even) td {
    background-color: var(--table-row-stripe) !important;
}

/* === ROW HOVER === */
.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
    background-color: var(--table-row-hover) !important;
}

/* === SELECTED ROW === */
.dash-spreadsheet-container .dash-spreadsheet-inner tr.row-selected td {
    background-color: var(--table-row-selected) !important;
}

/* === FILTER INPUTS === */
.dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]) {
    background-color: var(--table-input-bg) !important;
    color: var(--table-input-text) !important;
    border: 1px solid var(--table-input-border) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 0.875rem !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]):focus {
    border-color: var(--color-slate, #92B7C2) !important;
    box-shadow: 0 0 0 2px rgba(146, 183, 194, 0.2) !important;
    outline: none !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner input::placeholder {
    color: var(--table-input-placeholder) !important;
    font-style: italic;
}

/* === FILTER CASE-SENSITIVE TOGGLE (Aa button) === */
/* Classes: dash-filter--case--sensitive (active) / dash-filter--case--insensitive (inactive) */

/* Inactive state - insensitive (default) */
.dash-spreadsheet-container input.dash-filter--case.dash-filter--case--insensitive,
input.dash-filter--case.dash-filter--case--insensitive,
.dash-spreadsheet-container input[type="button"].dash-filter--case.dash-filter--case--insensitive {
    opacity: 1 !important;
    background-color: #f5f5f5 !important;
    color: #666666 !important;
    border: 1px solid var(--table-input-border) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: auto !important;
    width: auto !important;
    position: relative !important;
    z-index: 10 !important;
    margin-right: 8px !important;
}

/* Hover state */
.dash-spreadsheet-container input.dash-filter--case:hover,
input.dash-filter--case:hover {
    opacity: 1 !important;
    background-color: #e0e0e0 !important;
    color: #333333 !important;
}

/* Active/highlighted state - has --sensitive class */
.dash-spreadsheet-container input.dash-filter--case.dash-filter--case--sensitive,
input.dash-filter--case.dash-filter--case--sensitive,
.dash-spreadsheet-container input[type="button"].dash-filter--case.dash-filter--case--sensitive,
input[type="button"].dash-filter--case.dash-filter--case--sensitive {
    opacity: 1 !important;
    background-color: #92B7C2 !important;
    color: #ffffff !important;
    border: 1px solid #6E868D !important;
    border-color: #6E868D !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
    min-width: auto !important;
    width: auto !important;
    position: relative !important;
    z-index: 10 !important;
    margin-right: 8px !important;
}

/* Remove focus outline that creates brown stroke around table */
.dash-spreadsheet-container:focus,
.dash-spreadsheet-container:focus-within,
.dash-spreadsheet-inner:focus,
.dash-spreadsheet-inner:focus-within,
.dash-table-container:focus,
.dash-table-container:focus-within,
.dash-spreadsheet-container *:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove any overlay/veil on the filter row - AGGRESSIVE */
.dash-spreadsheet-container .dash-filter,
.dash-spreadsheet-container .dash-header,
.dash-spreadsheet-container tr.dash-filter,
.dash-spreadsheet-container tr.dash-filter td,
.dash-spreadsheet-container tr.dash-filter th {
    position: relative !important;
    overflow: visible !important;
}

/* Kill ALL pseudo-elements that might create veil */
.dash-spreadsheet-container .dash-filter::before,
.dash-spreadsheet-container .dash-filter::after,
.dash-spreadsheet-container .dash-header::before,
.dash-spreadsheet-container .dash-header::after,
.dash-spreadsheet-container tr.dash-filter::before,
.dash-spreadsheet-container tr.dash-filter::after,
.dash-spreadsheet-container tr.dash-filter td::before,
.dash-spreadsheet-container tr.dash-filter td::after,
.dash-spreadsheet-container .dash-cell::before,
.dash-spreadsheet-container .dash-cell::after,
.dash-spreadsheet-container td::before,
.dash-spreadsheet-container td::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Remove cell focus/selection styling that may cause the veil */
.dash-spreadsheet-container .dash-cell.focused,
.dash-spreadsheet-container .dash-cell.selected,
.dash-spreadsheet-container td.focused,
.dash-spreadsheet-container td.selected,
.dash-spreadsheet-container th.focused,
.dash-spreadsheet-container th.selected,
.dash-spreadsheet-container .cell--selected,
.dash-spreadsheet-container .focused {
    box-shadow: none !important;
    outline: none !important;
}

/* Make sure filter input wrapper doesn't cover the Aa button */
.dash-spreadsheet-container .dash-filter .dash-cell,
.dash-spreadsheet-container tr.dash-filter td,
.dash-spreadsheet-container .dash-input-cell-value-container,
.dash-spreadsheet-container .cell-value-shadow {
    overflow: visible !important;
    position: relative !important;
}

/* The cell-value-shadow is often the culprit for veils */
.dash-spreadsheet-container .cell-value-shadow,
.dash-spreadsheet-container .dash-cell-value-shadow {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ensure Aa buttons are always clickable */
.dash-spreadsheet-container input.dash-filter--case {
    pointer-events: auto !important;
    z-index: 100 !important;
}

/* === SORT ICONS === */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th .sort {
    color: var(--table-header-text) !important;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th .sort:hover {
    opacity: 1;
}

/* === PAGINATION === */
.dash-table-container .previous-next-container {
    padding: 12px 16px !important;
    background-color: var(--table-bg) !important;
    border-top: 1px solid var(--table-border-color) !important;
}

.dash-table-container .previous-next-container .page-number,
.dash-table-container .previous-next-container .last-page,
.dash-table-container .previous-next-container .first-page,
.dash-table-container .previous-next-container .previous-page,
.dash-table-container .previous-next-container .next-page {
    color: var(--table-pagination-text) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    margin: 0 2px !important;
    transition: all 0.2s ease !important;
}

.dash-table-container .previous-next-container .page-number:hover,
.dash-table-container .previous-next-container .last-page:hover,
.dash-table-container .previous-next-container .first-page:hover,
.dash-table-container .previous-next-container .previous-page:hover,
.dash-table-container .previous-next-container .next-page:hover {
    background-color: var(--table-row-hover) !important;
}

.dash-table-container .previous-next-container .page-number.current {
    background-color: var(--table-pagination-active-bg) !important;
    color: var(--table-pagination-active-text) !important;
    font-weight: 600 !important;
}

/* === CHECKBOX STYLING === */
.dash-spreadsheet-container .dash-spreadsheet-inner input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-slate, #92B7C2);
}

/* === EDITABLE CELLS === */
.dash-spreadsheet-container .dash-spreadsheet-inner td.cell--editable {
    cursor: text;
}

.dash-spreadsheet-container .dash-spreadsheet-inner td.cell--editable:hover {
    background-color: var(--table-row-hover) !important;
}

/* === NO DATA MESSAGE === */
.dash-table-container .dash-spreadsheet-container .dash-no-data {
    color: var(--table-input-placeholder);
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* ===========================================
   DARK MODE OVERRIDES
   =========================================== */

.dark-theme {
    /* Table Colors - Dark Mode */
    --table-bg: #2d2d2d;
    --table-header-bg: #3a3a3a;
    --table-header-text: #e0e0e0;
    --table-cell-text: #e0e0e0;
    --table-border-color: #444444;
    --table-row-hover: #404040;
    --table-row-selected: #3d5a63;
    --table-row-stripe: #333333;
    
    /* Filter/Input Colors - Dark Mode */
    --table-input-bg: #2d2d2d;
    --table-input-border: #555555;
    --table-input-text: #e0e0e0;
    --table-input-placeholder: #888888;
    
    /* Pagination Colors - Dark Mode */
    --table-pagination-text: #e0e0e0;
    --table-pagination-active-bg: #6E868D;
}

/* Dark mode specific overrides */
.dark-theme .dash-table-container {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th .sort {
    color: #e0e0e0 !important;
}

.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th .sort:hover {
    color: #ffffff !important;
}

.dark-theme .dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]):focus {
    border-color: #6E868D !important;
    box-shadow: 0 0 0 2px rgba(110, 134, 141, 0.3) !important;
}

/* Dark mode filter toggle */
.dark-theme .dash-spreadsheet-container input.dash-filter--case,
.dark-theme input.dash-filter--case {
    opacity: 1 !important;
    border-color: #555555 !important;
    color: #aaaaaa !important;
    background-color: #3a3a3a !important;
}

.dark-theme .dash-spreadsheet-container input.dash-filter--case:hover,
.dark-theme input.dash-filter--case:hover {
    opacity: 1 !important;
    background-color: #4a4a4a !important;
    color: #e0e0e0 !important;
}

/* Dark mode active state - has --sensitive class */
.dark-theme .dash-spreadsheet-container input.dash-filter--case.dash-filter--case--sensitive,
.dark-theme input.dash-filter--case.dash-filter--case--sensitive {
    opacity: 1 !important;
    background-color: #6E868D !important;
    color: #ffffff !important;
    border-color: #5a7078 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Dark mode - remove selection/focus outlines */
.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected,
.dark-theme .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.cell--selected,
.dark-theme .dash-spreadsheet-container .dash-spreadsheet-inner td.focused,
.dark-theme .dash-spreadsheet-container .dash-spreadsheet-inner .dash-select-cell {
    box-shadow: none !important;
    outline: none !important;
}

/* === NO LINGERING ACTIVE CELL HIGHLIGHT === */
/* If Dash keeps an active/selected cell internally, force it to render like a normal cell. */
.dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected,
.dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell.cell--active,
.dash-spreadsheet-container .dash-spreadsheet-inner td.focused,
.dash-spreadsheet-container .dash-spreadsheet-inner td.selected {
    box-shadow: none !important;
    outline: none !important;
    border-color: var(--table-border-color) !important;
    background-image: none !important;
}

/* ===========================================
   MATERIALS CATALOG — NATIVE OPTION INPUT GRID (MCAT-ADMIN-9 Phase 2)
   The manual option editor is a plain HTML table of dbc.Input / dbc.Switch
   controls (no dash_table), so it does not need the read-only table rules.
   =========================================== */

.mc-option-grid {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.5rem;
}

.mc-option-grid th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--table-header-text, #4a4a4a);
    font-weight: 600;
    padding: 4px 6px;
    border-bottom: 1px solid var(--table-border-color, #d4c4b0);
    white-space: nowrap;
}

.mc-option-grid td {
    padding: 3px 6px;
    vertical-align: middle;
    border-bottom: 1px solid var(--table-row-stripe, #faf7f4);
}

/* Keep every option row the same height. Without this, the read-only Option ID
   / Label source cells wrap onto a second line (e.g. "Type-metallic") and make
   some rows taller than others. A uniform row height + no-wrap on those cells
   keeps the vertical rhythm consistent; the grid wrapper scrolls horizontally
   if content is wide. */
.mc-option-grid tbody td {
    height: 46px;
}

.mc-option-grid tbody td.mc-option-grid-meta {
    white-space: nowrap;
}

.mc-option-grid td .form-control {
    min-width: 90px;
    font-size: 0.85rem;
    padding: 4px 8px;
}

.mc-option-grid td .form-control[type="number"] {
    min-width: 64px;
    max-width: 80px;
}

.mc-option-grid-select,
.mc-option-grid-switch,
.mc-option-grid-handle {
    text-align: center;
}

.mc-drag-handle {
    cursor: grab;
    color: #b9a98f;
    user-select: none;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}

.mc-drag-handle:active {
    cursor: grabbing;
}

.mc-option-grid tbody tr.mc-dragging {
    opacity: 0.5;
    background-color: var(--table-row-hover, #f5ebe0);
}

.mc-option-grid .form-switch {
    margin: 0;
    min-height: auto;
    display: flex;
    justify-content: center;
}

.mc-option-grid-wrap {
    overflow-x: auto;
}

/* Materials catalog compatibility checklist spacing */
.mc-compatibility-checklist {
    --mc-check-gap-x: 0.9rem;
}

.mc-compatibility-checklist .form-check {
    margin-bottom: 0.35rem;
}

.mc-compatibility-checklist .form-check-input {
    margin-top: 0.1rem;
}

.mc-compatibility-checklist .form-check-label {
    margin-left: 0.15rem;
    margin-right: var(--mc-check-gap-x);
}

/* ===========================================
   MATERIALS CATALOG - PAGE-SCOPED THEME STYLING
   =========================================== */

.materials-catalog-page .mc-catalog-controls-row,
.materials-catalog-page .mc-action-row,
.materials-catalog-page .mc-catalog-tabs,
.materials-catalog-page .mc-manual-editor-shell,
.materials-catalog-page .mc-provider-shell,
.materials-catalog-page .mc-provider-panel,
.materials-catalog-page .mc-status-card {
    border-radius: 12px;
}

.materials-catalog-page .mc-action-row .btn-dd {
    margin-top: 0.125rem;
}

.materials-catalog-page .manual-editor-container.mc-manual-editor-shell,
.materials-catalog-page .mc-provider-shell,
.materials-catalog-page .mc-provider-panel,
.materials-catalog-page .mc-status-card,
.materials-catalog-page .mc-compatibility-preview {
    background: rgba(235, 220, 203, 0.2);
    border: 1px solid var(--color-beige-dark, #BBA998);
    color: var(--text-color, #212529);
}

/* Tab panel that wraps the field cards. Warm it to a soft cream so the white
   field cards read as raised surfaces instead of merging into a flat white
   slab. */
.materials-catalog-page .mc-panel-card {
    background-color: #f7eee2;
    border: 1px solid var(--color-beige-dark, #BBA998);
    border-radius: 14px;
}

/* The editor stack sits directly inside the cream panel now, so drop its own
   tint/border to avoid a muddy beige-on-cream double layer. */
.materials-catalog-page .manual-editor-container.mc-manual-editor-shell {
    background: transparent;
    border: none;
}

/* Field cards: a warm off-white (not stark white) with a clear lift so they
   read as raised, distinct surfaces on the cream panel instead of flat boxes. */
.materials-catalog-page .mc-field-card,
.materials-catalog-page .mc-readonly-field-card {
    background: #fffdfa;
    border: 1px solid rgba(187, 169, 152, 0.55);
    color: var(--text-color, #212529);
    box-shadow: 0 2px 6px rgba(117, 105, 95, 0.16);
}

.materials-catalog-page .mc-field-card .card-body,
.materials-catalog-page .mc-provider-panel {
    padding: 0.75rem;
}

.materials-catalog-page .mc-field-card,
.materials-catalog-page .mc-compatibility-preview,
.materials-catalog-page .mc-compatibility-rule-card,
.materials-catalog-page .mc-readonly-field-card,
.materials-catalog-page .mc-readonly-compatibility,
.materials-catalog-page .mc-readonly-option-row {
    border-radius: 10px;
}

.materials-catalog-page .mc-readonly-option-row {
    background-color: rgba(235, 220, 203, 0.12);
}

.materials-catalog-page .mc-readonly-option-row pre,
.materials-catalog-page .mc-compatibility-preview pre {
    background-color: rgba(255, 255, 255, 0.45);
    color: var(--text-color, #212529);
    border: 1px solid rgba(185, 169, 159, 0.45);
    border-radius: 8px;
    padding: 0.45rem;
}

.materials-catalog-page .mc-option-grid-wrap {
    background-color: transparent;
}

.materials-catalog-page .mc-option-grid th,
.materials-catalog-page .mc-option-grid td {
    color: var(--table-cell-text, #4a4a4a);
}

/* Route the option-grid text inputs through the table-input tokens so they
   theme with the rest of the page. Without this they fall back to the
   CERULEAN white background while custom.css forces the text to --text-color
   (light in dark mode), leaving the fields unreadable. */
.materials-catalog-page .mc-option-grid td .form-control {
    background-color: var(--table-input-bg, #ffffff);
    color: var(--table-input-text, #4a4a4a);
    border: 1px solid var(--table-input-border, #d4c4b0);
}

.materials-catalog-page .mc-option-grid td .form-control::placeholder {
    color: var(--table-input-placeholder, #999999);
}

.materials-catalog-page .mc-field-actions {
    gap: 0.75rem;
    align-items: center;
}

.materials-catalog-page .mc-field-actions .btn-dd {
    margin-bottom: 0.25rem;
}

.materials-catalog-page .mc-compatibility-title {
    margin-top: 1rem;
    margin-bottom: 0.55rem;
}

/* Compatibility rules GUI summary (replaces the raw JSON preview) */
.materials-catalog-page .mc-compatibility-summary {
    padding: 0.85rem 1rem;
}

.materials-catalog-page .mc-compatibility-summary-title {
    font-size: 0.95rem;
    margin-bottom: 0.7rem;
}

.materials-catalog-page .mc-compatibility-summary-list {
    display: grid;
    row-gap: 0.55rem;
}

.materials-catalog-page .mc-compat-summary-card {
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
    border-left-width: 4px;
}

/* Depth accent: root (parent-most, e.g. Material) reads strongest; nested
   rules render structurally inside their parent card (see .mc-compat-children)
   and get a lighter slate bar so the dependency hierarchy is visible. */
.materials-catalog-page .mc-compat-root {
    border-left-color: var(--color-brown, #8B7969);
}

.materials-catalog-page .mc-compat-child {
    border-left-color: var(--color-slate, #92B7C2);
}

/* Child rules are nested inside the parent rule that allows them, so the
   containment itself shows the hierarchy. The container indents them and a
   left rail ties the group back to its parent. */
.materials-catalog-page .mc-compat-children {
    display: grid;
    row-gap: 0.5rem;
    margin: 0.55rem 0.7rem 0.7rem 1.4rem;
    padding-left: 0.85rem;
    border-left: 2px solid rgba(146, 183, 194, 0.5);
}

.dark-theme .materials-catalog-page .mc-compat-children {
    border-left-color: #4a4a4a;
}

/* Source block: the option this rule is keyed on. */
.materials-catalog-page .mc-compat-source {
    padding: 0.6rem 0.85rem;
}

.materials-catalog-page .mc-compat-eyebrow {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-color-muted, #6c757d);
    margin-bottom: 0.1rem;
}

.materials-catalog-page .mc-compat-source-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.materials-catalog-page .mc-compat-source-value {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
}

.materials-catalog-page .mc-compat-id {
    font-size: 0.72rem;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--text-color-muted, #6c757d);
}

/* Allows block: visually separated result of the rule. */
.materials-catalog-page .mc-compat-allows {
    padding: 0.55rem 0.85rem 0.65rem;
    border-top: 1px solid rgba(185, 169, 159, 0.45);
    background-color: rgba(146, 183, 194, 0.08);
}

.materials-catalog-page .mc-compat-allows-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-color-muted, #6c757d);
    margin-bottom: 0.4rem;
}

.materials-catalog-page .mc-compat-allow-list {
    display: grid;
    row-gap: 0.4rem;
}

.materials-catalog-page .mc-compat-allow-row {
    display: grid;
    grid-template-columns: minmax(64px, max-content) auto 1fr;
    align-items: center;
    gap: 0.5rem;
}

.materials-catalog-page .mc-compat-target-field {
    font-size: 0.85rem;
    font-weight: 600;
}

.materials-catalog-page .mc-compat-arrow {
    color: var(--text-color-muted, #6c757d);
    font-size: 0.9rem;
}

.materials-catalog-page .mc-compat-pill-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.materials-catalog-page .mc-compat-pill {
    display: inline-block;
    font-size: 0.78rem;
    line-height: 1.25;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background-color: rgba(146, 183, 194, 0.22);
    border: 1px solid var(--color-slate, #92B7C2);
    color: var(--text-color, #212529);
}

.dark-theme .materials-catalog-page .mc-compat-allows {
    border-top-color: #3f3f3f;
    background-color: rgba(146, 183, 194, 0.06);
}

.dark-theme .materials-catalog-page .mc-compat-pill {
    background-color: rgba(146, 183, 194, 0.18);
    border-color: var(--color-slate-dark, #6E868D);
    color: #e0e0e0;
}

.materials-catalog-page .mc-compatibility-list {
    display: grid;
    row-gap: 0.65rem;
}

.materials-catalog-page .mc-compatibility-rule-card {
    border: 1px solid rgba(185, 169, 159, 0.6);
    background: rgba(235, 220, 203, 0.22);
    color: var(--text-color, #212529);
}

.materials-catalog-page .mc-label-catalog-select .Select-control,
.materials-catalog-page .mc-catalog-select .Select-control,
.materials-catalog-page .mc-catalog-select .dash-dropdown .Select-control {
    border: 1px solid var(--color-beige-dark, #BBA998) !important;
    background-color: #fff !important;
    min-height: 38px;
    border-radius: 10px;
}

.materials-catalog-page .mc-catalog-select .Select-placeholder,
.materials-catalog-page .mc-catalog-select .Select-value-label,
.materials-catalog-page .mc-catalog-select .Select-value,
.materials-catalog-page .mc-label-catalog-select .Select-placeholder,
.materials-catalog-page .mc-label-catalog-select .Select-value-label,
.materials-catalog-page .mc-label-catalog-select .Select-value,
.materials-catalog-page .mc-catalog-select .Select-input > input,
.materials-catalog-page .mc-label-catalog-select .Select-input > input {
    color: var(--text-color, #212529) !important;
}

.materials-catalog-page .mc-catalog-select .Select-arrow,
.materials-catalog-page .mc-label-catalog-select .Select-arrow {
    border-color: #555;
}

.materials-catalog-page .mc-catalog-select .Select-menu-outer,
.materials-catalog-page .mc-label-catalog-select .Select-menu-outer {
    background-color: #fff !important;
    border: 1px solid var(--color-beige-dark, #BBA998) !important;
    color: var(--text-color, #212529);
}

.materials-catalog-page .mc-catalog-select .Select-option,
.materials-catalog-page .mc-label-catalog-select .Select-option {
    color: var(--text-color, #212529);
    background-color: transparent;
}

.materials-catalog-page .mc-catalog-select .Select-option.is-focused,
.materials-catalog-page .mc-label-catalog-select .Select-option.is-focused,
.materials-catalog-page .mc-catalog-select .Select-option:hover,
.materials-catalog-page .mc-label-catalog-select .Select-option:hover {
    background-color: rgba(184, 165, 152, 0.22);
}

.dark-theme .materials-catalog-page .mc-field-card,
.dark-theme .materials-catalog-page .mc-readonly-field-card,
.dark-theme .materials-catalog-page .mc-provider-panel,
.dark-theme .materials-catalog-page .mc-provider-shell,
.dark-theme .materials-catalog-page .mc-status-card,
.dark-theme .materials-catalog-page .mc-manual-editor-shell,
.dark-theme .materials-catalog-page .mc-compatibility-preview,
.dark-theme .materials-catalog-page .mc-compatibility-rule-card,
.dark-theme .materials-catalog-page .mc-readonly-option-row {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0;
}

/* Dark mode: recede the panel behind the field cards and keep the editor shell
   transparent so the #2a2a2a cards read as raised surfaces. Use the full border
   shorthand so the light-mode beige border does not bleed through. */
.dark-theme .materials-catalog-page .mc-panel-card {
    background-color: #1e1e1e;
    border: 1px solid #343434;
}

.dark-theme .materials-catalog-page .manual-editor-container.mc-manual-editor-shell {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Cards: nudge a touch lighter than the shared #2a2a2a and add a soft shadow so
   they don't sit flat against the recessed panel. */
.dark-theme .materials-catalog-page .mc-field-card,
.dark-theme .materials-catalog-page .mc-readonly-field-card {
    background-color: #2d2d2d !important;
    border-color: #3f3f3f !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.dark-theme .materials-catalog-page .mc-readonly-option-row pre,
.dark-theme .materials-catalog-page .mc-compatibility-preview pre {
    background-color: #3a3a3a !important;
    border-color: #4a4a4a !important;
    color: #e0e0e0;
}

.dark-theme .materials-catalog-page .mc-field-card .text-muted,
.dark-theme .materials-catalog-page .mc-readonly-field-card .text-muted,
.dark-theme .materials-catalog-page .mc-manual-editor-shell .text-muted,
.dark-theme .materials-catalog-page .mc-provider-shell .text-muted,
.dark-theme .materials-catalog-page .mc-provider-panel .text-muted {
    color: #d1d5db !important;
}

.dark-theme .materials-catalog-page .mc-compatibility-list .mc-compatibility-rule-card {
    background-color: #323232 !important;
    border-color: #4d4d4d !important;
}

.dark-theme .materials-catalog-page .mc-label-catalog-select .Select-control,
.dark-theme .materials-catalog-page .mc-catalog-select .Select-control,
.dark-theme .materials-catalog-page .mc-catalog-select .dash-dropdown .Select-control,
.dark-theme .materials-catalog-page .mc-label-catalog-select .dash-dropdown .Select-control {
    background-color: #2e2e2e !important;
    border-color: #4f4f4f !important;
    color: #e0e0e0 !important;
}

.dark-theme .materials-catalog-page .mc-catalog-select .Select-arrow,
.dark-theme .materials-catalog-page .mc-label-catalog-select .Select-arrow,
.dark-theme .materials-catalog-page .mc-label-bridge-title {
    color: #cbd5e1;
}

.dark-theme .materials-catalog-page .mc-catalog-select .Select-menu-outer,
.dark-theme .materials-catalog-page .mc-label-catalog-select .Select-menu-outer {
    background-color: #2e2e2e !important;
    border-color: #4f4f4f !important;
}

.dark-theme .materials-catalog-page .mc-catalog-select .Select-option,
.dark-theme .materials-catalog-page .mc-label-catalog-select .Select-option {
    color: #e0e0e0;
}

.dark-theme .materials-catalog-page .mc-catalog-select .Select-option.is-focused,
.dark-theme .materials-catalog-page .mc-label-catalog-select .Select-option.is-focused,
.dark-theme .materials-catalog-page .mc-catalog-select .Select-option:hover,
.dark-theme .materials-catalog-page .mc-label-catalog-select .Select-option:hover {
    background-color: #3a3a3a;
}

.dark-theme .materials-catalog-page .mc-compatibility-checklist .form-check-label {
    margin-left: 0.4rem;
    margin-right: 1rem;
}

/* Drag handle: the light-mode beige (#b9a98f) is too low-contrast on the dark
   field card, so lighten it for dark mode. */
.dark-theme .materials-catalog-page .mc-drag-handle {
    color: #9aa0a6;
}

/* Give the unchecked select/enabled controls a visible outline on the dark
   field card (Bootstrap's default border is too faint here). */
.dark-theme .materials-catalog-page .mc-option-grid .form-check-input:not(:checked) {
    background-color: #2e2e2e;
    border-color: #5a5a5a;
}

.mc-option-grid-refs-btn { white-space: nowrap; }

/* ---- MAT-READ-2: provider read-only catalog browser ---------------------- */

.materials-catalog-page .mc-ro-banner {
    border: 1px solid rgba(187, 169, 152, 0.55);
    border-left: 4px solid #b08968;
    background: #fbf6ef;
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.85rem;
}

.materials-catalog-page .mc-ro-banner-title {
    font-weight: 600;
    color: #7a5b3a;
}

.materials-catalog-page .mc-ro-banner-body {
    color: var(--text-color, #4a4a4a);
    margin-top: 0.2rem;
}

.materials-catalog-page .mc-ro-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.materials-catalog-page .mc-ro-summary {
    margin-bottom: 1rem;
}

.materials-catalog-page .mc-ro-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(235, 220, 203, 0.35);
    border: 1px solid rgba(187, 169, 152, 0.5);
    font-size: 0.8rem;
    white-space: nowrap;
}

.materials-catalog-page .mc-ro-chip-label {
    color: #8a7560;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.materials-catalog-page .mc-ro-chip-value {
    font-weight: 600;
    color: var(--text-color, #212529);
}

.materials-catalog-page .mc-ro-section-title {
    display: block;
    margin: 0.75rem 0 0.5rem;
    font-size: 0.95rem;
}

.materials-catalog-page .mc-ro-field {
    padding: 0.75rem;
    margin-bottom: 0.85rem;
}

.materials-catalog-page .mc-ro-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.materials-catalog-page .mc-ro-field-title {
    font-size: 1.05rem;
}

.materials-catalog-page .mc-ro-field-count {
    font-size: 0.78rem;
    color: #8a7560;
    white-space: nowrap;
}

.materials-catalog-page .mc-ro-option-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.materials-catalog-page .mc-ro-option {
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(187, 169, 152, 0.4);
}

.materials-catalog-page .mc-ro-option-disabled {
    opacity: 0.72;
    border-style: dashed;
}

.materials-catalog-page .mc-ro-option-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.materials-catalog-page .mc-ro-option-name {
    font-weight: 600;
    color: var(--text-color, #212529);
}

.materials-catalog-page .mc-ro-swatch {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.25);
    display: inline-block;
    flex: 0 0 auto;
}

.materials-catalog-page .mc-ro-pill {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    margin-left: auto;
}

.materials-catalog-page .mc-ro-pill-on {
    background: rgba(34, 139, 84, 0.16);
    color: #1d7a48;
}

.materials-catalog-page .mc-ro-pill-off {
    background: rgba(120, 120, 120, 0.18);
    color: #6b6b6b;
}

.materials-catalog-page .mc-ro-option-meta {
    font-size: 0.8rem;
    color: #6f5c49;
    margin-top: 0.15rem;
}

.materials-catalog-page .mc-ro-option-actions {
    margin-top: 0.35rem;
}

.materials-catalog-page .mc-ro-tech {
    margin-top: 0.4rem;
}

.materials-catalog-page .mc-ro-tech-summary {
    cursor: pointer;
    font-size: 0.78rem;
    color: #8a7560;
}

.materials-catalog-page .mc-ro-tech-body {
    margin-top: 0.35rem;
}

.materials-catalog-page .mc-ro-rule-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.materials-catalog-page .mc-ro-rule {
    padding: 0.4rem 0.55rem;
    border: 1px solid rgba(187, 169, 152, 0.4);
    border-radius: 8px;
    background: rgba(235, 220, 203, 0.12);
}

.materials-catalog-page .mc-ro-rule-source {
    font-weight: 600;
}

.materials-catalog-page .mc-ro-rule-target {
    font-size: 0.85rem;
    color: #6f5c49;
    margin-left: 0.6rem;
}

/* Dark theme */
.dark-theme .materials-catalog-page .mc-ro-banner {
    background: #2d2620;
    border-color: #4a3f33;
    border-left-color: #b08968;
}

.dark-theme .materials-catalog-page .mc-ro-banner-title {
    color: #d8b48c;
}

.dark-theme .materials-catalog-page .mc-ro-chip,
.dark-theme .materials-catalog-page .mc-ro-rule {
    background: #323232 !important;
    border-color: #4d4d4d !important;
}

.dark-theme .materials-catalog-page .mc-ro-chip-value,
.dark-theme .materials-catalog-page .mc-ro-option-name,
.dark-theme .materials-catalog-page .mc-ro-rule-source {
    color: #e0e0e0;
}

.dark-theme .materials-catalog-page .mc-ro-chip-label,
.dark-theme .materials-catalog-page .mc-ro-field-count,
.dark-theme .materials-catalog-page .mc-ro-option-meta,
.dark-theme .materials-catalog-page .mc-ro-rule-target,
.dark-theme .materials-catalog-page .mc-ro-tech-summary {
    color: #c2b3a3;
}

.dark-theme .materials-catalog-page .mc-ro-option {
    background-color: #2d2d2d !important;
    border-color: #3f3f3f !important;
}

.dark-theme .materials-catalog-page .mc-ro-pill-on {
    background: rgba(46, 160, 100, 0.22);
    color: #5fcf94;
}

.dark-theme .materials-catalog-page .mc-ro-pill-off {
    background: rgba(150, 150, 150, 0.2);
    color: #b5b5b5;
}