/* ============================================================
   Linx-styled parts & assembly catalog/configurator.
   Mirrors Linx WPF Estimates.xaml + EstimatePartsCatalogControl.xaml
   (light theme, LinxBlue accents).
   ============================================================ */

.lx {
    --lx-blue: #003366;
    --lx-blue-bright: #1D7CCF;
    --lx-muted: #64748B;
    --lx-panel: #F3F4F6;
    --lx-border: #CBD5E1;
    --lx-card: #F1F3F5;
    --lx-card-hover: #E9ECEF;
    --lx-card-border: #D1D5DB;
    --lx-card-border-hover: #9CA3AF;
    --lx-desc: #1D4F8C;
    --lx-btn: #E2E8F0;
    --lx-btn-fg: #334155;
    --lx-btn-border: #D5DEE9;
    --lx-btn-hover: #D1DAE7;
    --lx-err: #B91C1C;
    --lx-rel: #E8EEF5;
    --lx-rel-border: #DBE5F0;
    --lx-soft-border: #E2E8F0;
    --lx-pe-border: #D8E2EE;

    background: #F3F4F6;
    padding: 16px;
    min-height: 100%;
    font-family: 'Segoe UI', Inter, Roboto, sans-serif;
    color: #0F172A;
}

/* ---------- Buttons ---------- */
.lx-btn {
    background: var(--lx-btn);
    color: var(--lx-btn-fg);
    border: 1px solid var(--lx-btn-border);
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s ease;
}
.lx-btn:hover:not(:disabled) { background: var(--lx-btn-hover); }
.lx-btn:disabled { opacity: .45; cursor: default; }

/* ---------- Search header ---------- */
.lx-search-header {
    background: #fff;
    border-bottom: 4px solid var(--lx-blue);
    padding: 14px 18px;
    margin-bottom: 16px;
}
.lx-title { font-size: 20px; font-weight: 700; color: var(--lx-blue); margin: 0; }
.lx-search-row {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 14px;
    flex-wrap: wrap;
}
.lx-input, .lx-combo, .lx-select select {
    border: 1px solid var(--lx-border);
    background: #fff;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 4px;
    color: #0F172A;
    outline: none;
}
.lx-input:focus, .lx-combo:focus, .lx-select select:focus { border-color: var(--lx-blue-bright); }
.lx-search-input { flex: 1 1 320px; min-width: 240px; }
.lx-search-combo { flex: 0 1 260px; min-width: 200px; }
.lx-status { color: var(--lx-muted); font-size: 13px; }

