/* ==========================================================================
   HPI Image Audit — Highway Products Inc. brand styling
   Black/charcoal + white + signature red, bold industrial type
   Fast, all-inline card interactions (no popup) for rapid review
   ========================================================================== */

:root {
  --hpi-black: #0d0d0d;
  --hpi-charcoal: #1a1a1a;
  --hpi-charcoal-2: #232323;
  --hpi-red: #e31e24;
  --hpi-red-dark: #b8161b;
  --hpi-white: #ffffff;
  --hpi-gray-100: #f5f5f5;
  --hpi-gray-200: #e6e6e6;
  --hpi-gray-400: #b0b3b6;
  --hpi-gray-600: #6b6b6b;
  --hpi-gray-800: #2e2e2e;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --header-h: 76px;
  --category-bar-h: 49px; /* dynamically updated by JS to match actual (possibly multi-row) category bar height; only relevant on desktop where the bar is in-flow */
  --shadow-card: 0 2px 10px rgba(0,0,0,0.12);
  --shadow-elevated: 0 12px 40px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--hpi-gray-100);
  color: var(--hpi-black);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; }

/* ---------------- Header ---------------- */
.site-header {
  background: var(--hpi-black);
  border-bottom: 4px solid var(--hpi-red);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  min-height: var(--header-h);
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.brand-logo {
  height: 46px;
  width: auto;
  display: block;
}

.header-title {
  flex: 1 1 auto;
  min-width: 0;
}

.header-title h1 {
  color: var(--hpi-white);
  font-size: 1.4rem;
  margin: 0;
  line-height: 1.1;
}

.header-title p {
  color: var(--hpi-gray-400);
  font-size: 0.78rem;
  margin: 2px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Groups the site nav + "Rating as" name field so they sit together at
   the end of the header, visually paired as one unit. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

/* Shared header nav — identical link set/order on every page
   (index.html, document-audit.html, video-audit.html, product.html,
   products.html, reviews.html), with the current page's own link
   highlighted via .active rather than omitted. Plain text buttons
   (no icons) styled like small outlined pills so they stay consistent
   with the rest of the header chrome. */
.header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.reviews-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid #3a3a3a;
  color: var(--hpi-gray-400);
  padding: 9px 15px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.reviews-nav-link:hover {
  border-color: var(--hpi-red);
  color: var(--hpi-white);
}

/* Current-page nav link — filled red pill instead of just an outline, so
   it's unmistakable at a glance which page you're already on. */
.reviews-nav-link.active {
  background: var(--hpi-red);
  border-color: var(--hpi-red);
  color: var(--hpi-white);
  cursor: default;
}

.reviews-nav-link.active:hover {
  background: var(--hpi-red);
  border-color: var(--hpi-red);
}

.rater-box {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rater-box label {
  color: var(--hpi-gray-400);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

#rater-name-input {
  background: var(--hpi-charcoal-2);
  border: 1px solid #3a3a3a;
  color: var(--hpi-white);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 0.9rem;
  width: 180px;
  transition: border-color 0.15s;
}

#rater-name-input:focus {
  outline: none;
  border-color: var(--hpi-red);
}

/* ---------------- Mobile hamburger trigger ----------------
   Lives directly INSIDE .header-inner (see index.html) so it is
   guaranteed to always look like part of the same black/red header bar
   as the rest of the site's chrome — same background, same red — instead
   of being a separate strip that has to be kept visually in sync by hand.
   Hidden entirely on desktop; only shown at the <=768px breakpoint below.
   Opening it shows #category-bar as a simple, robust full-screen overlay
   (plain display:none/flex — see the mobile block further down — no
   opacity/visibility/pointer-events juggling that can drift out of sync). */
.category-menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--hpi-red);
  border: none;
  color: var(--hpi-white);
  padding: 10px 16px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.category-menu-toggle i { font-size: 1rem; }

.category-menu-toggle.open {
  background: var(--hpi-charcoal-2);
  border: 1px solid var(--hpi-red);
}

.category-menu-toggle-current {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  white-space: nowrap;
}

/* While the mobile category overlay is open, lock background scroll so the
   page underneath doesn't move around behind it. */
body.category-menu-locked {
  overflow: hidden;
}

/* ---------------- Category bar (grouped / accordion) ---------------- */
.category-bar {
  background: var(--hpi-charcoal);
  padding: 12px 20px 14px;
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  border-bottom: 1px solid #2a2a2a;
  max-height: 65vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.category-bar::-webkit-scrollbar { width: 6px; }
.category-bar::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }

/* Mobile-only header row (title + close X) shown inside the full-screen
   overlay. display:none on desktop where .category-bar is just an
   in-flow bar and needs no close control. */
.category-bar-mobile-head { display: none; }

/* Wraps the actual scrollable category content. On desktop this is just a
   plain block; on mobile it becomes the scrollable region of the overlay
   (see media query) so the head/close button can stay pinned above it.
   Constrained to the same max-width used by the header/other bars so the
   category grid doesn't stretch edge-to-edge (and end up with an unwieldy
   number of columns) on very wide/4K desktop monitors — the charcoal
   background of .category-bar itself still spans the full width behind it. */
.category-bar-scroll {
  max-width: 1500px;
  margin: 0 auto;
}

/* Pinned top row: "All Categories" + Expand/Collapse All controls.
   Always visible above the fold regardless of scroll/collapse state. */
.category-bar-top-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.category-bar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.category-bar-action-btn {
  background: transparent;
  border: 1px solid #3a3a3a;
  color: var(--hpi-gray-400);
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.15s;
}

.category-bar-action-btn:hover {
  border-color: var(--hpi-red);
  color: var(--hpi-white);
}

.category-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid #3a3a3a;
  color: var(--hpi-gray-400);
  padding: 7px 10px 7px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

.category-btn-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-btn:hover {
  border-color: var(--hpi-red);
  color: var(--hpi-white);
}

.category-btn.active {
  background: var(--hpi-red);
  border-color: var(--hpi-red);
  color: var(--hpi-white);
}

/* "All Categories" chip is a slightly bolder/larger variant of .category-btn */
.category-btn-all {
  padding: 9px 12px 9px 18px;
  font-size: 0.8rem;
  border-color: #4a4a4a;
  min-width: 0;
}

/* ---------------- Inline reviewed/remaining stat badges ----------------
   Small "✓ N  ⏳ N" pill shown on every category menu item — the All
   Categories chip, each group header (aggregated across its categories),
   each standalone solo chip, and every individual leaf category button —
   so raters can see review progress per category without opening it.
   Colors intentionally match the progress bar elsewhere on the page:
   green (#1a8f3c) for reviewed, red (--hpi-red) for remaining/not-reviewed. */
.category-stat-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: none;
}

