/* Spatial workspace treatment for the existing Clash Sets and Clash Matrix pages.
   Keep data colours and the current grid contracts intact while the Telerik
   replacement is proved separately. Everything here is scoped to opt-in roots. */
.cw3[data-cw-system].cw3-sets,
.cw3[data-cw-system].cw3-matrix {
    --cw3-bg: var(--cw-surface-canvas);
    --cw3-panel: var(--cw-surface-panel);
    --cw3-panel-2: var(--cw-surface-raised);
    --cw3-line: var(--cw-border-subtle);
    --cw3-line-2: var(--cw-border-control);
    --cw3-text: var(--cw-text-primary);
    --cw3-text-2: var(--cw-text-secondary);
    --cw3-text-3: var(--cw-text-secondary);
    --cw3-display: var(--cw-font-family);
    --cw3-mono: var(--cw-font-family);
    box-sizing: border-box;
    height: auto;
    min-height: calc(100dvh - var(--cw-shell-topbar-height, 60px));
    padding: clamp(12px, 2vw, 24px);
    overflow: visible;
    background: var(--cw-surface-canvas);
    color: var(--cw-text-primary);
    font: 400 var(--cw-body-size)/1.5 var(--cw-font-family);
}

.cw3[data-cw-system][data-theme="day"] { color-scheme: light; }

.cw3[data-cw-system].cw3-sets *,
.cw3[data-cw-system].cw3-matrix * { box-sizing: border-box; }

.cw3[data-cw-system].cw3-sets .cw3-mono,
.cw3[data-cw-system].cw3-matrix .cw3-mono {
    font-family: var(--cw-font-family);
    letter-spacing: 0;
    text-transform: none;
}

/* The side list and selected workspace are two equal members of one layout. */
.cw3[data-cw-system].cw3-sets .cw3-sets-side,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-side,
.cw3[data-cw-system].cw3-sets .cw3-sets-card,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-card,
.cw3[data-cw-system].cw3-sets .cw3-sets-empty--main,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-empty--main {
    background: var(--cw-surface-panel);
    border: 1px solid var(--cw-border-subtle);
    border-radius: var(--cw-radius-panel);
    box-shadow: none;
}

.cw3[data-cw-system].cw3-sets .cw3-sets-side,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-side {
    margin: 0 0 0 0;
    height: calc(100dvh - var(--cw-shell-topbar-height, 60px) - 48px);
    min-height: 420px;
}

.cw3[data-cw-system].cw3-sets .cw3-sets-main,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-main {
    height: auto;
    min-height: 0;
    margin-right: 0;
    min-width: 0;
}

.cw3[data-cw-system].cw3-sets .cw3-sets-card,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-card {
    height: auto;
    min-height: calc(100dvh - var(--cw-shell-topbar-height, 60px) - 48px);
    margin-left: 12px;
    overflow: hidden;
}

/* Clash Sets and Clash Matrix put the rail/card gap on their shell grid (Cw3Rail column-gap),
   so a closed rail leaves the card evenly inset instead of keeping a 12px margin on one side. */
.cw3[data-cw-system].cw3-sets .cw3-sets-card,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-card,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-empty--main { margin-left: 0; }

.cw3[data-cw-system].cw3-sets .cw3-sets-empty--main,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-empty--main {
    height: auto;
    min-height: 420px;
    margin-left: 12px;
}

.cw3[data-cw-system].cw3-sets .cw3-sets-side-head,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-side-head,
.cw3[data-cw-system].cw3-sets .cw3-sets-hero,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-hero {
    background: var(--cw-surface-panel);
    border-color: var(--cw-border-subtle);
}

.cw3[data-cw-system].cw3-sets .cw3-sets-side-eyebrow,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-side-eyebrow,
.cw3[data-cw-system].cw3-sets .cw3-sets-hero-eyebrow,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-hero-eyebrow {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--cw-text-secondary);
    font: 600 13px/1.35 var(--cw-font-family);
}

.cw3[data-cw-system].cw3-sets .cw3-disc-dots,
.cw3[data-cw-system].cw3-matrix .cw3-disc-dots { display: none; }

