/*
 * RD-2208 — Editable "column config" tables for the platform's Edit-table modals.
 *
 * Shared, table-like layout used by:
 *   - "Edit Team Allocation Table"    (Project Financials → Team Allocation)
 *   - "Select Team Activity Data"     (Team Overview)
 *   - "Configure Primary Target"      (Strategic Overview)
 *
 * Each modal lists the available columns as a compact grid with a sticky filter
 * bar (funnel · status · name search · category) + column labels, and draggable
 * rows carrying a drag handle, a visibility toggle, the metric name, an optional
 * pin (Team Allocation only) and a category/type badge. The Configure Primary
 * Target variant swaps the drag handle for a per-row target editor
 * (direction + value + unit) — its rows carry no persisted order.
 *
 * Visual language follows the Leanmote design system: Metronic light surfaces,
 * slate neutrals and the celeste accent (--lm-primary-light #419FFF). Loaded
 * globally (both modals live in the app layout) — all selectors are scoped to
 * `.lm-colcfg`, so it is inert on markup that does not use it.
 */

.lm-colcfg {
    /* drag · toggle · name · category (Team Activity, no pin) */
    --lm-colcfg-cols: 30px 52px minmax(0, 1fr) minmax(108px, auto);
    --lm-colcfg-accent: var(--lm-primary-light, #419FFF);
    --lm-colcfg-accent-soft: #eaf3ff;
    --lm-colcfg-line: #eaecef;
    --lm-colcfg-line-strong: #e0e3e8;
    --lm-colcfg-ink: #0f1320;
    --lm-colcfg-muted: #8a92a6;
    --lm-colcfg-surface: #f7f9fc;

    /* Bounded scroll box so only the metric rows scroll while the filter bar +
       column labels (`.lm-colcfg-header`) stay pinned via position:sticky.
       `hidden auto` = never scroll horizontally, scroll vertically as needed. */
    max-height: 48vh;
    overflow: hidden auto;
    border: 1px solid var(--lm-colcfg-line-strong);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 19, 32, .04);
}
.lm-colcfg::-webkit-scrollbar { width: 10px; }
.lm-colcfg::-webkit-scrollbar-thumb { background: #d7dbe2; border-radius: 8px; border: 3px solid #fff; }

/* Team Allocation adds a pin column between name and category. */
.lm-colcfg--pins {
    --lm-colcfg-cols: 30px 52px minmax(0, 1fr) 44px minmax(108px, auto);
}

/* Configure Primary Target: toggle · metric · target editor · category.
   No drag handle — target rows have no persisted order. The list sits beside
   the trade-off pentagon, so it gets a taller scroll box than the other two. */
.lm-colcfg--targets {
    --lm-colcfg-cols: 52px minmax(0, 1fr) minmax(214px, auto) minmax(104px, auto);
    max-height: 52vh;
}

.lm-colcfg-head,
.lm-colcfg-row {
    display: grid;
    grid-template-columns: var(--lm-colcfg-cols);
    align-items: center;
    column-gap: 12px;
}

/* ---- Sticky header block (filter bar + column labels) ---- */
.lm-colcfg-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
}

/* Filter bar: funnel · status · name search (grows) · category. */
.lm-colcfg-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--lm-colcfg-surface);
    border-bottom: 1px solid var(--lm-colcfg-line);
}
.lm-colcfg-filter-icon {
    flex: 0 0 auto;
    color: var(--lm-colcfg-muted);
    margin-right: 2px;
}
/* Scoped selector (0,2,0) so `width:auto` beats Bootstrap's `.form-select`
   (0,1,0) regardless of stylesheet order — the selects size to their content. */
.lm-colcfg-filters .lm-colcfg-filter-status,
.lm-colcfg-filters .lm-colcfg-filter-cat { flex: 0 0 auto; width: auto; }

/* Search field with a leading magnifier icon. */
.lm-colcfg-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 130px;
}
.lm-colcfg-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lm-colcfg-muted);
    pointer-events: none;
}
.lm-colcfg-search .form-control { padding-left: 32px; }

/* Small controls: consistent height, tighter type, focus in the brand accent. */
.lm-colcfg-filters .form-select,
.lm-colcfg-filters .form-control {
    height: 34px;
    padding-top: .3rem;
    padding-bottom: .3rem;
    font-size: .84rem;
    border-color: #dfe3ea;
    background-color: #fff;
    color: var(--lm-colcfg-ink);
}
.lm-colcfg-filters .form-select:focus,
.lm-colcfg-filters .form-control:focus {
    border-color: var(--lm-colcfg-accent);
    box-shadow: 0 0 0 .18rem rgba(65, 159, 255, .15);
}

/* Column labels row. */
.lm-colcfg-head {
    padding: 9px 12px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lm-colcfg-muted);
    border-bottom: 1px solid var(--lm-colcfg-line);
}
.lm-colcfg-head > * { min-width: 0; }

/* ---- Rows ---- */
.lm-colcfg-body { padding: 8px; }