.category-stat-reviewed,
.category-stat-remaining {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1.4;
  white-space: nowrap;
}

.category-stat-reviewed {
  color: #1a8f3c;
  background: rgba(26, 143, 60, 0.16);
}

.category-stat-remaining {
  color: var(--hpi-red);
  background: rgba(227, 30, 36, 0.16);
}

.category-stat-reviewed i,
.category-stat-remaining i {
  font-size: 0.62rem;
}

/* On an active/highlighted chip (solid red background), swap the badge to
   translucent white pills so both numbers stay legible against red. */
.category-btn.active .category-stat-reviewed,
.category-group-solo.active .category-stat-reviewed,
.category-btn.active .category-stat-remaining,
.category-group-solo.active .category-stat-remaining {
  background: rgba(255, 255, 255, 0.22);
  color: var(--hpi-white);
}

/* Grid of collapsible group cards — auto-fills columns on wide/desktop
   screens, collapses naturally to a single column on narrow/mobile screens. */
.category-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  align-items: start;
}

.category-group {
  background: var(--hpi-charcoal-2);
  border: 1px solid #2f2f2f;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.category-group.has-active { border-color: rgba(227, 30, 36, 0.55); }

.category-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--hpi-white);
  padding: 11px 12px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  text-align: left;
}

.category-group-header:hover { background: rgba(255,255,255,0.05); }

.category-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.category-group-header .category-stat-badge { margin-left: 0; }

.category-group.has-active .category-group-header {
  color: var(--hpi-red);
}

.category-group-count {
  color: var(--hpi-gray-400);
  font-weight: 500;
  font-size: 0.66rem;
  margin-left: 4px;
  letter-spacing: 0.02em;
}

/* "View Product Page" icon link shown on every category chip (leaf
   category buttons + solo chips) — jumps to that category's master
   product page (product.html?category=<id>) where its images, documents,
   and videos can all be reviewed together. Sits just before the stat
   badge; click is stopped from bubbling so it doesn't also trigger the
   chip's own "filter to this category" click handler. */
.category-view-product-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--hpi-gray-400);
  font-size: 0.68rem;
  margin-left: 6px;
  transition: color 0.15s, background 0.15s;
}

.category-view-product-link:hover {
  color: var(--hpi-white);
  background: rgba(227, 30, 36, 0.4);
}

.category-btn.active .category-view-product-link,
.category-group-solo.active .category-view-product-link {
  color: rgba(255,255,255,0.8);
}

.category-btn.active .category-view-product-link:hover,
.category-group-solo.active .category-view-product-link:hover {
  background: rgba(255,255,255,0.25);
  color: var(--hpi-white);
}

.category-group-chevron {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--hpi-gray-400);
  transition: transform 0.2s ease;
}

.category-group.expanded .category-group-chevron { transform: rotate(180deg); }

