/* ══════════════════════════════════════════════════════════════
   PARTS LISTER — the shared two-column parts picker
   ══════════════════════════════════════════════════════════════

   Suggested parts on the left, the parts on this car (or in this batch) on
   the right. Three surfaces draw it: Vehicle Check In's Parts step, the
   Parts Lister page pointed at a vehicle, and the Parts Lister page pointed
   at a typed-in year/make/model with no car behind it at all.

   Markup comes from templates/partials/parts-lister.php and behaviour from
   assets/js/components/parts-lister.js — this file is the only place its look
   is described. It began as the `vf-` block in views/vehicle-flow.css, which
   is why the shapes are the shop's own: the second surface was otherwise going
   to be a copy of nine hundred lines of JavaScript and six hundred of CSS, and
   a copy is what drifts.

   Height: the layout is `flex: 1` inside a `min-height: 0` column, so the two
   lists scroll rather than the page. A host page that wants that has to give
   it a flex column to sit in — see `.vehicle-flow-page.vf-fullheight` and
   `.parts-lister-page.pl-fullheight`.
   ══════════════════════════════════════════════════════════════ */

.pl-parts-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
@media (max-width: 900px) {
    .pl-parts-layout { grid-template-columns: 1fr; }
}
.pl-parts-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-card);
}
.pl-parts-col--left {
    border-right: 1px solid var(--border);
}
.pl-parts-col__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.pl-parts-col__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}
.pl-parts-col__meta {
    font-size: 11px;
    background: rgba(26, 95, 168, 0.08);
    border: 1px solid rgba(26, 95, 168, 0.25);
    border-radius: 4px;
    padding: 3px 9px;
    color: #1a5fa8;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pl-multiplier-badge--interactive { cursor: pointer; transition: all 0.15s; }
.pl-multiplier-badge--interactive:hover {
    background: rgba(26, 95, 168, 0.16);
    border-color: rgba(26, 95, 168, 0.4);
}
.pl-multiplier-badge--interactive strong { font-weight: 700; }

/* Multiplier breakdown tooltip */
.pl-multiplier-tip {
    position: fixed;
    z-index: var(--z-modal, 400);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-md, 0 10px 28px rgba(0,0,0,0.18));
    padding: 14px 16px;
    min-width: 260px;
    max-width: 340px;
    font-size: 12px;
    color: var(--text);
}
.pl-multiplier-tip[hidden] { display: none; }
.pl-multiplier-tip__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.pl-multiplier-tip__rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.pl-multiplier-tip__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--bg-hover);
}
.pl-multiplier-tip__row:last-child { border-bottom: none; }
.pl-multiplier-tip__label { color: var(--text); flex: 1; min-width: 0; }
.pl-multiplier-tip__scope { color: var(--text-muted); font-size: 10px; }
.pl-multiplier-tip__value {
    font-family: var(--font-mono, "Courier New", monospace);
    font-weight: 600;
    color: #1a5fa8;
    flex-shrink: 0;
}
.pl-multiplier-tip__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 6px 0 10px;
    font-size: 13px;
}
.pl-multiplier-tip__total strong {
    font-size: 15px;
    color: #1a5fa8;
    font-family: var(--font-mono, "Courier New", monospace);
}
.pl-multiplier-tip__edit {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pl-multiplier-tip__edit label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.pl-multiplier-tip__edit input {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    font-family: var(--font-mono, "Courier New", monospace);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-hover);
    color: var(--text);
    outline: none;
    font-weight: 600;
}
.pl-multiplier-tip__edit input:focus { border-color: #1a5fa8; background: var(--bg-card); box-shadow: 0 0 0 2px rgba(26,95,168,0.12); }
.pl-multiplier-tip__edit button {
    height: 32px;
    padding: 0 14px;
    background: #1a5fa8;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.pl-multiplier-tip__edit button:hover { background: #144a86; }
.pl-multiplier-tip__hint { font-size: 10px; color: var(--text-muted); margin-top: 8px; text-align: center; }

/* Editable price cells */
.pl-row__price--editable {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 6px;
    transition: background 0.12s;
}
.pl-row__price--editable:hover {
    background: rgba(26, 95, 168, 0.1);
    color: #1a5fa8;
}
.pl-parts-col__tools {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-hover);
    flex-shrink: 0;
}
.pl-parts-col__search-input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text);
}
.pl-parts-col__search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12);
}
.pl-tool-btn {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    flex-shrink: 0;
}
.pl-tool-btn--primary {
    background: #1a5fa8;
    border: 1px solid #1a5fa8;
    color: #fff;
}
.pl-tool-btn--primary:hover { background: #164f8c; border-color: #164f8c; }
.pl-tool-btn--outline {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
}
.pl-tool-btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.pl-parts-col .pl-parts-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0;
}

