/* app/admin/admin.css — small additions on top of app/css/style.css's
   design tokens (everything else reuses existing components: .order-table,
   .customer-card, .badge, .btn, .toast, .pagination/.page-btn, .form-row). */

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

.form-row textarea{
  width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px;
  font-size:13.5px; font-family:inherit; outline:none; background:var(--bg); resize:vertical;
}
.form-row textarea:focus{ border-color:var(--accent); background:var(--surface); }

.form-section-label{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-faint); margin:18px 0 10px; padding-top:14px; border-top:1px solid var(--line-soft);
}
.form-section-label:first-child{ margin-top:0; padding-top:0; border-top:none; }

/* ------------------------------- login screen ---------------------------- */
.admin-login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.admin-login-card {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 34px 30px;
  animation: adminFadeUp .3s cubic-bezier(.22,1,.36,1);
}
.admin-login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.admin-login-brand-sub { font-size: 12px; color: var(--ink-faint); font-weight: 600; }

@keyframes adminFadeUp { from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* ------------------------------- modern tables ------------------------------
   Scoped to #admin-main rather than the shared .order-table/.assoc-table
   classes themselves, since those are also used by the vendor storefront's
   own cart/Associate-Items tables (app/js/app.js) -- this only restyles the
   admin panel's copies. */
#admin-main .assoc-table-wrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow-x:auto; overflow-y:hidden; box-shadow:var(--shadow-sm);
}
#admin-main table.order-table{ font-size:13px; }
#admin-main table.order-table thead th{
  background:var(--bg); padding:13px 18px; white-space:nowrap; border-bottom:1px solid var(--line);
}
#admin-main table.order-table td{ padding:14px 18px; vertical-align:middle; }
#admin-main table.order-table tbody tr{ transition:background .12s ease; }
#admin-main table.order-table tbody tr:hover{ background:var(--bg); }
#admin-main table.order-table tbody tr:last-child td{ border-bottom:none; }

.row-actions{ display:inline-flex; align-items:center; gap:6px; }

/* --------------------------- record detail modal ---------------------------- */
.detail-rows{ display:flex; flex-direction:column; }
.detail-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.detail-row:last-child{ border-bottom:none; }
.detail-row-label{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); flex-shrink:0; padding-top:1px; }
.detail-row-value{ font-size:13.5px; color:var(--ink); text-align:right; word-break:break-word; }

/* ---------------------------------- stat tiles ----------------------------- */
.admin-stats-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:24px; }
.admin-stat-tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px 20px;
}
.admin-stat-tile .v{ font-size:26px; font-weight:900; font-family:var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.admin-stat-tile .l{ font-size:11.5px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; margin-top:4px; }

/* --------------------------- home overview dashboard ----------------------- */
.home-page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.home-date-chip{
  display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:8px 14px; font-size:12.5px; font-weight:700; color:var(--ink-soft);
  white-space:nowrap; margin-top:2px;
}

.home-modules-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:20px; }

.home-module-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 24px 24px; box-shadow:var(--shadow-sm); transition:box-shadow .2s ease, transform .2s ease;
}
.home-module-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }

.home-module-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.home-module-title{ display:flex; align-items:center; gap:11px; font-size:15px; font-weight:800; color:var(--ink); font-family:var(--font-display); }
.home-module-head .btn-ghost{ display:flex; align-items:center; gap:5px; color:var(--ink-faint); flex-shrink:0; }
.home-module-head .btn-ghost:hover{ color:var(--ink); }

.home-icon-badge{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.home-icon-badge.c-products{ background:var(--accent-soft); color:var(--accent-dark); }
.home-icon-badge.c-leads{ background:var(--info-soft); color:var(--info); }
.home-icon-badge.c-customers{ background:var(--success-soft); color:var(--success); }
.home-icon-badge.c-slides{ background:var(--warning-soft); color:var(--warning); }
.home-icon-badge.c-admins{ background:var(--line-soft); color:var(--ink-soft); }
.home-icon-badge.c-vendors{ background:#f9e2e7; color:#8f0224; }
.home-icon-badge.c-shop{ background:var(--teal-soft); color:var(--teal); }

.home-module-bar{ height:6px; border-radius:99px; background:var(--line-soft); overflow:hidden; margin-bottom:8px; }
.home-module-bar-fill{ height:100%; border-radius:99px; transition:width .4s ease; }
.home-module-bar-fill.c-products{ background:var(--accent); }
.home-module-bar-fill.c-leads{ background:var(--info); }
.home-module-bar-fill.c-customers{ background:var(--success); }
.home-module-bar-fill.c-slides{ background:var(--warning); }
.home-module-bar-fill.c-admins{ background:var(--ink-soft); }
.home-module-bar-fill.c-vendors{ background:#8f0224; }
.home-module-bar-fill.c-shop{ background:var(--teal); }

.home-module-bar-label{ font-size:11.5px; font-weight:600; color:var(--ink-faint); margin-bottom:16px; }

.home-module-card .admin-stats-row{ grid-template-columns:repeat(auto-fit,minmax(85px,1fr)); gap:10px; margin-bottom:0; }
.home-module-card .admin-stat-tile{ background:var(--bg); border-color:var(--line-soft); padding:12px 14px; }
.home-module-card .admin-stat-tile .v{ font-size:20px; }

/* ------------------------------ activity feed --------------------------- */
.activity-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.activity-select{
  padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-pill);
  font:inherit; font-size:12.5px; background:var(--surface); color:var(--ink);
  max-width:220px; cursor:pointer;
}
.activity-select:hover{ border-color:var(--accent); }

.filter-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.filter-pill{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  border-radius:var(--radius-pill); padding:6px 12px; font-size:12px; font-weight:700;
  cursor:pointer; transition:background .14s, color .14s, border-color .14s;
}
.filter-pill b{ font-weight:800; opacity:.6; margin-left:2px; }
.filter-pill:hover{ border-color:var(--accent); color:var(--ink); }
.filter-pill.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.filter-pill.is-active b{ opacity:.75; }

.activity-feed{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.activity-item{
  display:flex; align-items:flex-start; gap:13px; padding:13px 16px;
  border-bottom:1px solid var(--line-soft); transition:background .12s;
}
.activity-item:last-child{ border-bottom:none; }
.activity-item:hover{ background:var(--bg); }
.activity-icon{
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--info-soft); color:var(--info);
}
.activity-icon.t-accent{ background:var(--accent-soft); color:var(--accent-dark); }
.activity-icon.t-success{ background:var(--success-soft); color:var(--success); }
.activity-icon.t-warning{ background:var(--warning-soft); color:var(--warning); }
.activity-icon.t-maroon{ background:var(--accent-soft); color:var(--accent-dark); }
.activity-body{ flex:1; min-width:0; }
.activity-summary{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.35; }
.activity-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:4px; font-size:11px; color:var(--ink-faint); }
.activity-type-tag{
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 7px; border-radius:99px; background:var(--info-soft); color:var(--info);
}
.activity-type-tag.t-accent{ background:var(--accent-soft); color:var(--accent-dark); }
.activity-type-tag.t-success{ background:var(--success-soft); color:var(--success); }
.activity-type-tag.t-warning{ background:var(--warning-soft); color:var(--warning); }
.activity-type-tag.t-maroon{ background:var(--accent-soft); color:var(--accent-dark); }
.activity-when{ font-size:11px; color:var(--ink-faint); white-space:nowrap; flex-shrink:0; padding-top:2px; }

/* ------------------------------ orders filter bar --------------------- */
.orders-filterbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:12px 14px; margin:6px 0 14px; box-shadow:var(--shadow-sm);
}
.ofb-search{
  display:flex; align-items:center; gap:9px; flex:1; min-width:240px;
  background:var(--bg); border:1.5px solid var(--line); border-radius:var(--radius-pill);
  padding:9px 14px; color:var(--ink-faint); transition:border-color .15s, box-shadow .15s;
}
.ofb-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); color:var(--accent-dark); }
.ofb-search input{
  border:none; outline:none; background:none; flex:1; min-width:0;
  font:inherit; font-size:13.5px; color:var(--ink);
}
.ofb-search input::-webkit-search-cancel-button{ display:none; }
.ofb-clear{
  border:none; background:var(--surface-2); color:var(--ink-soft); cursor:pointer;
  width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ofb-clear:hover{ background:var(--danger-soft); color:var(--danger); }
.ofb-clear[hidden], .ofb-clear-dates[hidden]{ display:none; }

.ofb-dates{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ofb-dates label{
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint);
}
.ofb-dates input[type=date]{
  font:inherit; font-size:12.5px; color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--bg);
  padding:7px 9px; cursor:pointer;
}
.ofb-dates input[type=date]:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ofb-clear-dates{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer;
  font:inherit; font-size:11px; font-weight:700; border-radius:var(--radius-pill);
  padding:5px 10px; display:inline-flex; align-items:center; gap:4px;
}
.ofb-clear-dates:hover{ border-color:var(--danger); color:var(--danger); }
.ofb-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }

/* ------------------------------ orders grid --------------------------- */
#admin-main table.order-table.orders-grid td{ padding:12px 16px; }
.orders-grid tbody tr:hover{ background:var(--accent-soft) !important; }
.ord-num{
  font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size:12.5px; font-weight:700; color:var(--ink);
  background:var(--bg); border:1px solid var(--line-soft); border-radius:6px; padding:3px 8px; white-space:nowrap;
}
.ord-sub{ font-size:10.5px; color:var(--ink-faint); margin-top:3px; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.orders-grid tbody tr{ cursor:pointer; }
.orders-grid .badge{ white-space:nowrap; }

/* ------------------------------ order line-item detail ------------------ */
/* Shared by the admin order-manage modal and the portal's order-detail /
   sales-order modals (portal.js links this stylesheet too) -- every order
   line joins the catalog by SKU to show full product info, not just name. */
.line-item-cell{ display:flex; align-items:flex-start; gap:10px; text-align:left; }
.line-thumb{ width:38px; height:38px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--surface-2); }
.line-item-info{ min-width:0; }
.line-item-name{ font-weight:700; font-size:13px; color:var(--ink); line-height:1.3; }
button.line-item-name{ border:none; background:none; padding:0; text-align:left; font-family:inherit; }
.line-item-link{ cursor:pointer; color:var(--accent-dark,#b98b24); }
.line-item-link:hover{ text-decoration:underline; }
.line-item-sku{ font-size:10.5px; font-family:monospace; margin-top:2px; }
.line-item-meta{ font-size:10.5px; margin-top:2px; text-transform:capitalize; }
.line-item-desc{ font-size:10.5px; margin-top:2px; max-width:320px; line-height:1.4; }
.line-item-more{
  display:inline-flex; align-items:center; gap:2px; margin-top:4px; cursor:pointer;
  font-size:10.5px; font-weight:700; color:var(--accent-dark,#b98b24);
}
.line-item-more:hover{ text-decoration:underline; }

/* ---------------- order detail: status strip + delivery tracker --------- */
/* Shared by admin's order-manage modal and the customer/rep order-detail
   modals (portal.js links this stylesheet too) -- a compact "at a glance"
   row for order / delivery / payment status, plus a horizontal progress
   tracker for delivery status instead of a plain dropdown. */
.od-status-strip{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 20px; }
.od-status-card{
  flex:1; min-width:150px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:13px 16px; display:flex; flex-direction:column; gap:7px; box-shadow:var(--shadow-sm);
}
.od-status-card-label{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
  display:flex; align-items:center; gap:6px;
}
.od-status-card .badge{ align-self:flex-start; }
.od-status-card-sub{ font-size:11px; color:var(--ink-faint); }

.delivery-tracker{ display:flex; align-items:flex-start; gap:0; margin:10px 0 6px; }
.delivery-tracker-step{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  position:relative; background:none; border:none; font:inherit; padding:0; color:inherit;
}
.delivery-tracker-step.is-clickable{ cursor:pointer; }
.delivery-tracker-line{ position:absolute; top:17px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0; }
.delivery-tracker-step:first-child .delivery-tracker-line{ display:none; }
.delivery-tracker-step.is-complete .delivery-tracker-line{ background:var(--success); }
.delivery-tracker-dot{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--ink-faint); border:2px solid var(--line); position:relative; z-index:1;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; flex-shrink:0;
}
.delivery-tracker-step.is-complete .delivery-tracker-dot{ background:var(--success); border-color:var(--success); color:#fff; }
.delivery-tracker-step.is-current .delivery-tracker-dot{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 4px var(--accent-soft); }
.delivery-tracker-label{ font-size:10.5px; font-weight:700; color:var(--ink-faint); margin-top:7px; line-height:1.3; }
.delivery-tracker-step.is-complete .delivery-tracker-label, .delivery-tracker-step.is-current .delivery-tracker-label{ color:var(--ink); }
.delivery-tracker-step.is-clickable:hover .delivery-tracker-dot{ transform:scale(1.1); }
.delivery-tracker-unset{ font-size:12px; color:var(--ink-faint); padding:6px 0; }

/* ------------------------------ product detail page ----------------- */
.pd-page{ max-width:760px; }
.pd-page .pd-media{ height:320px; }
.pd-media{
  position:relative; height:220px; border-radius:var(--radius-lg); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand-dark,#131317),#232327); color:rgba(255,255,255,.5);
  margin-bottom:14px;
}
.pd-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff; }
.pd-media.has-photo{ cursor:zoom-in; overflow:hidden; }
.pd-media.has-photo img{ transition:transform .18s ease; will-change:transform; }
.pd-media.has-photo:hover img{ transform:scale(2); }
.pd-zoom-hint{
  position:absolute; bottom:10px; right:10px; z-index:1;
  display:flex; align-items:center; gap:5px;
  background:rgba(19,19,23,.72); color:#fff; border:none; border-radius:999px;
  padding:6px 11px; font-size:11px; font-weight:700; pointer-events:none;
  opacity:0; transition:opacity .15s;
}
.pd-media.has-photo:hover .pd-zoom-hint{ opacity:1; }
.pd-buy-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.pd-buy-price{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; color:var(--ink); margin-right:auto; }
.pd-buy-row .portal-qty{ width:64px; }
.pd-desc{ font-size:13px; line-height:1.6; color:var(--ink-soft); margin-bottom:14px; }
.pd-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 16px; }
.pd-field{ display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--ink-faint); }
.pd-field span{ text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.pd-field strong{ font-size:13px; font-weight:600; color:var(--ink); }
@media (max-width:520px){ .pd-grid{ grid-template-columns:1fr; } }

/* Shop-context product detail page (renderAdminShopProductDetail) matches
   the customer/rep portal's own product page exactly, including its full-
   width layout with a larger media block -- unlike the Catalog management
   page above (.pd-page alone), which keeps the narrower 760px reading cap. */
.pd-page.pd-shop{ max-width:none; }
.pd-page.pd-shop .pd-media{ height:420px; }

/* ------------------------------ shop table ---------------------------- */
.shop-row-name{
  border:none; background:none; padding:0; cursor:pointer; font:inherit;
  font-weight:700; font-size:13px; color:var(--accent-dark,#b98b24); text-align:left; line-height:1.3;
}
.shop-row-name:hover{ text-decoration:underline; }
.shop-table tbody tr:hover, .cat-table tbody tr:hover{ background:var(--accent-soft) !important; }
.shop-table .qty-stepper-sm{ vertical-align:middle; }
.cat-table .cat-vis-pill{ vertical-align:middle; }

/* ------------------------------ sales reps table ------------------------ */
.rep-cell{ display:flex; align-items:center; gap:11px; }
.rep-avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--accent,#d3a034); color:var(--accent-ink,#17171a);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
}
.rep-cell-info{ min-width:0; }
.rep-name-link{
  display:block; border:none; background:none; padding:0; cursor:pointer; font:inherit;
  font-weight:700; font-size:13px; color:var(--accent-dark,#b98b24); text-align:left;
}
.rep-name-link:hover{ text-decoration:underline; }
.rep-cell-email{ font-size:11px; color:var(--ink-faint); margin-top:1px; }
.rep-target-cell{ min-width:150px; }
.rep-target-bar{ height:5px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-bottom:5px; }
.rep-target-fill{ height:100%; border-radius:99px; background:var(--accent,#d3a034); transition:width .25s ease; }
.rep-target-fill.is-hot{ background:var(--success,#2f7d53); }
.rep-target-label{ font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; }
.rep-target-label .text-muted{ font-weight:600; font-size:11px; }
.reps-grid tbody tr:hover{ background:var(--accent-soft) !important; }

/* ------------------------------ catalog grid --------------------------- */
.cat-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px;
  margin:4px 0 18px;
}
.cat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:box-shadow .15s, transform .15s;
}
.cat-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.cat-card-media{
  position:relative; height:130px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand-dark,#131317),#232327); color:rgba(255,255,255,.5);
  flex-shrink:0; cursor:pointer;
}
.cat-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cat-card-quickview{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  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,.68); color:#fff;
  opacity:0; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;
}
.cat-card-media:hover .cat-card-quickview{ opacity:1; transform:translateY(0); }
.cat-stock-flag{
  position:absolute; left:8px; bottom:8px; z-index:1;
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  padding:3px 8px; border-radius:99px; background:rgba(47,125,83,.92); color:#fff;
}
.cat-stock-flag.is-out{ background:rgba(192,57,43,.92); }
.cat-card-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:2px; flex:1; }
.cat-card-cat{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); }
.cat-card-name{
  border:none; background:none; padding:0; text-align:left; cursor:pointer; font:inherit;
  font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px;
}
.cat-card-name:hover{ color:var(--accent-dark); text-decoration:underline; }
.cat-card-sku{ font-size:10.5px; color:var(--ink-faint); font-family:monospace; margin-top:2px; }
.cat-card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:8px; }
.cat-card-price{ font-weight:800; font-size:14.5px; color:var(--ink); }
.cat-vis-pill{
  border:none; cursor:pointer; font:inherit; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  padding:4px 9px; border-radius:99px; background:var(--success-soft); color:var(--success);
}
.cat-vis-pill.is-hidden{ background:var(--danger-soft); color:var(--danger); }
.cat-card-actions{ display:flex; gap:6px; margin-top:10px; }
.cat-add-btn{ width:100%; margin-top:8px; }

/* ------------------------------ order draft bar ------------------------ */
.draftbar{
  background:linear-gradient(100deg,var(--accent-soft) 0%,var(--surface) 60%);
  border:1px solid var(--accent,#d3a034); border-radius:var(--radius-lg);
  padding:14px 16px; margin:0 0 16px; box-shadow:var(--shadow-sm);
}
.draftbar-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13.5px; }
.draftbar-actions{ display:flex; gap:8px; }
.draftbar-items{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.draftbar-item{
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); padding:8px 12px;
}
.draftbar-item-name{ flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--ink); }
.draftbar-item-sku{ display:block; font-size:10.5px; font-weight:500; color:var(--ink-faint); font-family:monospace; }
.draftbar-item-total{ font-weight:700; font-size:12.5px; min-width:64px; text-align:right; }
.qty-stepper-sm button{ width:24px; height:24px; }
.qty-stepper-sm .qty-value{ min-width:20px; font-size:12px; }

/* ------------------------ Shop: collection browsing --------------------
   Ported from app/portal/portal.css so the admin's Shop tab renders the
   literal same markup/design the customer/rep portal's Shop does
   (renderAdminShopCollections / renderAdminShopCollectionDetail /
   adminShopMemberRow in admin.js). */

/* Collection cards (renderAdminShopCollections) -- same card the customer/
   rep portal's Shop shows for a collection: image + title + item count,
   nothing else. */
.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-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;
}
.portal-shop-meta { font-size: 11.5px; color: var(--ink-faint, #a89a88); }

.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 (or the admin's
   own Catalog Page photos), one big slide at a time. */
.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; }

.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 (adminShopMemberRow()) -- a real table on wide
   screens; below 1100px it collapses into one labelled card per row
   (data-label -> a small caption above each value). */
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;
}

@media (max-width: 860px){
  .cat-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .draftbar-item{ flex-wrap:wrap; }
  .draftbar-item-name{ flex-basis:100%; }
}

/* Order-details capture — cart panel (portal) + admin order-manage modal.
   Shared here since the portal links this stylesheet too. */
.od-panel{
  margin:14px 0 0; border:1px solid var(--line,#e7e0d8); border-radius:12px;
  background:var(--card,#fff); padding:4px 14px;
}
.od-panel > summary{
  list-style:none; cursor:pointer; padding:12px 4px; font-weight:600; font-size:13.5px;
  display:flex; align-items:center; gap:8px;
}
.od-panel > summary::-webkit-details-marker{ display:none; }
.od-panel[open] > summary{ border-bottom:1px solid var(--line,#e7e0d8); margin-bottom:12px; }
.od-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px 14px; padding:4px 4px 14px;
}
.od-field{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink-soft,#6b625a); }
.od-field.od-wide{ grid-column:1 / -1; }
.od-field span{ font-weight:600; }
.od-field input, .od-field select, .od-field textarea{
  font:inherit; font-size:13px; padding:7px 9px; border:1px solid var(--line,#e7e0d8);
  border-radius:8px; background:var(--field,#fdfbf8); color:var(--ink,#2b2622); width:100%;
}
.od-field textarea{ resize:vertical; }
.od-actions{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; }
@media (max-width:640px){ .od-grid{ grid-template-columns:1fr; } }
/* "Add new location" sub-form inside the order-details grid. */
.loc-new{ grid-column:1 / -1; }
.loc-form{ padding:14px 14px 4px; border:1px solid var(--line,#e7e0d8); border-radius:10px; background:var(--surface-2,#faf7f3); }
.loc-form-title{ font-weight:700; font-size:13px; margin-bottom:10px; }
.loc-form .od-grid{ padding:0 0 12px; }

/* Rep "log a visit" form — existing-vs-custom customer toggle + sub-grid. */
.rv-toggle{ display:flex; gap:6px; margin-bottom:14px; }
.rv-tab{
  flex:1; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  padding:8px 10px; border-radius:8px; border:1px solid var(--line,#e7e0d8);
  background:var(--field,#fdfbf8); color:var(--ink-soft,#6b625a);
}
.rv-tab.is-active{ background:var(--accent-soft,#f6ece2); border-color:var(--accent,#b07d46); color:var(--ink,#2b2622); }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.form-grid-2 .form-row{ min-width:0; }
.rv-check{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft,#6b625a); margin-top:6px; }
@media (max-width:520px){ .form-grid-2{ grid-template-columns:1fr; } }

/* Clickable rows inside a detail-rows list (e.g. rep customer -> recent orders). */
.detail-row-click{ cursor:pointer; border-radius:8px; margin:0 -8px; padding-left:8px; padding-right:8px; transition:background .12s; }
.detail-row-click:hover, .detail-row-click:focus-visible{ background:var(--accent-soft,#f6ece2); outline:none; }
.detail-row-click .detail-row-value{ display:flex; align-items:center; gap:6px; }

/* Dealer Form settings (renderDealerFormSettings): Required / Optional switch per field. */
.dfs-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.dfs-bulk{ display:flex; gap:6px; }
.dfs-row{ display:flex; align-items:center; gap:12px; padding:9px 2px; border-top:1px solid var(--line); }
.dfs-row.is-locked .dfs-switch{ opacity:.6; }
.dfs-row.is-hidden .dfs-label{ color:var(--ink-faint); text-decoration:line-through; }
.dfs-label{ flex:1; font-size:13.5px; font-weight:600; color:var(--ink); min-width:0; }
.dfs-note{ display:block; font-size:11.5px; font-weight:500; color:var(--ink-soft); text-decoration:none; }
.dfs-cell{ width:72px; display:flex; justify-content:center; cursor:pointer; }
.dfs-colhead{ display:flex; gap:12px; padding:0 2px 6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.dfs-colhead span:first-child{ flex:1; }
.dfs-colhead span:not(:first-child){ width:72px; text-align:center; }
.dfs-switch--show:checked{ background:var(--accent); }
.dfs-actions{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.dfs-editor{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; margin-bottom:12px; background:var(--bg); }
.dfs-editor-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .dfs-editor-grid{ grid-template-columns:1fr; } .dfs-cell, .dfs-colhead span:not(:first-child){ width:52px; } }
.dfs-star{ color:var(--danger); font-weight:800; }
.dfs-switch{
  appearance:none; -webkit-appearance:none; flex:0 0 auto; width:38px; height:22px; border-radius:999px;
  background:var(--line); position:relative; cursor:pointer; transition:background .15s; margin:0;
}
.dfs-switch::after{
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s;
}
.dfs-switch:checked{ background:var(--danger); }
.dfs-switch:checked::after{ transform:translateX(16px); }
.dfs-switch:disabled{ cursor:not-allowed; }
.dfs-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Sidebar footer: Password + Log Out side by side; change-password rules */
.admin-footer-actions{ display:flex; gap:8px; }
.admin-footer-actions .btn{ flex:1; justify-content:center; }
.cp-rules{ display:flex; flex-wrap:wrap; gap:4px 12px; margin:-4px 0 12px; font-size:11.5px; color:var(--ink-faint,#999); }
.cp-rules span{ display:inline-flex; align-items:center; gap:4px; }
.cp-rules span .icon{ opacity:.35; }
.cp-rules span.is-met{ color:var(--success,#2e7d4f); }
.cp-rules span.is-met .icon{ opacity:1; }

/* Pending Sync banner in the order popup (server/order-sync.js) */
.sync-pending-note {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: rgba(214, 150, 20, 0.10); border: 1px solid rgba(214, 150, 20, 0.35);
  font-size: 13px;
}
.sync-pending-note .btn { flex-shrink: 0; }

/* Backorders (app/admin/backorders.js, order popups in admin + portal, cart) */
.bo-panel {
  margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius-lg, 12px);
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--warning, #b4820a);
}
.bo-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.bo-panel-head strong { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bo-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 3px 0; font-size: 12.5px; }
.bo-table td:nth-child(3) { min-width: 230px; }
.bo-table .badge, .bo-table .assoc-name { white-space: nowrap; }
.bo-table .row-actions { flex-wrap: wrap; min-width: 170px; }
.bo-blocked { font-size: 11px; margin-top: -2px; }
.bo-note-cell { font-size: 11.5px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.bo-qty { font-weight: 700; white-space: nowrap; }
.bo-qty + .bo-qty { margin-left: 6px; }
.bo-qty.is-short { color: var(--danger, #b00); }
.bo-qty.is-ready { color: var(--success, #2a7); }
.bo-qty.is-shipped { color: var(--ink-soft, #666); }
.bo-cart-tag { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--warning, #b4820a); }
.bo-cart-note {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: rgba(214, 150, 20, 0.10); border: 1px solid rgba(214, 150, 20, 0.35);
}

/* Roles & Permissions editor (Admins & Roles page) */
.role-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border, #eee); }
.role-row-text { min-width: 0; flex: 1; font-size: 13px; }
.role-row-levels { display: flex; gap: 10px; flex-shrink: 0; }
.role-level { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.role-level.is-na { opacity: .35; cursor: not-allowed; }
@media (max-width: 560px) { .role-row { flex-direction: column; align-items: flex-start; } }

/* Homepage Sliders: drag-to-reorder rows */
.slide-row-draggable{ cursor:grab; }
.slide-row-draggable.is-dragging{ opacity:.45; }
.slide-row-draggable.is-drop-before td{ box-shadow:inset 0 2px 0 var(--accent, #d3a034); }
.slide-row-draggable.is-drop-after td{ box-shadow:inset 0 -2px 0 var(--accent, #d3a034); }
.slide-drag-handle{ color:var(--ink-faint, #999); margin-right:6px; letter-spacing:-2px; cursor:grab; user-select:none; }

/* Roles editor: View / Create / Update / Delete grid */
.role-bulk{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:4px 0 6px; font-size:12px; }
.role-row-levels .role-check{ display:inline-flex; align-items:center; gap:4px; min-width:72px; font-size:12.5px; cursor:pointer; white-space:nowrap; }
.role-row-levels .role-check.is-na{ color:var(--ink-faint,#aaa); justify-content:center; cursor:default; }
.role-row-all{ padding:2px 8px; font-size:11.5px; }

/* Catalog Page gallery: drop zone for multi-file, any-type uploads */
.cp-dropzone{ display:flex; gap:10px; align-items:center; padding:14px 16px; border:2px dashed var(--line,#d9cfc3); border-radius:10px; font-size:12.5px; color:var(--ink-soft,#555); transition:border-color .15s, background .15s; }
.cp-dropzone.is-over{ border-color:var(--accent,#d3a034); background:rgba(var(--accent-rgb),.08); }
.cp-browse{ color:var(--accent,#b8862a); font-weight:700; text-decoration:underline; cursor:pointer; }

/* Dealer application edit form + notes/history */
.da-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:4px 14px; }
.da-wide{ grid-column:1/-1; }
.da-checks{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; }
.da-checks label, .da-inline{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.da-repeat{ border:1px solid var(--line,#e7e0d8); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.da-repeat-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.da-photo{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; }
.da-save-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; position:sticky; bottom:0; z-index:5; }
.da-two-col{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:4px; }
.da-note{ border-top:1px solid var(--line,#efe9e1); padding:8px 0; }
.da-note-meta{ font-size:11.5px; color:var(--ink-faint,#888); display:flex; align-items:center; gap:6px; }
.da-note-text{ font-size:13px; margin-top:2px; white-space:normal; }

/* 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);
}

/* Catalog Pages -> Home Page Order modal */
.cp-order-list{ display:flex; flex-direction:column; gap:6px; max-height:56vh; overflow-y:auto; padding:2px; }
.cp-order-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  background:var(--surface, #fff); border:1px solid var(--line, #e3e3e7); border-radius:10px;
  cursor:grab; transition:box-shadow .15s, opacity .15s;
}
.cp-order-row:hover{ box-shadow:0 2px 8px rgba(0,0,0,.06); }
.cp-order-row.is-dragging{ opacity:.45; }
.cp-order-row.is-drop-before{ box-shadow:inset 0 3px 0 var(--accent, #d3a034); }
.cp-order-row.is-drop-after{ box-shadow:inset 0 -3px 0 var(--accent, #d3a034); }
.cp-order-handle{ color:var(--ink-faint, #999); letter-spacing:-3px; font-weight:700; user-select:none; }
.cp-order-pos{
  min-width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft, #f6e9cc); color:var(--accent-dark, #b98b24); font-size:12px; font-weight:800;
}
.cp-order-row img, .cp-order-noimg{
  width:40px; height:40px; border-radius:6px; object-fit:cover; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink-faint, #999); background:var(--surface-2, #ededea);
}
.cp-order-title{ flex:1; min-width:0; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-order-actions{ display:flex; gap:4px; flex-shrink:0; }
.cp-order-up .icon{ transform:rotate(180deg); }
.cp-order-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }

/* Dealer Form > Dropdown Options */
.dfs-opt-row{ align-items:flex-start; }
.dfs-opt-preview{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.dfs-opt-preview span{
  font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--accent-soft, #f6e9cc); color:var(--accent-dark, #b98b24);
}
.dfs-opt-preview span.is-more{ background:var(--surface-2, #ededea); color:var(--ink-soft, #777); }
.dfs-opt-list{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; padding:2px; }
.dfs-opt-item{ display:flex; align-items:center; gap:6px; }
.dfs-opt-item input{ flex:1; min-width:0; height:36px; padding:0 10px; border:1.5px solid var(--line); border-radius:9px; font:inherit; font-size:13.5px; background:var(--surface); }
.dfs-opt-item input:focus{ outline:none; border-color:var(--accent); }
.dfs-opt-n{ width:22px; text-align:right; font-size:12px; font-weight:700; color:var(--ink-faint); flex-shrink:0; }
.dfs-opt-add{ display:flex; gap:8px; margin-top:12px; }
.dfs-opt-add input{ flex:1; height:38px; padding:0 12px; border:1.5px dashed var(--accent, #d3a034); border-radius:10px; font:inherit; font-size:13.5px; background:var(--surface); }
.dfs-opt-add input:focus{ outline:none; border-style:solid; }
.dfs-opt-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }

/* ------------------- customer management (customer-mgmt.js) ------------- */
.cm-tile-link{ cursor:pointer; transition:border-color .15s; }
.cm-tile-link:hover{ border-color:var(--accent); }
.cm-filterbar{ display:block; }
.cm-filterbar .ofb-search{ margin-bottom:10px; }
.cm-filter-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px 10px; align-content:start; }
.cm-filter-grid label{
  display:flex; flex-direction:column; gap:4px;
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint);
}
.cm-filter-grid select, .cm-filter-grid input,
.cm-bulk select, .cm-pager select, .cm-banner-row select{
  font:inherit; font-size:12.5px; text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink);
  padding:7px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); min-width:0;
}
.cm-selbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 14px; margin-bottom:12px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface);
  position:sticky; top:0; z-index:5;
}
.cm-selbar.has-selection{ border-color:var(--accent); background:var(--accent-soft); box-shadow:var(--shadow-sm); }
.cm-sel-info{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; }
.cm-bulk{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cm-bulk select{ max-width:240px; }
.cm-table th.cm-check, .cm-table td.cm-check{ width:34px; text-align:center; }
.cm-table input[type=checkbox]{ width:16px; height:16px; cursor:pointer; accent-color:var(--ink); }
.cm-table tr.is-selected td{ background:var(--accent-soft); }
.cm-sort{ cursor:pointer; user-select:none; white-space:nowrap; }
.cm-sort.is-sorted{ color:var(--ink); }
.cm-name{ border:none; background:none; padding:0; font:inherit; font-weight:700; color:var(--ink); cursor:pointer; text-align:left; }
.cm-name:hover{ color:var(--accent-dark); text-decoration:underline; }
.cm-sub{ font-size:11px; margin-top:2px; }
.cm-mini{ font-size:9.5px; padding:2px 7px; }
.cm-auto{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); border:1px solid var(--line); border-radius:99px; padding:1px 6px; margin-left:4px; }
.cm-swatch{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; }
table.cm-audit-table{ min-width:0; width:100%; }

/* ---------- portal banner slider (portal Home + admin previews) ---------- */
/* the slot sits above #admin-main, so it mirrors main's side padding */
#portal-banner-slot:not(:empty){ padding:32px 34px 0; }
#portal-banner-slot:not(:empty) + #admin-main{ padding-top:4px; }
@media (max-width:860px){ #portal-banner-slot:not(:empty){ padding:20px 16px 0; } }
.pb-slider{ position:relative; overflow:hidden; border-radius:var(--radius-lg); margin:0 0 18px; background:linear-gradient(120deg,#5a0f1f,#8f0224 55%,#b08a5b); box-shadow:var(--shadow-sm); }
.pb-track{ display:flex; transition:transform .5s ease; }
.pb-slide{ position:relative; flex:0 0 100%; aspect-ratio:16/5; min-height:190px; display:flex; align-items:center; overflow:hidden; }
.pb-slide.is-link{ cursor:pointer; }
.pb-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pb-slide.has-image .pb-content{ background:linear-gradient(90deg,rgba(20,10,12,.62),rgba(20,10,12,.25) 60%,transparent); }
.pb-content{ position:relative; z-index:1; height:100%; width:100%; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:24px 64px; color:#fff; }
.pb-title{ font-size:clamp(18px,2.4vw,30px); font-weight:900; line-height:1.15; max-width:620px; text-shadow:0 1px 8px rgba(0,0,0,.25); }
.pb-message{ font-size:clamp(12.5px,1.25vw,15px); line-height:1.45; max-width:560px; opacity:.95; }
.pb-btn{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:9px 16px; border-radius:var(--radius-pill); background:#fff; color:#3a0a14; font-weight:800; font-size:13px; }
.pb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.85); color:#2b2622; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pb-prev{ left:10px; } .pb-next{ right:10px; }
.pb-dots{ position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:2; }
.pb-dot{ width:8px; height:8px; border-radius:99px; border:none; background:rgba(255,255,255,.55); cursor:pointer; padding:0; transition:width .2s; }
.pb-dot.is-active{ width:22px; background:#fff; }
.pb-slider.is-mobile{ max-width:380px; }
.pb-slider.is-mobile .pb-slide, .pb-slider.is-mobile .pb-content{ aspect-ratio:4/3; }
.pb-slider.is-mobile .pb-content{ padding:18px 20px; justify-content:flex-end; background:linear-gradient(0deg,rgba(20,10,12,.7),transparent 75%); }
.pb-slider.is-mobile .pb-title{ font-size:20px; } .pb-slider.is-mobile .pb-message{ font-size:13px; }
@media (max-width:640px){
  .pb-slide{ aspect-ratio:4/3; }
  .pb-content{ padding:18px 20px; justify-content:flex-end; }
  .pb-slide.has-image .pb-content{ background:linear-gradient(0deg,rgba(20,10,12,.7),transparent 75%); }
  .pb-nav{ display:none; }
}

/* ---------------------- admin: portal banners page ----------------------- */
.pb-filters{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.pb-list{ display:flex; flex-direction:column; gap:10px; }
.pb-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.pb-row.is-dim .pb-thumb{ opacity:.55; }
.pb-order{ display:flex; flex-direction:column; gap:2px; }
.pb-order [data-pb-up] svg{ transform:rotate(180deg); }
.pb-thumb{ width:150px; height:56px; flex-shrink:0; border-radius:8px; overflow:hidden; background:linear-gradient(120deg,#5a0f1f,#8f0224 55%,#b08a5b); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; text-align:center; padding:0; }
.pb-thumb img{ width:100%; height:100%; object-fit:cover; }
.pb-thumb span{ padding:6px; }
.pb-info{ flex:1; min-width:0; }
.pb-name{ font-weight:800; font-size:14px; }
.pb-meta{ font-size:12px; margin-top:3px; }
.pb-actions{ flex-shrink:0; }
.pb-editor{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; margin-top:10px; }
.pb-form .form-row select, .pb-form .form-row textarea{ width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; font:inherit; font-size:13.5px; background:var(--bg); }
.pb-live{ position:sticky; top:0; }
.pb-live-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.pb-section{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-dark); margin:18px 0 8px; padding-top:12px; border-top:1px solid var(--line-soft); }
.pb-hint{ font-size:11.5px; margin-top:4px; }
.pb-seg{ display:flex; gap:8px; flex-wrap:wrap; }
.pb-seg label{ cursor:pointer; }
.pb-seg input{ position:absolute; opacity:0; width:1px !important; }
.pb-seg span, .pb-upload label{ text-transform:none; letter-spacing:0; }
.pb-seg span{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1.5px solid var(--line); border-radius:var(--radius-pill); font-size:13px; font-weight:700; color:var(--ink-soft); }
.pb-seg input:checked + span{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pb-chips{ display:flex; flex-wrap:wrap; gap:4px; }
.pb-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 11px; border-radius:99px; background:var(--ink); color:#fff; font-size:12px; font-weight:700; margin:0 4px 4px 0; }
.pb-pill button{ border:none; background:rgba(255,255,255,.2); color:#fff; width:18px; height:18px; border-radius:50%; cursor:pointer; line-height:1; }
.pb-cust-pick{ position:relative; margin-bottom:8px; }
.pb-cust-sugg{ position:absolute; z-index:5; left:0; right:0; top:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); max-height:240px; overflow:auto; }
.pb-cust-sugg button{ display:block; width:100%; text-align:left; border:none; background:none; padding:8px 12px; font:inherit; font-size:13px; cursor:pointer; }
.pb-cust-sugg button:hover{ background:var(--accent-soft); }
.pb-upload{ display:flex; flex-direction:column; gap:8px; }
.pb-upload img, .pb-upload-empty{ width:100%; aspect-ratio:16/6; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); }
.pb-upload-actions{ display:flex; gap:6px; align-items:center; }
.pb-preview-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:6px; }
.pb-empty{ padding:20px; text-align:center; }
@media (max-width:900px){ .pb-editor{ grid-template-columns:1fr; } .pb-live{ position:static; } }
@media (max-width:640px){ .pb-row{ flex-wrap:wrap; } .pb-thumb{ width:100%; height:90px; } }
.cm-pl-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.cm-pl-toolbar .ofb-search{ flex:1; }
.cm-pl-paste{ margin-bottom:10px; }
.cm-pl-paste textarea{ width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; font:inherit; font-size:12.5px; font-family:ui-monospace, Consolas, monospace; }
.cm-pl-input{ width:96px; text-align:right; padding:6px 8px; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; font-size:13px; background:var(--surface); }
.cm-pl-input:focus{ outline:none; border-color:var(--accent); }
.cm-pl-table tr.is-selected td{ background:var(--accent-soft); }
.cm-pl-savebar{ display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); }
.cm-pl-savebar #pl-pending{ margin-right:auto; font-size:12.5px; }
.cm-class-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.cm-class-grid label{ display:flex; flex-direction:column; gap:4px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.cm-class-grid select{ font:inherit; font-size:13px; text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink); padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
.cm-class-grid .cm-sub{ text-transform:none; letter-spacing:0; font-weight:500; }
@media (max-width:520px){ .cm-class-grid{ grid-template-columns:1fr; } }
.cm-pager{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; font-size:12.5px; }
.cm-breakdown{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.cm-breakdown-head{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding:7px 12px; background:var(--surface-2); }
.cm-breakdown-row{ display:flex; justify-content:space-between; gap:10px; padding:7px 12px; border-top:1px solid var(--line-soft); font-size:13px; }
.cm-rule{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; background:var(--surface-2); color:var(--ink-soft); margin:2px 2px 2px 0; }
.cm-form-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.cm-state-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:5px; max-height:180px; overflow:auto; padding:2px; }
.cm-chip{ display:inline-flex; position:relative; cursor:pointer; margin:0 4px 4px 0; }
.cm-chip input{ position:absolute; left:0; top:0; width:1px !important; height:1px; padding:0 !important; margin:0; border:0; opacity:0; pointer-events:none; }
.cm-chip span{ display:block; width:100%; text-align:center; font-size:11.5px; font-weight:700; padding:5px 9px; border:1px solid var(--line); border-radius:99px; background:var(--surface); color:var(--ink-soft); transition:background .12s, color .12s; }
.cm-chip input:checked + span{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cm-chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:1px; }
.form-row .cm-state-grid .cm-chip{ margin:0; }
.cm-range-row{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.cm-range-row input{ width:110px !important; }
.cm-inline{ display:flex !important; align-items:center; gap:8px; text-transform:none !important; letter-spacing:0 !important; font-weight:600 !important; font-size:13px !important; color:var(--ink) !important; }
.cm-inline input{ width:auto !important; }
.cm-banner-edit{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; margin-bottom:10px; background:var(--bg); }
.cm-banner-edit textarea{ width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; font:inherit; font-size:13px; }
.cm-banner-row{ display:flex; gap:14px; align-items:center; margin:8px 0; font-size:12px; font-weight:700; color:var(--ink-soft); }
.cm-aud{ display:grid; grid-template-columns:120px 1fr; gap:8px; align-items:start; margin-top:6px; }
.cm-aud > span{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding-top:6px; }
@media (max-width:640px){
  .cm-form-2, .cm-aud{ grid-template-columns:1fr; }
  .cm-selbar{ position:static; }
}

/* Review order: searchable customer picker (same look as the portal's rep cart picker) */
.cust-combo{ position:relative; display:flex; align-items:center; }
.cust-combo > .icon{ position:absolute; left:11px; color:var(--ink-faint); pointer-events:none; }
.cust-combo input{ width:100%; padding-left:32px; padding-right:34px; }
.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); cursor:pointer; border-radius:6px;
}
.cust-combo-toggle:hover{ background:var(--surface-2); }
.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:300px; overflow-y:auto; margin:0; padding:4px; list-style:none;
  background:var(--surface); border:1px solid var(--line); 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(--surface-2); }
.cust-combo-list li.is-selected strong::after{ content:" ✓"; color:var(--accent); }
.cust-combo-list li.is-empty{ cursor:default; background:none; }

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

/* Portal banner editor: several images per banner (each one a slide). */
#pb-images{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.pb-img-row{ display:grid; grid-template-columns:22px 1fr 1fr auto; gap:10px; align-items:start; padding:10px; border:1px solid var(--line,#e7e0d8); border-radius:10px; }
.pb-img-num{ font-weight:700; font-size:12px; color:var(--ink-soft,#6b625a); padding-top:4px; }
.pb-img-tools{ display:flex; flex-direction:column; gap:2px; }
.pb-img-tools [data-img-up] svg{ transform:rotate(180deg); }
.pb-img-add{ align-self:flex-start; }
.pb-upload-empty span{ display:block; font-size:11px; margin-top:4px; }
.pb-thumb{ position:relative; }
.pb-thumb-count{ position:absolute; right:4px; bottom:4px; display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:700; color:#fff; background:rgba(0,0,0,.6); padding:2px 6px; border-radius:999px; }
.pb-upload-empty{ flex-direction:column; }
@media (max-width:640px){ .pb-img-row{ grid-template-columns:22px 1fr; } .pb-img-row > .pb-upload, .pb-img-tools{ grid-column:2; } .pb-img-tools{ flex-direction:row; } }

/* Admin Home: heading above each KPI / chart group */
.home-section-title{ font-family:var(--font-display); font-weight:800; font-size:15px; margin:6px 0 12px; }

/* Admin Home: ranked "Top ..." lists */
.rank-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.rank-item{ display:flex; align-items:flex-start; gap:12px; padding:10px 8px; margin:0 -8px; border-radius:var(--radius-sm,8px); transition:background .15s ease; }
.rank-item:hover{ background:var(--bg-soft,#faf7f2); }
.rank-badge{ flex:0 0 28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800;
  background:var(--surface-2,#f3eee6); color:var(--ink-soft,#6b6257); }
.rank-badge.rank-1{ background:var(--accent,#d3a034); color:#fff; box-shadow:0 2px 8px rgba(211,160,52,.35); }
.rank-badge.rank-2{ background:var(--accent-soft,#f6ead0); color:var(--accent-dark,#9c7420); }
.rank-badge.rank-3{ background:var(--accent-soft,#f6ead0); color:var(--accent-dark,#9c7420); }
.rank-body{ flex:1; min-width:0; }
.rank-top, .rank-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.rank-name{ font-size:13.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.rank-value{ font-size:14px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; flex-shrink:0; }
.rank-meta{ margin-top:2px; }
.rank-sub{ font-size:11.5px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.rank-share{ font-size:11px; font-weight:700; color:var(--ink-faint); flex-shrink:0; font-variant-numeric:tabular-nums; }
.rank-bar{ margin-top:8px; height:6px; border-radius:99px; background:var(--surface-2,#f3eee6); overflow:hidden; }
.rank-bar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent-dark,#9c7420),var(--accent,#d3a034)); transition:width .4s ease; }
.rank-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:140px; color:var(--ink-faint); font-size:13px; }
@media (max-width:520px){
  .rank-item{ gap:10px; padding:9px 4px; margin:0 -4px; }
  .rank-badge{ flex-basis:24px; height:24px; font-size:11px; }
  .rank-name{ font-size:13px; }
  .rank-value{ font-size:13px; }
}

/* ----------------------------- role dropdown ------------------------------
   enhanceRoleSelect() in admin.js. Quiet at rest inside an admin row, so a long
   list reads as text; a bordered control in the toolbar and the Add Admin form. */
.role-select{ position:relative; flex-shrink:0; max-width:100%; }
.role-select-trigger{
  display:flex; align-items:center; gap:8px; width:100%; min-height:36px; padding:6px 10px 6px 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-sm);
  font:inherit; font-size:13px; font-weight:500; color:var(--ink); text-align:left; cursor:pointer;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.role-select-trigger:hover:not(:disabled){ border-color:var(--line-strong); background:var(--bg); }
.role-select-trigger:focus-visible, .role-select.is-open .role-select-trigger{
  outline:none; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-soft);
}
.role-select-trigger:disabled{ opacity:.55; cursor:not-allowed; }
.customer-card .role-select:not(.is-open) .role-select-trigger:not(:hover):not(:focus-visible){ background:var(--bg); border-color:transparent; box-shadow:none; }
.form-row .role-select-trigger{ min-height:40px; font-size:13.5px; }

.role-select-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.role-select-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role-select-count{
  flex-shrink:0; min-width:20px; padding:0 6px; border-radius:var(--radius-pill); background:var(--surface-2);
  font-size:11.5px; font-weight:600; line-height:18px; text-align:center; color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.role-select-chevron{ display:flex; flex-shrink:0; color:var(--ink-faint); transition:transform .15s; }
.role-select.is-open .role-select-chevron{ transform:rotate(180deg); }

.role-select-menu{
  position:fixed; z-index:350; box-sizing:border-box; width:max-content; max-width:300px; padding:4px; overflow-y:auto; outline:none;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-lg);
  animation:roleMenuIn .12s ease-out;
}
.role-select-option{
  display:flex; align-items:center; gap:8px; padding:8px 8px 8px 10px; border-radius:6px;
  font-size:13px; color:var(--ink); cursor:pointer;
}
.role-select-option.is-active{ background:var(--surface-2); }
.role-select-option[aria-selected="true"]{ font-weight:600; }
.role-select-option.is-active .role-select-count{ background:var(--surface); }
.role-select-tick{ display:flex; flex-shrink:0; width:14px; color:var(--accent); }
@keyframes roleMenuIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .role-select-menu{ animation:none; } .role-select-chevron{ transition:none; } }

/* -- Permission guards (ACTION_GUARDS in admin.js): controls the admin's
   role doesn't allow. The server refuses them anyway; this just hides them. */
[data-perm-locked="hide"]{ display:none !important; }
[data-perm-locked="disable"]{ cursor:not-allowed; }
.access-denied{ max-width:440px; margin:64px auto; padding:32px 24px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); }
.access-denied h2{ margin:12px 0 6px; color:var(--ink); }
.access-denied p{ color:var(--ink-soft); font-size:13.5px; line-height:1.5; margin-bottom:18px; }
.access-denied-icon{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--accent-soft); color:var(--accent); }
.perm-override-note{ font-size:12.5px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--ink); margin-bottom:12px; }

/* -- Languages & Translations (app/admin/languages.js) -- */
.lang-meter{ height:6px; border-radius:999px; background:var(--line-soft, #eee); overflow:hidden; margin-bottom:4px; }
.lang-meter span{ display:block; height:100%; background:var(--accent); border-radius:inherit; }
.lang-tr-list{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
.lang-tr-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; padding:10px 14px; border-bottom:1px solid var(--line-soft); }
.lang-tr-row:last-child{ border-bottom:0; }
.lang-tr-row.is-missing{ background:var(--accent-soft); }
.lang-tr-src{ font-size:13px; color:var(--ink); overflow-wrap:anywhere; }
.lang-tr-dst textarea{ width:100%; font:inherit; font-size:13px; padding:7px 9px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); resize:vertical; }
.lang-tr-dst textarea:focus{ outline:none; border-color:var(--accent); }
.lang-savebar{ position:sticky; bottom:12px; display:none; align-items:center; gap:10px; justify-content:flex-end; margin-top:14px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); box-shadow:0 8px 24px -12px rgba(0,0,0,.25); }
.lang-savebar.is-on{ display:flex; }
.lang-savebar #lt-dirty{ margin-inline-end:auto; font-size:12.5px; color:var(--ink-soft); }
@media (max-width:720px){ .lang-tr-row{ grid-template-columns:1fr; gap:6px; } }