.category-group-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 12px 12px;
  border-top: 1px solid #2f2f2f;
  margin-top: -1px;
  padding-top: 10px;
}

.category-group-panel.collapsed { display: none; }

/* Standalone single-category "groups" (e.g. Homepage, Bed Rails, Utility
   Deck) — no accordion needed, so this renders as one directly clickable
   chip that matches the group-card look but behaves like a category-btn. */
.category-group-solo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--hpi-charcoal-2);
  border: 1px solid #2f2f2f;
  border-radius: 8px;
  color: var(--hpi-gray-400);
  padding: 11px 12px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  text-align: left;
  transition: all 0.15s;
}

.category-group-solo .category-stat-badge { margin-left: 0; }

.category-group-solo:hover {
  border-color: var(--hpi-red);
  color: var(--hpi-white);
}

.category-group-solo.active {
  background: var(--hpi-red);
  border-color: var(--hpi-red);
  color: var(--hpi-white);
}

/* ---------------- Add Image bar ---------------- */
.add-image-bar {
  background: var(--hpi-white);
  border-bottom: 1px solid var(--hpi-gray-200);
  padding: 10px 20px;
}

.add-image-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.add-image-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hpi-black);
  color: var(--hpi-white);
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.15s;
  flex: 0 0 auto;
}

.add-image-toggle:hover,
.add-image-toggle.active {
  background: var(--hpi-red);
}

.add-image-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
}

.add-image-form input[type="url"] {
  flex: 1 1 260px;
  min-width: 200px;
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.add-image-form input[type="text"] {
  flex: 0 1 200px;
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.add-image-form select {
  flex: 0 0 auto;
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.85rem;
  background: var(--hpi-white);
  color: var(--hpi-black);
}

.add-image-form input:focus,
.add-image-form select:focus {
  outline: none;
  border-color: var(--hpi-red);
}

.btn-add-image-submit {
  background: var(--hpi-red);
  color: var(--hpi-white);
  border: none;
  padding: 8px 18px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: background 0.15s;
  flex: 0 0 auto;
}

.btn-add-image-submit:hover { background: var(--hpi-red-dark); }
.btn-add-image-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-add-image-cancel {
  background: var(--hpi-white);
  color: var(--hpi-gray-600);
  border: 1px solid var(--hpi-gray-200);
  padding: 8px 18px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
}

.btn-add-image-cancel:hover { border-color: var(--hpi-gray-400); }

/* ---------------- Add Image toggle (bulk variant) ---------------- */
.add-image-toggle-bulk {
  background: var(--hpi-charcoal-2);
}

.add-image-toggle-bulk:hover {
  background: var(--hpi-red);
}

/* ---------------- Add New Category toggle ---------------- */
.add-image-toggle-category {
  background: var(--hpi-gray-800);
}

.add-image-toggle-category:hover {
  background: var(--hpi-red);
}

/* ---------------- Bulk Import modal ("Add All Images From Page URL") ----------------
   Scans a pasted highwayproducts.com page URL for every product photo it
   contains (via a reader-proxy fetch, since the site itself doesn't allow
   cross-origin fetches from the browser), shows them as a checkbox grid,
   and lets the rater add a whole batch to one category in a single click
   instead of pasting each image URL individually. */
.bulk-import-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.75);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.bulk-import-dialog {
  background: var(--hpi-white);
  border-radius: 8px;
  width: 100%;
  max-width: 980px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
}

.bulk-import-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--hpi-black);
  padding: 16px 20px;
  flex: 0 0 auto;
}

.bulk-import-header h2 {
  margin: 0;
  color: var(--hpi-white);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bulk-import-close {
  background: transparent;
  border: none;
  color: var(--hpi-white);
  font-size: 1.2rem;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  flex: 0 0 auto;
}

.bulk-import-close:hover { background: var(--hpi-red); }

.bulk-import-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.bulk-import-scan-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bulk-import-scan-row input[type="url"] {
  flex: 1 1 380px;
  min-width: 220px;
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 0.85rem;
}

.bulk-import-scan-row input[type="url"]:focus {
  outline: none;
  border-color: var(--hpi-red);
}

.btn-bulk-scan {
  background: var(--hpi-red);
  color: var(--hpi-white);
  border: none;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
  transition: background 0.15s;
}

.btn-bulk-scan:hover { background: var(--hpi-red-dark); }
.btn-bulk-scan:disabled { opacity: 0.6; cursor: not-allowed; }

.bulk-import-hint {
  color: var(--hpi-gray-600);
  font-size: 0.78rem;
  margin: 10px 0 0;
  line-height: 1.4;
}

.bulk-import-status {
  font-size: 0.82rem;
  font-weight: 600;
  margin: 12px 0 0;
  min-height: 1.2em;
}

.bulk-import-status.error { color: var(--hpi-red); }
.bulk-import-status.info { color: var(--hpi-gray-600); }
.bulk-import-status.success { color: #1a8f3c; }

.bulk-import-results { margin-top: 16px; }

.bulk-import-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hpi-gray-200);
}