.cw3[data-cw-system].cw3-sets .cw3-eyebrow-text,
.cw3[data-cw-system].cw3-matrix .cw3-eyebrow-text {
    color: var(--cw-text-secondary);
    font: 600 13px/1.35 var(--cw-font-family);
    letter-spacing: 0;
    text-transform: none;
}

.cw3[data-cw-system].cw3-sets .cw3-sets-headline,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-headline {
    color: var(--cw-text-primary);
    font: 600 clamp(22px, 2vw, 28px)/1.25 var(--cw-font-family);
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.cw3[data-cw-system].cw3-sets .cw3-sets-headline-num,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-headline-num {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--cw-text-primary);
}

.cw3[data-cw-system].cw3-sets .cw3-sets-headline-text,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-headline-text { color: var(--cw-text-secondary); }
.cw3[data-cw-system].cw3-sets .cw3-sets-headline-name,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-headline-name { color: var(--cw-text-primary); }

/* Search, toolbar and row surfaces follow the same roles as the dashboard. */
.cw3[data-cw-system].cw3-sets .cw3-sets-mud,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-mud,
.cw3[data-cw-system].cw3-sets .cw3-sets-mud .mud-input-control-input-container,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-mud .mud-input-control-input-container,
.cw3[data-cw-system].cw3-sets .cw3-sets-mud .mud-input,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-mud .mud-input {
    min-height: var(--cw-control-height);
}
.cw3[data-cw-system].cw3-sets .cw3-sets-mud .mud-input,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-mud .mud-input { height: var(--cw-control-height); align-items: center; }
.cw3[data-cw-system].cw3-sets .cw3-sets-mud input.mud-input-root,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-mud input.mud-input-root {
    height: var(--cw-control-height);
    min-height: var(--cw-control-height);
    padding-block: 0;
    line-height: var(--cw-control-height);
    font-size: 14px;
}
.cw3[data-cw-system].cw3-sets .cw3-sets-mud .mud-input-clear-button,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-mud .mud-input-clear-button { min-width: var(--cw-control-height); min-height: var(--cw-control-height); }
.cw3[data-cw-system].cw3-sets .cw3-sets-mud input:focus-visible,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-mud input:focus-visible,
.cw3[data-cw-system].cw3-sets .cw3-sets-side-search-input:focus-visible,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-side-search-input:focus-visible { outline: none; }
.cw3[data-cw-system].cw3-sets .cw3-sets-mud .mud-input:focus-within .mud-input-outlined-border,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-mud .mud-input:focus-within .mud-input-outlined-border { border-color: var(--cw-focus-ring) !important; border-width: 2px !important; }
.cw3[data-cw-system].cw3-sets .cw3-sets-side-search-inner,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-side-search-inner {
    min-height: var(--cw-control-height);
    background: var(--cw-surface-raised);
    border-color: var(--cw-border-control);
    border-radius: var(--cw-radius-control);
}
.cw3[data-cw-system].cw3-sets .cw3-sets-side-search-inner:focus-within,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-side-search-inner:focus-within { border-color: var(--cw-focus-ring); box-shadow: 0 0 0 1px var(--cw-focus-ring); }
.cw3[data-cw-system].cw3-sets .cw3-sets-side-search-input,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-side-search-input {
    height: var(--cw-control-height);
    padding-inline: 36px 48px;
    font: 400 14px/1.4 var(--cw-font-family);
}
.cw3[data-cw-system].cw3-sets .cw3-sets-side-search-icon,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-side-search-icon { width: 16px; height: 16px; left: 12px; }
.cw3[data-cw-system].cw3-sets .cw3-sets-side-search-clear,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-side-search-clear { width: var(--cw-control-height); height: var(--cw-control-height); right: 0; }
.cw3[data-cw-system]:is(.cw3-sets, .cw3-matrix) .clash-matrix-controls input[type="search"] {
    min-height: var(--cw-control-height);
    padding-inline: 12px;
    border-color: var(--cw-border-control);
    border-radius: var(--cw-radius-control);
    background: var(--cw-surface-raised);
    color: var(--cw-text-primary);
    font: 400 14px/1.4 var(--cw-font-family);
}
.cw3[data-cw-system]:is(.cw3-sets, .cw3-matrix) .clash-matrix-controls button { min-height: var(--cw-control-height); }
.cw3[data-cw-system].cw3-sets .cw3-sets-toolbar,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-toolbar,
.cw3[data-cw-system].cw3-sets .cw3-sets-status-strip,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-status-strip,
.cw3[data-cw-system].cw3-sets .cw3-sets-filterpanel {
    background: var(--cw-surface-panel);
    border-color: var(--cw-border-subtle);
}

