/* Flooring Liquidators — Price List
   Colour theme matches the CRM (Ruengine V7 / Flooring Liquidators CRM):
   a true BLACK sidebar and black bars, ORANGE as the primary accent
   (active menu items, primary buttons, highlights), clean white/light
   content area. Type scale is deliberately BIG and BOLD (staff readability). */

:root {
  --black: #000000;
  --black-2: #0d0d0d;
  --black-3: #1f1f1f;
  --orange: #da291c; /* Moe, 2026-11-04: brand red controls sitewide */
  --orange-dark: #b0131c;
  --red-fl: #da291c; /* Flooring Liquidators red — pills/badges/chips + highlighted text */
  --blue: #2563eb;
  --green: #16a34a;
  --red: #dc2626;
  --slate: #475569;
  --ink: #141519;
  --muted: #5b6068;
  --line: #e3e5e9;
  --bg: #f4f4f6;
  --card: #ffffff;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { font-size: 18px; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 800; }

/* ------------------------------------------------------------------ boot */
.boot { text-align: center; padding: 4rem 1rem; color: var(--muted); font-size: 1.1rem; font-weight: 600; }
.boot-logo { height: 64px; }

/* ------------------------------------------------------- auth (setup/login) */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--black); padding: 1rem; }
.auth-card { background: var(--card); border-radius: 14px; padding: 2rem; width: 100%; max-width: 460px; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.auth-logo-chip { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; text-align: center; margin-bottom: 1rem; }
.auth-logo-chip img { max-width: 100%; height: 58px; }
.auth-card h1 { font-size: 1.7rem; margin-bottom: .3rem; }
.auth-card .sub { color: var(--muted); font-weight: 600; margin: 0 0 1.2rem; }
.auth-card label { display: block; font-weight: 700; margin: .9rem 0 .35rem; font-size: 1rem; }
.auth-card input { width: 100%; padding: .7rem .8rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; }
.auth-card input:focus { outline: none; border-color: var(--orange); }
.auth-switch { margin-top: 1.1rem; text-align: center; font-weight: 600; }
.auth-switch button { background: none; border: none; color: var(--blue); font-weight: 800; padding: 0; }
.form-error { background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b; font-weight: 700; border-radius: 8px; padding: .6rem .8rem; margin-top: 1rem; }
.form-ok { background: #f0fdf4; border: 1.5px solid #86efac; color: #166534; font-weight: 700; border-radius: 8px; padding: .6rem .8rem; margin-top: 1rem; word-break: break-word; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: .45rem; border: none; border-radius: 8px;
  padding: .6rem 1.05rem; font-weight: 800; font-size: 1rem; color: #fff; background: var(--slate);
  text-decoration: none; line-height: 1.15; }
.btn .ic { font-size: 1.05em; }
.btn-orange { background: var(--orange); } .btn-orange:hover { background: var(--orange-dark); }
.btn-view { background: var(--red-fl); } .btn-view:hover { background: #b0131c; }
.btn-blue { background: var(--blue); }
.btn-green { background: var(--green); }
.btn-red { background: var(--red); }
.btn-slate { background: var(--slate); }
/* Sort control beside Filters/Promo (Moe, 2026-11-04): same slate button
   look as its row neighbours; grows to fill the row's remaining space. */
.sort-select { flex: 1 1 150px; background: var(--slate); color: #fff; font-weight: 800; font-size: .95rem; border: none; border-radius: 10px; padding: .6rem .5rem; cursor: pointer; }
.btn-ghost { background: #fff; color: var(--ink); border: 2px solid var(--line); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-big { width: 100%; justify-content: center; padding: .85rem 1rem; font-size: 1.1rem; margin-top: 1.2rem; }
.btn-small { padding: .4rem .75rem; font-size: .92rem; }

/* ----------------------------------------------------------------- layout */
.layout { display: flex; min-height: 100vh; }

/* Sidebar: ONE single scrolling surface — header, nav, suppliers, count and
   the signed-in user block all scroll together (no nested scroll areas). */
.sidebar {
  width: 300px; flex: 0 0 300px; background: var(--black); color: #e8e9ec;
  height: 100vh; position: sticky; top: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem .9rem 1.4rem;
}
.side-logo-chip { background: #fff; border-radius: 10px; padding: .55rem .7rem; text-align: center; }
.side-logo-chip img { max-width: 100%; height: 52px; display: block; margin: 0 auto; }
.side-module { font-size: 1.55rem; font-weight: 900; color: #fff; margin: .8rem .2rem .2rem; letter-spacing: .2px; }
.side-module .accent { color: var(--red-fl); }
.side-sub { color: #a7abb5; font-weight: 600; font-size: .95rem; margin: 0 .2rem 1rem; }
.side-nav { display: flex; flex-direction: column; gap: .35rem; }
.side-item { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  background: none; border: none; color: #e8e9ec; font-weight: 700; font-size: 1.08rem;
  padding: .65rem .7rem; border-radius: 8px; }
.side-item:hover { background: var(--black-3); }
.side-item.active { background: var(--red-fl); color: #fff; } /* Moe, 2026-11-04: selected pill is brand red */
.side-item .ic { width: 1.3em; text-align: center; }
.side-h { color: #8f939e; font-size: .85rem; font-weight: 800; letter-spacing: .14em; margin: 1.3rem .2rem .5rem; }
.side-supplier { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  width: 100%; background: none; border: none; color: #dfe1e6; text-align: left;
  font-weight: 600; font-size: 1rem; padding: .42rem .7rem; border-radius: 7px; }
.side-supplier:hover { background: var(--black-3); }
.side-supplier.active { background: var(--black-3); color: #fff; font-weight: 800; box-shadow: inset 3px 0 0 var(--orange); }
.side-supplier .cnt { color: #9ba0aa; font-size: .88rem; font-weight: 700; }
.side-count { margin: 1.2rem .2rem 0; color: #c9ccd4; font-weight: 700; font-size: 1rem; }
.side-user { margin-top: 1rem; border-top: 1px solid var(--black-3); padding-top: 1rem; }
.side-user .who { font-weight: 800; color: #fff; font-size: 1.05rem; }
.side-user .role { color: var(--red-fl); font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.side-user .email { color: #a7abb5; font-weight: 600; font-size: .92rem; word-break: break-all; }
.signout { margin-top: .7rem; width: 100%; background: var(--black-3); color: #fff; border: none;
  border-radius: 8px; padding: .55rem; font-weight: 800; }
.signout:hover { background: #2b2b2b; }

.main { flex: 1; min-width: 0; padding: 1.2rem 1.4rem 3rem; }
.topbar { display: none; }
.view-title { font-size: 1.9rem; font-weight: 900; }
.view-sub { color: var(--muted); font-weight: 600; margin: .2rem 0 1.1rem; font-size: 1.05rem; }

/* ------------------------------------------------------------- price list */
.search-row { display: flex; gap: .6rem; align-items: stretch; margin-bottom: .8rem; }
.search-box { flex: 1; display: flex; align-items: center; gap: .5rem; background: #fff;
  border: 2px solid var(--line); border-radius: 10px; padding: 0 .9rem; }
.search-box:focus-within { border-color: var(--orange); }
.search-box .ic { font-size: 1.25rem; }
.search-box input { flex: 1; border: none; outline: none; padding: .8rem 0; font-size: 1.15rem; font-weight: 700; min-width: 0; }
/* Filters slide in as a drawer from the left (Moe, 2026-11-04) — pick the
   filters, Apply, and it retracts, so the list keeps its full height. */
.filters-drawer { position: fixed; top: 0; left: 0; height: 100dvh; width: min(350px, 90vw); background: #fff; z-index: 70; box-shadow: 2px 0 18px rgba(0,0,0,.25); padding: 1rem; overflow-y: auto; transform: translateX(-105%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
.filters-drawer.open { transform: translateX(0); visibility: visible; transition: transform .28s ease; }
.filters-drawer .filters-grid { grid-template-columns: 1fr; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 65; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; }
.drawer-head h3 { margin: 0; font-size: 1.1rem; font-weight: 900; }
.filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; }
.filters-grid label { display: block; font-weight: 800; font-size: .95rem; margin-bottom: .3rem; }
.filters-grid select, .filters-grid input { width: 100%; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; background: #fff; }
.filters-actions { margin-top: .9rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.badge { background: var(--red-fl); color: #fff; border-radius: 999px; font-size: .8rem; font-weight: 900; padding: .05rem .5rem; margin-left: .35rem; }
.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .7rem; }
.result-count { font-weight: 800; font-size: 1.1rem; }

table.products { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
table.products th { background: var(--black); color: #fff; text-align: left; padding: .75rem .9rem; font-size: 1rem; font-weight: 800; }
table.products td { padding: .8rem .9rem; border-top: 1px solid var(--line); vertical-align: top; font-size: 1.02rem; }
table.products tr:hover td { background: #fff8f1; }
.p-name { font-size: 1.28rem; font-weight: 900; line-height: 1.25; }
.p-supplier { font-size: 1.12rem; font-weight: 800; }
.p-colour { font-size: 1.12rem; font-weight: 900; }          /* colours extra-bold */
.p-specs { color: #33363d; font-weight: 600; font-size: .98rem; }
.p-cat { color: var(--muted); font-weight: 700; font-size: .95rem; }
.price-lines { font-size: 1.02rem; }
/* Price rows (Moe, 2026-11-04): description and price stay on the SAME
   line — the label gets a left column (wrapping inside itself when long)
   and the price is pinned to the right, bold, never wrapping, so the two
   never scatter across lines. */
.price-line { display: flex; align-items: baseline; gap: .75rem; margin: .1rem 0; }
.price-line .pl { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #3c4048; }
.price-line .pv { flex: 0 0 auto; white-space: nowrap; margin-left: auto; font-weight: 900; }
.price-line .promo-price { flex: 0 0 auto; white-space: nowrap; }
.price-none { font-weight: 800; color: var(--red); }
.row-actions { display: flex; gap: .45rem; white-space: nowrap; }

.cards { display: none; }
.pager { display: flex; gap: .6rem; align-items: center; justify-content: center; margin-top: 1.1rem; font-weight: 800; }

/* ---------------------------------------------------------- product detail */
.detail { background: #fff; border-radius: 12px; padding: 1.4rem; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.detail h2 { font-size: 2rem; font-weight: 400; line-height: 1.2; }
.detail .d-supplier { font-size: 1.3rem; font-weight: 800; color: var(--red-fl); margin-top: .2rem; }
.detail .d-colour { font-size: 1.45rem; font-weight: 400; color: var(--red-fl); margin-top: .35rem; }
.d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 1.6rem; margin-top: 1.2rem; }
.d-field .d-label { font-size: .92rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.d-field .d-value { font-size: 1.12rem; font-weight: 700; }
.d-field .d-value.big { font-size: 1.25rem; font-weight: 900; }
.d-prices .price-line { font-size: 1.18rem; margin: .3rem 0; }
.colour-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.chip { border: 1.5px solid var(--black); background: #fff; color: var(--ink); border-radius: 999px;
  padding: .22rem .6rem; font-weight: 800; font-size: .88rem; line-height: 1.25; }
.chip:hover { background: var(--black); color: #fff; }
.chip.current { background: var(--red-fl); border-color: var(--red-fl); color: #fff; }
.detail-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; border-top: 2px solid var(--line); padding-top: 1.1rem; }

/* ------------------------------------------- collections (main list) + view */
.coll-row { cursor: pointer; }
.coll-card { cursor: pointer; }
.coll-counts { font-weight: 800; font-size: 1.02rem; }
.colour-entry { margin: .15rem 0; }
.p-colour-sm { font-weight: 900; }

/* Stock-status pills (semantic colours; 'Check stock' is charcoal so it can
   never be confused with the red 'Out of stock'). */
.status-badge { display: inline-block; border-radius: 999px; padding: .12rem .65rem; font-size: .85rem; font-weight: 900; color: #fff; vertical-align: middle; white-space: nowrap; }
.st-in { background: var(--green); }
.st-check { background: var(--black-3); }
.st-back { background: var(--blue); }
.st-out { background: var(--red); }
.colour-notes { color: var(--muted); font-weight: 600; font-size: .92rem; margin-top: .25rem; }
.status-form { margin-top: 1.2rem; border-top: 2px solid var(--line); padding-top: 1rem; }
.status-form .d-label { font-size: .92rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.status-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.status-row select, .status-row input { padding: .55rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 700; background: #fff; }
.status-row input { flex: 1; min-width: 200px; }
/* Promo pricing: while a promo is active the regular price is crossed out,
   the promo price is FL red and bold, with a small-font detail line naming
   the promo and its end date. */
.price-was { opacity: .8; }
.pg-tag { display: inline-block; background: var(--red-fl); color: #fff; font-weight: 800;
  font-size: .8rem; padding: .18rem .55rem; border-radius: 999px; margin-bottom: .35rem; }
.price-was .price-line .pv {
  text-decoration: line-through; text-decoration-thickness: 2px; }
/* Grade-targeted promo: only the promo'd grade's PRICE is struck (never the
   label/name — Moe, 2026-11-03), with the promo price beside it on the same
   line; other grades stay untouched. */
.price-line-struck { opacity: .8; }
.price-line-struck .pv {
  text-decoration: line-through; text-decoration-thickness: 2px; }
.promo-block { margin-top: .3rem; }
.promo-price { color: var(--red-fl); font-weight: 900; font-size: 1.12em; }
.promo-detail { color: var(--red-fl); font-size: .82rem; font-weight: 700; }
.promo-block .promo-detail { display: block; margin-top: .1rem; }
/* Greg via Moe, 2026-11-04: in the price LIST the promo name sits beside
   the promo price on ONE line, clipped with an ellipsis when the column is
   narrow, so sale rows stay at normal height. The full promo name and end
   date remain available in the label's hover/long-press title and on the
   product page, whose detail line is unchanged. */
#results .price-lines .promo-block { display: flex; align-items: baseline; gap: .35rem; margin-top: .1rem; }
#results .price-lines .promo-block .promo-price { flex: 0 0 auto; }
/* One line: the promo name clamps with an ellipsis, the expiry date is
   always rendered in full (Moe, 2026-11-04: "It needs expiry date"). */
#results .price-lines .promo-block .promo-detail { display: inline-flex; align-items: baseline; gap: .3rem; margin-left: 0; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
#results .price-lines .promo-block .promo-detail .promo-tag { flex: 0 0 auto; }
#results .price-lines .promo-block .promo-detail .promo-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#results .price-lines .promo-block .promo-detail .promo-expiry { flex: 0 0 auto; }
/* Desktop table (>900px): the promo name would force the Cost column wide,
   so only the name hides there — the 🏷 marker and the full expiry date stay
   visible beside the sale price; the promo name remains in the hover title
   and on the product page. Phone cards keep the one-line clamped name plus
   the visible expiry. */
@media (min-width: 901px) {
  #results .price-lines .promo-block .promo-detail { flex: 0 0 auto; }
  #results .price-lines .promo-block .promo-detail .promo-name { display: none; }
  /* With the date visible, the marker is redundant — dropping it keeps the
     Cost column narrow enough to avoid any page-level horizontal scroll.
     Promos without an end date keep the marker as before. */
  #results .price-lines .promo-block .promo-detail:has(.promo-expiry) .promo-tag { display: none; }
}
.colour-promo { margin: .15rem 0 .25rem; }
.btn-promo-on { background: var(--red-fl); }
.btn-promo-on:hover { background: #b0131c; }
.tag-sched { background: #dbeafe; color: #1e40af; }
.pm-pick { display: block; width: 100%; text-align: left; background: #fff; border: 2px solid var(--line);
  border-radius: 8px; padding: .55rem .75rem; margin-top: .45rem; font-weight: 700; color: var(--ink); }
.pm-pick:hover { border-color: var(--orange); }
.pm-pick span { color: var(--muted); font-weight: 600; }

/* Promo CSV import: preview first; only server-matched rows can be confirmed. */
.promo-import-card { max-width: 1100px; }
.import-help { color: var(--muted); font-weight: 600; margin: .2rem 0 1rem; }
.import-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.import-preview { margin-top: 1.2rem; }
.import-preview h4 { font-size: 1.08rem; font-weight: 900; margin: 1.1rem 0 .55rem; }
.import-summary { background: #fff7ed; border: 1.5px solid #fdba74; border-radius: 8px; padding: .65rem .8rem; font-weight: 700; }
.import-product { padding: .35rem 0; }
.import-product + .import-product { border-top: 1px solid var(--line); margin-top: .35rem; }
.import-reason { color: #991b1b; font-weight: 800; }
.table-scroll { overflow-x: auto; border-radius: 10px; }
.table-scroll table.simple { min-width: 760px; }

.modal label { display: block; font-weight: 800; margin: .8rem 0 .3rem; }
.modal textarea, .modal input { width: 100%; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; }
.modal .d-label { font-size: .92rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .6rem; }

/* ------------------------------------------------------------------ forms */
.form-card { background: #fff; border-radius: 12px; padding: 1.4rem; box-shadow: 0 1px 4px rgba(0,0,0,.07); max-width: 860px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-card label { display: block; font-weight: 800; margin-bottom: .3rem; }
.form-card input, .form-card textarea, .form-card select { width: 100%; padding: .65rem .75rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; background: #fff; }
.form-card input:focus, .form-card textarea:focus, .form-card select:focus { outline: none; border-color: var(--orange); }
.form-card textarea { min-height: 84px; resize: vertical; }
.radio-row { display: flex; gap: 1.2rem; flex-wrap: wrap; font-weight: 700; }
.radio-row label { display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; margin: 0; }
.perm-grid { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: .4rem; }
.perm-grid label { display: inline-flex; gap: .45rem; align-items: center; font-weight: 700; margin: 0; }
.perm-grid input { width: auto; }

/* ------------------------------------------------------------------ admin */
table.simple { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
table.simple th { background: var(--black); color: #fff; text-align: left; padding: .65rem .8rem; font-weight: 800; }
table.simple td { padding: .65rem .8rem; border-top: 1px solid var(--line); font-weight: 600; vertical-align: top; }
.tag { display: inline-block; border-radius: 999px; padding: .1rem .6rem; font-size: .82rem; font-weight: 900; background: #eef0f3; }
.tag-admin { background: var(--red-fl); color: #fff; }
.tag-pending { background: #fdebec; color: #b0131c; }
.tag-off { background: #fee2e2; color: #991b1b; }
.tag-on { background: #dcfce7; color: #166534; }
.section { margin-bottom: 2rem; }
.section h3 { font-size: 1.35rem; font-weight: 900; margin-bottom: .7rem; }
.invite-code { font-size: 1.6rem; font-weight: 900; letter-spacing: .12em; }
textarea.copybox { width: 100%; min-height: 110px; padding: .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; }

/* ------------------------------------------------------------------ modal */
.modal-back { position: fixed; inset: 0; background: rgba(10,10,12,.55); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 60; }
.modal { background: #fff; border-radius: 12px; padding: 1.4rem; max-width: 520px; width: 100%; }
.modal h3 { font-size: 1.4rem; font-weight: 900; margin-bottom: .5rem; }
.modal p { font-weight: 600; }
.modal .modal-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.1rem; }

.empty { background: #fff; border-radius: 10px; padding: 2rem; text-align: center; font-weight: 700; color: var(--muted); font-size: 1.1rem; }

/* ----------------------------------------------------------------- mobile */
/* Responsive type: weights stay BOLD everywhere, but sizes step DOWN on
   phone widths so titles, labels, prices and buttons fit cleanly inside
   cards — no mid-name wrapping or overflow. Largest sizes are desktop-only.
   Form controls stay at 16px on mobile so phones don't auto-zoom on focus. */
.hamburger { display: none; }
@media (max-width: 900px) {
  html { font-size: 16px; }
  .sidebar { position: fixed; z-index: 50; left: 0; top: 0; transform: translateX(-105%); transition: transform .22s ease; width: 300px; }
  .sidebar.open { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.5); }
  .topbar { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
  .hamburger { display: inline-flex; background: var(--black); color: #fff; border: none; border-radius: 8px; padding: .55rem .8rem; font-weight: 900; font-size: 1.05rem; }
  .topbar .t-logo { height: 36px; }
  .topbar .t-title { font-weight: 900; font-size: 1.15rem; }
  .main { padding: 1rem .8rem 2.5rem; }
  .view-title { font-size: 1.32rem; }
  .view-sub { font-size: .95rem; }
  .search-row { flex-wrap: wrap; }
  .search-box input { font-size: 1rem; padding: .65rem 0; } /* 16px: no iOS zoom */
  .btn { font-size: .95rem; padding: .55rem .85rem; }
  .result-count { font-size: 1rem; }
  table.products { display: none; }
  .cards { display: flex; flex-direction: column; gap: .8rem; }
  .card { background: #fff; border-radius: 12px; padding: .9rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
  .card .p-name { font-size: 1.02rem; line-height: 1.25; overflow-wrap: break-word; }
  .card .p-supplier { font-size: 1rem; }
  .card .p-colour { font-size: 1.05rem; overflow-wrap: break-word; }
  .card .p-cat { font-size: .88rem; }
  .card .price-lines { font-size: .95rem; }
  .card .p-specs { font-size: .9rem; }
  .card .row-actions { margin-top: .65rem; gap: .5rem; }
  .card .row-actions .btn { flex: 1; justify-content: center; padding: .55rem .4rem; font-size: .95rem; }
  .form-grid { grid-template-columns: 1fr; }
  .detail { padding: 1.1rem; }
  .detail h2 { font-size: 1.3rem; }
  .detail .d-supplier { font-size: 1.05rem; }
  .detail .d-colour { font-size: 1.15rem; overflow-wrap: break-word; }
  .d-prices .price-line { font-size: 1.05rem; }
  .chip { font-size: .85rem; padding: .2rem .55rem; }
  .invite-code { font-size: 1.35rem; }
}

@media (max-width: 480px) {
  .view-title { font-size: 1.22rem; }
  .search-box { flex: 1 1 100%; }
  .card .p-name { font-size: .98rem; }
  .card .p-colour { font-size: .98rem; }
  .card .row-actions .btn { font-size: .92rem; padding: .5rem .3rem; }
  .btn { font-size: .92rem; }
  .side-item { font-size: 1rem; }
  .side-module { font-size: 1.3rem; }
  .detail h2 { font-size: 1.22rem; }
  .detail .d-colour { font-size: 1.08rem; }
  .auth-card { padding: 1.4rem 1.1rem; }
  .auth-card h1 { font-size: 1.45rem; }
  .pager { font-size: .95rem; }
}

/* Persistent rep reminder banner (Moe, 2026-11-03): always visible at the top of every app view. */
.rep-banner { background: #fdecea; border: 2px solid #da291c; border-radius: 8px; color: #da291c; font-weight: 900; text-align: center; padding: .35rem .7rem; margin-bottom: .8rem; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Promo-only products (Moe, 2026-11-03): the promo price pops in big FL red
   with a red "Promo" badge — there is no regular price to cross out. */
.promo-only-block { margin: .25rem 0; }
.promo-only-price { color: var(--red-fl); font-weight: 900; font-size: 1.45em; }
.promo-badge { display: inline-block; background: var(--red-fl); color: #fff; font-weight: 900; font-size: .72em; letter-spacing: .05em; text-transform: uppercase; padding: .16em .55em; border-radius: 999px; margin-left: .5em; vertical-align: .18em; }
.promo-only-block .promo-detail { display: block; margin-top: .15rem; }

/* Detail-view fields as pills (Moe, 2026-11-03): features/clauses as chips
   under each field title instead of long text blocks. */
.d-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.d-pill { display: inline-block; background: #f1f1f4; color: #1c1c1e; font-weight: 700; font-size: .95rem; padding: .32rem .7rem; border-radius: 999px; }
.d-pill-warn { background: #fef3c7; border: 1.5px solid #f59e0b; color: #92400e; }

/* Inline SVG icon inside buttons (filter funnel). */
.btn svg.btn-ic { vertical-align: -2px; margin-right: .35em; }

/* Filters panel helper note. */
.filters-note { color: #555; font-size: .9rem; font-weight: 600; margin: .2rem 0 .6rem; }

/* Supplier profiles (Moe, 2026-11-03). */
.supplier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.supplier-card { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: .9rem; text-align: left; background: #fff; border: none; border-radius: 12px; padding: .9rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); cursor: pointer; font: inherit; }
.supplier-main { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.supplier-addr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52ch; }
.supplier-loc { align-self: flex-start; background: #f1f1f4; border-radius: 999px; padding: .18rem .6rem; font-size: .78rem; font-weight: 800; color: #303030; margin-top: .15rem; }
.supplier-count { text-align: right; flex: none; }
.supplier-count strong { display: block; font-size: 1.4rem; font-weight: 900; color: #111; line-height: 1.05; }
.supplier-count small { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8a8a8e; }
.supplier-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.13); }
.supplier-name { font-weight: 900; font-size: 1.02rem; color: #111; }
.supplier-meta { font-weight: 800; color: #da291c; font-size: .88rem; }
.supplier-line { color: #555; font-weight: 600; font-size: .9rem; }
.card-h { font-size: 1rem; font-weight: 900; margin: 0 0 .6rem; }
.contact-row { display: flex; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid #f0f0f2; }
.contact-row:last-child { border-bottom: none; }
.contact-label { flex: 0 0 86px; font-weight: 800; color: #666; }
.contact-value { font-weight: 700; color: #111; word-break: break-word; }
.contact-value a { color: #0050cc; }
.rep-row { display: flex; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.rep-row input { flex: 1 1 130px; }

/* Back-to-top (Moe, 2026-11-04): floating pill, bottom-right on every
   view, appears after scrolling a screenful; sits under the mobile
   sidebar overlay (z 50) so the menu covers it when open. */
.back-to-top { position: fixed; right: 16px; bottom: 16px; z-index: 40; background: #303030; color: #fff; font-weight: 800; font-size: .9rem; border: none; border-radius: 999px; padding: .6rem 1rem; box-shadow: 0 4px 14px rgba(0,0,0,.3); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }

/* How to Install view */
.install-card { margin-bottom: 1rem; }
.install-card h3 { margin: .1rem 0 .5rem; font-size: 1.05rem; }
.install-link { font-weight: 800; font-size: 1.08rem; word-break: break-all; margin-bottom: .65rem; }
.install-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .55rem; }
.steps { margin: .3rem 0 .2rem 1.25rem; line-height: 1.55; font-weight: 600; }
.steps li { margin-bottom: .3rem; }

/* Warehouse locations as pills on the supplier profile (Moe, 2026-11-04):
   one pill per warehouse, stacked. */
.wh-pills { display: flex; flex-direction: column; gap: .45rem; }
.wh-pill { display: block; background: #f1f1f4; border-radius: 10px; padding: .5rem .7rem; font-weight: 700; }

.btn-dark { background: #111; color: #fff; }

/* Reps directory (Moe, 2026-11-04) */
.reps-tools { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.reps-tools input { flex: 1; min-width: 170px; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: 10px; font-weight: 600; font: inherit; }
.reps-tools select { padding: .6rem .8rem; border: 2px solid var(--line); border-radius: 10px; font-weight: 700; background: #fff; font: inherit; }
.rep-card { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; background: #fff; border: none; border-radius: 12px; padding: .75rem .9rem; margin-bottom: .55rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); cursor: pointer; font: inherit; }
.rep-card .rep-main { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.rep-card .rep-name { font-weight: 900; font-size: 1rem; }
.rep-terr { font-weight: 700; color: #33363d; font-size: .9rem; }
.rep-sup { font-weight: 700; color: var(--muted); font-size: .85rem; }
.rep-card .rep-phone { font-weight: 800; color: #111; flex: none; }
.rep-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .8rem; }
.avatar-lg { width: 52px; height: 52px; font-size: 1.3rem; }
#rep-notes-text { width: 100%; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; }
.notes-text { font-weight: 600; white-space: pre-wrap; }
.form-ok { color: #1e9e57; font-weight: 800; margin-top: .5rem; }

/* Team directory + sharing (Moe, 2026-11-04) */
.team-row { display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 12px; padding: .7rem .9rem; margin-bottom: .55rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #303030; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none; }
.team-name { font-weight: 800; flex: 1; }
.team-you { color: var(--muted); font-weight: 700; }
.team-role { font-size: .82rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.seg-tabs { display: flex; gap: .5rem; margin-bottom: .8rem; }
.seg { flex: 1; background: #fff; border: 2px solid #d4d4d8; border-radius: 999px; padding: .45rem 0; font-weight: 800; font-size: .95rem; cursor: pointer; }
.seg.on { background: #da291c; border-color: #da291c; color: #fff; }
.share-row { display: flex; justify-content: space-between; gap: .8rem; width: 100%; text-align: left; background: #fff; border: none; border-radius: 12px; padding: .8rem .9rem; margin-bottom: .55rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); cursor: pointer; font: inherit; }
.share-row.unread { outline: 2px solid #da291c; }
/* Moe, 2026-11-04 16:08: bold title only while unread for THIS user. */
.share-row.unread .share-title { font-weight: 700; }
.share-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.share-title { font-weight: 400; font-size: 1rem; }
.share-sub { color: var(--muted); font-weight: 700; font-size: .88rem; }
.share-note { font-weight: 600; color: #33363d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44ch; }
.share-meta { text-align: right; font-size: .85rem; font-weight: 700; color: var(--muted); flex: none; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #da291c; margin-right: .4rem; }
.seen { color: #1e9e57; }
.unseen { color: var(--muted); }
.thread-head { margin: .8rem 0 1rem; }
.thread-sup { font-weight: 800; color: var(--muted); }
.snap-label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: .6rem 0 .3rem; }
.thread-who { font-weight: 600; color: #33363d; margin-top: .7rem; }
.thread-msgs { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
.msg { background: #fff; border-radius: 12px; padding: .7rem .9rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.msg.mine { background: #fdf1ec; }
.msg-head { font-size: .85rem; color: var(--muted); font-weight: 700; margin-bottom: .25rem; }
.msg-body { font-weight: 600; white-space: pre-wrap; }
.reply-card label { display: block; font-weight: 800; margin-bottom: .3rem; }
.reply-card textarea { width: 100%; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; margin-bottom: .6rem; }
.modal select { width: 100%; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; background: #fff; }

/* Quick-filter pills on the price list (Moe, 2026-11-03; compact grid
   layout 2026-11-04 at his direction — smaller pills, even columns, a
   small group label each, so the two rows stay tidy and take less room). */
.qpill-group { margin: .55rem 0 .05rem; }
.qpill-label { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8a8a8e; margin-bottom: .3rem; }
.quick-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0; }
.qpill { background: #fff; border: 1.5px solid #d4d4d8; color: #222; font-weight: 800; font-size: .84rem; padding: .32rem .15rem; border-radius: 999px; cursor: pointer; text-align: center; white-space: nowrap; }
.qpill.on { background: #da291c; border-color: #da291c; color: #fff; }
@media (min-width: 700px) { .quick-pills { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 700px) { .quick-pills.qp-type { grid-template-columns: repeat(6, 1fr); } }
.upload-removed td { opacity: .55; }

/* ===== DESIGN PREVIEW: premium light main page + rotating gold highlight banner ===== */
@property --gold-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
body { background: linear-gradient(180deg, #fbfaf7 0%, #f4f4f6 320px); }
.rep-banner {
  position: relative; isolation: isolate; border: 2px solid #d4a017; border-radius: 14px;
  background: linear-gradient(#fffdf7, #fff6dc);
  color: #6b4d05; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
  font-size: .82rem; line-height: 1.25; padding: 1.55rem 1.5rem; text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px -8px rgba(184,134,11,.55);
  white-space: normal; overflow: hidden; text-overflow: clip;
}
.rep-banner-text { position: relative; display: block; }
/* Marquee ring of "$" lights */
.mq { position: absolute; display: flex; justify-content: space-between; align-items: center; pointer-events: none; font-style: normal; font-weight: 900; font-size: .8rem; line-height: 1; letter-spacing: 0; }
.mq i { font-style: normal; color: #d9c27a; animation: mq-chase calc(var(--n) * .11s) linear infinite; animation-delay: calc(var(--i) * .11s - var(--n) * .11s); }
.mq-top { left: 1.3rem; right: 1.3rem; top: .38rem; }
.mq-bottom { left: 1.3rem; right: 1.3rem; bottom: .38rem; }
.mq-left { left: .4rem; top: 1.3rem; bottom: 1.3rem; flex-direction: column; }
.mq-right { right: .4rem; top: 1.3rem; bottom: 1.3rem; flex-direction: column; }
@keyframes mq-chase {
  0% { color: #fff3a8; text-shadow: 0 0 4px #ffd84a, 0 0 9px #f0b400; transform: scale(1.3); }
  10% { color: #e8b50c; text-shadow: 0 0 5px rgba(255,200,40,.8); transform: scale(1.12); }
  28%, 100% { color: #d9c27a; text-shadow: none; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .mq i { animation: none; color: #c99a14; } }
.view-title { letter-spacing: -.01em; }
.search-box { border-radius: 14px; border: 1.5px solid #e6e1d3; box-shadow: 0 6px 18px -12px rgba(20,21,25,.35); }
.search-box:focus-within { border-color: #d4a017; box-shadow: 0 0 0 3px rgba(212,160,23,.18); }
.chip, .qpill { border-color: #d9d4c4; }
.qpill-label { letter-spacing: .12em; }

/* ---- preview: cleaner hierarchy, tighter intro, controls and action rows that never clip ---- */
.view-title { margin: .1rem 0 .15rem; }
.view-sub.lede { font-size: .9rem; font-weight: 600; margin: 0 0 .75rem; line-height: 1.35; color: #6b6558; }
.view-sub.lede strong { color: #3a362c; }
.row-actions { flex-wrap: wrap; }
@media (max-width: 900px) {
  .rep-banner { margin-bottom: .6rem; }
  .search-row { gap: .5rem; margin-bottom: .55rem; }
  .search-row .btn { flex: 0 0 auto; padding: .55rem .75rem; }
  .sort-select { flex: 1 1 0; min-width: 0; font-size: .85rem; padding: .6rem .4rem; }
  .qpill-group { display: flex; align-items: flex-start; gap: .5rem; margin: .3rem 0; }
  .qpill-label { margin: .45rem 0 0; flex: 0 0 3.1rem; }
  .quick-pills, .quick-pills.qp-type { display: flex; flex-wrap: wrap; gap: .4rem; overflow: visible; flex: 1 1 auto; min-width: 0; padding: .1rem .05rem .25rem; }
  .quick-pills::-webkit-scrollbar { display: none; }
  .qpill { flex: 0 0 auto; padding: .35rem .7rem; font-size: .85rem; }
  .result-count { margin: .4rem 0 .5rem; font-size: .95rem; color: #5b564a; }
  .cards { gap: .65rem; }
  .card { padding: .8rem .9rem; border: 1px solid #ece7d9; box-shadow: 0 8px 20px -16px rgba(40,30,0,.45); }
  .card .row-actions { flex-wrap: wrap; white-space: normal; gap: .45rem; margin-top: .6rem; }
  .card .row-actions .btn { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; line-height: 1.15; padding: .55rem .3rem; }
  .card .row-actions .btn[data-request] { flex: 1 1 100%; order: 3; }
}
@media (max-width: 900px) { .sort-select { font-size: .8rem; padding: .6rem .3rem; text-overflow: ellipsis; } }
@media (max-width: 400px) { .sort-select { flex: 1 1 100%; font-size: .9rem; padding: .55rem .6rem; } }

/* Product list/cards: only the price and the colour name are bold (Moe, 2026-11-04). */
#results .p-name, #results .p-supplier, #results .p-cat, #results .p-specs,
#results .price-line .pl, #results .colour-notes, #results .promo-detail,
#results .price-lines small, #results table.products td { font-weight: 400; }
#results .price-line .pv, #results .promo-price { font-weight: 900; }
#results .p-colour { font-weight: 400; color: var(--red-fl); }  /* Moe 2026-11-04: colour codes regular weight, red highlight (typography option B) */
#results .price-lines { font-weight: 400; }
.st-special { background: #5b4a14; }

/* Product list: the whole card/row opens View on a single tap (Moe, 2026-11-04). */
#results tr[data-open], #results .card[data-open] { cursor: pointer; }
#results tr[data-open]:hover, #results .card[data-open]:hover { background: #faf7ec; }
#results tr[data-open]:focus-visible, #results .card[data-open]:focus-visible { outline: 2px solid #c9a227; outline-offset: -2px; }
a.side-item { text-decoration: none; color: inherit; cursor: pointer; }

/* ===== Moe 2026-11-04 batch: tabs/pills/badges, message tools, notes panel (moved from styles.css, which is unreferenced) ===== */

/* Promo campaign expansion (tap a promo name to see its products) */
.promo-toggle { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.promo-toggle .pt-arrow { color: #da291c; font-weight: 700; }
.promo-detail > td { background: #f5f5f7; padding: 0.4rem 0.6rem; }
.promo-member { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; justify-content: space-between; padding: 0.55rem 0.2rem; border-bottom: 1px solid #e3e3e8; }
.promo-member:last-child { border-bottom: none; }
.promo-member .pm-main { flex: 1 1 220px; }
.promo-member .pm-prices { flex: 0 1 auto; }
.promo-member .pm-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Notifications & Messages redesign (preview) */
.nf-search { display: flex; gap: .5rem; margin-bottom: .8rem; }
.nf-search input { flex: 1; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; font-weight: 600; }
.nf-actions { margin-bottom: .9rem; }
.share-row.act-row { cursor: default; }
.share-row.act-row .share-title { font-weight: 700; }
.open-chip { background: #e8f5e9; color: #2e7d32; border-radius: 999px; font-size: .72rem; font-weight: 800; padding: .1rem .5rem; margin-left: .35rem; vertical-align: middle; }
.nf-search { flex-wrap: wrap; }
.nf-search input { min-width: 0; flex: 1 1 140px; }
.nf-search { width: 100%; }

/* Notes/discussions feed groups (Moe, 2026-11-04). */
.nf-group { margin-bottom: 1.1rem; }
.nf-group-title { font-weight: 800; font-size: 1.02rem; color: var(--black-1, #1c1c1e); margin: .4rem 0 .1rem; }
.nf-group-sub { font-size: .8rem; color: #777; margin-bottom: .35rem; }

/* Notes/Discussions/Activity tabs + message edit/delete + product note box (Moe, 2026-11-04). */
.nf-tabs { display: flex; gap: .4rem; margin: .2rem 0 .8rem; }
.nf-tab { position: relative; background: #fff; border: 1px solid #ddd; border-radius: 999px; padding: .5rem 1rem;
  font-weight: 700; font-size: .95rem; cursor: pointer; color: #444; }
.nf-tab.on { background: #da291c; color: #fff; border-color: #da291c; }
.nf-badge { position: absolute; top: -7px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #1c1c1e; color: #fff; font-size: .72rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.nf-tab.on .nf-badge { background: #fff; color: #da291c; border-color: #da291c; }
.msg-tools { margin-left: .5rem; }
.msg-tool { background: #f2f2f4; border: 1px solid #ddd; border-radius: 8px; cursor: pointer;
  font-size: .95rem; padding: .2rem .4rem; margin-left: .25rem; }
.msg-tool:hover { opacity: 1; }
.msg-flag { color: #999; font-size: .8rem; font-weight: 400; }
.msg-deleted { color: #999; font-style: italic; }
.msg-edit-box { width: 100%; border: 1px solid #ccc; border-radius: 8px; padding: .5rem; font: inherit; }
.msg-edit-actions { margin-top: .3rem; display: flex; gap: .4rem; }
/* Moe, 2026-11-04: notes + discussions indicators, then the note box. */
.notes-panel { margin-top: .9rem; }
.notes-chips { display: flex; gap: .5rem; margin-bottom: .8rem; }
.notes-chips .btn { flex: 1; }
.notes-disc-list { margin: -0.3rem 0 .8rem; display: flex; flex-direction: column; gap: .4rem; }
.notes-disc-row { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; background: #f7f7f9; border: 1px solid #e3e3e8; border-radius: 10px; padding: .5rem .7rem; font: inherit; cursor: pointer; }
.notes-disc-row:hover { background: #efefF2; }
.notes-disc-title { font-weight: 700; }
.notes-disc-meta { color: #777; font-size: .8rem; }
.notes-disc-last { color: #555; font-size: .85rem; }
.notes-panel label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.note-link-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.note-link-row label { margin-bottom: 0; }
.note-link-row select { flex: 1; min-width: 0; padding: .45rem .6rem; border: 1px solid #ccc; border-radius: 8px; font: inherit; background: #fff; }
.colour-tag { display: inline-block; margin-top: .3rem; background: #eef2ff; color: #3730a3; font-weight: 800; font-size: .82rem; padding: .18rem .6rem; border-radius: 999px; }
#sh-colour, #ch-to, #sh-to { width: 100%; padding: .55rem .7rem; border: 1px solid #ccc; border-radius: 8px; font: inherit; margin-bottom: .6rem; background: #fff; }
.note-row { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.note-row input { flex: 1 1 auto; min-width: 0; border: 1px solid #ccc; border-radius: 8px; padding: .55rem .7rem; font: inherit; }
.note-row .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 480px) {
  .note-row #d-note-save { flex: 1 1 100%; order: 3; }
}

/* @mention alerts (Moe, 2026-11-04). */
.mention-alerts { margin-bottom: .8rem; }
.mention-row { outline: 2px solid #da291c; background: #fff7f6; }
.mention-row .share-title { font-weight: 900; }
.reply-actions { display: flex; gap: .5rem; align-items: center; }
.reply-actions .btn-orange { flex: 1; }
/* Edit title (Moe, 2026-11-04): creator/master-admin in-place title edit. */
.thread-custom-title { font-weight: 700; margin-bottom: .15rem; }
.title-edit { margin: .4rem 0 .2rem; }
.title-edit input { width: 100%; padding: .5rem .6rem; border: 1px solid #ccc; border-radius: 8px; font: inherit; }
.title-edit-actions { display: flex; gap: .4rem; margin-top: .4rem; }
/* @ mention autocomplete (Moe, 2026-11-04 16:25): list opens at the caret. */
.mention-ac { position: absolute; z-index: 60; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.14); overflow: hidden; }
.mention-ac-item { display: block; width: 100%; text-align: left; padding: .55rem .7rem; background: #fff; border: none; font: inherit; cursor: pointer; }
.mention-ac-item.active, .mention-ac-item:hover { background: #f0f0f0; }
/* Emoji picker grid (Moe, 2026-11-04 16:17). */
.emoji-ac { position: absolute; z-index: 60; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.14); display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px; width: 300px; max-height: 180px; overflow-y: auto; }
.emoji-ac-item { background: none; border: none; font-size: 1.25rem; padding: 2px; cursor: pointer; border-radius: 6px; }
.emoji-ac-item:hover { background: #f0f0f0; }
/* Roomier desktop supplier pills; mobile layout stays unchanged. */
@media (min-width: 900px) {
  .supplier-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)); gap: 1.1rem; }
  .supplier-card { border-radius: 36px; padding: 1.4rem 1.6rem; min-height: 150px; gap: 1.5rem; }
  .supplier-main { gap: .4rem; flex: 1; }
  .supplier-name { font-size: 1.1rem; overflow-wrap: anywhere; }
  .supplier-addr { white-space: normal; overflow: visible; text-overflow: clip; }
  .supplier-count { background: #f4f4f6; border-radius: 999px; padding: 1rem; min-width: 90px; }
}

/* Read-only (ghost) accounts: no write controls are shown. Server enforces it too. */
body.ghost-ro #d-share, body.ghost-ro #d-request, body.ghost-ro #reply-form, body.ghost-ro #th-dismiss,
body.ghost-ro #nf-new, body.ghost-ro .notes-panel .note-link-row, body.ghost-ro .notes-panel label[for="d-note"],
body.ghost-ro .notes-panel .note-row, body.ghost-ro #d-note-msg { display: none !important; }

/* Alternating product cards (Moe, 2026-11-04): white, very light beige. Cards list only. */
.cards > .card:nth-child(even) { background: #faf5ea; }

/* Compact colour names: inline, wrapping, muted dot separators. */
.colour-inline { line-height: 1.35; overflow-wrap: break-word; word-break: normal; }
.colour-inline .colour-sep { color: #9a9a9a; }