.bulk-import-controls label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hpi-gray-600);
}

.bulk-import-controls select {
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.85rem;
  background: var(--hpi-white);
  color: var(--hpi-black);
}

.bulk-import-select-actions {
  display: flex;
  gap: 6px;
}

.bulk-import-select-actions button {
  background: var(--hpi-white);
  border: 1px solid var(--hpi-gray-200);
  color: var(--hpi-gray-600);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bulk-import-select-actions button:hover { border-color: var(--hpi-red); color: var(--hpi-black); }

.bulk-import-count {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--hpi-black);
}

.bulk-import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.bulk-import-item {
  border: 2px solid var(--hpi-gray-200);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--hpi-white);
  transition: border-color 0.15s;
  position: relative;
}

.bulk-import-item.selected {
  border-color: var(--hpi-red);
}

.bulk-import-item.already-added {
  opacity: 0.55;
}

.bulk-import-item.load-failed {
  opacity: 0.45;
  pointer-events: none;
}

.bulk-import-item-broken-badge { display: none; }

.bulk-import-item.load-failed .bulk-import-item-broken-badge {
  display: block;
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--hpi-red);
  color: var(--hpi-white);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 6px;
  border-radius: 3px;
}

.bulk-import-item-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--hpi-gray-100);
}

.bulk-import-item-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bulk-import-item-check {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: var(--hpi-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  border: 2px solid var(--hpi-white);
}

.bulk-import-item.selected .bulk-import-item-check {
  background: var(--hpi-red);
}

.bulk-import-item-already-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--hpi-black);
  color: var(--hpi-white);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 6px;
  border-radius: 3px;
}

.bulk-import-item-label {
  padding: 6px 8px;
  font-size: 0.7rem;
  color: var(--hpi-gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bulk-import-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--hpi-gray-200);
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .bulk-import-dialog { max-height: 95vh; }
  .bulk-import-scan-row input[type="url"] { flex: 1 1 100%; }
  .bulk-import-controls { flex-direction: column; align-items: stretch; }
  .bulk-import-count { margin-left: 0; }
  .bulk-import-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ---------------- Add New Category modal ----------------
   Reuses the same .bulk-import-* dialog/header/footer/status chrome as the
   "Add All Images From Page URL" modal for visual consistency, but is a much
   simpler single-column form (name, menu-group placement, optional source
   URL) so it gets its own narrower max-width and stacked field styling. */
.add-category-dialog {
  max-width: 520px;
}

#add-category-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.add-category-field-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hpi-gray-600);
  margin-top: 14px;
}

.add-category-field-label:first-child { margin-top: 0; }

.add-category-optional {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}

#add-category-form input[type="text"],
#add-category-form input[type="url"],
#add-category-form select {
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 0.85rem;
  background: var(--hpi-white);
  color: var(--hpi-black);
  width: 100%;
}

#add-category-form input:focus,
#add-category-form select:focus {
  outline: none;
  border-color: var(--hpi-red);
}

#add-category-group-hint {
  margin-top: 6px;
}

/* ---------------- Progress bar ---------------- */
.progress-bar {
  background: var(--hpi-white);
  border-bottom: 1px solid var(--hpi-gray-200);
  position: sticky;
  top: calc(var(--header-h) + var(--category-bar-h));
  z-index: 80;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.progress-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
  flex-wrap: wrap;
}

.progress-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}

.progress-number {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
}

.progress-stat.rated .progress-number { color: #1a8f3c; }
.progress-stat.remaining .progress-number { color: var(--hpi-red); }

.progress-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hpi-gray-600);
  margin-top: 2px;
  font-weight: 600;
}

.progress-track {
  flex: 1 1 160px;
  height: 8px;
  background: var(--hpi-gray-200);
  border-radius: 4px;
  overflow: hidden;
  min-width: 100px;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--hpi-red), #ff5257);
  transition: width 0.3s ease;
}

.progress-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.progress-controls label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hpi-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#sort-select {
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.85rem;
  background: var(--hpi-white);
  color: var(--hpi-black);
}

/* ---------------- Multi-select mode + bulk action bar ---------------- */
.multi-select-toggle {
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--hpi-white);
  color: var(--hpi-gray-600);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.multi-select-toggle:hover { border-color: var(--hpi-red); color: var(--hpi-red); }

.multi-select-toggle.active {
  background: var(--hpi-red);
  border-color: var(--hpi-red);
  color: var(--hpi-white);
}

.bulk-action-bar {
  background: var(--hpi-black);
  border-bottom: 2px solid var(--hpi-red);
  position: sticky;
  top: calc(var(--header-h) + var(--category-bar-h) + 56px);
  z-index: 79;
}

