/* ============================================================
   LINX DESIGN SYSTEM — single source of truth (Phase 2)
   Aligned to the parts-order configuration look the team likes:
   LinxBlue (#003366) + bright blue accent, system fonts, light-gray
   page, white cards with soft shadows, rounded corners, bold blue
   headings/prices. Mirrors the Linx WPF desktop app (Estimates.xaml).

   Reusable component library uses the `lxc-` prefix + `--lxc-*`
   tokens so it shares the exact look of the existing `lx-*` parts
   classes (linx-parts.css) with zero name collisions. Legacy CSS
   (design-system.css teal system, app.css, parts-*.css) is retired
   as screens migrate onto `lxc-*`.
   ============================================================ */

:root {
  /* ── LinxBlue brand ── */
  --lxc-blue:        #003366;
  --lxc-blue-hover:  #00264d;
  --lxc-blue-bright: #1D7CCF;
  --lxc-desc:        #1D4F8C;

  /* ── Ink / surfaces ── */
  --lxc-ink:          #0F172A;
  --lxc-muted:        #64748B;
  --lxc-bg:           #F3F4F6;   /* page background        */
  --lxc-surface:      #ffffff;   /* cards / panels         */
  --lxc-panel:        #F1F3F5;   /* inset wells / images   */
  --lxc-border:       #CBD5E1;   /* input / divider border */
  --lxc-border-strong:#9CA3AF;
  --lxc-soft-border:  #E2E8F0;

  /* ── Secondary button ── */
  --lxc-btn:        #E2E8F0;
  --lxc-btn-fg:     #334155;
  --lxc-btn-border: #D5DEE9;
  --lxc-btn-hover:  #D1DAE7;

  /* ── Status (quote workflow) — soft fill + bold text ── */
  --lxc-draft-bg:#E2E8F0;    --lxc-draft:#475569;
  --lxc-pending-bg:#FEF3C7;  --lxc-pending:#92400E;
  --lxc-sent-bg:#DBEAFE;     --lxc-sent:#1D4F8C;
  --lxc-accepted-bg:#DCFCE7; --lxc-accepted:#166534;
  --lxc-rejected-bg:#FEE2E2; --lxc-rejected:#B91C1C;
  --lxc-danger:#B91C1C;      --lxc-danger-bg:#FEE2E2;
  --lxc-success:#166534;     --lxc-success-bg:#DCFCE7;
  --lxc-warning:#92400E;     --lxc-warning-bg:#FEF3C7;
  --lxc-info:#1D4F8C;        --lxc-info-bg:#DBEAFE;

  /* ── Type ── */
  --lxc-font: 'Segoe UI', Inter, Roboto, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Radius / shadow / motion ── */
  --lxc-radius-sm: 4px;
  --lxc-radius:    8px;
  --lxc-radius-lg: 12px;
  --lxc-shadow:        0 2px 10px rgba(0, 0, 0, 0.12);
  --lxc-shadow-hover:  0 4px 16px rgba(0, 0, 0, 0.18);
  --lxc-focus: 0 0 0 3px rgba(29, 124, 207, 0.20);
  --lxc-dur: 120ms;
}

/* ── Dark mode (mirrors linx-parts.css dark remap) ── */
.theme-dark {
  --lxc-blue:        #4DA3FF;
  --lxc-blue-hover:  #6FB6FF;
  --lxc-blue-bright: #6FB6FF;
  --lxc-desc:        #93B4E0;
  --lxc-ink:         #E2E8F0;
  --lxc-muted:       #94A3B8;
  --lxc-bg:          #141420;
  --lxc-surface:     #1A2332;
  --lxc-panel:       #0F1420;
  --lxc-border:      #334155;
  --lxc-border-strong:#3D4F63;
  --lxc-soft-border: #2D3E50;
  --lxc-btn:         #2D3E50;
  --lxc-btn-fg:      #E2E8F0;
  --lxc-btn-border:  #3D4F63;
  --lxc-btn-hover:   #3D4F63;
  --lxc-draft-bg:#23303f;    --lxc-draft:#CBD5E1;
  --lxc-pending-bg:#3a2f12;  --lxc-pending:#FBBF24;
  --lxc-sent-bg:#13283f;     --lxc-sent:#93B4E0;
  --lxc-accepted-bg:#10301f; --lxc-accepted:#86EFAC;
  --lxc-rejected-bg:#3a1717; --lxc-rejected:#FCA5A5;
  --lxc-danger:#FCA5A5;      --lxc-danger-bg:#3a1717;
  --lxc-success:#86EFAC;     --lxc-success-bg:#10301f;
  --lxc-warning:#FBBF24;     --lxc-warning-bg:#3a2f12;
  --lxc-info:#93B4E0;        --lxc-info-bg:#13283f;
  --lxc-shadow:       0 2px 10px rgba(0, 0, 0, 0.40);
  --lxc-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.50);
}