.cw3[data-cw-system].cw3-sets .cw3-sets-summary,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-side-tabs,
.cw3[data-cw-system].cw3-sets .cw3-sets-list-row,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-list-row {
    background: var(--cw-surface-panel);
    border-color: var(--cw-border-subtle);
    border-radius: var(--cw-radius-control);
}

.cw3[data-cw-system].cw3-sets .cw3-sets-list-row.is-active,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-list-row.is-active,
.cw3[data-cw-system].cw3-sets .cw3-sets-list-child.is-active,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-side-tab.is-active {
    background: var(--cw-selection-background);
    border-color: var(--cw-action-background);
}

.cw3[data-cw-system].cw3-sets .cw3-sets-list-row-head,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-list-row-head { min-height: var(--cw-row-height); }

.cw3[data-cw-system].cw3-sets .cw3-sets-list-name,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-list-name {
    color: var(--cw-text-primary);
    font: 600 14px/1.4 var(--cw-font-family);
}

.cw3[data-cw-system] .cw3-workspace-name-button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    appearance: none;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
.cw3[data-cw-system] .cw3-workspace-name-button:hover { color: var(--cw-text-link); }
.cw3[data-cw-system] .cw3-workspace-name-button:disabled { cursor: default; opacity: .6; }

.cw3[data-cw-system].cw3-sets .cw3-sets-list-meta,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-list-meta,
.cw3[data-cw-system].cw3-sets .cw3-sets-empty-line,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-empty-line {
    color: var(--cw-text-secondary);
    font: 400 12px/1.45 var(--cw-font-family);
}

.cw3[data-cw-system].cw3-sets .cw3-sets-list-badge,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-list-badge,
.cw3[data-cw-system].cw3-sets .cw3-sets-summary-tag,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-origin {
    font-family: var(--cw-font-family);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.cw3[data-cw-system].cw3-sets .cw3-sets-empty-prompt,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-empty-prompt { display: none; }

.cw3[data-cw-system].cw3-sets .cw3-btn,
.cw3[data-cw-system].cw3-matrix .cw3-btn {
    min-height: var(--cw-control-height);
    padding: 9px 14px;
    border-radius: var(--cw-radius-control);
    font: 600 14px/1.2 var(--cw-font-family);
    box-shadow: none;
    transform: none;
}

.cw3[data-cw-system].cw3-sets .cw3-btn--primary,
.cw3[data-cw-system].cw3-matrix .cw3-btn--primary,
.cw3[data-cw-system].cw3-sets .cw3-review-segbtn.on {
    background: var(--cw-action-background);
    border-color: var(--cw-action-background);
    color: var(--cw-action-text);
}
.cw3[data-cw-system].cw3-sets .cw3-btn--primary:hover,
.cw3[data-cw-system].cw3-matrix .cw3-btn--primary:hover {
    background: var(--cw-action-hover);
    border-color: var(--cw-action-hover);
    color: var(--cw-action-text);
    box-shadow: none;
}
.cw3[data-cw-system].cw3-sets .cw3-btn--ghost,
.cw3[data-cw-system].cw3-matrix .cw3-btn--ghost,
.cw3[data-cw-system].cw3-sets .cw3-sets-icon-btn,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-icon-btn,
.cw3[data-cw-system].cw3-sets .cw3-sets-hero-toggle,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-hero-toggle {
    background: var(--cw-surface-raised);
    border: 1px solid var(--cw-border-control);
    border-radius: var(--cw-radius-control);
    color: var(--cw-text-primary);
}
.cw3[data-cw-system].cw3-sets .cw3-sets-icon-btn,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-icon-btn,
.cw3[data-cw-system].cw3-sets .cw3-sets-hero-toggle,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-hero-toggle { width: var(--cw-control-height); height: var(--cw-control-height); }

.cw3[data-cw-system].cw3-sets .cw3-sets-headline-edit,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-headline-edit {
    min-width: var(--cw-control-height);
    min-height: var(--cw-control-height);
    border-radius: var(--cw-radius-control);
}

.cw3[data-cw-system].cw3-matrix .cw3-matrix-toolbar-actions .cw3-btn--sm span:not(.cw3-mono) { display: inline; }

.cw3[data-cw-system].cw3-sets :is(button, a, input, select):focus-visible,
.cw3[data-cw-system].cw3-matrix :is(button, a, input, select):focus-visible {
    outline: 2px solid var(--cw-focus-ring);
    outline-offset: 2px;
}

.cw3[data-cw-system].cw3-sets .cw3-sets-body,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-body {
    width: 100%;
    min-width: 0;
    /* The grid owns scrolling; let it use the viewport rather than stopping at 900px. */
    height: max(480px, calc(100dvh - 330px));
    min-height: 480px;
    flex: 1 1 auto;
}

.cw3[data-cw-system].cw3-sets .cw3-sets-table-host { width: 100%; min-width: 0; overflow: hidden; }

.cw3[data-cw-system].cw3-sets .cw3-sets-table-host > .k-grid,
.cw3[data-cw-system].cw3-matrix .cw3-matrix-body > .k-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 480px;
}

