/* parts_table.css — the repairs checkout's parts as a table (Luis, 2026-09-30).
   Drawn by parts_table.js from the part cards, which stay in the page, hidden. */

/* The card grid is the data source now, not the view. */
.products-card.pt-on > #productsGrid { display: none !important; }

.pt-wrap { font-family: var(--ap-font, inherit); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.pt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.pt-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; user-select: none;
  font-size: 12.5px; font-weight: 600; color: #3a3a3f;
  background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.pt-tab:hover { background: #f4f4f6; }
.pt-tab b {
  min-width: 18px; padding: 1px 6px; border-radius: 999px; text-align: center;
  font-size: 11px; font-weight: 700; color: #6e6e73; background: rgba(0, 0, 0, 0.06);
}
.pt-tab.active { background: #1d1d1f; color: #ffffff; border-color: #1d1d1f; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); }
.pt-tab.active b { background: rgba(255, 255, 255, 0.18); color: #ffffff; }

/* ── Table ────────────────────────────────────────────────────────────── */
.pt-scroller {
  background: #ffffff; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 24px rgba(30, 60, 110, 0.07);
}
.pt-wrap.pt-is-empty .pt-scroller { display: none; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 13px; color: #1d1d1f; }
.pt-table thead th {
  text-align: left; padding: 11px 12px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #8a8f97;
  background: #fafafb; border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}
.pt-table td { padding: 9px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); vertical-align: middle; }
.pt-table tbody tr:last-child td { border-bottom: 0; }
.pt-row { cursor: pointer; transition: background .12s ease; }
.pt-row:hover td { background: #f6f7f9; }

.pt-c-img { width: 56px; }
.pt-c-img img { width: 44px; height: 44px; object-fit: contain; display: block; border-radius: 8px; }
.pt-name { font-weight: 600; line-height: 1.3; }
.pt-sub  { font-size: 11px; color: #8a8f97; margin-top: 2px; }
.pt-c-grade, .pt-c-src, .pt-c-war { white-space: nowrap; }
.pt-c-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #1f5fbf; }
.pt-c-qty, .pt-table th.pt-c-qty { text-align: center; }
.pt-c-add, .pt-table th.pt-c-add { text-align: right; width: 1%; white-space: nowrap; }
.pt-muted { color: #8a8f97 !important; font-weight: 600; }

/* The copied pills: the card's styles are scoped to its tiles, so the table
   gives them their own. */
.pt-table .part-grade {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; color: #ffffff; line-height: 1.2;
}
.pt-table .source-pill { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; }
.pt-table .source-pill img { max-height: 18px; width: auto; display: block; }
.pt-table td > b { font-weight: 600; font-size: 12px; color: #3a3a3f; }

.pt-qty {
  display: inline-block; min-width: 30px; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
}
.pt-qty-in  { color: #0b6b4f; background: rgba(63, 122, 104, 0.12); }
.pt-qty-out { color: #b52020; background: rgba(229, 72, 77, 0.10); }
.pt-qty-wh  { color: #8a6207; background: rgba(202, 138, 4, 0.12); font-size: 11px; }

.pt-row-out td { opacity: .62; }
.pt-row-out td.pt-c-add { opacity: 1; }
.pt-row-wh td { background: rgba(202, 138, 4, 0.035); }

.pt-add {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; cursor: pointer; user-select: none;
  color: #ffffff; background: #1d1d1f; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  transition: transform .15s ease, background .15s ease;
}
.pt-add:hover { background: #000000; transform: translateY(-1px); }
.pt-add:active { transform: scale(.96); }

/* ── Empty state + Check Warehouse ───────────────────────────────────── */
.pt-empty { text-align: center; padding: 40px 16px; color: #8a8f97; font-size: 14px; }
.pt-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.pt-foot[hidden] { display: none; }
.pt-wh {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: #8a6207;
  background: rgba(202, 138, 4, 0.08); border: 1px dashed rgba(202, 138, 4, 0.55);
}
.pt-wh:hover { background: rgba(202, 138, 4, 0.14); }
.pt-wh.busy { opacity: .6; pointer-events: none; }
.pt-wh-plus { font-size: 16px; line-height: 1; }
.pt-wh-sub { font-size: 12px; color: #8a8f97; }

/* ── The card popup ───────────────────────────────────────────────────── */
.pt-modal {
  position: fixed; inset: 0; z-index: 10040;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(10, 10, 12, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pt-modal[hidden] { display: none; }
.pt-modal-box {
  position: relative; width: min(560px, 100%);
  background: #ffffff; border-radius: 22px; padding: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  animation: pt-pop .28s var(--ease-liquid, ease) both;
}
@keyframes pt-pop { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.pt-modal-x {
  position: absolute; top: 10px; right: 12px; z-index: 2; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-size: 20px; line-height: 1; color: #6e6e73; cursor: pointer; background: #f2f2f4;
}
.pt-modal-x:hover { background: #e6e6ea; }
.pt-modal-slot .product-card { cursor: default; margin: 0; }
.pt-modal-slot .product-card:hover { transform: none; }
.pt-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.pt-btn {
  display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 700; cursor: pointer; user-select: none;
}
.pt-btn-ghost { color: #1d1d1f; background: #f2f2f4; }
.pt-btn-ghost:hover { background: #e6e6ea; }
.pt-btn-add { color: #ffffff; background: #1d1d1f; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.pt-btn-add:hover { background: #000000; }
body.pt-modal-open { overflow: hidden; }

/* ── Narrow screens: drop the least-needed columns ───────────────────── */
@media (max-width: 1100px) { .pt-c-war { display: none; } }
@media (max-width: 800px)  { .pt-c-src, .pt-c-grade { display: none; } .pt-c-img img { width: 36px; height: 36px; } }

/* ── Dark ─────────────────────────────────────────────────────────────── */
body.apple-dark .pt-tab { background: #161616; color: #fffdfb; border-color: rgba(255, 255, 255, 0.08); }
body.apple-dark .pt-tab:hover { background: #1f1f1f; }
body.apple-dark .pt-tab b { background: rgba(255, 255, 255, 0.08); color: rgba(255, 253, 251, 0.7); }
body.apple-dark .pt-tab.active { background: #fffdfb; color: #080808; border-color: #fffdfb; }
body.apple-dark .pt-tab.active b { background: rgba(0, 0, 0, 0.1); color: #080808; }
body.apple-dark .pt-scroller { background: #111111; border-color: rgba(255, 255, 255, 0.07); box-shadow: none; }
body.apple-dark .pt-table { color: #fffdfb; }
body.apple-dark .pt-table thead th { background: #151515; color: rgba(255, 253, 251, 0.5); border-color: rgba(255, 255, 255, 0.07); }
body.apple-dark .pt-table td { border-color: rgba(255, 255, 255, 0.06); }
body.apple-dark .pt-row:hover td { background: #1a1a1a; }
body.apple-dark .pt-c-price { color: #7fb0ff; }
body.apple-dark .pt-add, body.apple-dark .pt-btn-add { background: #fffdfb; color: #080808; }
body.apple-dark .pt-modal-box { background: #121212; }
body.apple-dark .pt-btn-ghost, body.apple-dark .pt-modal-x { background: #1f1f1f; color: #fffdfb; }

/* The pills' base rules still place them absolutely (they used to float in a
   card's corner), which threw them out of the cells: pin them in the flow. */
.pt-table .part-grade, .pt-table .part-prov, .pt-table .source-pill {
  position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
  transform: none !important; margin: 0 !important; box-shadow: none;
}
.pt-table .part-grade { font-size: 10px !important; padding: 4px 10px !important; min-width: 0 !important; width: auto !important; height: auto !important; }
/* Sized in JS to the card's grid width; no cap here. */
.pt-modal-box { width: auto; max-width: calc(100vw - 48px); }

/* ── Narrower, centred (Luis, 2026-09-30) ─────────────────────────────────
   Grade rides at the end of the name; source and warranty sit on a line
   under it; the tabs and the table are centred with a cap on the width. */
.pt-tabs { justify-content: center; }
.pt-scroller { max-width: 1080px; margin: 0 auto; }
.pt-foot { justify-content: center; }
.pt-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.pt-table .pt-grade { flex: 0 0 auto; }
.pt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.pt-meta .part-grade { font-size: 9.5px !important; padding: 3px 9px !important; }
.pt-meta .source-pill img { max-height: 16px; }
.pt-meta-word { font-size: 11px; font-weight: 600; color: #6e6e73; }
.pt-meta .pt-sub { margin-top: 0; }
.pt-c-price { width: 1%; }
.pt-c-qty { width: 1%; }
body.apple-dark .pt-meta-word { color: rgba(255, 253, 251, 0.6); }
/* Names on one line (Luis, 2026-09-30): the table grows to fit its longest
   name instead of wrapping it, still centred; only when the panel itself is
   too narrow does it scroll sideways rather than squeeze. */
.pt-scroller { width: max-content; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.pt-table { width: auto; }
.pt-name { flex-wrap: nowrap; white-space: nowrap; }
.pt-meta { flex-wrap: nowrap; white-space: nowrap; }
.pt-c-name { min-width: 360px; }

/* ── Group dividers (Luis, 2026-09-30) ────────────────────────────────────
   A dark band opens each group: "In-house parts" and "Warehouse parts
   available to order", with the count at the right. */
.pt-table tr.pt-group td {
  padding: 8px 16px; background: #1d1d1f; color: #f5f5f7;
  border-bottom: 0; cursor: default;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.pt-table tr.pt-group:hover td { background: #1d1d1f; }
.pt-table tr.pt-group td { display: table-cell; }
.pt-group-label { display: inline-block; }
.pt-group-n {
  float: right; min-width: 22px; padding: 1px 8px; border-radius: 999px; text-align: center;
  background: rgba(255, 255, 255, 0.14); color: #ffffff; letter-spacing: 0;
}
body.apple-dark .pt-table tr.pt-group td { background: #2a2a2d; }
/* The theme paints table text dark with !important; the band's words stay white. */
body .pt-table tr.pt-group td,
body .pt-table tr.pt-group td .pt-group-label { color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important; }
body .pt-table tr.pt-group td .pt-group-n { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
body .pt-table tr.pt-group td { text-align: left !important; }

/* Stock as the card's dashed ring (Luis, 2026-09-30): same ring, same raised
   number, same colours — blue on the shelf, red at zero, gold for warehouse
   listings (a check, since MobileSentrix gives a yes, not a count). Sized
   down to sit in a row. */
.pt-table .pt-qty {
  width: 36px; height: 36px; min-width: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px dashed rgba(30, 50, 90, .28);
  background: rgba(255, 255, 255, .45);
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1;
  color: #3d4653;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, .95), 1px 1px 1.5px rgba(30, 50, 90, .30);
}
.pt-table .pt-qty-in  { border-color: rgba(48, 96, 160, .45); }
.pt-table .pt-qty-out { border-color: rgba(192, 43, 34, .45); color: #a8322a; }
.pt-table .pt-qty-wh  { border-color: rgba(202, 138, 4, .55); color: #a16207; font-size: 15px; }
.pt-row-out td.pt-c-qty { opacity: 1; }
body.apple-dark .pt-table .pt-qty { background: rgba(255, 255, 255, .04); color: #fffdfb; text-shadow: none; }
/* Zero-stock rows at full strength (Luis, 2026-09-30): the red ring already
   says it, so the row is no longer faded. */
.pt-row-out td { opacity: 1 !important; }
/* Divider words and their count centred together (Luis, 2026-09-30). */
body .pt-table tr.pt-group td { text-align: center !important; }
.pt-group-n { float: none; display: inline-block; margin-left: 10px; vertical-align: middle; }
/* A lighter black on the dividers (Luis, 2026-09-30). */
.pt-table tr.pt-group td, .pt-table tr.pt-group:hover td { background: #3a3a3e !important; }
/* The price in the stock ring's type (Luis, 2026-09-30): same face, size,
   weight and raised shadow; its own colour kept. */
.pt-table td.pt-c-price {
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, .95), 1px 1px 1.5px rgba(30, 50, 90, .30);
}
body.apple-dark .pt-table td.pt-c-price { text-shadow: none; }
/* Bigger photo, and the name in the stock number's type (Luis, 2026-09-30):
   same face, 15px, weight 600. Flat, with no raised shadow (Luis, 2026-10-13);
   the price and the stock ring keep theirs. */
.pt-c-img { width: 72px; }
.pt-c-img img { width: 58px; height: 58px; }
.pt-table .pt-name > span:first-child {
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1.2;
  color: #3d4653;
  text-shadow: none;
}
body.apple-dark .pt-table .pt-name > span:first-child { color: #fffdfb; }
/* Warehouse rows on the same white as in-house rows (Luis, 2026-09-30);
   the divider above them already says which they are. */
.pt-row-wh td { background: transparent !important; }
.pt-row-wh:hover td { background: #f6f7f9 !important; }
body.apple-dark .pt-row-wh:hover td { background: #1a1a1a !important; }
/* Photos at 62px (Luis, 2026-09-30). */
.pt-c-img { width: 76px; }
.pt-c-img img { width: 62px; height: 62px; }

/* ── Table / Cards switch (Luis, 2026-09-30) ──────────────────────────────
   Tabs stay centred; the switch sits at the right end of the same row. In
   card view the table, its empty note and its Check Warehouse button step
   aside and the original cards show below the bar. */
.pt-bar { position: relative; display: flex; justify-content: center; align-items: center; margin: 2px 0 12px; min-height: 36px; }
.pt-bar .pt-tabs { margin: 0; padding: 0 200px; }
.pt-view {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.pt-view-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #6e6e73; cursor: pointer; user-select: none;
  transition: background .15s ease, color .15s ease;
}
.pt-view-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pt-view-btn:hover { color: #1d1d1f; }
.pt-view-btn.active { background: #1d1d1f; color: #ffffff; }
.pt-wrap.pt-cards .pt-scroller,
.pt-wrap.pt-cards .pt-empty,
.pt-wrap.pt-cards .pt-foot { display: none !important; }
@media (max-width: 1300px) { .pt-bar { flex-direction: column; gap: 8px; } .pt-bar .pt-tabs { padding: 0; } .pt-view { position: static; transform: none; } }
body.apple-dark .pt-view { background: #161616; border-color: rgba(255, 255, 255, 0.08); }
body.apple-dark .pt-view-btn.active { background: #fffdfb; color: #080808; }