/* ---------- Catalog grid ---------- */
.lx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.lx-card {
    min-height: 300px;
    padding: 22px;
    border: 1px solid var(--lx-card-border);
    border-radius: 8px;
    background: var(--lx-card);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.lx-card:hover {
    background: var(--lx-card-hover);
    border-color: var(--lx-card-border-hover);
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.lx-card-img {
    height: 176px;
    border-radius: 16px;
    margin-bottom: 14px;
    background: var(--lx-panel);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lx-card-img img { width: 100%; height: 100%; object-fit: cover; }
.lx-card-noimg { color: var(--lx-muted); font-size: 13px; }
.lx-badge {
    position: absolute;
    top: 10px; left: 10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.lx-badge-part { background: var(--lx-blue); }
.lx-badge-asm { background: var(--lx-blue-bright); }
.lx-card-pn { font-size: 12px; font-weight: 700; color: var(--lx-blue); text-align: center; }
.lx-card-desc { font-size: 13px; color: var(--lx-desc); text-align: center; margin-top: 6px; }

/* ---------- Detail card ---------- */
.lx-detail-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}
@media (max-width: 900px) { .lx-detail-card { grid-template-columns: 1fr; } }
.lx-detail-img {
    border-radius: 12px;
    min-height: 400px;
    background: var(--lx-panel);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.lx-detail-img img { width: 100%; height: 100%; object-fit: cover; }
.lx-detail-noimg { color: var(--lx-muted); font-size: 14px; }

.lx-form-title { font-size: 20px; font-weight: 700; color: var(--lx-blue); margin: 0; }
.lx-pn { font-size: 32px; font-weight: 900; color: var(--lx-blue); line-height: 1.1; margin: 4px 0 0; word-break: break-word; }
.lx-desc { font-size: 13px; color: var(--lx-muted); margin-top: 10px; }

.lx-price-row { display: flex; align-items: flex-end; gap: 8px; margin: 12px 0 18px; }
.lx-price { font-size: 30px; font-weight: 900; color: var(--lx-blue); }
.lx-price-per { font-size: 13px; color: var(--lx-muted); padding-bottom: 5px; }

.lx-pe-box { border: 1px solid var(--lx-pe-border); border-radius: 8px; padding: 10px; margin-bottom: 14px; }
.lx-pe-h { font-size: 10px; font-weight: 700; color: var(--lx-blue); letter-spacing: .04em; }
.lx-pe-b { font-size: 12px; color: var(--lx-muted); margin-top: 3px; }
.lx-pe-warn { border-color: #F59E0B; }

.lx-atc-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.lx-qty {
    border: 1px solid var(--lx-border);
    border-radius: 8px;
    height: 48px;
    display: flex; align-items: center; overflow: hidden;
    background: #fff;
}
.lx-qty button { width: 42px; height: 100%; border: 0; background: transparent; font-size: 18px; font-weight: 700; cursor: pointer; color: var(--lx-blue); }
.lx-qty input { width: 48px; border: 0; text-align: center; font-size: 16px; font-weight: 600; outline: none; }
.lx-total { color: var(--lx-muted); font-weight: 600; margin-bottom: 18px; }

.lx-section { border: 1px solid var(--lx-soft-border); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.lx-section-h { font-size: 13px; font-weight: 700; color: var(--lx-blue); margin-bottom: 8px; letter-spacing: .03em; }
.lx-section-hint { font-size: 11px; color: var(--lx-muted); margin-bottom: 8px; }
.lx-cut-row { display: flex; gap: 10px; align-items: center; }
.lx-cut-row .lx-input { width: 160px; }
.lx-cut-unit { color: var(--lx-muted); }

/* ---------- Finish swatches ---------- */
.lx-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.lx-swatch { width: 78px; cursor: pointer; text-align: center; background: transparent; border: 0; }
.lx-swatch-dot {
    width: 34px; height: 34px; border-radius: 50%;
    margin: 0 auto 5px;
    border: 1px solid var(--lx-border);
}
.lx-swatch.is-on .lx-swatch-dot { border: 3px solid var(--lx-blue); }
.lx-swatch-rainbow {
    background: linear-gradient(135deg, #EF4444 0%, #F59E0B 20%, #EAB308 38%, #22C55E 55%, #3B82F6 75%, #8B5CF6 100%);
}
.lx-swatch-name { font-size: 11px; font-weight: 600; color: #0F172A; line-height: 13px; }
.lx-swatch.is-on .lx-swatch-name { color: var(--lx-blue); font-weight: 700; }
.lx-swatch-type { font-size: 10px; color: var(--lx-muted); margin-top: 2px; }

/* Parts use the same finish-card selector as the sliding and rolling wizards. */
.lx-finish-selector {
  --bg-panel: var(--lxc-surface);
  --bg-input: var(--lxc-panel);
  --line: var(--lxc-border);
  --line-strong: var(--lxc-border-strong);
  --fg: var(--lxc-ink);
  --fg-2: var(--lxc-ink);
  --fg-3: var(--lxc-muted);
  --fg-4: var(--lxc-muted);
  --accent: var(--lxc-blue);
  --accent-bg: color-mix(in srgb, var(--lxc-blue) 12%, transparent);
  --accent-border: color-mix(in srgb, var(--lxc-blue) 28%, transparent);
  --font-sans: var(--lxc-font);
  margin-top: 10px;
}
.lx-finish-selector .grow { flex: 1 1 auto; min-width: 0; }
.lx-finish-selector .field-label {
  color: var(--fg-4);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lx-finish-selector .select {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  color: var(--fg);
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.lx-finish-selector .hint { margin-top: 6px; color: var(--fg-3); font-size: 11px; }
.lx-finish-selector .parts-finish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-finish-selector .finish-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 599px) {
  .lx-finish-selector .parts-finish-grid,
  .lx-finish-selector .finish-choice-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Config options ---------- */
.lx-opt { margin-bottom: 10px; }
.lx-config-field { border:0; padding:0; min-width:0; margin-top:14px; }
.lx-config-field > .lx-input { width:100%; box-sizing:border-box; }
.lx-config-choices { display:flex; flex-direction:column; gap:8px; }
.lx-config-choice { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--lx-border,#d6e1ed); border-radius:6px; cursor:pointer; }
.lx-config-choice input { accent-color:var(--lx-blue,#073c70); flex-shrink:0; width:16px; height:16px; }
.lx-config-field .lx-opt-label .lx-input { display:block; width:100%; margin-top:5px; }
.lx-opt-label { font-size: 10px; font-weight: 700; color: var(--lx-blue); display: block; margin-bottom: 3px; }
.lx-select { display: block; }
.lx-select select { width: 100%; }
.lx-req { color: var(--lx-err); }

/* ---------- Related parts ---------- */
.lx-related { background: #fff; border-radius: 10px; padding: 16px; margin-top: 18px; }
.lx-related-h { font-size: 16px; font-weight: 900; color: var(--lx-blue); margin: 0 0 10px; }
.lx-related-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.lx-related-card {
    width: 150px; min-width: 150px; height: 150px;
    padding: 8px;
    background: var(--lx-rel);
    border: 1px solid var(--lx-rel-border);
    border-radius: 6px;
    cursor: pointer;
    display: flex; flex-direction: column;
}
.lx-related-img { height: 76px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lx-related-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lx-related-pn { font-size: 10px; font-weight: 700; color: var(--lx-blue); text-align: center; }
.lx-related-name { font-size: 9px; color: var(--lx-muted); text-align: center; margin-top: 3px; }

/* ---------- Tabs (config / pricing) ---------- */
.lx-empty { color: var(--lx-muted); font-style: italic; padding: 8px 0; }

/* ---------- Cart ---------- */
.lx-cart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .lx-cart-grid { grid-template-columns: 1fr; } }
.lx-panel { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.10); }
.lx-panel-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.lx-panel-title { font-size: 16px; font-weight: 900; color: var(--lx-blue); }
.lx-link-danger { background: none; border: 0; color: #B91C1C; font-weight: 600; cursor: pointer; font-size: 13px; }

.lx-cart-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--lx-soft-border); align-items: center; }
.lx-cart-item:last-child { border-bottom: 0; }
.lx-cart-thumb { width: 80px; height: 80px; border-radius: 8px; background: var(--lx-panel); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lx-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lx-cart-pn { font-size: 15px; font-weight: 800; color: var(--lx-blue); }
.lx-cart-meta { font-size: 12px; color: var(--lx-muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lx-cart-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #E8EEF5; color: var(--lx-blue); margin-top: 4px; }
.lx-cart-right { display: flex; align-items: center; gap: 16px; }
.lx-cart-col { display: flex; flex-direction: column; align-items: flex-end; min-width: 70px; }
.lx-cart-col .lab { font-size: 10px; color: var(--lx-muted); text-transform: uppercase; letter-spacing: .04em; }
.lx-cart-col .val { font-size: 14px; font-weight: 700; color: #0F172A; }
.lx-cart-col .val.price { color: var(--lx-blue); }
.lx-cart-remove { background: none; border: 0; color: #B91C1C; cursor: pointer; font-size: 18px; line-height: 1; padding: 6px; }
.lx-sum-row { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; font-size: 14px; }
.lx-sum-total { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; font-size: 18px; font-weight: 900; color: var(--lx-blue); border-top: 1px solid var(--lx-soft-border); padding-top: 12px; }
.lx-btn-primary { background: var(--lx-blue); color: #fff; border: 0; border-radius: 8px; padding: 12px 18px; font-weight: 700; cursor: pointer; width: 100%; font-size: 14px; }
.lx-btn-primary:hover:not(:disabled) { background: #00264d; }
.lx-btn-primary:disabled { opacity: .5; cursor: default; }
.lx-btn-ghost { background: none; border: 0; color: var(--lx-blue); font-weight: 600; cursor: pointer; width: 100%; padding: 10px; margin-top: 8px; font-size: 13px; }

/* ============================================================
   Dark mode — remap the .lx palette and override hardcoded
   light surfaces so the parts catalog/cart/detail follow the
   MudBlazor dark theme.
   ============================================================ */
.theme-dark .lx {
    --lx-blue: #4DA3FF;
    --lx-blue-bright: #6FB6FF;
    --lx-muted: #94A3B8;
    --lx-panel: #0F1420;
    --lx-border: #334155;
    --lx-card: #1A2332;
    --lx-card-hover: #232F45;
    --lx-card-border: #2D3E50;
    --lx-card-border-hover: #3D4F63;
    --lx-desc: #93B4E0;
    --lx-btn: #2D3E50;
    --lx-btn-fg: #E2E8F0;
    --lx-btn-border: #3D4F63;
    --lx-btn-hover: #3D4F63;
    --lx-err: #F87171;
    --lx-rel: #1A2332;
    --lx-rel-border: #2D3E50;
    --lx-soft-border: #2D3E50;
    --lx-pe-border: #2D3E50;
    --lx-surface: #1A2332;

    background: #141420;
    color: #E2E8F0;
}

/* Surfaces that were hardcoded white in light mode */
.theme-dark .lx-search-header,
.theme-dark .lx-detail-card,
.theme-dark .lx-related,
.theme-dark .lx-panel {
    background: var(--lx-surface);
}

.theme-dark .lx-input,
.theme-dark .lx-combo,
.theme-dark .lx-select select,
.theme-dark .lx-qty {
    background: var(--lx-surface);
    color: #E2E8F0;
}

.theme-dark .lx-qty input { color: #E2E8F0; }

/* Text that was hardcoded near-black */
.theme-dark .lx-swatch-name,
.theme-dark .lx-cart-col .val { color: #E2E8F0; }

/* Tags / pills */
.theme-dark .lx-cart-tag { background: rgba(77, 163, 255, 0.16); color: var(--lx-blue); }

/* Primary button darken-on-hover tuned for dark bg */
.theme-dark .lx-btn-primary:hover:not(:disabled) { background: #6FB6FF; }