/* ═══════════════════════════════════════════════════════════════════════
   assets/css/v11-ui.css  —  v11 UI overhaul
   Loaded AFTER portal.css and theme_css.php, so everything here wins without
   editing portal.css itself (which keeps the original file upgradeable).

   Covers:
     1. Sidebar group headings — bold + highlighted background
     2. Global +2px type scale
     3. Mobile / tablet gap reduction
     4. Edit-listing tab strip — visible surface, separated from the buttons
     5. Edit-listing action buttons — compact, left-aligned
     6. Form control contrast (the invisible white-on-white dropdown)
     7. Info-icon styling for the help system
     8. General dark/light polish
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. SIDEBAR GROUP HEADINGS ──────────────────────────────────────────
   Was a faint 11px label that disappeared against the sidebar. Now a solid
   bar with its own background so the eye can find the group boundaries. */
.sidebar .nav-section {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-1, #e2e8f0) !important;
  background: var(--v11-section-bg, rgba(148, 163, 184, .14));
  border-left: 3px solid var(--accent, #6366f1);
  border-radius: 6px;
  padding: 7px 10px !important;
  margin: 14px 8px 6px !important;
  opacity: 1 !important;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sidebar .nav-section i { font-size: 13px !important; opacity: .9; }
html.light .sidebar .nav-section,
[data-theme="light"] .sidebar .nav-section {
  --v11-section-bg: rgba(15, 23, 42, .07);
  color: #0f172a !important;
}
.sidebar .nav-section:first-of-type { margin-top: 6px !important; }

/* ── 2. GLOBAL +2px TYPE SCALE ──────────────────────────────────────────
   Bumped at the root so every rem/em-based size scales with it, then the
   fixed-px utility classes are bumped individually. */
html { font-size: 18px; }            /* browser default is 16px */
body { font-size: 16px; }

.fs11 { font-size: 13px !important; }
.fs12 { font-size: 14px !important; }
.fs13 { font-size: 15px !important; }
.fs14 { font-size: 16px !important; }
.fs15 { font-size: 17px !important; }
.fs16 { font-size: 18px !important; }
.btn, .form-control, .form-select, .input-group-text { font-size: 15px; }
.btn-sm { font-size: 14px; }
.table, .table td, .table th { font-size: 15px; }
.badge { font-size: 12px; }
.sidebar .nav-link { font-size: 15px; }

/* Bootstrap sets some things in rem already; keep headings sane after the
   root bump so they don't become enormous. */
h1, .h1 { font-size: 1.9rem; }
h2, .h2 { font-size: 1.55rem; }
h3, .h3 { font-size: 1.3rem; }
h4, .h4 { font-size: 1.15rem; }
h5, .h5 { font-size: 1.05rem; }
h6, .h6 { font-size: .95rem; }

/* ── 3. MOBILE / TABLET SPACING ─────────────────────────────────────────
   The desktop layout used generous card margins and section padding. On a
   phone that turned into long empty stretches between every panel and a lot
   of scrolling. Tighten everything below 992px. */
@media (max-width: 991.98px) {
  .container, .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }

  .card, .panel, .stat-card, .glass-card, .content-card {
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }
  .card + .card, .panel + .panel { margin-top: 0 !important; }
  .card-body, .panel-body { padding: 12px !important; }
  .card-header, .panel-header { padding: 10px 12px !important; }

  .mb-4, .my-4 { margin-bottom: .75rem !important; }
  .mt-4, .my-4 { margin-top: .75rem !important; }
  .mb-5, .my-5 { margin-bottom: 1rem !important; }
  .mt-5, .my-5 { margin-top: 1rem !important; }
  .p-4 { padding: .85rem !important; }
  .p-5 { padding: 1rem !important; }
  .g-4 { --bs-gutter-y: .6rem; --bs-gutter-x: .6rem; }
  .g-3 { --bs-gutter-y: .5rem; --bs-gutter-x: .5rem; }

  .row > [class^="col"] { margin-bottom: 0 !important; }
  section, .page-section { margin-bottom: 12px !important; }
  hr { margin: .6rem 0 !important; }

  /* Sticky headers eat a lot of a short screen. */
  .page-header { padding: 10px 0 !important; margin-bottom: 8px !important; }
  .page-header h1, .page-header h2 { margin-bottom: 2px !important; }

  /* Tables scroll rather than wrap into very tall rows. */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table td, .table th { padding: .45rem .5rem !important; white-space: nowrap; }
}

@media (max-width: 575.98px) {
  html { font-size: 17px; }          /* keep the +2px feel without overflow */
  .card-body, .panel-body { padding: 10px !important; }
  .btn { padding: .42rem .7rem; }
  .modal-dialog { margin: .5rem; }
}

/* ── 4. EDIT LISTING — TAB STRIP ────────────────────────────────────────
   Main Info / Description / Specifics / Shipping & Policies / Images sat on
   the same flat background as the action buttons above them, so on a small
   screen it read as one undifferentiated pile of controls. Give the strip
   its own surface. */
.listing-tabs, .nav-tabs {
  background: var(--v11-tabs-bg, rgba(148, 163, 184, .10));
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  padding: 5px;
  gap: 3px;
  margin-bottom: 14px;
}
html.light .listing-tabs, html.light .nav-tabs,
[data-theme="light"] .listing-tabs, [data-theme="light"] .nav-tabs {
  --v11-tabs-bg: rgba(15, 23, 42, .05);
}
.nav-tabs .nav-link {
  border: 0 !important;
  border-radius: 7px !important;
  font-weight: 600;
  color: var(--text-2, #94a3b8);
  padding: 7px 14px;
}
.nav-tabs .nav-link:hover { background: rgba(99, 102, 241, .12); color: var(--text-1, #e2e8f0); }
.nav-tabs .nav-link.active {
  background: var(--accent, #6366f1) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, .35);
}

/* ── 5. EDIT LISTING — ACTION BUTTON BAR ────────────────────────────────
   Verify / AI Weight / Save / Push to eBay / Push to Website were spread
   across the full width. Group them tight to the left next to Run All AI. */
.listing-actions, .edit-actions, .listing-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--v11-toolbar-bg, rgba(148, 163, 184, .08));
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  margin-bottom: 10px;
}
html.light .listing-actions, html.light .edit-actions, html.light .listing-toolbar,
[data-theme="light"] .listing-actions, [data-theme="light"] .edit-actions, [data-theme="light"] .listing-toolbar {
  --v11-toolbar-bg: rgba(15, 23, 42, .04);
}
.listing-actions .btn, .edit-actions .btn, .listing-toolbar .btn {
  padding: .34rem .68rem;
  font-size: 14px;
  white-space: nowrap;
}
.listing-actions .ms-auto, .edit-actions .ms-auto { margin-left: 6px !important; }
@media (max-width: 767.98px) {
  .listing-actions, .edit-actions, .listing-toolbar { padding: 6px; gap: 4px; }
  .listing-actions .btn, .edit-actions .btn { flex: 1 1 auto; font-size: 13px; }
}

/* ── 6. FORM CONTROL CONTRAST ───────────────────────────────────────────
   The contact form select rendered white text on a white background — the
   native <option> list ignores most inherited styling, so both the control
   and its options need explicit colours in BOTH themes. */
select,
select.form-select,
select.form-control,
.contact-form select,
#contactForm select {
  background-color: var(--v11-input-bg, #1e293b) !important;
  color: var(--v11-input-fg, #e2e8f0) !important;
  border: 1px solid var(--border, #334155) !important;
}
select option,
select.form-select option,
.contact-form select option,
#contactForm select option {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}
html.light select, html.light select.form-select, html.light .contact-form select,
[data-theme="light"] select, [data-theme="light"] select.form-select, [data-theme="light"] .contact-form select {
  --v11-input-bg: #ffffff;
  --v11-input-fg: #0f172a;
}
html.light select option, [data-theme="light"] select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}
/* The public site is always rendered on a dark hero — force dark there. */
.site-contact select, .public-form select, footer select {
  background-color: #111827 !important;
  color: #f9fafb !important;
  border-color: #374151 !important;
}
.site-contact select option, .public-form select option, footer select option {
  background-color: #111827 !important;
  color: #f9fafb !important;
}

/* ── 7. INFO ICONS (help system) ────────────────────────────────────────*/
.v11-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 5px;
  border-radius: 50%;
  background: rgba(99, 102, 241, .16);
  color: var(--accent, #6366f1);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
  flex: 0 0 auto;
  border: 1px solid rgba(99, 102, 241, .3);
  transition: background .15s, transform .15s;
}
.v11-info:hover { background: rgba(99, 102, 241, .32); transform: scale(1.12); }
.v11-info:focus { outline: 2px solid var(--accent, #6366f1); outline-offset: 1px; }
.v11-tip {
  position: fixed;
  z-index: 20000;
  max-width: 300px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  border: 1px solid #334155;
  pointer-events: none;
}
html.light .v11-tip, [data-theme="light"] .v11-tip {
  background: #1e293b; color: #f1f5f9;
}

/* ── 8. GENERAL POLISH ──────────────────────────────────────────────────*/
.card, .panel, .content-card {
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.card:hover, .panel:hover { border-color: rgba(99, 102, 241, .28); }
.btn { border-radius: 8px; font-weight: 600; transition: transform .12s, box-shadow .12s; }
.btn:active { transform: translateY(1px); }
.btn-primary { box-shadow: 0 2px 10px rgba(99, 102, 241, .28); }
.form-control:focus, .form-select:focus {
  border-color: var(--accent, #6366f1) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .16) !important;
}
.table tbody tr:hover { background: rgba(99, 102, 241, .06); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .35); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .55); }
::-webkit-scrollbar-track { background: transparent; }

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SPACING FIXES - Reduce gaps, align bars, fix bulk bar spacing
   ══════════════════════════════════════════════════════════════════════ */

/* Fix bulk bar - remove empty space when hidden */
.bulk-bar {
  display: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: all 0.25s ease;
  margin-bottom: 0;
  /* Base styles */
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
}
.bulk-bar.show {
  display: flex !important;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  margin-bottom: 12px;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}

/* Ensure bulk bar is visible when it has the show class */
#bulkBar.show,
.bulk-bar.show {
  display: flex !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}

/* Force bulk bar visibility when it has items */
.bulk-bar[style*="flex"] {
  display: flex !important;
}

/* Ensure bulk bar is not hidden by parent overflow */
.main .bulk-bar,
.card .bulk-bar,
.container .bulk-bar {
  position: relative;
  z-index: 100;
}

/* Reduce card margins and padding globally */
@media (max-width: 991.98px) {
  .card, .panel, .stat-card, .glass-card, .content-card {
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }
  .card-body, .panel-body { padding: 10px !important; }
  .card-header, .panel-header { padding: 8px 12px !important; }
  .mb-3 { margin-bottom: 8px !important; }
  .mb-4 { margin-bottom: 12px !important; }
  .mt-3 { margin-top: 8px !important; }
  .mt-4 { margin-top: 12px !important; }
  .p-3 { padding: 10px !important; }
  .p-4 { padding: 12px !important; }
}

/* Desktop: tighter spacing */
@media (min-width: 992px) {
  .card { margin-bottom: 12px; }
  .card-body { padding: 14px; }
  .card-header { padding: 10px 16px; }
  .mb-3 { margin-bottom: 12px; }
  .mb-4 { margin-bottom: 16px; }
}

/* Fix bulk bar alignment */
.bulk-bar {
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
}

/* Reduce gaps in button groups */
.btn-group, .btn-toolbar { gap: 6px; }
.btn-group .btn { padding: 5px 10px; }

/* Form spacing */
.form-group { margin-bottom: 12px; }
.form-label { margin-bottom: 4px; }

/* Page header spacing */
.page-header { margin-bottom: 16px; padding-bottom: 12px; }
.page-header .d-flex { gap: 12px; }

/* Table responsive spacing */
.table-responsive { margin-bottom: 0; }

/* CHANGED: was `#bulkBar:not(.show) { display: none !important; }`. The
   !important beat the inline display the script set, so any moment the .show
   class was missing — including the split second before the first
   updateBulkBar() call, and permanently once the script errored — the bar was
   unreachable. The bar is now always laid out; see section 21 for its
   enabled / disabled states. */

/* Fix table card view spacing on mobile */
@media (max-width: 991.98px) {
  .table-card-view { gap: 8px; padding: 0 4px; }
  .table-row-card { margin-bottom: 8px; }
  .table-view-toggle { 
    padding: 8px 12px; 
    margin-top: 8px;
  }
  .table-view-toggle .btn { max-width: 100%; }
}

/* Reduce dropdown menu gaps */
.dropdown-menu { gap: 2px; padding: 4px; }
.dropdown-item { padding: 6px 12px; }

/* Sidebar spacing on mobile */
@media (max-width: 991px) {
  .sidebar-nav { padding: 8px; }
  .nav-link { padding: 7px 10px; margin-bottom: 1px; }
  .nav-section { padding: 10px 8px 4px; }
}

/* ── 9. CLICKABLE LISTING TITLES (Products / Active / Drafts) ───────────
   The title cell links to the edit page. Keep it looking like body text
   until hover, so the table does not turn into a wall of blue links. */
.listing-title-link {
  color: var(--text-1, #e2e8f0) !important;
  cursor: pointer;
  transition: color .12s;
}
.listing-title-link:hover,
.listing-title-link:focus {
  color: var(--accent, #6366f1) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
tr:hover .listing-title-link { color: var(--accent, #6366f1) !important; }

/* ── 10. EDIT LISTING — SECONDARY FIELD GRID ───────────────────────────
   EAN, Pallet/Supplier, Stock Cost, Best Offer, Item Location and ASIN,
   moved out of the narrow right-hand column into the empty space under
   Category. Three per row on desktop, two on tablet, one on phone.
   The cards are plain siblings, so the grid places them directly — no
   Bootstrap column wrappers, nothing about the cards themselves changed. */
.v11-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.v11-field-grid > .card {
  margin-bottom: 0 !important;   /* the grid gap handles spacing */
  height: 100%;
}
/* These cards hold their own inner .row (Best Offer, Item Location); keep
   those from being squeezed into unusable widths inside a narrow column. */
.v11-field-grid .card-body .row > [class*="col-"] { min-width: 0; }
.v11-field-grid .form-text { font-size: 12px; line-height: 1.35; }

@media (max-width: 1199.98px) {
  .v11-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .v11-field-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ── 11. DESCRIPTION EDITOR / PREVIEW SURFACE ──────────────────────────
   Requested background for the description area. #797979 is a mid grey, so
   the text colour is set explicitly rather than inherited — the dark theme's
   near-white body text sits at roughly 3:1 against this grey, which is below
   the readable threshold, while near-black gives about 6:1. Any inline
   colours inside the seller's own HTML still win, as they should. */
#descPreview,
#descEditor #f_description,
#descEditor textarea {
  background: #797979 !important;
  color: #14181d !important;
}
#descPreview { border-radius: 0 0 12px 12px; }
#descEditor #f_description::placeholder { color: #2c3138 !important; }

/* Links and headings inside the preview need to stay legible on the grey. */
#descPreview a { color: #10243f !important; text-decoration: underline; }
#descPreview h1, #descPreview h2, #descPreview h3,
#descPreview h4, #descPreview strong, #descPreview b { color: #0b0f14 !important; }
#descPreview hr { border-color: rgba(0, 0, 0, .3); }
#descPreview table, #descPreview td, #descPreview th { border-color: rgba(0, 0, 0, .25); }

/* Make it obvious the preview is editable when focused. */
#descPreview:focus { outline: 2px solid var(--accent, #6366f1) !important; outline-offset: -2px; }

/* ── 12. RANGE / PERIOD SELECTOR IN LIGHT MODE ─────────────────────────
   The 7d / 14d / 30d / year selector rendered dark-on-dark in light mode.
   portal.css only themes it via [data-theme="light"], so any variant that
   relies on the html.light class alone was left with the dark defaults.
   Cover BOTH hooks, and force the active pill to a real light surface
   rather than var(--bg-card), which stays dark in some theme presets. */
html.light .period-tabs,
[data-theme="light"] .period-tabs,
html.light .range-tabs,
[data-theme="light"] .range-tabs,
html.light .segmented,
[data-theme="light"] .segmented {
  background: rgba(15, 23, 42, .06) !important;
}
html.light .period-tab,
[data-theme="light"] .period-tab,
html.light .range-tab,
[data-theme="light"] .range-tab {
  color: #475569 !important;
  background: transparent !important;
}
html.light .period-tab:hover,
[data-theme="light"] .period-tab:hover,
html.light .range-tab:hover,
[data-theme="light"] .range-tab:hover {
  color: #0f172a !important;
  background: rgba(15, 23, 42, .05) !important;
}
html.light .period-tab.active,
[data-theme="light"] .period-tab.active,
html.light .range-tab.active,
[data-theme="light"] .range-tab.active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12) !important;
}

/* Same problem on any <select> used as a range picker in a card header. */
html.light .card-header select,
[data-theme="light"] .card-header select,
html.light .page-header select,
[data-theme="light"] .page-header select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* ── 13. FROZEN IMAGE + TITLE ON HORIZONTAL SCROLL ────────────────────
   The listings table is wider than most screens. When it scrolls sideways
   the row identity must stay put, so the checkbox, the product image and as
   much of the title as the screen can spare are pinned to the left.

   The title width is fluid rather than a fixed character count: it is
   clamped between roughly 10 characters and the full title, scaling with
   viewport width. On a large laptop where the table nearly fits you get the
   whole title; on a phone it bottoms out at 10 characters and the image
   stays frozen while everything else scrolls.

   Column 1 = 32px checkbox. Column 2 = image + title. */
@media (max-width: 1399.98px) {
  table[data-coltable] { border-collapse: separate; border-spacing: 0; }

  table[data-coltable] thead th:nth-child(1),
  table[data-coltable] tbody td:nth-child(1) {
    position: sticky; left: 0; z-index: 3;
    background: var(--bg-card, #1a2234);
    width: 32px; min-width: 32px;
  }
  /* CHANGED: pin the IMAGE, not the title. The picture is what identifies a
     row at a glance while the table scrolls sideways, and it is a fixed,
     narrow column so it costs little screen width. The Title column now
     scrolls away with everything else, which also means it can be resized
     freely without fighting a sticky offset. */
  table[data-coltable] thead th.col-img,
  table[data-coltable] tbody td.col-img {
    position: sticky; left: 32px; z-index: 3;
    background: var(--bg-card, #1a2234);
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .55);
  }
  table[data-coltable] thead th:nth-child(1),
  table[data-coltable] thead th.col-img { z-index: 5; }

  /* The Title column is a normal, scrolling, resizable column. */
  table[data-coltable] thead th.col-title,
  table[data-coltable] tbody td.col-title {
    position: static;
    box-shadow: none;
  }

  /* RETARGETED 2026-08-04. These used to key off nth-child(2), which was the
     Title cell back when it also held the thumbnail. The thumbnail now has its
     own Image column, so column 2 is the IMAGE and column 3 is the Title —
     these rules were sizing the wrong things. They now use the .col-title /
     .col-img classes, which cannot drift if columns are added or reordered. */
  /* CHANGED: these clamped the title to a fixed ~10-character width regardless
     of how wide the column actually was, so resizing the column did nothing.
     The title is now one line clipped to 100% of whatever the column width is,
     so dragging the column wider reveals more words and narrower drops them. */
  table[data-coltable] tbody td.col-title .cell-ellipsis,
  table[data-coltable] tbody td.col-title .trunc,
  table[data-coltable] tbody td.col-title .listing-title-link {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  table[data-coltable] tbody tr:hover td:nth-child(1),
  table[data-coltable] tbody tr:hover td.col-img {
    background: var(--bg-card-2, #202a40);
  }

  /* ── THE FIX YOU ASKED FOR ────────────────────────────────────────────────
     The Image column is resizable and table_resize.php sets an inline width on
     the <img> as you drag. Nothing here may cap that, or the column widens
     while the picture stays the same size — which is exactly what happened on
     tablet and phone. No width/height and no !important on this selector. */
  table[data-coltable] tbody td.col-img { overflow: visible; }
  table[data-coltable] tbody td.col-img img.col-scale-img,
  table[data-coltable] tbody td.col-img .col-scale-ph {
    max-width: 100%;
    height: auto;
  }
}

/* Phones: keep the title readable, but never cap the resizable image.
   THIS BLOCK WAS THE BUG. It carried

       td:nth-child(2) img { width:26px !important; height:26px !important; }

   and an !important declaration beats the inline width table_resize.php sets
   while you drag. So on phones and tablets the column grew and the picture
   stayed 26px — working on desktop only because this query never applied
   there. The cap is gone and the rules are scoped by class. */
@media (max-width: 575.98px) {
  /* A sensible default width only — the column is resizable and an inline
     width from a drag overrides this, because there is no !important here. */
  table[data-coltable] tbody td.col-title,
  table[data-coltable] thead th.col-title {
    width: 200px; min-width: 120px;
  }
  table[data-coltable] tbody td.col-title .cell-ellipsis,
  table[data-coltable] tbody td.col-title .trunc,
  table[data-coltable] tbody td.col-title .listing-title-link {
    font-size: 12px;
  }
  /* Default only. An inline width from a drag overrides it, because this has
     no !important — that is the whole point. */
  table[data-coltable] tbody td.col-img img.col-scale-img,
  table[data-coltable] tbody td.col-img .col-scale-ph { width: 44px; }
}

/* Light theme for the two pinned columns — checkbox and image. Retargeted
   from .col-title, which is no longer sticky. */
html.light table[data-coltable] thead th:nth-child(1),
html.light table[data-coltable] tbody td:nth-child(1),
html.light table[data-coltable] thead th.col-img,
html.light table[data-coltable] tbody td.col-img,
[data-theme="light"] table[data-coltable] thead th:nth-child(1),
[data-theme="light"] table[data-coltable] tbody td:nth-child(1),
[data-theme="light"] table[data-coltable] thead th.col-img,
[data-theme="light"] table[data-coltable] tbody td.col-img {
  background: #ffffff;
}
html.light table[data-coltable] tbody tr:hover td:nth-child(1),
html.light table[data-coltable] tbody tr:hover td.col-img,
[data-theme="light"] table[data-coltable] tbody tr:hover td:nth-child(1),
[data-theme="light"] table[data-coltable] tbody tr:hover td.col-img {
  background: #f1f5f9;
}

/* ── 14. FILTER DROPDOWN PANEL ─────────────────────────────────────────
   Shared by Products, Orders and Refunds (includes/filter_bar.php). Sits
   inside the page's existing filter form, so the page's own Filter button
   submits these fields too. */
.filterbar-panel {
  position: absolute;
  top: 110%;
  left: 0;
  z-index: 1600;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  overflow: auto;
  padding: 14px;
  background: var(--bg-card, #1a2234);
  border: 1px solid var(--border, #2a3550);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}
.filterbar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.filterbar-field { min-width: 0; }
.filterbar-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, #94a3b8);
  margin-bottom: 3px;
}
.filterbar-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #2a3550);
}
.filterbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
  background: rgba(99, 102, 241, .16);
  color: var(--accent, #6366f1);
  border: 1px solid rgba(99, 102, 241, .3);
  transition: background .12s;
}
.filterbar-chip:hover { background: rgba(239, 68, 68, .18); color: var(--red, #ef4444); border-color: rgba(239,68,68,.35); }

html.light .filterbar-panel, [data-theme="light"] .filterbar-panel {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
}
html.light .filterbar-label, [data-theme="light"] .filterbar-label { color: #475569; }

/* Panels open near the right edge would overflow the viewport. */
.filterbar-wrap:last-child .filterbar-panel { left: auto; right: 0; }

@media (max-width: 767.98px) {
  .filterbar-panel { width: calc(100vw - 24px); left: auto; right: 0; }
  .filterbar-grid { grid-template-columns: 1fr; }
}

/* ── 15. DASHBOARD RANGE SELECTOR (7d / 14d / 30d / Month / Year) ───────
   Replaces the inline styling in index.php. Explicit colours in both themes
   so the pills can never render dark-on-dark. */
.v11-range-group {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(148, 163, 184, .14);
  border: 1px solid var(--border, #2a3550);
}
.v11-range-pill {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #cbd5e1;
  background: transparent;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.v11-range-pill:hover { background: rgba(148, 163, 184, .18); color: #ffffff; }
.v11-range-pill.active {
  background: var(--accent, #6366f1);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, .35);
}
html.light .v11-range-group, [data-theme="light"] .v11-range-group {
  background: rgba(15, 23, 42, .06);
  border-color: #cbd5e1;
}
html.light .v11-range-pill, [data-theme="light"] .v11-range-pill { color: #475569; }
html.light .v11-range-pill:hover, [data-theme="light"] .v11-range-pill:hover {
  background: rgba(15, 23, 42, .07); color: #0f172a;
}
html.light .v11-range-pill.active, [data-theme="light"] .v11-range-pill.active {
  background: var(--accent, #6366f1); color: #ffffff;
}

/* Belt and braces for the filter panel: stop the usual suspects clipping it. */
.card-body:has(.filterbar-wrap),
.card:has(.filterbar-wrap),
form:has(.filterbar-wrap) { overflow: visible !important; }
.filterbar-panel { position: fixed; }

/* ═══════════════════════════════════════════════════════════════════════
   16. MOBILE-RESPONSIVE TABLES WITH EXPANDABLE ROWS
   ═══════════════════════════════════════════════════════════════════════
   - Desktop: Full table with sticky headers
   - Mobile (< 992px): Horizontal scroll + card view toggle
   - Expandable rows: Click row to show full details
   - Auto-truncating titles that expand on row expand
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Table container improvements ── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Desktop: Sticky headers */
@media (min-width: 992px) {
  .table-responsive {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
  }
  .table-modern thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card-2);
    border-bottom: 2px solid var(--border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .table-modern thead th:first-child {
    z-index: 11;
    left: 0;
    position: sticky;
  }
  .table-modern thead th[data-colfixed] {
    position: sticky;
    right: 0;
    z-index: 10;
  }
  .table-modern tbody td:first-child {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 5;
  }
  }

/* ── Mobile (< 992px): Card view toggle + horizontal scroll ── */
@media (max-width: 991.98px) {
  .table-responsive {
    max-height: none;
  }
  
  /* ── THE MOBILE TABLE BUG ────────────────────────────────────────────────
     This block used to carry

         .table-responsive .table-modern { display: none !important; }

     which hid the real table on every screen under 992px and handed the job to
     a JavaScript-generated card view. `!important` beats the inline
     display:table the script set as its own fallback, so whenever the card
     builder did not run — and it never ran, because a SyntaxError in
     listings.php killed the whole script block — phones and tablets got an
     empty card with no table and no cards. That is exactly what you were
     seeing on Products and Active listings.

     The card view is retired. Small screens now get the real table, scrolled
     horizontally inside .table-responsive, with the checkbox, title and
     Actions columns pinned. */
  .table-responsive .table-modern { display: table; }
  .table-card-view,
  .table-view-toggle { display: none !important; }
  
  /* Card view container */
  .table-card-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  /* Card for each row */
  .table-row-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
  }
  .table-row-card:hover {
    border-color: var(--border-2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  }
  .table-row-card.expanded {
    border-color: var(--blue);
    box-shadow: 0 8px 24px rgba(59,130,246,0.15);
  }
  
  /* Card header - always visible summary */
  .table-row-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: var(--bg-card-2);
    border-bottom: 1px solid var(--border);
    user-select: none;
  }
  .table-row-card.expanded .table-row-card-header {
    border-bottom-color: var(--blue);
  }
  
  .table-row-card-checkbox {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .table-row-card-checkbox input {
    width: 20px;
    height: 20px;
    accent-color: var(--blue);
  }
  
  .table-row-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .table-row-card-title {
    font-weight: 600;
    color: var(--text-1);
    font-size: 14px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.3s ease;
  }
  .table-row-card.expanded .table-row-card-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-height: none;
  }
  
  .table-row-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-3);
  }
  .table-row-card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .table-row-card-meta-label {
    font-weight: 500;
    color: var(--text-2);
  }
  .table-row-card-meta-value {
    color: var(--text-1);
  }
  
  .table-row-card-expand-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    transition: transform 0.3s ease;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
  }
  .table-row-card.expanded .table-row-card-expand-icon {
    transform: rotate(180deg);
    color: var(--blue);
    background: rgba(59,130,246,0.15);
  }
  
  /* Card body - expandable details */
  .table-row-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
    padding: 0 16px;
    background: var(--bg-card);
  }
  .table-row-card.expanded .table-row-card-body {
    max-height: 2000px;
    padding: 16px;
  }
  
  /* Detail grid */
  .table-row-card-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
  }
  .table-row-card-detail {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
  }
  .table-row-card-detail-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-3);
    margin-bottom: 4px;
  }
  .table-row-card-detail-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-1);
    word-break: break-word;
  }
  
  /* Image column special handling */
  .table-row-card-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
  }
  
  /* Card image wrapper - positioned between checkbox and title */
  .table-row-card-image-wrapper {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .table-row-card-image-wrapper img,
  .table-row-card-image-wrapper .col-scale-ph {
    width: 48px !important;
    height: 48px !important;
    border-radius: 6px !important;
    object-fit: cover;
  }
  
  /* Adjust main content to account for image wrapper */
  .table-row-card-header {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px 16px;
    cursor: pointer;
    background: var(--bg-card-2);
    border-bottom: 1px solid var(--border);
    user-select: none;
  }
  .table-row-card-header > * {
    flex-shrink: 0;
  }
  .table-row-card-header > .table-row-card-main {
    flex: 1;
    min-width: 0;
  }
  
  /* Actions in card */
  .table-row-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .table-row-card-actions .btn {
    flex: 1 1 auto;
    min-width: 100px;
    text-align: center;
  }
  
  /* Toggle button for table/card view */
  .table-view-toggle {
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    display: flex;
    justify-content: center;
    z-index: 20;
    margin-top: 16px;
  }
  .table-view-toggle .btn {
    flex: 1;
    max-width: 280px;
  }
}

/* ── Expandable Row Functionality (Desktop) ── */
@media (min-width: 992px) {
  .table-modern tbody tr.expandable {
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .table-modern tbody tr.expandable:hover {
    background: rgba(59,130,246,0.08) !important;
  }
  .table-modern tbody tr.expandable.expanded {
    background: rgba(59,130,246,0.12) !important;
  }
  
  /* Expand indicator */
  .expand-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-3);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 8px;
  }
  tr.expanded .expand-indicator {
    transform: rotate(180deg);
    color: var(--blue);
  }
  
  /* Expanded detail row */
  .table-detail-row {
    display: none;
  }
  .table-detail-row.show {
    display: table-row;
    animation: slideDown 0.3s ease-out;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .table-detail-row td {
    padding: 0 !important;
    border: none !important;
    background: var(--bg-card-2) !important;
  }
  .table-detail-content {
    padding: 20px 24px;
    border-top: 1px solid var(--border);
  }
  .table-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }
  .table-detail-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
  }
  .table-detail-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-3);
    margin-bottom: 6px;
  }
  .table-detail-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-1);
    word-break: break-word;
  }
  
  /* Auto-truncating title cell */
  .title-cell {
    max-width: 280px;
    position: relative;
  }
  .title-cell .title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    transition: all 0.3s ease;
  }
  tr.expanded .title-cell .title-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
  }
  .title-cell .title-full {
    display: none;
    font-weight: 400;
    color: var(--text-2);
    margin-top: 4px;
  }
  tr.expanded .title-cell .title-full {
    display: block;
  }
}

/* ── Title auto-width adjustment ── */
.title-auto {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  transition: max-width 0.3s ease;
}

/* ── Show full table option on mobile ── */
@media (max-width: 991.98px) {
  .table-view-toggle {
    display: flex;
    justify-content: center;
    padding: 12px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
  .table-view-toggle .btn {
    max-width: 320px;
    width: 100%;
  }
}

/* ── Utility: Hidden on mobile ── */
@media (max-width: 991.98px) {
  .hide-on-mobile { display: none !important; }
  .show-on-mobile { display: block !important; }
}
@media (min-width: 992px) {
  .hide-on-desktop { display: none !important; }
  .show-on-desktop { display: block !important; }
}

/* ── Ensure images don't overflow ── */
@media (max-width: 991.98px) {
  .table-responsive img {
    max-width: 100%;
    height: auto;
  }
  .col-img img,
  .table-row-card-image {
    width: 56px !important;
    height: 56px !important;
  }
}

/* ── Fix for overlapping content on mobile ── */
@media (max-width: 991.98px) {
  .card { margin-bottom: 16px !important; }
  .table-responsive { margin-bottom: 0; }
  .bulk-bar { position: relative !important; top: auto !important; }
}

/* ── Card view scrollbar styling ── */
@media (max-width: 991.98px) {
  .table-card-view::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .table-card-view::-webkit-scrollbar-track {
    background: transparent;
  }
  .table-card-view::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 99px;
  }
}

/* ── Print styles ── */
@media print {
  .table-row-card-body { max-height: none !important; padding: 16px !important; }
  .table-row-card { break-inside: avoid; page-break-inside: avoid; }
  .table-view-toggle { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   21. TABLE CONTAINMENT, PERSISTENT BULK BAR, GOOD PRODUCTS LAYOUT
   Added 2026-09-03. Applies to every table in the portal, not just
   Products and Active listings.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 21a. Nothing escapes its column ───────────────────────────────────
   Long SKUs, category paths, URLs and note text were pushing past the cell
   edge and printing over the neighbouring column. Cells now wrap and break
   long unbroken strings instead of overflowing. */
.table-modern tbody td,
table[data-coltable] tbody td {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* The Title column is the exception: one line, clipped, never wrapped. */
.table-modern tbody td.col-title,
table[data-coltable] tbody td.col-title {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}
.table-modern tbody td > *,
table[data-coltable] tbody td > * { max-width: 100%; }

/* Cells that genuinely must stay on one line opt in explicitly. */
.table-modern td.nowrap,
.table-modern td .font-mono.nowrap,
.table-modern thead th { white-space: nowrap; }

/* One-line cell value, clipped with an ellipsis to the CURRENT width of its
   column. Because the cap is a percentage rather than a fixed pixel count,
   widening the column reveals more words and narrowing it drops them — which
   is what makes the resizable Title column behave the way you'd expect. The
   full text stays available in the cell's title tooltip. */
.cell-ellipsis {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* An ellipsis can only be computed against a column that has a width. Until
   you drag it, the Title column has none, so auto table layout would size it
   to the longest title and nothing would ever clip. These are DEFAULTS ONLY —
   includes/table_resize.php writes width/min-width/max-width inline on the
   <th> and on every <td> in the column as you drag, and inline styles win, so
   the ellipsis tracks the width you set. No !important here, deliberately. */
.table-modern th.col-title,
.table-modern td.col-title,
table[data-coltable] th.col-title,
table[data-coltable] td.col-title {
  width: 320px;
  max-width: 320px;
  overflow: hidden;
}
/* The title cell holds a two-line stack (title + eBay item ID); both lines
   clip to the column rather than widening it. */
.table-modern td.col-title > .d-flex,
.table-modern td.col-title > .d-flex > div { min-width: 0; max-width: 100%; }
.table-modern td.col-title .font-mono {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 21b. Actions column ───────────────────────────────────────────────
   Fixed width, opaque, and its buttons wrap onto a second line rather than
   spilling sideways over the columns beneath. */
.table-modern th.col-actions,
.table-modern td.col-actions {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  white-space: normal;
}
.table-modern td.col-actions > .d-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
}
.table-modern td.col-actions .btn {
  flex: 0 0 auto;
  padding: 4px 7px;
  line-height: 1;
}
/* CHANGED: the Actions column is no longer pinned to the right edge — it
   scrolls with the rest of the table. It keeps its fixed width and wrapping
   buttons, so its contents still stay inside the column. */
.table-modern thead th.col-actions,
.table-modern tbody td.col-actions {
  position: static;
  right: auto;
  box-shadow: none;
}

@media (max-width: 575.98px) {
  .table-modern th.col-actions,
  .table-modern td.col-actions { width: 104px; min-width: 104px; max-width: 104px; }
}

/* ── 21c. Tables stay visible at every width ───────────────────────────
   Horizontal scroll belongs to the table; the page itself never scrolls
   sideways. */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive > .table-modern { display: table; min-width: 900px; }
@media (max-width: 575.98px) {
  .table-responsive > .table-modern { min-width: 760px; }
}

/* ── 21d. Bulk action bar — always present ─────────────────────────────
   It no longer appears and vanishes as rows are ticked. It sits above the
   table at all times and enables itself once something is selected, so it
   is reachable on desktop and on a phone. */
.bulk-bar-persistent {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 60;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  background: var(--bg-card, #1a2234);
  border: 1px solid var(--border, #2a3550);
  border-radius: 10px;
}
/* Nothing selected: visible but plainly inert. */
.bulk-bar-persistent:not(.has-selection) { opacity: .62; }
.bulk-bar-persistent:not(.has-selection) button,
.bulk-bar-persistent:not(.has-selection) select,
.bulk-bar-persistent:not(.has-selection) input { cursor: not-allowed; }
.bulk-bar-persistent.has-selection {
  opacity: 1;
  border-color: var(--blue, #3b82f6);
  box-shadow: 0 2px 12px rgba(59, 130, 246, .18);
}
html.light .bulk-bar-persistent,
[data-theme="light"] .bulk-bar-persistent { background: #ffffff; border-color: #cbd5e1; }
@media (max-width: 767.98px) {
  .bulk-bar-persistent { padding: 8px; gap: 6px; }
  .bulk-bar-persistent .btn { font-size: 12px; }
}

/* ── 21e. Good Products page width ─────────────────────────────────────
   pages/product_research.php wraps its content in .main-content, a class
   that had no styling anywhere in the portal. With no left margin the page
   started at x=0, so the sidebar sat on top of the first part of every row
   and the content ran wider than the visible area. Give it the same
   geometry every other page gets from .main. */
.main-content {
  margin-left: var(--sidebar-w);
  padding: 24px 28px;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  transition: margin-left .25s cubic-bezier(.4, 0, .2, 1);
}
.sidebar.collapsed ~ .main-content { margin-left: 60px; }
[data-theme="light"] .main-content { background: #f1f5f9; }
@media (max-width: 991px) {
  .main-content { margin-left: 0 !important; padding: 16px 14px 20px; padding-top: 62px; }
}
/* Its inner grids must be allowed to shrink, or they set a floor wider than
   the column and push the page out again. */
.main-content .row > [class*="col-"] { min-width: 0; }