/* Sticky category header */
.pl-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 16px;
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
}
.pl-cat-header__left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pl-cat-header__name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text);
    text-transform: uppercase;
}
.pl-cat-header__count {
    font-size: 11px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 7px;
    color: var(--text-muted);
}
.pl-cat-header__right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pl-cat-header__total {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}
.pl-cat-header__addall {
    font-size: 11px;
    color: var(--accent);
    cursor: pointer;
    font-weight: 500;
    background: none;
    border: none;
    padding: 0;
}
.pl-cat-header__addall:hover { text-decoration: underline; }

/* Part row */
.pl-row {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid var(--bg-hover);
    gap: 10px;
    transition: background 0.08s;
}
.pl-parts-col--left .pl-row { cursor: pointer; }
.pl-row:hover { background: rgba(26, 95, 168, 0.05); }
[data-theme="dark"] .pl-row:hover { background: rgba(255, 255, 255, 0.03); }
.pl-row:last-child { border-bottom: none; }
.pl-row--editing { background: rgba(26, 95, 168, 0.06); }
.pl-row--editing:hover { background: rgba(26, 95, 168, 0.08); }
.pl-row__name-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-card);
    color: var(--text);
}
.pl-row__name-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12);
}
.pl-row__price-input {
    width: 72px;
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-card);
    color: var(--accent);
    text-align: right;
}
.pl-row__price-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12);
}
.pl-row__add {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    transition: background 0.1s, color 0.1s;
}
.pl-row:hover .pl-row__add {
    background: var(--accent);
    color: #fff;
}
.pl-row__name {
    flex: 1;
    font-size: 13px;
    color: var(--text);
    line-height: 1.3;
}
.pl-row__name--editable { cursor: text; border-radius: 3px; }
.pl-row__name--editable:hover { text-decoration: underline dotted var(--text-muted); text-underline-offset: 3px; }
.pl-row__price {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    min-width: 48px;
    text-align: right;
}
.pl-row__cat {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    opacity: 0.8;
}
.pl-row__sellthrough {
    font-family: var(--font-mono, "Courier New", monospace);
    font-size: 11px;
    font-weight: 600;
    color: #b45309;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    padding: 1px 7px;
    flex-shrink: 0;
}
.pl-row__badge {
    font-size: 10px;
    border-radius: 3px;
    padding: 1px 5px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.pl-row__badge--db {
    background: rgba(26, 95, 168, 0.1);
    color: #1a5fa8;
}
.pl-row__badge--new {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent);
}
.pl-row__badge--gen {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Parts edit mode — select + delete */
.pl-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 5px 12px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.12s;
}
.pl-edit-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--text-muted);
}
.pl-edit-btn.pl-edit-btn--active {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.4);
}

.pl-edit-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(37, 99, 235, 0.04);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.pl-edit-toolbar[hidden] { display: none; }
.pl-edit-toolbar__quick {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pl-edit-toolbar__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
}
.pl-edit-chip {
    padding: 4px 10px;
    height: 26px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    border-radius: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}
.pl-edit-chip:hover { border-color: var(--text-muted); }
.pl-edit-chip--gen { color: #b45309; border-color: rgba(245, 158, 11, 0.3); }
.pl-edit-chip--gen:hover { background: rgba(245, 158, 11, 0.08); }
.pl-edit-chip--db { color: #1a5fa8; border-color: rgba(26, 95, 168, 0.3); }
.pl-edit-chip--db:hover { background: rgba(26, 95, 168, 0.08); }
.pl-edit-chip--custom { color: var(--accent); border-color: rgba(16, 185, 129, 0.35); }
.pl-edit-chip--custom:hover { background: rgba(16, 185, 129, 0.08); }

.pl-edit-toolbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pl-edit-toolbar__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.pl-edit-toolbar__delete {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    height: 28px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}
.pl-edit-toolbar__delete:hover:not(:disabled) { background: #b91c1c; }
.pl-edit-toolbar__delete:disabled {
    background: var(--bg-hover);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Selectable row in edit mode */
.pl-row__check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #2563eb;
    cursor: pointer;
    margin: 0;
}
.pl-row.pl-row--editable { cursor: pointer; }
.pl-row.pl-row--selected {
    background: rgba(37, 99, 235, 0.08);
}
.pl-row.pl-row--selected:hover {
    background: rgba(37, 99, 235, 0.12);
}
.pl-parts-col--right.pl-parts-col--editing .pl-row__remove { display: none; }
.pl-row__remove {
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}
.pl-row__remove:hover {
    background: rgba(229, 50, 56, 0.1);
    color: var(--color-danger, #dc2626);
}

/* Empty state */
.pl-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.pl-empty__icon {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
    opacity: 0.6;
}
.pl-empty__hint {
    font-size: 11px;
    color: var(--text-muted);
}
/* The small print under a bulk-delete confirmation — what "remove" really means. */
.pl-confirm-note {
    font-size: 11px;
    color: var(--text-muted);
}

/* Toast */
.pl-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #222;
    color: #fff;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s;
    z-index: var(--z-modal);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.pl-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}