.bulk-action-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  flex-wrap: wrap;
}

.bulk-action-count {
  color: var(--hpi-white);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}

.bulk-action-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 4px 8px;
}

.bulk-action-star {
  font-size: 1.05rem;
  color: var(--hpi-gray-400);
  cursor: pointer;
  transition: transform 0.08s, color 0.1s;
  padding: 2px;
}

.bulk-action-star:hover { transform: scale(1.2); color: var(--hpi-red); }

.bulk-action-btn {
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  background: transparent;
  color: var(--hpi-white);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.bulk-action-btn:hover { border-color: var(--hpi-white); }

.bulk-action-btn.bulk-action-danger { color: #ff8a8d; border-color: rgba(255,138,141,0.4); }
.bulk-action-btn.bulk-action-danger:hover { background: var(--hpi-red); color: var(--hpi-white); border-color: var(--hpi-red); }

.bulk-action-make-select,
.bulk-action-move-select {
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.78rem;
  background: var(--hpi-charcoal-2);
  color: var(--hpi-white);
  max-width: 170px;
}

.bulk-action-note-form {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bulk-action-note-form textarea {
  width: 100%;
  min-height: 60px;
  border-radius: 4px;
  border: 1px solid var(--hpi-gray-400);
  padding: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  resize: vertical;
}

.bulk-action-note-form-actions {
  display: flex;
  gap: 8px;
}

/* Selection checkbox overlay + selected-card highlight, shown only while
   Select Multiple mode is active (body.multi-select-mode). */
.card-select-check {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 2px solid rgba(255,255,255,0.7);
  color: var(--hpi-white);
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  z-index: 3;
  pointer-events: none;
}

body.multi-select-mode .card-select-check { display: flex; }
body.multi-select-mode .card-delete-btn { display: none; }
body.multi-select-mode .image-card .card-thumb-wrap { cursor: pointer; }
body.multi-select-mode .image-card.is-selected { border-color: var(--hpi-red); box-shadow: 0 0 0 3px rgba(227,30,36,0.25); }
body.multi-select-mode .image-card.is-selected .card-select-check { background: var(--hpi-red); border-color: var(--hpi-white); }
body.multi-select-mode .card-move-category-btn,
body.multi-select-mode .card-notes-toggle,
body.multi-select-mode .card-stars,
body.multi-select-mode .vehicle-make-btn { pointer-events: none; opacity: 0.5; }

/* ---------------- Free-text ad hoc tags (chips + add input) ----------------
   Shared across Photos / Documents / Videos / Testimonials card bodies, plus
   the bulk "Add Tag" control in each page's bulk action bar. Plain text
   only — no colors, no master tag list. */
.card-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.card-tag-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--hpi-gray-200);
  color: var(--hpi-black);
  border-radius: 12px;
  padding: 3px 6px 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}

.card-tag-chip-remove {
  border: none;
  background: transparent;
  color: var(--hpi-gray-600);
  cursor: pointer;
  font-size: 0.65rem;
  padding: 2px;
  display: flex;
  align-items: center;
}

.card-tag-chip-remove:hover { color: var(--hpi-red); }

.card-tag-add-wrap { display: inline-flex; }

.card-tag-add-input {
  border: 1px dashed var(--hpi-gray-400);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 0.72rem;
  background: transparent;
  color: var(--hpi-gray-600);
  width: 90px;
  transition: width 0.15s, border-color 0.15s;
}

.card-tag-add-input:focus {
  outline: none;
  border-color: var(--hpi-red);
  border-style: solid;
  width: 140px;
  color: var(--hpi-black);
}

body.multi-select-mode .card-tags-row { pointer-events: none; opacity: 0.5; }

/* Bulk "Add Tag" form + "Filter by tag" control (progress-controls) */
.bulk-action-tag-form {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bulk-action-tag-form input[type="text"] {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--hpi-gray-400);
  padding: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.tag-filter-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hpi-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tag-filter-input {
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.85rem;
  background: var(--hpi-white);
  color: var(--hpi-black);
  width: 140px;
}

/* ---------------- Main / Grid ---------------- */
#main-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.image-card {
  background: var(--hpi-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s, border-color 0.15s;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
}

.image-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.image-card.is-rated { border-color: #1a8f3c; }

.image-card .card-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--hpi-gray-200);
  overflow: hidden;
  cursor: zoom-in;
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--hpi-white);
  display: block;
}

.card-rated-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(26, 143, 60, 0.92);
  color: var(--hpi-white);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.card-zoom-hint {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.55);
  color: var(--hpi-white);
  font-size: 0.7rem;
  padding: 4px 7px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.card-thumb-wrap:hover .card-zoom-hint { opacity: 1; }

.card-delete-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: var(--hpi-white);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.card-thumb-wrap:hover .card-delete-btn { opacity: 1; }