/* ── Base ── */
.lxc-app { font-family: var(--lxc-font); color: var(--lxc-ink); -webkit-font-smoothing: antialiased; }
.lxc-page { background: var(--lxc-bg); }
.lxc-muted { color: var(--lxc-muted); }
.lxc-h1 { font-size: 28px; font-weight: 800; color: var(--lxc-blue); margin: 0; line-height: 1.15; }
.lxc-h2 { font-size: 20px; font-weight: 700; color: var(--lxc-blue); margin: 0; }
.lxc-title { font-size: 16px; font-weight: 700; color: var(--lxc-blue); margin: 0; }
.lxc-price { font-size: 24px; font-weight: 900; color: var(--lxc-blue); }
.lxc-microlabel { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lxc-muted); }

/* ── Buttons ── */
.lxc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--lxc-font); font-size: 13px; font-weight: 700;
  padding: 10px 18px; border-radius: var(--lxc-radius); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: background var(--lxc-dur) ease, border-color var(--lxc-dur) ease;
}
.lxc-btn:focus-visible { outline: none; box-shadow: var(--lxc-focus); }
.lxc-btn--primary   { background: var(--lxc-blue); color: #fff; }
.lxc-btn--primary:hover:not(:disabled) { background: var(--lxc-blue-hover); }
.lxc-btn--secondary { background: var(--lxc-btn); color: var(--lxc-btn-fg); border-color: var(--lxc-btn-border); }
.lxc-btn--secondary:hover:not(:disabled) { background: var(--lxc-btn-hover); }
.lxc-btn--ghost     { background: transparent; color: var(--lxc-blue); font-weight: 600; }
.lxc-btn--ghost:hover:not(:disabled) { background: rgba(0, 51, 102, 0.07); }
.lxc-btn--danger    { background: transparent; color: var(--lxc-danger); border-color: var(--lxc-danger); }
.lxc-btn--danger:hover:not(:disabled) { background: var(--lxc-danger-bg); }
.lxc-btn--sm { padding: 6px 12px; font-size: 12px; }
.lxc-btn--lg { padding: 13px 22px; font-size: 14px; }
.lxc-btn:disabled, .lxc-btn--disabled { opacity: 0.45; cursor: default; }

/* ── Card / panel ── */
.lxc-card {
  background: var(--lxc-surface); border-radius: var(--lxc-radius-lg);
  padding: 20px; box-shadow: var(--lxc-shadow); border: 1px solid transparent;
}
.lxc-card--interactive { cursor: pointer; transition: box-shadow var(--lxc-dur) ease, border-color var(--lxc-dur) ease; }
.lxc-card--interactive:hover { box-shadow: var(--lxc-shadow-hover); border-color: var(--lxc-border); }

/* ── Badges (status) — pill, soft fill + bold text ── */
.lxc-badge {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 10px;
}
.lxc-badge--draft    { background: var(--lxc-draft-bg);    color: var(--lxc-draft); }
.lxc-badge--pending  { background: var(--lxc-pending-bg);  color: var(--lxc-pending); }
.lxc-badge--sent     { background: var(--lxc-sent-bg);     color: var(--lxc-sent); }
.lxc-badge--accepted { background: var(--lxc-accepted-bg); color: var(--lxc-accepted); }
.lxc-badge--rejected { background: var(--lxc-rejected-bg); color: var(--lxc-rejected); }
.lxc-badge--expired  { background: var(--lxc-draft-bg);    color: var(--lxc-muted); }

/* Blue info tag (matches parts .lx-cart-tag) */
.lxc-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #E8EEF5; color: var(--lxc-blue); }
.theme-dark .lxc-tag { background: rgba(77, 163, 255, 0.16); color: var(--lxc-blue); }

/* ── Form fields ── */
.lxc-field { display: flex; flex-direction: column; gap: 5px; }
.lxc-label { font-size: 11px; font-weight: 700; color: var(--lxc-blue); letter-spacing: 0.03em; }
.lxc-input, .lxc-select {
  width: 100%; background: var(--lxc-surface); border: 1px solid var(--lxc-border);
  border-radius: var(--lxc-radius); padding: 8px 10px; font-family: var(--lxc-font);
  font-size: 13px; color: var(--lxc-ink); outline: none; transition: border-color var(--lxc-dur) ease, box-shadow var(--lxc-dur) ease;
}
.lxc-input:focus, .lxc-select:focus { border-color: var(--lxc-blue-bright); box-shadow: var(--lxc-focus); }
.lxc-input--invalid { border-color: var(--lxc-danger); }
.lxc-help { font-size: 11px; color: var(--lxc-muted); }
.lxc-help--error { color: var(--lxc-danger); }

/* ── Switch ── */
.lxc-switch { position: relative; width: 40px; height: 22px; display: inline-block; flex: 0 0 auto; }
.lxc-switch input { opacity: 0; width: 0; height: 0; }
.lxc-switch__track { position: absolute; inset: 0; background: var(--lxc-border-strong); border-radius: 11px; transition: background var(--lxc-dur) ease; }
.lxc-switch__track::before { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform var(--lxc-dur) ease; }
.lxc-switch input:checked + .lxc-switch__track { background: var(--lxc-blue); }
.lxc-switch input:checked + .lxc-switch__track::before { transform: translateX(18px); }

/* ── Stepper ── */
.lxc-stepper { display: flex; align-items: center; }
.lxc-step__dot {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; border: 1px solid var(--lxc-border);
  background: var(--lxc-surface); color: var(--lxc-muted);
}
.lxc-step__dot--active { background: var(--lxc-blue); border-color: var(--lxc-blue); color: #fff; }
.lxc-step__dot--done   { background: var(--lxc-blue-bright); border-color: var(--lxc-blue-bright); color: #fff; }
.lxc-step__connector { width: 30px; height: 2px; background: var(--lxc-soft-border); }
.lxc-step__connector--done { background: var(--lxc-blue-bright); }

/* ── Table ── */
.lxc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lxc-table th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lxc-muted);
  text-align: left; padding: 0 12px 10px; border-bottom: 1px solid var(--lxc-soft-border);
}
.lxc-table td { padding: 12px; border-bottom: 1px solid var(--lxc-soft-border); color: var(--lxc-ink); }
.lxc-table tbody tr { transition: background var(--lxc-dur) ease; }
.lxc-table tbody tr:hover { background: #E8EEF5; }
.theme-dark .lxc-table tbody tr:hover { background: rgba(77, 163, 255, 0.10); }
.lxc-table__num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Alert ── */
.lxc-alert { display: flex; gap: 10px; padding: 12px 16px; border-radius: var(--lxc-radius); font-size: 13px; border: 1px solid transparent; }
.lxc-alert--info    { background: var(--lxc-info-bg);    color: var(--lxc-info);    border-color: var(--lxc-info); }
.lxc-alert--success { background: var(--lxc-success-bg); color: var(--lxc-success); border-color: var(--lxc-success); }
.lxc-alert--warning { background: var(--lxc-warning-bg); color: var(--lxc-warning); border-color: var(--lxc-warning); }
.lxc-alert--danger  { background: var(--lxc-danger-bg);  color: var(--lxc-danger);  border-color: var(--lxc-danger); }

/* ── Page header (4px blue underline — mirrors parts .lx-search-header) ── */
.lxc-page-header { background: var(--lxc-surface); border-bottom: 4px solid var(--lxc-blue); border-radius: var(--lxc-radius) var(--lxc-radius) 0 0; padding: 14px 18px; }

/* ── Detail / order panel (white, soft shadow) ── */
.lxc-detail-card { background: var(--lxc-surface); border-radius: var(--lxc-radius-lg); padding: 28px; box-shadow: var(--lxc-shadow); }
.lxc-detail-img { background: var(--lxc-panel); border-radius: var(--lxc-radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* ── Big identifiers / prices ── */
.lxc-form-title { font-size: 20px; font-weight: 700; color: var(--lxc-blue); margin: 0; }
.lxc-pn { font-size: 32px; font-weight: 900; color: var(--lxc-blue); line-height: 1.1; margin: 4px 0 0; word-break: break-word; }
.lxc-price-lg { font-size: 30px; font-weight: 900; color: var(--lxc-blue); }
.lxc-price-per { font-size: 13px; color: var(--lxc-muted); padding-bottom: 5px; }

/* ── Section box (bordered, titled) ── */
.lxc-section { border: 1px solid var(--lxc-soft-border); border-radius: 10px; padding: 14px; }
.lxc-section-h { font-size: 13px; font-weight: 700; color: var(--lxc-blue); letter-spacing: 0.03em; margin-bottom: 8px; }
.lxc-section-hint { font-size: 11px; color: var(--lxc-muted); margin-bottom: 8px; }
.lxc-req { color: var(--lxc-danger); }

/* ── Info box (e.g. pricing-engine status — mirrors parts .lx-pe-box) ── */
.lxc-infobox { border: 1px solid #D8E2EE; border-radius: var(--lxc-radius); padding: 10px; }
.lxc-infobox--warn { border-color: #F59E0B; }
.lxc-infobox__h { font-size: 10px; font-weight: 700; color: var(--lxc-blue); letter-spacing: 0.04em; text-transform: uppercase; }
.lxc-infobox__b { font-size: 12px; color: var(--lxc-muted); margin-top: 3px; }
.theme-dark .lxc-infobox { border-color: var(--lxc-soft-border); }

/* ── Quantity stepper (mirrors parts .lx-qty) ── */
.lxc-qty { display: inline-flex; align-items: center; border: 1px solid var(--lxc-border); border-radius: var(--lxc-radius); height: 44px; overflow: hidden; background: var(--lxc-surface); }
.lxc-qty button { width: 40px; height: 100%; border: 0; background: transparent; font-size: 18px; font-weight: 700; color: var(--lxc-blue); cursor: pointer; }
.lxc-qty input { width: 48px; border: 0; text-align: center; font-size: 16px; font-weight: 600; outline: none; background: transparent; color: var(--lxc-ink); }
.lxc-qty input::-webkit-outer-spin-button, .lxc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Spinner (button loading) ── */
.lxc-spinner { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: lxc-spin 0.7s linear infinite; }
.lxc-btn--secondary .lxc-spinner, .lxc-btn--ghost .lxc-spinner, .lxc-btn--danger .lxc-spinner { border-color: rgba(0, 51, 102, 0.25); border-top-color: var(--lxc-blue); }
@keyframes lxc-spin { to { transform: rotate(360deg); } }

/* ── Toasts (LinxToastProvider) ── */
.lxc-toast-host { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.lxc-toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--lxc-radius); background: var(--lxc-surface); box-shadow: var(--lxc-shadow-hover); border-left: 4px solid var(--lxc-blue); font-size: 13px; color: var(--lxc-ink); animation: lxc-toast-in 0.18s ease; }
.lxc-toast--success { border-left-color: var(--lxc-success); }
.lxc-toast--warning { border-left-color: var(--lxc-warning); }
.lxc-toast--error { border-left-color: var(--lxc-danger); }
.lxc-toast--info { border-left-color: var(--lxc-info); }
.lxc-toast__text { flex: 1; }
.lxc-toast__close { background: none; border: 0; font-size: 18px; line-height: 1; color: var(--lxc-muted); cursor: pointer; padding: 0 2px; }
.lxc-toast__close:hover { color: var(--lxc-ink); }
@keyframes lxc-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ── Modal dialog (LinxDialogProvider) ── */
.lxc-dialog-overlay { position: fixed; inset: 0; z-index: 1900; background: rgba(15, 28, 43, 0.45); display: flex; align-items: center; justify-content: center; padding: 20px; animation: lxc-fade 0.15s ease; }
.lxc-dialog { background: var(--lxc-surface); border-radius: var(--lxc-radius-lg); box-shadow: var(--lxc-shadow-hover); width: 100%; max-width: 440px; padding: 22px 24px; animation: lxc-pop 0.15s ease; }
.lxc-dialog__title { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--lxc-blue); }
.lxc-dialog__body { margin: 0 0 20px; font-size: 14px; color: var(--lxc-ink); line-height: 1.55; }
.lxc-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; }
@keyframes lxc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lxc-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }