/* ─── Clash filter builder primitives ────────────────────────────────
   Used by ClashFilterBuilder (the main filter dialog) and
   SpatialReferenceDialog (the modal for a spatial condition's reference
   sub-filter). Lives in a global stylesheet so it's available regardless
   of which component is mounted — Razor inline <style> blocks only exist
   in the DOM while their component is rendered, which breaks stacked
   dialogs where the parent may not be the source-of-truth for styles.
   ─────────────────────────────────────────────────────────────────── */

.cwf-builder {
    display: block;
}

/* ----- group ----- */
.cwf-builder .cwf-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--cw3-panel, #16181D);
    border: 1px solid var(--cw3-line, #23262E);
    border-radius: 8px;
}

.cwf-builder .cwf-group--nested {
    background: var(--cw3-panel-2, #1B1E25);
    border-color: var(--cw3-line-2, #2C3038);
}

.cwf-builder .cwf-group__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cwf-builder .cwf-group__hint {
    color: var(--cw3-text-3, #6A707B);
    font-size: 12px;
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
}

.cwf-builder .cwf-group__remove {
    margin-left: auto;
}

.cwf-builder .cwf-group__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cwf-builder .cwf-group__item {
    display: block;
}

.cwf-builder .cwf-group__empty {
    color: var(--cw3-text-3, #6A707B);
    font-size: 12.5px;
    margin: 2px 0;
    font-style: italic;
}

.cwf-builder .cwf-group__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ----- AND / OR segmented toggle ----- */
.cwf-builder .cwf-logic {
    display: inline-flex;
    padding: 3px;
    background: var(--cw3-bg, #0E1014);
    border: 1px solid var(--cw3-line, #23262E);
    border-radius: 100px;
}

.cwf-builder .cwf-logic__btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--cw3-text-2, #A8AEB7);
    padding: 4px 14px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cwf-builder .cwf-logic__btn--active {
    background: var(--cw3-mech, #22D3EE);
    color: #0E1014;
}

/* ----- condition row ----- */
.cwf-builder .cwf-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px;
    background: var(--cw3-bg, #0E1014);
    border: 1px solid var(--cw3-line, #23262E);
    border-radius: 6px;
}

.cwf-builder .cwf-row__field { flex: 1 1 200px; min-width: 160px; }
.cwf-builder .cwf-row__side { flex: 0 0 130px; }
.cwf-builder .cwf-row__op { flex: 0 0 150px; }
.cwf-builder .cwf-row__value { flex: 1 1 200px; min-width: 160px; }

.cwf-builder .cwf-input { width: 100%; }

.cwf-builder .cwf-value-none {
    color: var(--cw3-text-3, #6A707B);
    font-size: 13px;
    padding-left: 4px;
}

.cwf-builder .cwf-value-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cwf-builder .cwf-value-range .cwf-input { flex: 1 1 0; min-width: 0; }

.cwf-builder .cwf-range-sep {
    color: var(--cw3-text-3, #6A707B);
    font-size: 12px;
    flex: 0 0 auto;
}

/* ----- Phase 2 spatial: distance + reference-set trigger ----- */
.cwf-builder .cwf-value-spatial {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.cwf-builder .cwf-value-spatial .cwf-input--spatial-distance {
    flex: 0 0 110px;
    width: 110px;
}

.cwf-builder .cwf-spref-trigger {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    appearance: none;
    background: var(--cw3-bg, #0E1014);
    border: 1px dashed var(--cw3-line-2, #2C3038);
    color: var(--cw3-text-2, #A8AEB7);
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
    padding: 6px 12px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color 120ms ease, color 120ms ease;
}

.cwf-builder .cwf-spref-trigger:hover {
    border-color: var(--cw3-text-3, #6A707B);
    color: var(--cw3-text, #EDEFF3);
}

.cwf-builder .cwf-spref-trigger--set {
    border-style: solid;
    border-color: rgba(34, 211, 238, 0.40);
    color: var(--cw3-text, #EDEFF3);
    background: rgba(34, 211, 238, 0.06);
}

.cwf-builder .cwf-spref-trigger--set:hover {
    border-color: var(--cw3-mech, #22D3EE);
}

/* ----- buttons ----- */
.cwf-builder .cwf-text-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--cw3-line-2, #2C3038);
    color: var(--cw3-text-2, #A8AEB7);
    padding: 5px 12px;
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 100px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cwf-builder .cwf-text-btn:hover:not(:disabled) {
    border-color: var(--cw3-mech, #22D3EE);
    color: var(--cw3-text, #EDEFF3);
}

.cwf-builder .cwf-text-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cwf-builder .cwf-text-btn--danger:hover:not(:disabled) {
    border-color: var(--cw3-clash, #F43F5E);
    color: var(--cw3-clash, #F43F5E);
}

.cwf-builder .cwf-icon-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    background: transparent;
    border: 1px solid var(--cw3-line-2, #2C3038);
    color: var(--cw3-text-3, #6A707B);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cwf-builder .cwf-icon-btn--danger:hover {
    border-color: var(--cw3-clash, #F43F5E);
    color: var(--cw3-clash, #F43F5E);
}

/* ===== Clash viewpoint image (grid thumbnail + dialog hero) ===== */
.cw3-viewpoint-img.thumb {
    width: 72px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--cw3-line-2, #2C3038);
    display: block;
    background: #0D1117;
}

.cw3-viewpoint-img.full {
    max-width: 100%;
    max-height: 480px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--cw3-line-2, #2C3038);
    display: block;
    background: #0D1117;
}

.cw3-viewpoint-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--cw3-line-2, #2C3038);
    color: var(--cw3-text-3, #6A707B);
    border-radius: 6px;
}

.cw3-viewpoint-placeholder.thumb {
    width: 72px;
    height: 56px;
}

.cw3-viewpoint-placeholder.full {
    width: 100%;
    min-height: 240px;
}

/* ===== Clash viewpoint tabs (dialog hero + lightbox) ===== */
.cw3-viewpoint-tabs {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--cw3-line-2, #2C3038);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}

.cw3-viewpoint-tab {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--cw3-text-2, #B6BAC2);
    font-family: var(--cw3-mono, monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cw3-viewpoint-tab:hover:not(.active) {
    color: var(--cw3-text-1, #E6E8EC);
    background: rgba(255, 255, 255, 0.04);
}

.cw3-viewpoint-tab.active {
    background: var(--cw3-accent, #6366F1);
    color: white;
}

.cw3-viewpoint-tab + .cw3-viewpoint-tab {
    border-left: 1px solid var(--cw3-line-2, #2C3038);
}

/* Hero media frame — fixed-size box so tab switches don't relayout the dialog. */
.cw3-viewpoint-mediaframe {
    position: relative;
    width: 480px;
    max-width: 100%;
    height: 480px;
    border-radius: 8px;
    overflow: hidden;
    background: #0D1117;
    border: 1px solid var(--cw3-line-2, #2C3038);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cw3-viewpoint-mediaframe > .cw3-viewpoint-img.full,
.cw3-viewpoint-mediaframe > model-viewer.cw3-viewpoint-model.full,
.cw3-viewpoint-mediaframe > .cw3-viewpoint-placeholder.full {
    width: 100%;
    height: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
    background: transparent;
}

.cw3-viewpoint-expand {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cw3-viewpoint-expand:hover {
    background: rgba(0, 0, 0, 0.85);
}

.cw3-viewpoint-tabstrip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* ===== Lightbox ============================================================
   Cinematic-design lightbox built on the cw3-dialog-host primitive. The
   MudDialog surface, title bar, and content area all get the dark cw3 panel
   tokens so MudBlazor's default white theme never leaks through. The chrome
   bar (Windows-style path + close) lives in the dialog's TitleContent slot
   from the design system, so this file only handles the body. */
.cw3-lightbox-dialog.mud-dialog,
.cw3-lightbox-dialog .mud-dialog,
.mud-dialog-container .cw3-lightbox-dialog {
    max-width: min(96vw, 1280px) !important;
    width: min(96vw, 1280px) !important;
    max-height: 92vh !important;
    background: var(--cw3-bg, #0E1014) !important;
    color: var(--cw3-text, #EDEFF3) !important;
    border: 1px solid var(--cw3-line, #23262E) !important;
    border-radius: 12px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 30px 80px -20px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden;
}

.cw3-lightbox-dialog .mud-dialog-content {
    background: transparent !important;
    color: var(--cw3-text, #EDEFF3) !important;
    padding: 0 !important;
}

.cw3-lightbox-dialog .mud-dialog-title {
    padding: 0 !important;
    background: transparent !important;
}

/* Body wrapper inside DialogContent — fills remaining space below the chrome. */
.cw3-lightbox-wrap {
    background: var(--cw3-bg, #0E1014);
    color: var(--cw3-text, #EDEFF3);
    padding: 0;
}

.cw3-lightbox-host {
    display: flex;
    flex-direction: column;
    height: 80vh;
    max-height: calc(92vh - 56px); /* leave room for the chrome */
    background: var(--cw3-bg, #0E1014);
}

.cw3-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 18px;
    border-bottom: 1px solid var(--cw3-line, #23262E);
    background: var(--cw3-panel, #16181D);
}

.cw3-lightbox-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--cw3-bg, #0E1014);
}

.cw3-lightbox-body > .cw3-viewpoint-img.full {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border: none;
    border-radius: 6px;
}

.cw3-lightbox-body > .cw3-viewpoint-model-host.full {
    width: 100%;
    height: 100%;
}

.cw3-lightbox-body > .cw3-viewpoint-model-host.full > model-viewer.cw3-viewpoint-model.full {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 6px;
    background: var(--cw3-bg, #0E1014);
}

/* ===== 3D model viewer host + overlay legend ===== */
.cw3-viewpoint-model-host {
    position: relative;
    width: 100%;
    height: 100%;
}

.cw3-viewpoint-legend {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: rgba(11, 13, 17, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: calc(100% - 20px);
    z-index: 2;
    pointer-events: auto;
}

/* Each row uses a 3-column grid (swatch | label | toggle) with fixed
   first/last column widths so the swatches, names, and eye icons line up
   vertically across all rows regardless of label length. */
.cw3-viewpoint-legend-row {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--cw3-text-1, #E6E8EC);
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 20px;
    align-items: center;
    column-gap: 10px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, opacity 0.12s ease;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    width: 240px;
    max-width: 100%;
}

.cw3-viewpoint-legend-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.cw3-viewpoint-legend-row.off {
    opacity: 0.45;
}

.cw3-viewpoint-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) inset;
    justify-self: center;
}

.cw3-viewpoint-legend-row.off .cw3-viewpoint-legend-swatch {
    background: rgba(255, 255, 255, 0.18) !important;
}

.cw3-viewpoint-legend-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cw3-viewpoint-legend-key {
    font-family: var(--cw3-mono, monospace);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    color: var(--cw3-text-3, #6A707B);
}

.cw3-viewpoint-legend-name {
    color: var(--cw3-text-1, #E6E8EC);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cw3-viewpoint-legend-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cw3-text-2, #B6BAC2);
}

/* Header strip at the top of the legend — holds the visual-mode toolbar
   (wireframe, X-ray, fade, exploded, ortho, light-bg) and the collapse chevron.
   Stays visible even when the legend is collapsed so the user can always get
   back to the rows and re-toggle modes. Auto-wraps to a second line on narrow
   widths so the 7 buttons don't overflow the 240px legend body. */
.cw3-viewpoint-legend-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
}

.cw3-viewpoint-legend.collapsed {
    width: auto;
    padding: 4px 6px;
}

.cw3-viewpoint-legend-headbtn {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--cw3-text-2, #B6BAC2);
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    padding: 0;
    flex: 0 0 auto;
}

.cw3-viewpoint-legend-headbtn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--cw3-text-1, #E6E8EC);
}

.cw3-viewpoint-legend-headbtn.active {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.55);
    color: #C7D2FE;
}

/* ===== Clash grid Description column ============================================
   At-most-two-line cell: Navisworks-supplied description on top (when present),
   auto-generated summary below in a muted secondary tone. Each line is a single
   ellipsized row, so the cell never grows beyond two lines regardless of the
   underlying text length. The whole cell is clickable — open the detail dialog
   to see both descriptions in full. */
.clash-desc-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.35;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.12s ease;
}

.clash-desc-cell:hover {
    background: rgba(255, 255, 255, 0.04);
}

.clash-desc-nav {
    color: var(--cw3-text-2, #B6BAC2);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clash-desc-gen {
    color: var(--cw3-text-3, #6A707B);
    font-size: 12px;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}