.card-delete-btn:hover,
.card-delete-btn:focus-visible {
  background: var(--hpi-red);
  opacity: 1;
}

.card-body {
  padding: 10px 12px 12px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-category-row {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.card-category {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hpi-red);
  font-weight: 700;
  margin: 0;
}

/* "Move to another category" — small icon button next to the category
   tag; clicking it reveals a dropdown of every OTHER category to move
   this image to. Fixes a mis-assigned image without deleting/re-adding it. */
.card-move-category-btn {
  border: none;
  background: none;
  color: var(--hpi-gray-400);
  font-size: 0.75rem;
  padding: 2px 4px;
  line-height: 1;
  flex: 0 0 auto;
}

.card-move-category-btn:hover { color: var(--hpi-red); }

.card-move-category-select {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  margin-top: 2px;
  border: 1px solid var(--hpi-gray-200);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.78rem;
  background: var(--hpi-white);
  color: var(--hpi-black);
  box-shadow: var(--shadow-card);
  max-width: 200px;
}

.card-move-category-select:focus { outline: none; border-color: var(--hpi-red); }

.card-product-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--hpi-black);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

/* Clickable star row directly on the card */
.card-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-stars .star {
  font-size: 1.35rem;
  color: var(--hpi-gray-400);
  cursor: pointer;
  transition: transform 0.08s, color 0.1s;
  line-height: 1;
  padding: 2px;
}

.card-stars .star:hover { transform: scale(1.2); }
.card-stars .star.filled { color: var(--hpi-red); }

.card-stars .star-clear-btn {
  border: none;
  background: none;
  color: var(--hpi-gray-400);
  font-size: 0.95rem;
  margin-left: 4px;
  padding: 2px;
}

.card-stars .star-clear-btn:hover { color: var(--hpi-red); }

.card-rating-meta {
  font-size: 0.72rem;
  color: var(--hpi-gray-600);
  margin: -2px 0 0;
}

/* Notes area on the card */
.card-notes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: var(--hpi-gray-100);
  border: 1px solid var(--hpi-gray-200);
  color: var(--hpi-gray-800);
  padding: 5px 11px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.card-notes-toggle:hover,
.card-notes-toggle.active {
  background: var(--hpi-red);
  border-color: var(--hpi-red);
  color: var(--hpi-white);
}

.card-notes-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: -2px;
}

.card-notes-form textarea {
  border: 1px solid var(--hpi-gray-200);
  border-radius: 6px;
  padding: 8px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  resize: vertical;
  min-height: 56px;
}

.card-notes-form textarea:focus { outline: none; border-color: var(--hpi-red); }

.card-notes-form-actions {
  display: flex;
  gap: 6px;
}

.btn-submit-note {
  background: var(--hpi-red);
  color: var(--hpi-white);
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: background 0.15s;
}

.btn-submit-note:hover { background: var(--hpi-red-dark); }

.btn-cancel-note {
  background: var(--hpi-white);
  color: var(--hpi-gray-600);
  border: 1px solid var(--hpi-gray-200);
  padding: 6px 14px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.btn-cancel-note:hover { border-color: var(--hpi-gray-400); }

.card-notes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.card-note-item {
  background: var(--hpi-gray-100);
  border-radius: 6px;
  padding: 7px 9px;
}

.card-note-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.card-note-item-name {
  font-weight: 700;
  font-size: 0.74rem;
  color: var(--hpi-black);
}

.card-note-item-stars {
  color: var(--hpi-red);
  font-size: 0.62rem;
  white-space: nowrap;
}

.card-note-item-stars .fa-star:not(.filled) { color: var(--hpi-gray-400); }

.card-note-item-nostars {
  font-size: 0.65rem;
  color: var(--hpi-gray-600);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.card-note-item-text {
  font-size: 0.78rem;
  color: var(--hpi-gray-800);
  margin: 0;
  white-space: pre-wrap;
}

/* Vehicle-make radio-select icon row (shared/global tags on the photo).
   Rendered on every card, in every category. The 7 brand/semi-truck icons
   form one exclusive radio group (clicking the already-active one clears
   it); "Universal" (.standalone) is independent and can be active at the
   same time as one of the other 7 — it gets its own accent color below so
   it visually reads as an additive tag rather than a replacement. */
.card-vehicle-make {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px dashed var(--hpi-gray-200);
  padding-top: 8px;
  margin-top: 2px;
}

.card-vehicle-make-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  row-gap: 6px;
}

.vehicle-make-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1.5px solid var(--hpi-gray-200);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  padding: 3px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.vehicle-make-btn:hover {
  border-color: var(--hpi-gray-400);
  transform: translateY(-1px);
}

.vehicle-make-btn.active {
  border-color: var(--hpi-red);
  background: #fff5f5;
  box-shadow: 0 0 0 1px var(--hpi-red);
}

.vehicle-make-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.vehicle-make-btn i {
  font-size: 0.85rem;
  color: var(--hpi-gray-600);
}

.vehicle-make-btn.active i {
  color: var(--hpi-red);
}

/* "Universal" is independent of the 7-way exclusive radio group, so it
   gets its own accent color (blue) instead of the shared red — a visual
   cue that it's an additive tag, not a replacement for a selected brand. */
.vehicle-make-btn.standalone.active {
  border-color: var(--hpi-blue, #2563eb);
  background: #eff6ff;
  box-shadow: 0 0 0 1px var(--hpi-blue, #2563eb);
}

.vehicle-make-btn.standalone.active i {
  color: var(--hpi-blue, #2563eb);
}

/* Direct image URL link on the card */
.card-image-url {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--hpi-gray-600);
  border-top: 1px dashed var(--hpi-gray-200);
  padding-top: 8px;
  margin-top: 2px;
  overflow: hidden;
}

/* When the vehicle-make row is present right above it, the URL link
   doesn't need its own separator line too — the vehicle-make row already
   has one. */
.card-vehicle-make + .card-image-url {
  border-top: none;
  padding-top: 0;
}

.card-image-url i {
  color: var(--hpi-gray-400);
  flex: 0 0 auto;
}

.card-image-url span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-image-url:hover {
  color: var(--hpi-red);
}

.card-image-url:hover i {
  color: var(--hpi-red);
}

.card-meta {
  font-size: 0.72rem;
  color: var(--hpi-gray-600);
  margin-top: auto;
}

.empty-state {
  text-align: center;
  color: var(--hpi-gray-600);
  padding: 60px 20px;
  font-size: 1rem;
}

/* ---------------- Load More (pagination) ---------------- */
.load-more-btn {
  display: block;
  margin: 26px auto 8px;
  background: var(--hpi-black);
  color: var(--hpi-white);
  border: none;
  padding: 13px 32px;
  border-radius: 24px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.15s;
}

.load-more-btn:hover { background: var(--hpi-red); }

.hidden { display: none !important; }

/* ---------------- Lightbox (view-only zoom) ---------------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: var(--shadow-elevated);
  border-radius: 4px;
}

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  background: var(--hpi-black);
  color: var(--hpi-white);
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.2rem;
  box-shadow: var(--shadow-card);
}

.lightbox-close:hover { background: var(--hpi-red); }

/* ---------------- Footer ---------------- */
.site-footer {
  text-align: center;
  padding: 24px;
  color: var(--hpi-gray-600);
  font-size: 0.78rem;
  background: var(--hpi-white);
  border-top: 1px solid var(--hpi-gray-200);
}

/* ---------------- Shared loading indicator ----------------
   PERFORMANCE: shown the instant a data-driven page mounts (before any
   fetch has even started) so there's always immediate visual feedback,
   then removed/hidden once the first useful chunk of data has rendered.
   Used across every page that loads table data (index/document-audit/
   video-audit render their FIRST page of results progressively — see the
   corresponding JS init() — while products/product/reviews show it only
   for their typically-fast full-data loads). */
.page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--hpi-gray-600);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  grid-column: 1 / -1;
}

.page-loading.hidden { display: none; }

.page-loading-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid var(--hpi-gray-200);
  border-top-color: var(--hpi-red);
  border-radius: 50%;
  animation: page-loading-spin 0.7s linear infinite;
  flex: 0 0 auto;
}

@keyframes page-loading-spin {
  to { transform: rotate(360deg); }
}

/* Small inline variant appended at the bottom of a grid while later
   background pages of a large table are still being fetched (the FIRST
   page has already rendered and is fully interactive at this point). */
