/* bv-tables.css — shared grouped-data-table styling for BV admin apps.
   MASTER = the bv-product-specs Pricing table; the common rules below are its exact values, so any table
   wrapped in "bvtbl" looks identical to Pricing. Synced copy: an identical file ships in each app's own
   dashboard folder (served locally at /bv-tables.css) — edit the source and copy to each app.
   Usage: add class "bvtbl" to the SCROLL CONTAINER that wraps the <table>. The container's own
   height/overflow is left to each app. Relies on host CSS vars: --line --thbg --card --hover --accent --txt --mut.

   Column-group dividers: add "grp-l" to the FIRST cell and "grp-r" to the LAST cell of each top-level group
   — in the group-header row, the column-header row, AND every body row — so the divider runs the full height. */

/* ---- common skeleton: bv-product-specs Pricing (.prc-table) values ---- */
.bvtbl table { border-collapse:separate; border-spacing:0; font-size:13px; width:100%; min-width:max-content; }
.bvtbl th, .bvtbl td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:4px 6px; white-space:nowrap; }
.bvtbl thead th { position:sticky; z-index:3; background:var(--thbg); text-align:left; font-weight:600; vertical-align:bottom; padding:8px 6px; }
.bvtbl thead tr.grp-row th { top:0; z-index:5; }
.bvtbl thead tr.col-row th { top:54px; }
.bvtbl thead th.grp { height:54px; padding:0 8px; text-align:center; vertical-align:middle; font-size:14px; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em; color:#3f4f6b; background:#e4e9f1; border-bottom:1px solid #cfd7e4; border-right:0; white-space:nowrap; }
/* ONE 2px divider per group boundary — a left border on the first cell of each group only (never left+right,
   which would stack to 4px). Matches .prc-table. */
.bvtbl .grp-l { border-left:2px solid #8b9ab5; }
.bvtbl thead tr.col-row th:not(.prod) { white-space:normal; max-width:150px; vertical-align:middle; padding:9px 12px;
    font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#6b7a90; background:#f4f6fa; line-height:1.35; }
.bvtbl thead th small { display:block; font-weight:400; color:var(--mut); font-size:10.5px; text-transform:none; letter-spacing:0; }
.bvtbl th.prod, .bvtbl td.prod { position:sticky; left:0; z-index:2; background:var(--card); min-width:230px; max-width:280px; white-space:normal; }
.bvtbl thead th.prod { z-index:7; background:var(--thbg); }
/* Product column header = two stacked cells (one per header row), both labelled "Product". */
.bvtbl thead tr.grp-row th.prod { top:0; vertical-align:middle; font-size:14px; font-weight:700; color:#3f4f6b; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid #cfd7e4; }
.bvtbl thead tr.col-row th.prod { top:54px; vertical-align:middle; background:#f4f6fa; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#6b7a90; padding:9px 12px; }
.bvtbl td.prod .title { font-weight:600; }
.bvtbl td.prod .vendor { color:var(--mut); font-size:11px; }
.bvtbl td.prod a { color:var(--accent); text-decoration:none; font-size:11px; }
.bvtbl tbody td { background:#fff; }
.bvtbl tbody tr:hover td { background:var(--hover); }
.bvtbl tbody tr:hover td.prod { background:#fbfcfe; }
.bvtbl td.cell { padding:4px 6px; text-align:center; position:relative; }
/* Drag-to-fill (Shopify bulk-edit style): a corner triangle; drag it down to copy the value to the bikes below. */
.bvtbl .prc-fill { position:absolute; right:0; bottom:0; width:12px; height:12px; cursor:crosshair; z-index:3; }
.bvtbl .prc-fill::after { content:''; position:absolute; right:1px; bottom:1px; width:0; height:0; border-style:solid; border-width:0 0 8px 8px; border-color:transparent transparent #aab2be transparent; border-radius:0 0 2px 0; }
.bvtbl .prc-fill:hover::after { border-bottom-color:#8a96a8; }
.bvtbl td.cell.prc-fill-src { box-shadow:inset 0 0 0 2px #2a6fdb; background:rgba(42,111,219,.10) !important; }
.bvtbl td.cell.prc-fill-target { box-shadow:inset 0 0 0 2px #c4ccd6; background:rgba(120,130,145,.16) !important; }
body.prc-filling, body.prc-filling * { -webkit-user-select:none; user-select:none; cursor:crosshair; }
/* border:1px + box-shadow:none — the host app draws its field "border" as an inset box-shadow (#8a8a8a),
   which must be cancelled here or it stacks on top of this border and looks thick/dark. */
.bvtbl td.cell input, .bvtbl td.cell select { border:1px solid #c7d3e8; box-shadow:none; min-height:0; background:#fff; padding:5px 8px; border-radius:6px; font:inherit; font-size:13px; color:#1a2233; }
.bvtbl td.cell input:hover, .bvtbl td.cell select:hover { border-color:#b6c2d6; box-shadow:none; }
.bvtbl td.cell input:focus, .bvtbl td.cell select:focus { border-color:#2a6fdb; background:#fff; outline:none; box-shadow:0 0 0 2px rgba(42,111,219,.15); }
/* Shared name-cell link pills (admin · product page · supplier product page) */
.bvtbl .prod-links { display:flex; align-items:center; gap:6px; margin-top:3px; flex-wrap:wrap; }
.bvtbl .prod-links a { font-size:11px; }
.bvtbl .prod-links .lp-pill { display:inline-block; font-family:inherit; font-size:11px; font-weight:500; line-height:1.4; padding:1px 10px; border-radius:999px;
    border:1px solid #cfe0f5; background:#eaf2fd; color:#1c5fc4; text-decoration:none; cursor:pointer; white-space:nowrap; box-sizing:border-box; }
.bvtbl .lp-pill:hover { background:#dceafb; text-decoration:none; }
.bvtbl .prod-links .lp-pill.lp-none { border-color:#d5d9e0; background:#f4f5f7; color:#8a94a3; }
.bvtbl .prod-links .lp-pill.lp-none:hover { background:#eceef1; color:#5f6b7a; }
/* Thumbnail + hover-zoom preview */
.bvtbl .prc-thumb { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; flex:0 0 auto; border:1px solid #e3e9f2; border-radius:8px; overflow:hidden; background:#fff; cursor:zoom-in; }
.bvtbl .prc-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.bvtbl .prc-thumb--sm { width:31px; height:31px; }
.bvtbl .prc-thumb.is-empty { background:#f1f4f9; cursor:default; }
.prc-preview { position:fixed; z-index:9999; width:480px; height:480px; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); background:#fff; border:1px solid #dfe5ee; border-radius:12px; box-shadow:0 12px 34px rgba(16,24,40,.28); padding:8px; opacity:0; visibility:hidden; transition:opacity .1s ease; pointer-events:none; }
.prc-preview.is-on { opacity:1; visibility:visible; }
.prc-preview img { width:100%; height:100%; object-fit:contain; display:block; }

/* ---- add-on-table extras (classes Pricing does not use, so harmless to it) ---- */
.bvtbl .grphead { display:flex; align-items:center; gap:9px; justify-content:center; }
.bvtbl .grphead-img { width:34px; height:34px; object-fit:contain; border-radius:6px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); flex:0 0 auto; }
.bvtbl .grphead-txt { text-align:left; }
.bvtbl .grphead-title { font-size:13px; font-weight:700; color:#3f4f6b; white-space:nowrap; text-transform:none; letter-spacing:0; }
.bvtbl .grphead-price { font-size:11px; font-weight:600; color:#6b7a90; text-transform:none; letter-spacing:0; }
.bvtbl .prc-namecell { display:flex; align-items:flex-start; gap:10px; }
.bvtbl .prc-nametext { min-width:0; }
.bvtbl .prc-sub { color:var(--mut); font-size:11px; margin-top:1px; }
.bvtbl td.cell input[type=text] { width:82px; text-align:right; }   /* narrow like .prc-input, not full-cell */
.bvtbl td.cell input[type=checkbox] { width:16px; height:16px; accent-color:#303030; cursor:pointer; }
/* On/off slide switch — exact copy of the Pricing .vchr-switch (green when on) */
.bvtbl .vchr-switch { position:relative; display:inline-block; width:32px; height:18px; flex:0 0 auto; vertical-align:middle; cursor:pointer; }
.bvtbl td.cell .vchr-switch input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; min-height:0; margin:0; }
.bvtbl .vchr-switch .track { position:absolute; inset:0; background:#cfd8e6; border-radius:20px; transition:background .15s; cursor:pointer; box-shadow:none; }
.bvtbl .vchr-switch .track::before { content:""; position:absolute; height:14px; width:14px; left:2px; top:2px; background:#fff; border-radius:50%; transition:transform .15s; box-shadow:0 1px 2px rgba(16,24,40,.25); }
.bvtbl .vchr-switch input:checked + .track { background:#1f8b3b; }
.bvtbl .vchr-switch input:checked + .track::before { transform:translateX(14px); }
.bvtbl .vchr-switch input:disabled + .track { opacity:.5; }
.bvtbl td.cell.msgcell input[type=text] { width:170px; text-align:left; }
.bvtbl td.cell input::placeholder { color:#98a2b3; opacity:1; }   /* group-default value: readable but clearly not a custom entry */
.bvtbl td.cell.dirty { background:rgba(0,91,211,.10) !important; box-shadow:inset 2px 0 0 var(--accent); }
.bvtbl td.cell.pbm-off { background:#f7f8fa; }
.bvtbl td.cell.pbm-off input { opacity:.5; }
.bvtbl td.cell.pbm-off.dirty input { opacity:1; }
.bvtbl .vrow { display:flex; align-items:center; gap:6px; margin:2px 0; }
.bvtbl .vrow input[type=text] { width:70px; text-align:right; }
.bvtbl .vfreerow { display:flex; align-items:center; gap:5px; margin:2px 0; cursor:pointer; }
.bvtbl .vlbl { flex:1 1 auto; min-width:40px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:#8a94a3; text-align:left; }