.lm-colcfg-row {
    padding: 7px 6px;
    margin-bottom: 5px;
    border: 1px solid var(--lm-colcfg-line);
    border-radius: 9px;
    background: #fff;
    transition: border-color .13s ease, background-color .13s ease, box-shadow .13s ease, opacity .13s ease;
}
.lm-colcfg-row:last-child { margin-bottom: 0; }
.lm-colcfg-row:hover {
    background: #fbfcfe;
    border-color: #d4dae4;
    box-shadow: 0 1px 3px rgba(15, 19, 32, .06);
}

/* Disabled (unchecked) column: dimmed so the enabled set reads first. */
.lm-colcfg-row--off { opacity: .62; }
.lm-colcfg-row--off:hover { opacity: 1; }

/* ---- Cells ---- */
.lm-colcfg-cell { display: flex; align-items: center; min-width: 0; }
.lm-colcfg-cell--drag,
.lm-colcfg-cell--toggle,
.lm-colcfg-cell--pin { justify-content: center; }
.lm-colcfg-cell--cat,
.lm-colcfg-cell--target { justify-content: flex-end; }
.lm-colcfg-cell--target { gap: 6px; }

.lm-colcfg-drag {
    color: #c7ccd6;
    cursor: grab;
    line-height: 0;
    transition: color .12s ease;
}
.lm-colcfg-row:hover .lm-colcfg-drag { color: #aab1bf; }
.lm-colcfg-drag:hover { color: var(--lm-colcfg-accent); }
.lm-colcfg-row.simple-sortable-dragging .lm-colcfg-drag { cursor: grabbing; }

.lm-colcfg-name {
    display: block;
    font-size: .94rem;
    font-weight: 500;
    color: var(--lm-colcfg-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    margin: 0;
}

/* The toggle keeps the Metronic switch look; just drop default label spacing. */
.lm-colcfg-cell--toggle .form-check { margin: 0; min-height: auto; padding: 0; }
.lm-colcfg-cell--toggle .form-check-input { margin: 0; float: none; cursor: pointer; }

.lm-colcfg-cat .badge { font-weight: 600; letter-spacing: .01em; }

/* ---- Configure Primary Target: inline target editor ---- */

/* Status badges sit next to the metric name; only the name may truncate. */
.lm-colcfg-cell--name > .badge { flex: 0 0 auto; }

/* Direction · value · unit, sized so every row's controls line up. */
.lm-colcfg-cell--target .metric-direction { flex: 0 0 auto; width: 118px; }
.lm-colcfg-cell--target .metric-value-input { flex: 0 0 auto; width: 66px; }
.lm-colcfg-cell--target .metric-unit-display { flex: 0 0 auto; width: 12px; }
.lm-colcfg-cell--target .form-select,
.lm-colcfg-cell--target .form-control {
    height: 30px;
    min-height: 30px;
    padding-top: .2rem;
    padding-bottom: .2rem;
}
/* Metronic hides the caret spacing on small selects; keep the label readable. */
.lm-colcfg-cell--target .form-select { padding-right: 1.9rem; background-position: right .55rem center; }
/* An off row's editor is disabled — drop the number spinners so the row reads
   as one quiet line instead of two dead arrows. */
.lm-colcfg-cell--target .metric-value-input:disabled::-webkit-inner-spin-button,
.lm-colcfg-cell--target .metric-value-input:disabled::-webkit-outer-spin-button { display: none; }

/* Row locked by the max-metrics cap: dimmer than "off", and it stays dim on
   hover because hovering cannot make it selectable. */
.lm-colcfg-row--locked,
.lm-colcfg-row--locked:hover { opacity: .45; }

/* Team Allocation pin: the default 30px button (project-financials-pins.css)
   makes its rows taller than the pin-less Team Overview list. Shrink it to the
   row rhythm so both lists have equally thin rows. */
.lm-colcfg .pf-modal-pin { width: 22px; height: 22px; border-radius: 6px; }
.lm-colcfg .pf-modal-pin svg { width: 14px; height: 14px; }

/* ---- Drag feedback (classes toggled by the SimpleSortable lib) ---- */
.lm-colcfg-row.simple-sortable-dragging {
    opacity: .5;
    border-color: var(--lm-colcfg-accent);
    box-shadow: 0 8px 22px rgba(65, 159, 255, .22);
}
.lm-colcfg-row.simple-sortable-drop-indicator-before { box-shadow: inset 0 3px 0 -1px var(--lm-colcfg-accent); }
.lm-colcfg-row.simple-sortable-drop-indicator-after  { box-shadow: inset 0 -3px 0 -1px var(--lm-colcfg-accent); }

/* ---- Empty state when filters match nothing ---- */
.lm-colcfg-empty {
    display: none;
    padding: 22px 12px;
    text-align: center;
    color: var(--lm-colcfg-muted);
    font-size: .88rem;
}
.lm-colcfg.is-empty .lm-colcfg-empty { display: block; }
.lm-colcfg.is-empty .lm-colcfg-body .lm-colcfg-row { display: none; }