.page-loading-more {
  grid-column: 1 / -1;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 768px) {
  :root { --header-h: 152px; }

  .header-inner {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 10px;
  }

  /* Row 1: brand logo (left) + hamburger trigger (if present) + the
     "Rating as" name field, all on one row, top-right grouped together.
     Row 2: title. Row 3: full site nav — all buttons on a single,
     horizontally-scrollable line (same robust overflow-x pattern used
     for the Export page's type-tabs) rather than wrapping to multiple
     rows, so it stays compact and predictable on any phone width.
     .header-actions itself is no longer a layout box on mobile — it's
     set to display:contents so its children (nav + rater box) become
     direct flex items of .header-inner and can be given their own
     independent `order` placement below. */
  .brand { order: 1; flex: 0 0 auto; }
  .brand-logo { height: 36px; }
  .category-menu-toggle { order: 2; margin-left: auto; padding: 8px 10px; gap: 6px; }
  .category-menu-toggle-current { display: none; }
  .header-actions { display: contents; }
  .rater-box { order: 3; flex: 0 0 auto; margin-left: auto; gap: 2px; }
  .rater-box label { font-size: 0.6rem; }
  #rater-name-input { width: 118px; padding: 6px 8px; font-size: 0.82rem; }
  .header-title { order: 4; flex: 1 1 100%; text-align: left; margin-top: 2px; }

  .header-nav {
    order: 5;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .reviews-nav-link {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 0.72rem;
  }

  /* The hamburger trigger lives inside .header-inner itself (not a separate
     strip below it), and the category bar is a full-screen overlay on
     mobile (see below) that does not occupy in-flow layout space — so the
     progress bar sits directly under the header, same as the category-bar
     height offset it uses on desktop is simply not needed here. */
  .progress-bar { top: var(--header-h); }
  .bulk-action-bar { top: calc(var(--header-h) + 88px); }

  .progress-inner { gap: 14px; }
  .progress-controls { width: 100%; justify-content: space-between; margin-left: 0; flex-wrap: wrap; }
  .multi-select-toggle { flex: 1 1 100%; justify-content: center; }

  .bulk-action-inner { padding: 8px 14px; }
  .bulk-action-note-form { padding: 0 14px 10px; }

  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }

  .card-stars .star { font-size: 1.15rem; }
  .card-body { padding: 8px 10px 10px; }

  /* No hover on touch devices — keep the delete button always visible
     (but still small/unobtrusive) instead of hiding it behind a hover state
     that mobile visitors can never trigger. */
  .card-delete-btn { opacity: 1; }

  .add-image-bar { padding: 10px 14px; }
  .add-image-form { width: 100%; }
  .add-image-form input[type="url"],
  .add-image-form input[type="text"],
  .add-image-form select { flex: 1 1 100%; }
  .btn-add-image-submit,
  .btn-add-image-cancel { flex: 1 1 auto; }

  /* --------------------------------------------------------------------
     Category menu: hamburger toggle (in the header) + full-screen overlay.
     On mobile, the category bar previously rendered in-flow at full
     height (up to 70vh) and PUSHED the whole page — including the
     product grid — down, so it looked like the menu was taking over the
     whole screen. It's now collapsed behind a hamburger button in the
     header by default. Tapping it shows the category list as a plain,
     robust overlay (display:none <-> display:flex — nothing fancier that
     can get stuck) that covers everything BELOW the header, so there is
     zero chance of it visually blocking-but-not-really-showing the grid:
     it is either completely off (not in the DOM flow, not painted, not
     intercepting clicks) or completely on covering the rest of the screen.

     IMPORTANT: the overlay deliberately stops at the header's bottom edge
     (top: var(--header-h), not inset:0) and uses a LOWER z-index than the
     header, so the header — and the hamburger button inside it — always
     stays visible and clickable on top of the open overlay. That's what
     makes the same button reliably toggle both open AND closed: if the
     overlay covered the header too, the second tap would hit the overlay
     instead of the button and the menu would look "stuck open." Tapping
     the X inside the overlay, picking a category, or pressing Escape all
     close it too. -------------------------------------------------------- */
  .category-menu-toggle { display: flex; position: relative; z-index: 110; }

  .category-bar {
    display: none; /* JS toggles this to `flex` via the .open class below */
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90; /* below the sticky header (100) so the header + hamburger button stay clickable while open */
    flex-direction: column;
    max-height: none;
    padding: 0;
    overflow: hidden; /* the inner .category-bar-scroll region scrolls, not this */
  }

  .category-bar.open {
    display: flex;
  }

  .category-bar-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    background: var(--hpi-black);
    border-bottom: 3px solid var(--hpi-red);
    padding: 16px 16px;
  }

  .category-bar-mobile-title {
    font-family: var(--font-display);
    color: var(--hpi-white);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .category-bar-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--hpi-red);
    color: var(--hpi-white);
    border: none;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .category-bar-close:hover { background: var(--hpi-red-dark); }

  .category-bar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 14px 24px;
    -webkit-overflow-scrolling: touch;
  }

  /* Category bar contents: stack groups into a single column, give the
     "All Categories" chip and action buttons full-width friendly spacing
     so everything is comfortably tappable on a phone. Buttons that now
     contain an inline stat badge use justify-content (not text-align,
     which has no effect on flex children) to keep the label left-aligned
     and the badge pinned to the right edge even at full width. */
  .category-bar-top-row { gap: 8px; margin-top: 14px; }
  .category-btn-all { flex: 1 1 auto; justify-content: space-between; }
  .category-bar-actions { width: 100%; margin-left: 0; }
  .category-bar-action-btn { flex: 1 1 auto; text-align: center; }
  .category-groups { grid-template-columns: 1fr; }
  .category-group-header { padding: 13px 12px; }
  .category-group-panel { padding: 0 10px 12px; padding-top: 10px; }
  .category-group-panel .category-btn { flex: 1 1 auto; justify-content: space-between; }

  .load-more-btn { width: 100%; }
}