/* app/portal/portal.css — small additions on top of app/css/style.css and
   app/admin/admin.css's shared login-screen + dashboard-shell chrome (both
   already linked by index.html) -- the portal reuses the admin panel's
   .admin-shell/.admin-sidebar/.admin-nav/#admin-main layout wholesale so
   the two dashboards (and any future portal modules) stay visually
   consistent without duplicating that CSS here. */

body { background: var(--bg); }

/* Every portal module fills the space next to the sidebar on large screens
   (admin.css now does the same for the admin panel; kept here so the portal
   doesn't depend on it). */
#admin-main { max-width: none; }

.portal-change-password { margin-top: 16px; }

/* --- vendor ordering: Shop / Cart / Orders --------------------------------
   Layout primitives only; colours, cards, badges, buttons and tables all
   come from app/css/style.css + app/admin/admin.css. */

.portal-nav-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--accent, #b8895b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.portal-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.portal-shop-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line, #e7e0d8);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card, #fff);
}

.portal-shop-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft, #f4efe9);
  color: var(--ink-faint, #a89a88);
  cursor: pointer;
}
.portal-shop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.portal-shop-quickview {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 0; font-size: 11px; font-weight: 650; letter-spacing: .02em;
  background: rgba(20, 16, 10, .62); color: #fff;
  opacity: 0; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.portal-shop-thumb:hover .portal-shop-quickview { opacity: 1; transform: translateY(0); }

.portal-shop-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 13px 13px; }
.portal-shop-name {
  border: none; background: none; padding: 0; text-align: left; font-family: inherit;
  font-weight: 650; font-size: 13.5px; line-height: 1.3; cursor: pointer;
}
.portal-shop-sku { font-size: 11px; font-weight: 650; font-family: ui-monospace, "SF Mono", Consolas, monospace; color: var(--ink-soft, #6b5f52); letter-spacing: .01em; }
.portal-shop-meta { font-size: 11.5px; color: var(--ink-faint, #a89a88); }
.portal-shop-price { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-top: 2px; }
.portal-shop-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.portal-shop-actions .portal-qty { width: 58px; }
/* Eye icon (image preview only) sits apart from qty/Add-to-Cart, flush right. */
.portal-shop-actions [data-eye-image] { margin-left: auto; }

/* --- Catalog Page ("Browse by Collection") -------------------------------
   Collection cards get a larger, more prominent image than a plain product
   card (16:9 vs the flat grid's 4:3). Now that #admin-main is full width,
   the shared .portal-shop-grid's auto-fill would cram 6+ narrow cards per
   row on a wide screen -- capped at 4 columns instead, still responsive
   (auto-fill) below that. */
.portal-collection-card { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.portal-collection-card:hover { box-shadow: 0 6px 20px rgba(20, 16, 10, .1); transform: translateY(-2px); }
.portal-collection-thumb { aspect-ratio: 16 / 9; }
.portal-collection-thumb img { object-position: center; }

@media (min-width: 900px) {
  .portal-collection-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Top gallery slider -- every member item's own Zoho photo, one big slide
   at a time, across the whole collection regardless of the current
   search/filter/pagination. */
.shop-gallery-slider {
  position: relative;
  margin: 16px 0 20px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-soft, #f4efe9);
  border: 1px solid var(--line, #e7e0d8);
}
.shop-gallery-track { display: flex; transition: transform .3s ease; }
.shop-gallery-slide { flex: 0 0 100%; max-width: 100%; }
.shop-gallery-slide img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  background: var(--bg-soft, #f4efe9);
  cursor: pointer;
}
.shop-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink, #2a2420);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 16, 10, .18);
}
.shop-gallery-nav:hover { background: #fff; }
.shop-gallery-nav.prev { left: 12px; }
.shop-gallery-nav.next { right: 12px; }

/* Thumbnail strip below the slider -- every product's own photo, in normal
   flow (not overlaid on the image like the old dot indicators, which read
   as a cramped, half-hidden row right at the image's bottom edge). Click
   any thumbnail to jump straight to it. */
.shop-gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 2px;
  overflow-x: auto;
}
.shop-gallery-thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-soft, #f4efe9);
  opacity: .65;
  transition: opacity .15s ease, border-color .15s ease;
}
.shop-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-gallery-thumb:hover { opacity: 1; }
.shop-gallery-thumb.is-active { border-color: var(--accent, #b8895b); opacity: 1; }

@media (max-width: 640px) {
  .shop-gallery-slide img { height: 220px; }
  .shop-gallery-thumb { width: 52px; height: 52px; }
}
@media (min-width: 1000px) {
  .shop-gallery-slide img { height: 460px; }
  .shop-gallery-nav { width: 44px; height: 44px; }
  .shop-gallery-thumb { width: 76px; height: 76px; }
}

/* Collection member table (shopMemberRow()) -- a real, comfortable table
   (Add to Cart leading each row, matching the reference layout) on wide
   screens. Below 1100px -- where this many columns would otherwise force a
   horizontal scrollbar -- it collapses into one labelled card per row
   instead (data-label -> a small caption above each value), so it never
   needs to scroll at tablet/laptop widths either. */
/* Tables default to content-sized width (min-width:740px floor from the
   shared .assoc-table rule), unlike a plain block element -- without this,
   it doesn't stretch to fill the wide container the way the gallery slider
   or toolbar above it do, and looks narrower even though nothing else is
   actually constraining it. */
table.shop-member-table { width: 100%; }
.shop-member-table .assoc-sku-cell { color: var(--ink, #2a2420); font-weight: 800; }
.shop-member-table .assoc-dim-cell { color: var(--ink, #2a2420); }
.shop-member-table thead th {
  background: var(--bg-soft, #f4efe9);
  border-bottom: 2px solid var(--accent, #b8895b);
  padding: 13px 14px;
}
.shop-member-table td, .shop-member-table th { padding: 14px; vertical-align: middle; }
.shop-member-table tbody tr { transition: background .12s ease; }
.shop-member-table tbody tr:hover { background: var(--bg-soft, #f4efe9); }

.shop-member-product { display: flex; align-items: center; gap: 10px; }
.shop-member-mini-thumb {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 9px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft, #f4efe9);
  color: var(--ink-faint, #a89a88);
}
.shop-member-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shop-member-table .assoc-name {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  transition: color .12s ease;
}
.shop-member-table .assoc-name.is-clickable:hover { color: var(--accent-dark, #8a5f34); }
.shop-member-price { font-size: 14.5px; color: var(--accent-dark, #8a5f34); white-space: nowrap; }
/* Desktop table: give the Product column the room (names fit on one or two
   lines) and keep SKUs on one line so they don't take the spare width. */
@media (min-width: 1101px) {
  .shop-member-table td[data-label="Product"] { min-width: 300px; }
  .shop-member-table .assoc-sku-cell { white-space: nowrap; width: 1%; }
}

.shop-member-order { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.shop-member-order .portal-qty { width: 52px; }
.shop-member-order [data-add-sku] { border-radius: 999px; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 1100px) {
  table.shop-member-table { min-width: 0; width: 100%; }
  .shop-member-table thead { display: none; }
  .shop-member-table, .shop-member-table tbody, .shop-member-table tr, .shop-member-table td { display: block; width: 100%; }
  .shop-member-table tbody tr {
    margin-bottom: 14px;
    border: 1px solid var(--line, #e7e0d8);
    border-radius: 14px;
    padding: 14px 16px;
    background: var(--card, #fff);
    box-shadow: 0 2px 10px rgba(20, 16, 10, .05);
  }
  .shop-member-table tbody tr:last-child { margin-bottom: 0; }
  .shop-member-table td {
    padding: 7px 0;
    border-bottom: 1px solid var(--line-soft, #efe8e0);
    white-space: normal;
  }
  .shop-member-table td:last-child { border-bottom: none; }
  .shop-member-table td[data-label="Order"] { border-bottom: none; order: -1; padding-top: 0; padding-bottom: 12px; }
  .shop-member-table tr { display: flex; flex-direction: column; }
  .shop-member-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-faint, #a89a88);
    margin-bottom: 3px;
  }
}

.portal-qty {
  padding: 6px 8px;
  border: 1px solid var(--line, #e7e0d8);
  border-radius: 8px;
  font: inherit;
  text-align: center;
}

.portal-qty-step { display: inline-flex; align-items: center; gap: 6px; }
.portal-qty-step .portal-qty { width: 52px; }

.portal-cart-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin-top: 20px;
}
.portal-cart-customer { flex: 1 1 260px; }
.portal-cart-customer label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.portal-cart-customer select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line, #e7e0d8);
  border-radius: 8px;
  font: inherit;
  background: var(--card, #fff);
}
.portal-cart-total { flex: 0 0 260px; }
.portal-cart-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, #e7e0d8);
}

/* --- customer/vendor transaction views ---------------------------------- */

/* date-range row on the Statement screen */
.toolbar .form-row { display: flex; align-items: center; gap: 8px; }
.toolbar .form-row label { font-size: 12px; font-weight: 600; margin: 0; }
.toolbar .form-row input[type="date"] {
  padding: 7px 9px;
  border: 1px solid var(--line, #e7e0d8);
  border-radius: 8px;
  font: inherit;
}

/* comment thread inside the transaction detail modal */
#txn-comments .detail-row { align-items: flex-start; }
#txn-comments .detail-row-value { white-space: pre-wrap; }

@media print {
  .admin-sidebar, .page-head button, .toolbar, .portal-banner { display: none !important; }
  .admin-content { padding: 0 !important; }
}

/* catalog price shown crossed out next to a price-list price */
.list-price-was { color: var(--ink-faint, #8a8178); font-size: .82em; font-weight: 500; margin-left: 4px; }

/* targeted banners (Portal Settings > Targeted banners) */
.portal-banner-success { background: #e6f4ea; border-color: #b9dfc5; }
.portal-banner-warning { background: var(--warning-soft, #fbeecb); border-color: #f0d98a; }

/* admin-set banner shown at the top of the portal content area */
.portal-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--accent-soft, #f6ece2);
  border: 1px solid var(--line, #e7e0d8);
  color: var(--ink, #2b2622);
  font-size: 13px;
}

/* The sidebar / dashboard-shell polish now lives in app/admin/admin.css
   (linked by both the admin panel and this portal), so it applies
   uniformly to admin, customer, provider and sales-rep dashboards. */

/* Product detail page (renderProductDetailPage): admin.css caps the whole
   .pd-page at 760px for comfortable reading of the media/price/spec block.
   In the customer/rep portal every section (media, buy row, description,
   spec grid, Associate Items) instead takes the full content width on every
   screen size -- so both the outer .pd-page cap and the narrower .pd-narrow
   sub-cap are lifted. Scoped to the portal only (this stylesheet isn't
   loaded by the admin panel), so the admin's own Shop product detail page
   is unaffected. */
.pd-page { max-width: none; }
.pd-narrow { max-width: none; }
.pd-narrow .pd-media { height: 420px; }

/* My Customers (rep): search + filter + pager */
.cust-toolbar{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:6px 0 12px; }
.cust-search{ flex:1 1 280px; max-width:420px; }
.cust-filter-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.cust-filter-pills b{ font-weight:800; margin-left:4px; opacity:.8; }
.cust-pager-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px; font-size:12.5px; }
.cust-pager-row .pagination{ margin:0; }

/* Every Shop card the same size whatever the photo: the photo box keeps its
   aspect ratio (min-height:0 stops a large image from stretching it -- a
   grid/flex item's aspect-ratio otherwise grows to fit its content) and the
   image is absolutely placed + cropped to fill it. Titles are clamped to
   two lines so the text area is the same height on every card too. */
.portal-shop-grid { align-items: stretch; }
.portal-shop-card { height: 100%; }
.portal-shop-thumb { min-height: 0; overflow: hidden; flex: 0 0 auto; }
.portal-shop-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.portal-collection-card .portal-shop-body { flex: 1 1 auto; justify-content: flex-start; }
.portal-collection-card .portal-shop-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.3em * 2);
}

/* Rep cart: searchable "Order for customer" picker */
.cust-combo { position: relative; display: flex; align-items: center; max-width: 520px; }
.cust-combo > .icon { position: absolute; left: 11px; color: var(--ink-faint, #a89a88); pointer-events: none; }
.cust-combo input { width: 100%; padding-left: 32px; padding-right: 34px; cursor: pointer; }
.cust-combo input:focus { cursor: text; }
.cust-combo-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; background: none; color: var(--ink-soft, #6f6253); cursor: pointer; border-radius: 6px;
}
.cust-combo-toggle:hover { background: var(--bg-soft, #f4efe9); }
.cust-combo input[aria-expanded="true"] ~ .cust-combo-toggle .icon { transform: rotate(180deg); }
.cust-combo-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  max-height: 320px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--card, #fff); border: 1px solid var(--line, #e7e0d8); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 16, 10, .14);
}
.cust-combo-list li { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.cust-combo-list li .text-muted { font-size: 11.5px; }
.cust-combo-list li:hover, .cust-combo-list li.is-active { background: var(--bg-soft, #f4efe9); }
.cust-combo-list li.is-selected strong::after { content: " ✓"; color: var(--accent, #b8862a); }
.cust-combo-list li.is-disabled { opacity: .55; cursor: not-allowed; }
.cust-combo-list li.is-empty { cursor: default; background: none; }

/* Collection detail: back link + Previous/Next on one row (cpd-* lives in style.css) */
.cpd-topbar .back-link { margin-bottom: 0; }

/* Favorites (heart) + back-in-stock alert (bell) toggles */
.shop-member-order .save-toggle { width: 30px; height: 30px; padding: 0; border-radius: 999px; color: var(--ink-faint); }
.save-toggle[data-save-kind="favorite"].is-on { color: var(--danger); }
.save-toggle[data-save-kind="favorite"].is-on .icon { fill: currentColor; }
.save-toggle[data-save-kind="alert"].is-on { color: var(--accent); }
.save-toggle[data-save-kind="alert"].is-on .icon { fill: currentColor; fill-opacity: .25; }
.pd-save-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }

/* Rep Home: win-back panel rows (name + "last order N days ago") */
.detail-row-label .wb-name { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.detail-row-label .wb-sub { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 500; color: var(--ink-faint); margin-top: 2px; }