/* The data view can scroll horizontally. The document itself never clips the
   header, inspector or action tray at zoom and in short landscape windows. */
@media (max-width: 1700px) {
    .cw3[data-cw-system].cw3-sets .cw3-sets-hero,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-hero { flex-wrap: wrap; }
    .cw3[data-cw-system].cw3-sets .cw3-sets-hero-actions,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-hero-actions {
        flex: 1 1 100%;
        min-width: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 960px) {
    .cw3[data-cw-system].cw3-sets .cw3-sets-hero,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-hero { padding: 20px; }
    .cw3[data-cw-system].cw3-sets .cw3-sets-hero-left,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-hero-left { flex-basis: auto; }
}

@media (max-width: 720px), (max-height: 550px) {
    .cw3[data-cw-system].cw3-sets,
    .cw3[data-cw-system].cw3-matrix { padding: 12px; }
    .cw3[data-cw-system].cw3-sets .cw3-sets-side,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-side {
        margin: 0;
        height: min(80dvh, 680px);
        min-height: 0;
    }
    .cw3[data-cw-system].cw3-sets .cw3-sets-card,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-card,
    .cw3[data-cw-system].cw3-sets .cw3-sets-empty--main,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-empty--main {
        height: auto;
        min-height: 520px;
        margin: 0;
    }
    .cw3[data-cw-system].cw3-sets .cw3-sets-main,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-main { margin: 0; min-height: 0; }
    .cw3[data-cw-system].cw3-sets .cw3-sets-hero,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-hero,
    .cw3[data-cw-system].cw3-sets .cw3-sets-toolbar,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-toolbar { padding: 16px; }
    .cw3[data-cw-system].cw3-sets .cw3-sets-headline,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-headline { font-size: clamp(20px, 6vw, 26px); }
    .cw3[data-cw-system].cw3-sets .cw3-sets-hero-actions,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-hero-actions { gap: 8px; }
    .cw3[data-cw-system].cw3-sets .cw3-sets-matrix-select { width: 100%; flex-basis: 100%; }
    .cw3[data-cw-system].cw3-sets .cw3-sets-list-row-head,
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-list-row-head { min-height: 56px; }
}

@media (max-width: 720px) {
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-hero-left {
        display: grid;
        width: 100%;
        grid-template-columns: var(--cw-control-height) minmax(0, 1fr);
        gap: 10px 12px;
        align-items: center;
    }
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-hero-toggle {
        grid-column: 1;
        grid-row: 1;
    }
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-origin {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        margin: 0;
        flex-wrap: wrap;
    }
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-headline {
        grid-column: 1 / -1;
        grid-row: 2;
        display: block;
        min-width: 0;
        overflow-wrap: normal;
    }
    .cw3[data-cw-system].cw3-matrix .cw3-matrix-headline-name { word-break: normal; overflow-wrap: break-word; }
}

@media (prefers-reduced-motion: reduce) {
    .cw3[data-cw-system].cw3-sets *,
    .cw3[data-cw-system].cw3-matrix * { scroll-behavior: auto; }
}