/* Loot Editor compare view. Uses the tokens from market.css and the row pieces from loot-editor.css.
   No inline styles (CSP style-src 'self'). --lc-row-height must equal ROW_HEIGHT in
   ClientApp/src/loot-editor/ui/windowing.ts; test/loot-editor/ui/chrome.test.ts checks it. */

.lc-panel { --lc-row-height: 36px; display: flex; flex-direction: column; gap: 8px; }

.lc-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
.lc-filters { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 6px; }
.lc-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.lc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.lc-dialog { align-items: center; }
.lc-dialog select { min-height: 34px; max-width: 100%; background: var(--input); border: 1px solid var(--input-border); border-radius: 6px; color: var(--text); font: inherit; font-size: 14px; }
.lc-modes { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 6px; }
.lc-modes label { display: inline-flex; align-items: center; gap: 6px; }

.lc-colhead,
.lc-row {
    display: grid;
    grid-template-columns: 28px 104px minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    min-width: 900px;
}

.lc-colhead { padding: 0 10px 0 4px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }

.lc-viewport {
    position: relative;
    height: 46vh;
    min-height: 240px;
    overflow: auto;
    border: 1px solid var(--hairline);
    border-radius: 8px;
}

.lc-sizer { position: relative; min-width: 900px; width: 100%; }
.lc-rows { position: absolute; top: 0; left: 0; right: 0; }

.lc-row {
    box-sizing: border-box;
    height: var(--lc-row-height);
    padding: 0 10px 0 4px;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
    cursor: default;
}

.lc-row:hover { background: var(--gold-tint); }
.lc-row.is-picked { background: var(--gold-tint-3); }
.lc-row.is-focus { box-shadow: inset 2px 0 0 var(--gold); }

.lc-cell { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.lc-cell .lc-name { flex: 0 1 150px; min-width: 40px; }
.lc-cell .le-summary { flex: 1 1 0; }
.lc-cell-empty { color: var(--faint); }

.lc-kind { font-size: 12px; color: var(--text-2); }
.lc-kind-changed { color: var(--warn); }
.lc-kind-onlyRight { color: var(--ok); }
.lc-kind-onlyLeft { color: var(--err); }
.lc-kind-moved { color: var(--spell); }

.lc-diff { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); font-size: 13px; }

.lc-hint { margin: 0; font-size: 13px; }
.lc-warnings { padding: 6px 10px; border: 1px solid var(--warn); border-radius: 6px; }
.lc-warnings ul { margin: 6px 0 0; padding-left: 18px; max-height: 160px; overflow: auto; }
.lc-detail { padding: 8px 12px; border: 1px solid var(--hairline); border-radius: 8px; }
.lc-fields { margin: 6px 0 0; padding-left: 18px; }

.lc-panel button:focus-visible,
.lc-panel select:focus-visible,
.lc-panel input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }