/* ==========================================================================
   1. Main Table Component Container Layout
   ========================================================================== */

.crtab-skin .tabulator {
  border: none !important;
  background-color: var(--surface) !important;
  width: 100% !important;
  font-size: 12px !important;
  font-family: "Open Sans", sans-serif !important;
  text-align: left !important;
  border-radius: 8px !important;
  position: relative !important;
  transition: background-color 0.3s ease;
}

/* Tabulator's own stock stylesheet hardcodes .tabulator-table's background to white and it was
   never overridden -- invisible on normal opaque rows (the row's own background painted over it),
   but it shows through any translucent row background (e.g. the hover tint below), producing a
   pale-pink wash in dark mode instead of a dark blend. */
.crtab-skin .tabulator-table {
  background-color: var(--surface) !important;
}


.crtab-skin .tabulator-row {
  color: #3f3f46;
  letter-spacing: -0.2px !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: subpixel-antialiased !important; /* crisp text rendering */
  -moz-osx-font-smoothing: auto !important;
}

#crtab-table {
  position: relative;
  border: 1px solid var(--crtab-table-border);
  border-radius: 8px;
  overflow: hidden;
  /* Empty until Tabulator's JS builds the table; without a reserved height this div is 0px on
     first paint and then snaps to ~75dvh once populated, shoving everything below it down --
     a full-page CLS hit measured in the wild via Cloudflare's RUM debug view. Matches the
     `height: "75dvh"` Tabulator option set at each call site (functions.php). */
  min-height: 75dvh;
}

/* Fills #crtab-table's reserved space until Tabulator overwrites this markup -- crTabLoadingPlaceholderMarkup() (functions.php). */
.crtab-loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  min-height: 75dvh;
  color: var(--crtab-warm-muted);
  font-size: 14px;
}

.crtab-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--crtab-line);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  /* transform-only so this can't itself cause a layout shift while it spins */
  animation: crtab-loading-spin 0.8s linear infinite;
}

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

#crtab-table::after {
  content: '';
  display: block;
  width: 100%;
  height: 4px; /* Matches thickness requirement from crdb.css */
  background: var(--accent-color);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
}

#crtab-wrapper a { color: var(--accent-color); }

.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
    padding-right: 20px;
}

/* ==========================================================================
   2. Header Stack Layout
   ========================================================================== */

.crtab-skin .tabulator .tabulator-header {
  background: var(--accent-color) !important;
  color: var(--text-color) !important;
  border-bottom: 2px solid #444 !important;

  font-family: "Open Sans", sans-serif !important;
}

.crtab-skin .tabulator-header .tabulator-col {
  background: var(--accent-color) !important;
  border: 0 !important;
  cursor: grab; /* movableColumns:true -- signals drag-to-reorder without stealing the click-to-sort affordance (click still works regardless of cursor) */
}

.crtab-skin .tabulator-header .tabulator-col:active {
  cursor: grabbing;
}

.crtab-skin .tabulator-header .tabulator-col:last-child {
  border-right: 0 !important;
}

/* matches the 15px cell padding used elsewhere */
.crtab-skin .tabulator-header .tabulator-col-content {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.crtab-skin .tabulator-col .tabulator-col-title {
  font-size: 13px !important;
  font-weight: bold !important;
  color: var(--text-color) !important;
  text-transform: none !important;
}

/* Sorting arrow configuration (Tabulator renders these as CSS border-triangles, not SVG) */
/* Inactive columns: dim, low-contrast arrow so it doesn't compete with the active one */
.crtab-skin .tabulator-col[aria-sort="none"] .tabulator-arrow {
  border-bottom-color: rgba(255, 255, 255, 0.4) !important;
  border-top-color: rgba(255, 255, 255, 0.4) !important;
  opacity: 0.6;
}
.crtab-skin .tabulator-col[aria-sort="none"]:hover .tabulator-arrow {
  border-bottom-color: rgba(255, 255, 255, 0.75) !important;
  border-top-color: rgba(255, 255, 255, 0.75) !important;
  opacity: 0.85;
}

/* Active sort column: bright, fully opaque, slightly larger to pop */
.crtab-skin .tabulator-col[aria-sort="ascending"] .tabulator-arrow,
.crtab-skin .tabulator-col[aria-sort="descending"] .tabulator-arrow {
  border-left-width: 7px !important;
  border-right-width: 7px !important;
  border-top-color: #fff !important;
  border-bottom-color: #fff !important;
  opacity: 1;
}

.crtab-skin .tabulator-header .tabulator-col input,
.crtab-skin .tabulator-header .tabulator-col select {
  font-size: 12px !important;
  height: 24px !important;
  padding: 0 6px !important;
  border: 1px solid var(--crtab-input-border) !important;
  border-radius: 3px !important;
  background: var(--surface) !important;
  color: var(--crtab-input-text) !important;
}

/* ==========================================================================
   3. Rows & Cells Framework (Old tr & td layout structures)
   ========================================================================== */

.crtab-skin .tabulator-row {
  min-height: 26px !important;
  background: var(--surface) !important;
  color: var(--crtab-row-text) !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid var(--crtab-row-border) !important; /* real border, not a shadow -- can't get clipped or covered by frozen cell backgrounds */
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

.crtab-skin .tabulator-row.tabulator-row-even {
  background: var(--zebra-bg) !important;
}

/* stop native drag-select from firing on click-to-edit cells (was reading the click-to-open-editor gesture as a text drag) -- only cells Tabulator marks .tabulator-editable actually have this conflict */
.crtab-skin .tabulator-cell.tabulator-editable {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.crtab-skin .tabulator-cell.tabulator-editable.tabulator-editing,
.crtab-skin .tabulator-cell.tabulator-editable.tabulator-editing * {
  user-select: text !important;
  -webkit-user-select: text !important;
}

.crtab-skin .tabulator-cell {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  border: 0 !important;
  text-transform: none !important;
  vertical-align: middle !important; /* centers cells against each other now that row height is static, not dynamic-on-focus */
}

.crtab-skin .tabulator-cell a,
.crtab-skin .tabulator-row .tabulator-cell a {
  color: var(--accent-color, #ad1111) !important;
  text-decoration: none !important;
  transition: color 0.15s ease-in-out;
}

/* scoped to <a> so hovering a row doesn't underline plain text too */
.crtab-skin .tabulator-cell a:hover,
.crtab-skin .tabulator-row .tabulator-cell a:hover {
  text-decoration: underline !important;
}

/* light tint, not a full invert -- solid accent-red read as danger/destructive and fought with colored Publisher/Status badges */
.crtab-skin .tabulator-row:hover {
  background-color: rgba(var(--accent-color-rgb), 0.12) !important;
}

/* a sticky cell doesn't inherit the row's background, so scrolled-under content shows through without this */
.crtab-skin .tabulator-cell.tabulator-frozen {
  background: var(--surface) !important;
  transition: background-color 0.3s ease !important;
}

/* Tabulator's own stylesheet puts a 2px grey divider on frozen cells -- drop it to match this skin's borderless cells */
.crtab-skin .tabulator-cell.tabulator-frozen-left {
  border-right: 0 !important;
}

.crtab-skin .tabulator-cell.tabulator-frozen-right {
  border-left: 0 !important;
}

.crtab-skin .tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen {
  background: var(--zebra-bg) !important;
}

/* opaque equivalent of the row's rgba(accent, 0.12) tint over the surface color -- frozen cells need their own explicit background, layering the translucent tint on top would double-apply it */
.crtab-skin .tabulator-row:hover .tabulator-cell.tabulator-frozen {
  background-color: var(--crtab-hover-frozen) !important;
}

.crtab-skin .tabulator-cell.col-aff,
.crtab-skin .tabulator-cell.no-wrap {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* pill's base look lives in crdb.css (sitewide); this just overrides color/decoration to out-specificity the .tabulator-cell a !important rule below */
.crtab-skin .tabulator-cell a.crtab-aff-link {
  color: var(--accent-600) !important;
  text-decoration: none !important;
}

.crtab-skin .tabulator-cell a.crtab-aff-link:hover {
  color: #fff !important;
  text-decoration: none !important;
}

/* ==========================================================================
   4. Row Text Clamping & Heights (same rule at every viewport width, not just desktop)
   ========================================================================== */

/* 1. Base State: Force ALL data cells to clip with ellipsis on a single line */
#crtab-table .tabulator-row .tabulator-cell:not(.col-actions):not(.col-select) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 1b. Title/Format/Collects/Comments reserve a constant 2-line height so rows stay a static height. Publisher stays excluded -- its pill would wrap onto its own line and drop into the row below. */
.crtab-skin #crtab-table .tabulator-row .tabulator-cell.col-title,
.crtab-skin #crtab-table .tabulator-row .tabulator-cell.col-format,
.crtab-skin #crtab-table .tabulator-row .tabulator-cell.col-collects,
.crtab-skin #crtab-table .tabulator-row .tabulator-cell.col-comments {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.4;
  height: calc(30px + 2.8em) !important; /* 30px = this cell's own 15px top+bottom padding */
}

/* More Affiliates: pills wrap onto 2 lines; 16px line boxes + slimmer pills keep both lines inside 1b's 2.8em reserved height so the row doesn't grow */
.crtab-skin #crtab-table .tabulator-row .tabulator-cell.col-aff-wrap {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  line-height: 16.5px;
}

.crtab-skin #crtab-table .tabulator-cell.col-aff-wrap a.crtab-aff-link {
  padding: 1px 8px;
  line-height: 1.2;
  vertical-align: top;
}

/* ghost element -- centers the content span vertically within the reserved height above without touching the cell's own display */
.crtab-skin #crtab-table .tabulator-row .tabulator-cell.col-title::before,
.crtab-skin #crtab-table .tabulator-row .tabulator-cell.col-format::before,
.crtab-skin #crtab-table .tabulator-row .tabulator-cell.col-collects::before,
.crtab-skin #crtab-table .tabulator-row .tabulator-cell.col-comments::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/* real 2-line clamp, applied to CRTabCore.clamp2Formatter's inner span, never to .tabulator-cell itself (breaks Tabulator's column layout) */
.crtab-skin #crtab-table .tabulator-row .cr-clamp-2 {
  display: -webkit-inline-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}

/* 2. always browser-computed height -- avoids Tabulator's JS-measured px height fighting the browser's */
#crtab-table .tabulator-row,
#crtab-table .tabulator-row .tabulator-cell {
  height: auto !important;
}

/* Row density toggle (CRTabCore.wireDensityToggle) -- one class more specific than section 4's rules so it wins regardless of source order; card view is untouched */
@media only screen and (min-width: 1140px) {
  .crtab-skin.crtab-density-compact .tabulator-header .tabulator-col-content {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .crtab-skin.crtab-density-compact .tabulator-cell {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .crtab-skin.crtab-density-compact #crtab-table .tabulator-row .tabulator-cell.col-title,
  .crtab-skin.crtab-density-compact #crtab-table .tabulator-row .tabulator-cell.col-format,
  .crtab-skin.crtab-density-compact #crtab-table .tabulator-row .tabulator-cell.col-collects,
  .crtab-skin.crtab-density-compact #crtab-table .tabulator-row .tabulator-cell.col-comments {
    height: calc(12px + 2.8em) !important; /* 12px = this cell's compact 6px top+bottom padding */
  }
}

#crtab-table .tabulator-row {
  box-sizing: border-box !important;
  contain: layout; /* Isolate row layout calculations to prevent layout jitter */
}

/* ==========================================================================
   5. Cards layout (Table | Cards | Gallery -> Cards), every width
   Its own layer like Gallery: CRTabCore.compactCardElement() cards rendered by wireViewToggle from the
   table's filtered/sorted rows. Title with ＋/✓ and the row's action buttons, a meta line, affiliate
   links; a cover on the left when the Covers switch is on.
   ========================================================================== */

.crtab-cards-list { padding: 4px 18px 18px; }
.crtab-cards-list,
.crtab-cards-list .cr-gallery-group-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 10px;
}
.crtab-cards-list > .cr-gallery-group-header,
.crtab-cards-list > .cr-gallery-group-body { grid-column: 1 / -1; }
.crtab-cards-viewport { overflow-y: visible; }
.crtab-focus-mode .crtab-cards-viewport { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.crtab-ccard {
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--crtab-table-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(var(--crtab-shadow-rgb), .06);
  cursor: pointer;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.crtab-ccard:hover { border-color: var(--crtab-line-strong); box-shadow: 0 4px 12px -4px rgba(var(--crtab-shadow-rgb), .25); }
.crtab-ccard:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.crtab-density-compact .crtab-ccard { padding: 7px 10px; gap: 10px; }
.crtab-density-compact .crtab-cards-list,
.crtab-density-compact .crtab-cards-list .cr-gallery-group-body { gap: 7px; }

.crtab-ccard-cover {
  flex: 0 0 64px;
  height: 96px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--crtab-chrome-b);
}
.crtab-ccard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.crtab-ccard-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.crtab-ccard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.crtab-ccard-title {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--crtab-warm-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.crtab-ccard-tools { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; margin-top: -2px; }
/* crdb.css gives every .btn a negative left margin and a 40-65px min-width */
.crtab-ccard-tools .btn { margin: 0 !important; min-width: 0 !important; padding: 4px 7px; line-height: 1; }
.crtab-ccard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  font-size: 11.5px;
  color: var(--crtab-warm-muted);
  font-variant-numeric: tabular-nums;
}
.crtab-ccard-format { font-weight: 600; }
.crtab-ccard-date { font-weight: 600; color: var(--expand-label-color); }
.crtab-ccard-date.cr-restock-date { font-weight: 400; }
.crtab-ccard-aff { display: flex; flex-wrap: wrap; gap: 4px; }

@media screen and (max-width: 768px) {
  .crtab-cards-list { padding: 4px 10px 14px; }
}

/* ==========================================================================
   6. Global Floating Dropdowns & List Popups System (Tabulator Canvas Hooks)
   ========================================================================== */

.tabulator-popup-container,
.tabulator-menu,
.tabulator-menu .tabulator-menu-item,
.tabulator-edit-list,
.tabulator-edit-list .tabulator-edit-list-item,
.tabulator-edit-list .tabulator-edit-list-group-title {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-family: "Open Sans", sans-serif !important;
}

.tabulator-menu {
  padding: 6px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  box-shadow: 0 8px 24px rgba(var(--shadow-color-rgb),0.14), 0 2px 6px rgba(var(--shadow-color-rgb),0.08) !important;
  min-width: 190px !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* Tabulator puts menus and header-filter lists on <body> at z-index 10000, under Focus mode's 100000 */
body.cr-focus-mode-open .tabulator-popup-container {
  z-index: 100001 !important;
}

.tabulator-menu .tabulator-menu-item {
  padding: 8px 10px !important;
  border-radius: 5px !important;
  cursor: pointer;
  transition: background-color .12s ease;
}

.tabulator-menu .tabulator-menu-item:hover {
  background-color: rgba(var(--accent-color-rgb), 0.12) !important;
}

.tabulator-menu .tabulator-menu-item-disabled {
  cursor: default !important;
  margin-bottom: 4px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.tabulator-menu .tabulator-menu-item-disabled:hover {
  background-color: transparent !important;
}

.menu-header-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--expand-value-color);
}

.tabulator-header-popup-button {
  border-radius: 4px;
  transition: background-color .12s ease, color .12s ease;
}

.tabulator-header-popup-button:hover {
  background-color: rgba(255,255,255,0.18);
  color: #fff;
}

.tabulator-edit-list .tabulator-edit-list-item {
  padding: 4px 8px !important;
}

.tabulator-edit-list {
  min-width: 160px !important; /* fits long publisher names like Fantagraphics without wrapping */
  max-height: 250px !important;
  overflow-y: auto !important; /* without this a touch-drag bubbles up and dismisses the popup instead of scrolling it */
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 8px rgba(var(--shadow-color-rgb),0.15) !important;
  background: var(--surface) !important;
  color: var(--expand-value-color) !important; /* Tabulator's own stylesheet hardcodes item text color otherwise */
}

.tabulator-edit-list .tabulator-edit-list-item {
  color: var(--expand-value-color) !important;
}

.tabulator-edit-list .tabulator-edit-list-item.active,
.tabulator-edit-list .tabulator-edit-list-item.focused,
.tabulator-edit-list .tabulator-edit-list-item:hover {
  background-color: rgba(var(--accent-color-rgb), 0.15) !important;
  color: var(--expand-value-color) !important;
}

.tabulator-edit-list .tabulator-edit-list-group-title {
  color: var(--expand-label-color) !important;
}

.tabulator-menu .tabulator-menu-item .menu-check {
  display: inline-block;
  position: relative;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 1.5px solid var(--border-color);
  border-radius: 3px;
  background: var(--surface);
  transition: background-color .12s ease, border-color .12s ease;
}

.tabulator-menu .tabulator-menu-item .menu-check.checked {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.tabulator-menu .tabulator-menu-item .menu-check.checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: -1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ==========================================================================
   7. Sleek Custom Scrollbars (Table Holder & Overlay Lists)
   ========================================================================== */

/* Chrome, Safari, WebKit Engine Targets */
.crtab-skin .tabulator .tabulator-tableholder::-webkit-scrollbar,
.tabulator-edit-list::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  background-color: transparent !important;
  display: block !important;
}

.crtab-skin .tabulator .tabulator-tableholder::-webkit-scrollbar-track,
.tabulator-edit-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03) !important;
  border-radius: 4px !important;
}

.crtab-skin .tabulator .tabulator-tableholder::-webkit-scrollbar-thumb,
.tabulator-edit-list::-webkit-scrollbar-thumb {
  background-color: var(--accent-color) !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
}

.crtab-skin .tabulator .tabulator-tableholder::-webkit-scrollbar-thumb:hover,
.tabulator-edit-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-hover) !important;
}

/* Gecko Engine Firefox Targets */
.crtab-skin .tabulator .tabulator-tableholder,
.tabulator-edit-list {
  scrollbar-width: auto !important;
  scrollbar-color: var(--accent-color) rgba(0, 0, 0, 0.03) !important;
}

/* ==========================================================================
   8. Horizontal Scroll Buttons (click-to-scroll, no fade)
   ========================================================================== */

/* Lives on table.element, not .tabulator-tableholder -- see wireScrollShadow in crtab-core.js. */
.crtab-skin .tabulator.crtab-scrollshadow-wrap {
  position: relative !important;
}

/* wireToolbarScrollArrows needs the same positioned ancestor -- arrows overlay rather than take flex space, or the appearing arrow shrinks the viewport and moves the scroll-end target mid-click */
.crtab-scrollshadow-wrap {
  position: relative;
}

.crtab-scrollarrow-wrap {
  position: absolute;
  top: 0; /* JS sets this to the header height so the button only covers the body */
  bottom: 0;
  width: 42px;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  z-index: 20;
}

.crtab-scrollarrow-wrap-left {
  left: 0; /* JS sets this to the left-frozen column width, if any */
  justify-content: flex-start;
}

.crtab-scrollarrow-wrap-right {
  right: 0; /* JS sets this to the right-frozen column width, if any */
  justify-content: flex-end;
}

.crtab-scrollshadow-wrap.has-overflow-left .crtab-scrollarrow-wrap-left,
.crtab-scrollshadow-wrap.has-overflow-right .crtab-scrollarrow-wrap-right {
  opacity: 1;
}

.crtab-scrollshadow-wrap.has-overflow-left .crtab-scrollarrow-wrap-left .crtab-scrollarrow,
.crtab-scrollshadow-wrap.has-overflow-right .crtab-scrollarrow-wrap-right .crtab-scrollarrow {
  pointer-events: auto;
}

/* Wrap always stays click-through; only the round button (not the full strip) can intercept clicks. */
.crtab-scrollarrow {
  pointer-events: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
  background: var(--accent-color);
  color: var(--text-color, #fff);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(var(--shadow-color-rgb), 0.25);
  transition: all 0.15s ease-in-out;
}
.crtab-scrollarrow:hover {
  background: var(--surface);
  color: var(--accent-color);
  border-color: var(--accent-color);
  animation: none;
}

/* Pulsing ring draws the eye to the button; only runs while it's actually clickable. */
@keyframes crtab-scrollarrow-pulse {
  0% { box-shadow: 0 2px 6px rgba(var(--shadow-color-rgb), 0.25), 0 0 0 0 rgba(var(--accent-color-rgb), 0.5); }
  100% { box-shadow: 0 2px 6px rgba(var(--shadow-color-rgb), 0.25), 0 0 0 10px rgba(var(--accent-color-rgb), 0); }
}
.crtab-scrollshadow-wrap.has-overflow-left .crtab-scrollarrow-wrap-left .crtab-scrollarrow,
.crtab-scrollshadow-wrap.has-overflow-right .crtab-scrollarrow-wrap-right .crtab-scrollarrow {
  animation: crtab-scrollarrow-pulse 2s ease-out infinite;
}

/* Draws the eye to Focus mode on mobile, same ring technique as crtab-scrollarrow-pulse above.
   JS (wireFocusModeToggle) adds this class only on narrow/touch layouts and drops it for good the
   first time the button is used, so it's a one-time nudge rather than a permanent distraction. */
@keyframes crtab-focusmode-pulse {
  0% { box-shadow: 0 1px 0 rgba(var(--crtab-shadow-rgb),.05), 0 1px 2px rgba(var(--crtab-shadow-rgb),.05), 0 0 0 0 rgba(var(--accent-color-rgb), 0.55); }
  100% { box-shadow: 0 1px 0 rgba(var(--crtab-shadow-rgb),.05), 0 1px 2px rgba(var(--crtab-shadow-rgb),.05), 0 0 0 10px rgba(var(--accent-color-rgb), 0); }
}
#crtab-focusmode-toggle.crtab-focusmode-pulse {
  animation: crtab-focusmode-pulse 2s ease-out infinite;
}

/* Below this width, release/aff/actions no longer reliably fit together on one line (whether they do,
   and which one gets pushed off, varies unpredictably with exact width AND how many affiliate links a
   given book has). Forcing release onto its own line here guarantees it's always the one that wraps
   away, with aff+actions left to share the next line as a pair -- never separated, never truncated. */
@media screen and (max-width: 480px) {
  #crtab-table .tabulator-row .tabulator-cell.col-release {
    flex-basis: 100% !important;
  }
}

/* (hover: none) scopes this to touch devices only -- toolbar pill-row arrows below stay visible on mobile-width mouse/trackpad. */
@media screen and (max-width: 768px) and (hover: none) {
  .crtab-scrollarrow-wrap {
    display: none !important;
  }
}

/* ==== CRDB x Tabulator Core Layout ==== */
.crtab-wrap {
  --accent: var(--accent-color); /* alias into the shared crdb.css token, not a second color source */
  /* warm-neutral toolbar tokens, matched to the approved mockup -- a pure gray reads as unconsidered next to the accent red */
  --crtab-line: #e0d9d3;
  --crtab-line-strong: #c7bfb7;
  --crtab-chrome: #f3f0eb;
  --crtab-chrome-b: #eae5df;
  --crtab-row-text: #333;
  --crtab-row-border: rgba(0, 0, 0, 0.1);
  --crtab-hover-frozen: #f5e2e2; /* opaque equivalent of the row hover tint, layered over --surface */
  --crtab-input-border: #ddd;
  --crtab-input-text: #222;
  --crtab-table-border: #e3e3e3;
  --crtab-shadow-rgb: 0, 0, 0;
  --crtab-toolbar-bg: #f7f7f7;
  --crtab-chrome-text: #444;
  --crtab-chrome-text-strong: #111;
  --crtab-chrome-border: #d0d0d0;
  --crtab-chrome-hover-bg: #f6f6f6;
  --crtab-chrome-hover-border: #b5b5b5;
  --crtab-chrome-open-bg: #e3ddd5;
  --crtab-chrome-open-border: #a39a90;
  --crtab-warm-text: #2b2a28;
  --crtab-warm-muted: #6b6560;
  --crtab-warm-border-hover: #a89f96;
  font-family: "Open Sans", sans-serif;
}

body.dark-skin .crtab-wrap {
  --crtab-line: #3a3733;
  --crtab-line-strong: #4a453f;
  --crtab-chrome: #232220;
  --crtab-chrome-b: #2b2926;
  --crtab-row-text: #d5d3d0;
  --crtab-row-border: rgba(255, 255, 255, 0.1);
  --crtab-hover-frozen: #321f1f; /* precise blend: --accent-color-rgb (dark) at 0.12 alpha over --surface (dark), same formula as the light value above */
  --crtab-input-border: #444;
  --crtab-input-text: #eee;
  --crtab-table-border: #3a3733;
  --crtab-shadow-rgb: 0, 0, 0;
  --crtab-toolbar-bg: #201f1d;
  --crtab-chrome-text: #ccc;
  --crtab-chrome-text-strong: #fff;
  --crtab-chrome-border: #4a453f;
  --crtab-chrome-hover-bg: #2f2d2a;
  --crtab-chrome-hover-border: #5a544c;
  --crtab-chrome-open-bg: #3b3834;
  --crtab-chrome-open-border: #6e675e;
  --crtab-warm-text: #e5e1db;
  --crtab-warm-muted: #a49d94;
  --crtab-warm-border-hover: #5a544c;
}

/* shared badge shape -- update-type colors are CSS below; publisher colors are inline since PUBLISHER_COLORS is admin-editable and can't be enumerated as CSS selectors */
.crtab-update-type-tag,
.crtab-publisher-tag {
  display: inline-block;
  max-width: 100%;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 8px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  box-sizing: border-box;
}

/* per-type colors, keyed off the formatter's data-type attribute -- colorblind-safe hue order; add a type by adding a rule here, no new JS class needed */
.crtab-update-type-tag[data-type="RELEASE_DATE"] {
  background: #2a78d6;
  color: #fff;
}

.crtab-update-type-tag[data-type="PRICE"] {
  background: #eb6834;
  color: #fff;
}

.crtab-update-type-tag[data-type="PAGES"] {
  background: #1baf7a;
  color: #fff;
}

.crtab-update-type-tag[data-type="FOC_DATE"] {
  background: #eda100;
  color: #000;
}

.crtab-update-type-tag[data-type="SOLICITED"] {
  background: #e87ba4;
  color: #000;
}

.crtab-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  margin: 12px 0 0;
  background: var(--crtab-toolbar-bg);
  padding: 12px 15px;
  border-bottom: 1px solid var(--crtab-input-border);
  border-top: none;
}

.crtab-toolbar .group,
.crtab-pill-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  align-items: center;
  flex: 1 1 100%
}

.crtab-toolbar label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--expand-label-color);
  margin-right: 6px;
  letter-spacing: 0.75px;
}

.crtab-toolbar label i {
  margin-right: 4px;
  color: var(--expand-label-color);
}

/* Default .form-control border (#DDD) barely shows against the toolbar's backdrop -- darken it here so inputs read as distinct fields. */
.crtab-toolbar .form-control {
  border-color: var(--crtab-chrome-hover-border);
}

/* wireToolbarScrollArrows (desktop/mouse) moves pills into a nested .crtab-pill-scroll next to the
   label -- it must share the row with the label, not claim its own 100% row like a top-level group. */
.crtab-toolbar .group > .crtab-pill-scroll {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.crtab-toolbar .btn,
.crtab-toolbar-toggles .btn {
    font-size: 11px; padding: 6px 14px; line-height: 1.25; background: var(--surface); color: var(--crtab-chrome-text);
    border: 1px solid var(--crtab-chrome-border); border-radius: 20px; text-transform: none; font-weight: 600;
    cursor: pointer; transition: all 0.15s ease-in-out; box-shadow: 0 1px 2px rgba(var(--crtab-shadow-rgb),0.02);
}
.crtab-toolbar .btn:hover,
.crtab-toolbar-toggles .btn:hover { background: var(--crtab-chrome-hover-bg); border-color: var(--crtab-chrome-hover-border); color: var(--crtab-chrome-text-strong); }
.crtab-toolbar .btn.active,
.crtab-toolbar .crtab-fmt-chip.active,
.crtab-toolbar-toggles .btn.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 4px rgba(var(--accent-color-rgb),0.2); }
.crtab-toolbar .btn.active:hover,
.crtab-toolbar .crtab-fmt-chip.active:hover,
.crtab-toolbar-toggles .btn.active:hover { background: var(--accent-hover); }

#crtab-reset-filters, #crtab-swap-col { border-color: var(--crtab-chrome-border); background: var(--crtab-chrome-hover-bg); }
.crtab-toolbar .crtab-pill-input { max-width: 100%; height: auto; padding: 6px 12px; font-size: 12px; border-radius: 20px; background: var(--surface); }
#crtab-global-search { 
  width: 300px;
	background: var(--surface);
 }
#cr-tax-rate { width: 75px; }
.crtab-totals-display { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--crtab-chrome-text); padding: 4px 4px 0; white-space: nowrap; }
.crtab-rowcount { font-size: 12px; color: var(--expand-label-color); text-align: right; padding: 6px 4px 0; }
.crtab-toolbar-toggles { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crtab-toolbar-toggles-right { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* ==========================================================================
   Unified toolbar+table card -- transcribed from the approved "boxed filter rail" mockup
   ========================================================================== */

.crtab-card {
  /* the theme's grid parents size to content; without this, each column change (e.g. Covers on/off) widens the page */
  contain: inline-size;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--crtab-table-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(var(--crtab-shadow-rgb), .04), 0 8px 24px -16px rgba(var(--crtab-shadow-rgb), .15);
}
.crtab-card #crtab-table { border: 0 !important; border-radius: 0 !important; }
.crtab-card #crtab-table::after { display: none; }

.crtab-toolbar-row1 {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* pages with several action buttons wrap them under search instead of overlapping it */
  justify-content: flex-end; /* a wrapped second line sits right, under the controls it continues */
  gap: 10px 12px;
  padding: 14px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--crtab-line);
}

/* wraps the badge + search box as one flex item of row1, so they can never wrap apart from each
   other on their own -- row1 only ever sees this one unit, not two separately-wrappable items */
.crtab-badge-search-unit {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 220px;
  max-width: 372px;
}

.crtab-toolbar-badge {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--accent-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
}

.crtab-search-group {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--crtab-line-strong);
  border-radius: 20px;
  padding: 6px 12px;
  flex: 1 1 auto;
  width: auto;
  min-width: 180px;
  color: var(--expand-label-color);
}
.crtab-search-group i { font-size: 12px; line-height: 1; opacity: .55; flex: 0 0 auto; }
.crtab-search-group input {
  border: 0 !important;
  outline: 0;
  background: transparent;
  font-size: 12px;
  font-family: inherit;
  width: 100%;
  color: var(--crtab-row-text);
  padding: 0 !important;
  margin: 0;
  box-shadow: none !important;
  height: 15px !important; /* crdb.css's .form-control{height:36px} keeps winning otherwise -- forced to a fixed content-matched height rather than fighting cascade further */
  line-height: 15px !important;
  min-height: 0 !important;
}
.crtab-search-group input:focus { box-shadow: none; }
.crtab-search-group input::placeholder { color: var(--expand-label-color); }

.crtab-toolbar-spacer { flex: 1 1 auto; }
.crtab-row1-divider { width: 1px; align-self: stretch; background: var(--crtab-line-strong); margin: 0 2px; }

.crtab-seg {
  display: inline-flex;
  border: 1px solid var(--crtab-line-strong);
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  flex: 0 0 auto;
}
.crtab-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  color: var(--crtab-chrome-text);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background .12s ease, color .12s ease;
}
.crtab-seg button i { line-height: 1; }
.crtab-seg button + button { border-left: 1px solid var(--crtab-line-strong); }
.crtab-seg button:not(.active):hover { background: var(--crtab-chrome-hover-bg); color: var(--crtab-chrome-text-strong); }
.crtab-seg button.active { background: var(--accent-color); color: #fff; }

.crtab-icon-btn {
  padding: 6px 9px !important;
  line-height: 1;
  min-width: 33px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* density button uses an inline SVG (exact mockup copy); More's FA glyph needs its own font-size bump or it renders too narrow, reading as a circle instead of the mockup's oblong */
.crtab-icon-btn svg { flex: 0 0 auto; }
.crtab-icon-btn i { line-height: 1; font-size: 13px; }

.crtab-pill {
  font-size: 10px;
  padding: 5px 10px;
  line-height: 1.25;
  background: var(--surface);
  color: var(--crtab-chrome-text);
  border: 1px solid var(--crtab-chrome-border);
  border-radius: 20px;
  text-transform: none;
  font-weight: 600;
  min-width: 0 !important;
  margin-left: 0;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
  box-shadow: 0 1px 0 rgba(var(--crtab-shadow-rgb),.05), 0 1px 2px rgba(var(--crtab-shadow-rgb),.05);
}
.crtab-pill:hover {
  background: var(--crtab-chrome-hover-bg);
  border-color: var(--crtab-chrome-hover-border);
  color: var(--crtab-chrome-text-strong);
  box-shadow: 0 1px 0 rgba(var(--crtab-shadow-rgb),.06), 0 3px 6px rgba(var(--crtab-shadow-rgb),.1);
}
.crtab-pill:active { box-shadow: 0 1px 1px rgba(var(--crtab-shadow-rgb),.06); }
.crtab-pill:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.crtab-pill.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--accent-color-rgb),.35);
}
.crtab-pill.active:hover { box-shadow: 0 2px 8px rgba(var(--accent-color-rgb),.35); }

/* transparent "ghost" variant -- More Filters trigger isn't meant to look like a solid pill */
.crtab-pill-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--crtab-warm-muted);
  box-shadow: none;
}
.crtab-pill-ghost:hover {
  background: var(--crtab-chrome-b);
  color: var(--crtab-warm-text);
  border-color: transparent;
  box-shadow: none;
}
/* older .crtab-pills-toggle[aria-expanded] rule permanently shades bg once expanded -- wrong for ghost variant; two-class selector outranks it regardless of source order */
.crtab-pills-toggle.crtab-pill-ghost[aria-expanded="true"] {
  background: transparent;
  border-color: transparent;
  color: var(--crtab-warm-muted);
}

/* ---- Toolbar popovers (CRTabCore.wireToolbarMenus): the Display panel and the phone-only actions "⋯" menu ---- */
/* flex, not block: a block wrapper puts its button on a 16px text line's baseline, ~2px below the toolbar's other buttons */
.crtab-menu-anchor { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.crtab-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--crtab-line-strong);
  border-radius: 10px;
  box-shadow: 0 14px 34px -12px rgba(var(--crtab-shadow-rgb), .4), 0 2px 6px rgba(var(--crtab-shadow-rgb), .08);
  z-index: 50;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
.crtab-menu-anchor.open .crtab-menu { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; transition: opacity .12s ease, transform .12s ease; }
.crtab-menu-page-columns { display: none; }
.crtab-menu[data-page="columns"] .crtab-menu-page-default { display: none; }
.crtab-menu[data-page="columns"] .crtab-menu-page-columns { display: block; }
.crtab-menu-backdrop { display: none; }
/* row1 is sticky at z-index 30; lift it over the table while a menu is open */
.crtab-toolbar-row1.crtab-menu-open { z-index: 60; }

.crtab-display-btn { position: relative; display: inline-flex !important; align-items: center; gap: 6px; }
.crtab-pill[data-menu-trigger][aria-expanded="true"] { background: var(--crtab-chrome-open-bg); border-color: var(--crtab-chrome-open-border); color: var(--crtab-chrome-text-strong); }
.crtab-display-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-color);
  border: 2px solid var(--surface);
}

.crtab-display-pop { width: 300px; max-height: min(78vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.crtab-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 4px; }
.crtab-pop-title { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--crtab-warm-text); }
.crtab-pop-x {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--crtab-warm-muted); padding: 4px 6px; border-radius: 6px; line-height: 1; font-size: 13px;
}
.crtab-pop-x:hover { background: var(--crtab-chrome-b); color: var(--crtab-warm-text); }
.crtab-pop-sec { display: flex; flex-direction: column; gap: 7px; padding: 9px 12px; }
.crtab-pop-sec + .crtab-pop-sec { border-top: 1px solid var(--crtab-line); }
.crtab-pop-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--crtab-warm-muted); }
.crtab-seg-fill { display: flex; }
.crtab-seg-fill button { flex: 1 1 0; justify-content: center; padding: 7px 8px; }
.crtab-pop-subactions { display: flex; gap: 6px; }
.crtab-pop-subactions .crtab-pill { flex: 1 1 0; text-align: center; }
.crtab-pop-subactions:not(:has(.crtab-pill:not([style*="none"]))) { display: none; }

.crtab-switch {
  appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 4px 2px; text-align: left; color: var(--crtab-warm-text); border-radius: 6px;
}
.crtab-switch:hover { background: var(--crtab-chrome); }
.crtab-switch:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 1px; }
.crtab-switch:disabled { opacity: .45; cursor: not-allowed; }
.crtab-switch-text { display: flex; flex-direction: column; min-width: 0; }
.crtab-switch-label { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.crtab-switch-hint { font-size: 11px; color: var(--crtab-warm-muted); line-height: 1.3; }
.crtab-switch-track {
  position: relative; flex: 0 0 auto; width: 32px; height: 18px; border-radius: 10px;
  background: var(--crtab-line-strong); transition: background .15s ease;
}
.crtab-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease;
}
/* element-qualified so the legend/filter switches beat the older .crtab-legend-toggle[aria-expanded] button styles */
.crtab-display-pop button.crtab-switch { display: flex; gap: 12px; padding: 4px 2px; font-size: inherit; background: transparent; border: 0; color: var(--crtab-warm-text); }
.crtab-display-pop button.crtab-switch:hover { background: var(--crtab-chrome); }
.crtab-switch[aria-checked="true"] .crtab-switch-track { background: var(--accent-color); }
.crtab-switch[aria-checked="true"] .crtab-switch-track::after { transform: translateX(14px); }

.crtab-pop-drill {
  appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 6px 2px; font-size: 12.5px; font-weight: 600; color: var(--crtab-warm-text); border-radius: 6px;
}
.crtab-pop-drill:hover { background: var(--crtab-chrome); }
.crtab-pop-drill i { font-size: 11px; color: var(--crtab-warm-muted); }
.crtab-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px 11px; border-top: 1px solid var(--crtab-line); }
.crtab-pop-reset {
  appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
  font-size: 12px; font-weight: 700; color: var(--crtab-warm-text);
}
.crtab-pop-reset:hover { color: var(--accent-color); }
.crtab-pop-note { font-size: 10.5px; color: var(--crtab-warm-muted); text-align: right; }

.crtab-menu-back {
  display: flex;
  align-items: center;
  gap: 7px;
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--crtab-warm-text);
  padding: 4px 2px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.crtab-menu-back:hover { color: var(--accent-color); }
.crtab-menu-page-columns .crtab-pills-panel.crtab-collapsible-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 12px 10px;
  background: none;
  border: 0;
}

/* page actions: inline in row1 on desktop, a "⋯" dropdown on phones */
.crtab-actions-more { display: none !important; }
.crtab-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crtab-actions .crtab-pill { display: inline-flex; align-items: center; gap: 6px; }

.crtab-view-seg button i { font-size: 11px; }

/* Focus mode: "✕ Exit" pinned to row1's far right while open */
#crtab-focusmode-toggle.crtab-focusmode-exit {
  order: 99;
  gap: 6px;
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  padding: 6px 12px !important;
}
.crtab-focusmode-label { font-size: 11px; font-weight: 700; }

/* ＋/✓ watchlist icon -- crdb.css styles every .add-to-watchlist-button as a 65px red button with !important; undo that here.
   Negative block margin keeps the larger tap target from adding row height. */
.crtab-skin .crtab-wl-icon,
.crtab-skin .crtab-wl-icon:hover {
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0 !important;
  margin: -4px 0 !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 0 !important;
  font-size: 17px !important;
  color: var(--crtab-warm-muted) !important;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none !important;
}
.crtab-skin .crtab-wl-icon:hover,
.crtab-skin .crtab-wl-icon:focus-visible { color: var(--accent-color) !important; }
.crtab-skin .crtab-wl-icon.is-on { color: var(--accent-color) !important; }
.crtab-skin .crtab-wl-icon:disabled { opacity: .5; cursor: progress; }
.crtab-skin .tabulator-cell.col-watch { padding-top: 0 !important; padding-bottom: 0 !important; text-overflow: clip !important; }

/* active-filter row: removable tags + Clear all, with the book count always shown */
.crtab-active-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 7px 18px;
  min-height: 40px;
  border-top: 1px solid var(--crtab-line);
  box-sizing: border-box;
}
.crtab-active-label, .crtab-active-chips, .crtab-active-clear { display: none !important; }
.crtab-active-row.has-filters .crtab-active-label { display: inline !important; }
.crtab-active-row.has-filters .crtab-active-chips { display: contents !important; }
.crtab-active-row.has-filters .crtab-active-clear { display: inline-flex !important; }
.crtab-active-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 7px 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(var(--accent-color-rgb), .28);
  background: rgba(var(--accent-color-rgb), .09);
  color: var(--accent-600);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.crtab-active-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.crtab-active-chip i { font-size: 10px; opacity: .8; }
.crtab-active-chip:hover { background: rgba(var(--accent-color-rgb), .16); }
.crtab-active-clear {
  /* !important: the theme gives every bare <button> a filled box */
  appearance: none; border: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 600; color: var(--crtab-warm-muted); text-decoration: underline; padding: 4px 4px !important;
}
.crtab-active-clear:hover { color: var(--crtab-warm-text); }
.crtab-active-count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--expand-label-color);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* filter bar hidden: row1's own bottom border already separates it */
.crtab-rail.crtab-collapsible-panel:not(.open) + .crtab-active-row { border-top: 0; }

.crtab-rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--crtab-chrome);
  padding: 10px 18px;
  margin: 0;
}
.crtab-rail-divider { width: 1px; align-self: stretch; background: var(--crtab-line-strong); margin: 0; }
.crtab-filter-group { display: flex; align-items: center; gap: 5px; min-width: 0; }
.crtab-filter-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--crtab-warm-muted);
  margin-right: 2px;
  white-space: nowrap;
}
.crtab-pillgroup { display: flex; flex-wrap: wrap; gap: .28rem; align-items: center; min-width: 0; }
.crtab-rail > .crtab-pill-ghost { padding: 5px 9px; font-size: 10.5px; }

/* More Filters panel now lives inside .crtab-rail so it blends into the same gray box, per the mockup; still carries the old .crtab-toolbar class (incl. position:sticky) which must be neutralized here */
.crtab-rail .crtab-pills-panel.crtab-toolbar {
  position: static;
  flex-basis: 100%;
  min-width: 0; /* flex item of .crtab-rail -- without this its automatic min-width is its content's full (unwrapped) size, which blows the pill rows out past the rail's border instead of letting them wrap/scroll */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  gap: 0; /* kill the inherited .crtab-toolbar gap:15px -- spacing here comes from .group's own padding-top only, not three stacked sources */
}
/* every field's pill group gets its own dashed top separator, matching the mockup -- padding-top is the single source of spacing, no margin-top stacked on top of it */
.crtab-rail .crtab-pills-panel.crtab-toolbar .group {
  border-top: 1px dashed var(--crtab-line-strong);
  padding-top: 10px;
  padding-bottom: 6px;
  margin-top: 0;
  flex-basis: 100%;
  min-width: 0; /* same overflow fix as the panel above, one level down -- flex item of the panel */
}


/* ============ mobile (matches the mockup's @media max-width:700px, ported to the
   site's existing 768px breakpoint for consistency with everything else in this file) ============ */
@media screen and (max-width: 768px) {
  /* justify-content applies per wrapped line, not just once -- this is what keeps every
     icon-button line flush right instead of the previous scattered/left-stranded wrapping
     (which also carried the More menu's anchor away from the right edge, popping .crtab-menu
     off-screen since it's positioned right:0 against that anchor) */
  .crtab-toolbar-row1 { flex-wrap: wrap; row-gap: 10px; justify-content: flex-end; }
  /* the spacer only exists to push row1's trailing icons right on the single-line desktop
     layout -- flex-end above does that job once wrapped, and the spacer's own empty flex-grow
     box was landing on its own zero-height line and destabilizing the wrap order */
  .crtab-toolbar-spacer { display: none; }
  /* badge + search are one flex item now (.crtab-badge-search-unit) -- row1 only ever wraps the
     unit as a whole, never the badge away from search on its own */
  .crtab-badge-search-unit { order: -1; flex: 1 1 auto; width: auto; min-width: 0; }
  .crtab-search-group { flex: 1 1 auto; width: auto; min-width: 0; }

  /* Dates/Format each get their own full-width row, but only the pill strip inside
     scrolls -- the label stays put (same idea as wireToolbarScrollArrows elsewhere in
     this file, just pure-CSS since this is touch scrolling, not desktop click-arrows) */
  .crtab-rail { flex-wrap: wrap; padding: 10px 10px; }
  .crtab-filter-group { flex: 1 1 100%; min-width: 0; }
  .crtab-rail-divider { display: none; }
  .crtab-filter-group .crtab-pillgroup {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 10px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  }
  .crtab-filter-group .crtab-pillgroup::-webkit-scrollbar { display: none; }
  .crtab-filter-group .crtab-pillgroup .crtab-pill { flex: 0 0 auto; }

  .crtab-rail .crtab-pills-panel.crtab-toolbar .group {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 10px;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  }
  /* wireToolbarScrollArrows swaps this group to arrow-nav -- must out-specificity the unwired
     rule directly above (same selector length otherwise loses to it despite coming later). */
  .crtab-rail .crtab-pills-panel.crtab-toolbar .group.crtab-arrows-wired {
    overflow-x: visible;
    padding-right: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .crtab-rail .crtab-pills-panel.crtab-toolbar .group::-webkit-scrollbar { display: none; }
  .crtab-rail .crtab-pills-panel.crtab-toolbar .group .crtab-pill { flex: 0 0 auto; }

  /* Row spacing only affects the desktop table layout */
  .crtab-pop-density { display: none !important; }

  /* Display becomes a bottom sheet with a backdrop */
  .crtab-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .38);
    z-index: 100003;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
  }
  .crtab-menu-anchor.open .crtab-menu-backdrop { opacity: 1; pointer-events: auto; }
  .crtab-display-pop {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 82dvh;
    border-radius: 14px 14px 0 0;
    z-index: 100004;
    transform: translateY(16px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .crtab-display-pop::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--crtab-line-strong);
    margin: 8px auto 0;
  }
  .crtab-display-pop button.crtab-switch, .crtab-pop-drill { padding-block: 8px; }

  /* page actions fold into the "⋯" dropdown */
  .crtab-actions-more { display: inline-flex !important; }
  .crtab-actions {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 2px;
    min-width: 190px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--crtab-line-strong);
    border-radius: 10px;
    box-shadow: 0 14px 34px -12px rgba(var(--crtab-shadow-rgb), .4);
    z-index: 50;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .crtab-actions-anchor.open .crtab-actions { visibility: visible; opacity: 1; pointer-events: auto; }
  .crtab-actions .crtab-pill {
    border: 0;
    box-shadow: none;
    border-radius: 6px;
    padding: 9px 10px;
    font-size: 12.5px;
    font-weight: 500;
    justify-content: flex-start;
    text-align: left;
  }
  .crtab-actions .crtab-pill:hover { box-shadow: none; }
  .crtab-row1-divider { display: none; }
  .crtab-view-seg .crtab-seg-label { display: none; }
  .crtab-view-seg button { padding: 7px 10px; }
  .crtab-display-btn-label { display: none; }
  .crtab-display-btn { padding: 6px 10px !important; }

  .crtab-active-row { padding: 6px 10px; }
}

/* Compound selector: .crtab-toolbar's own unconditional display:flex has equal specificity, so a
   plain .crtab-collapsible-panel rule could lose depending on source order. */
.crtab-collapsible-panel,
.crtab-toolbar.crtab-collapsible-panel {
  display: none;
}
.crtab-collapsible-panel.open,
.crtab-toolbar.crtab-collapsible-panel.open {
  display: flex;
}
.crtab-legend-panel.open {
  flex-direction: column;
  gap: 6px;
  background: var(--crtab-chrome);
  border-top: 1px solid var(--crtab-line);
  padding: 12px 18px;
  margin: 0;
}
.crtab-legend-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.crtab-legend-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--crtab-warm-muted);
}
.crtab-legend-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--crtab-warm-muted);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.crtab-legend-close:hover { background: var(--crtab-chrome-b); color: var(--crtab-warm-text); }

.crtab-value-pill-clear {
    font-size: 10px; line-height: 1.25; padding: 6px 4px; margin: 0;
    color: var(--expand-label-color); border: none; background: transparent; box-shadow: none;
    cursor: pointer; text-decoration: none; font-weight: 700;
}
.crtab-value-pill-clear:hover { color: var(--crtab-chrome-text); }

.crtab-legend-row { display: flex; gap: 8px; font-size: 12px; line-height: 1.4; }
.crtab-legend-row strong { flex: 0 0 150px; color: var(--crtab-chrome-text); }
.crtab-legend-row span { color: var(--text-muted); }

.crtab-actions-toggle,
.crtab-pills-toggle,
.crtab-legend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.crtab-actions-toggle[aria-expanded="true"],
.crtab-pills-toggle[aria-expanded="true"],
.crtab-legend-toggle[aria-expanded="true"] {
  background: var(--crtab-chrome-open-bg);
  border-color: var(--crtab-chrome-open-border);
  color: var(--crtab-chrome-text-strong);
}
.crtab-actions-toggle .crtab-actions-caret,
.crtab-pills-toggle .crtab-actions-caret,
.crtab-legend-toggle .crtab-actions-caret {
  display: inline-block;
  transition: transform 0.15s ease;
}
.crtab-actions-toggle[aria-expanded="true"] .crtab-actions-caret,
.crtab-pills-toggle[aria-expanded="true"] .crtab-actions-caret,
.crtab-legend-toggle[aria-expanded="true"] .crtab-actions-caret {
  transform: rotate(180deg);
}

/* Bulk-edit toolbar (row selection -> set one field on all selected rows) */
#crtab-bulk-toolbar { background: #fff7e6; border: 1px solid #f0d9a6; border-radius: 6px; padding: 8px 15px; margin: 0 0 12px; }
body.dark-skin #crtab-bulk-toolbar { background: #3a2f14; border-color: #6b5726; }
#crtab-bulk-count { font-size: 12px; font-weight: 700; color: var(--crtab-chrome-text); margin-right: 4px; }
#crtab-bulk-field, #crtab-bulk-value { height: auto; padding: 6px 10px; font-size: 12px; border-radius: 20px; }
/* crdb.css's .form-control sets flex:1, which overrides a <select>'s native width-to-widest-option sizing -- undo it so the field auto-sizes correctly as more bulk-editable fields get added */
#crtab-bulk-field { flex: 0 0 auto; width: auto; min-width: 110px; }
#crtab-bulk-value { width: 160px; max-width: 100%; }
#crtab-bulk-apply:disabled { opacity: 0.5; cursor: not-allowed; }
.crtab-skin .tabulator .tabulator-cell.col-select,
.crtab-skin .tabulator .tabulator-col.col-select .tabulator-col-content { padding: 0; text-align: center; overflow: visible !important; }
/* guards against inherited appearance:none/opacity resets elsewhere -- the checkbox was getting silently hidden */
.crtab-skin .tabulator .col-select input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    width: 16px;
    height: 16px;
    margin: 0;
    opacity: 1;
    accent-color: var(--accent, #ad1111);
    cursor: pointer;
}

/* crdb.css forces a global !important min-width sized for the old page's wider button layout -- override with higher specificity, which wins the tiebreak between two !important rules */
.crtab-skin .tabulator .col-actions { padding-left: 2px; padding-right: 2px; }
.crtab-skin .tabulator .col-actions .btn,
.crtab-skin .tabulator .col-actions .edit-button,
.crtab-skin .tabulator .col-actions .delete-button,
.crtab-skin .tabulator .col-actions .expand-button,
.crtab-skin .tabulator .col-actions .cover-url-button {
    min-width: 32px !important;
    width: 32px;
    padding: 4px !important;
    margin: 0 1px !important;
    font-size: 12px !important;
}

/* dupecheck/trimsize badge positioning (.cr-form-group-badge) and status color (.cr-text-success/-danger)
   are shared with the old Manage page's version of this same modal -- see admin.css */
#cr-manage-add-book-modal textarea#cr-manage-Collects.form-control { height: 10em; }

/* mobile: keep each toolbar group to one horizontally-scrollable row instead of wrapping every pill onto its own line and stacking into a huge sticky header */
@media screen and (max-width: 768px) {
  .crtab-toolbar {
    gap: .5rem;
    padding: 10px 12px;
  }
  .crtab-toolbar .group,
  .crtab-toolbar-toggles,
  .crtab-pill-scroll {
    width: 100%;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: .35rem;
    padding: 0 6px 2px;
  }
  .crtab-toolbar .group::-webkit-scrollbar,
  .crtab-toolbar-toggles::-webkit-scrollbar,
  .crtab-pill-scroll::-webkit-scrollbar { display: none; }
  .crtab-toolbar .group > *,
  .crtab-toolbar-toggles > *,
  .crtab-pill-scroll > * { flex: 0 0 auto; }
  .crtab-toolbar .group label {
    position: sticky;
    left: 0;
    background-color: var(--crtab-toolbar-bg);
    padding-right: 6px;
    z-index: 1;
    /* Own compositing layer -- without this, mobile Safari/Chrome lets pills show through mid-scroll. */
    transform: translateZ(0);
    will-change: transform;
  }
  .crtab-toolbar .btn {
    padding: 5px 11px;
    font-size: 10.5px;
  }

  .crtab-actions-toggle,
  .crtab-pills-toggle,
  .crtab-legend-toggle {
    padding: 5px 11px;
    font-size: 10.5px;
  }
  .crtab-toolbar-toggles {
    margin: 4px 0;
  }
  /* row scrolls horizontally here, so there's no fixed "right edge" to pin to -- let it flow inline like every other toggle button instead of floating off past the visible area */
  .crtab-toolbar-toggles-right {
    margin-left: 0;
  }

  /* Right-edge-only fade cue; masks (not background) so it shows over the opaque pills. */
  .crtab-toolbar .group,
  .crtab-toolbar-toggles,
  .crtab-pill-scroll {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 16px), transparent);
  }

  /* wireToolbarScrollArrows: outer stops scrolling, .crtab-pill-scroll takes over. */
  .crtab-toolbar .group.crtab-arrows-wired,
  .crtab-toolbar-toggles.crtab-arrows-wired,
  .crtab-filter-group .crtab-pillgroup.crtab-arrows-wired {
    overflow-x: visible;
    padding-right: 0;
    padding-bottom: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .crtab-toolbar .group.crtab-arrows-wired label {
    position: static;
    transform: none;
    background-color: transparent; /* the sticky-label backdrop (#f7f7f7, the old flat toolbar's bg) doesn't match the rail's tan chrome bg -- static labels don't need a backdrop anyway */
  }
  .crtab-toolbar .group.crtab-arrows-wired > .crtab-pill-scroll,
  .crtab-toolbar-toggles.crtab-arrows-wired > .crtab-pill-scroll,
  .crtab-filter-group .crtab-pillgroup.crtab-arrows-wired > .crtab-pill-scroll {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  /* arrow wraps stay absolute-overlay (section 8) rather than occupying flex space -- see .crtab-scrollshadow-wrap comment there for why */
  .crtab-arrows-wired .crtab-scrollarrow {
    width: 20px;
    height: 20px;
    background: var(--surface);
    border: 1px solid var(--crtab-chrome-border);
    color: var(--crtab-chrome-text);
    font-size: 9px;
    box-shadow: none;
  }
  .crtab-arrows-wired .crtab-scrollarrow:hover {
    background: var(--crtab-chrome-hover-bg);
    border-color: var(--accent-color);
    color: var(--accent-color);
  }
  .crtab-arrows-wired.has-overflow-left .crtab-scrollarrow-wrap-left .crtab-scrollarrow,
  .crtab-arrows-wired.has-overflow-right .crtab-scrollarrow-wrap-right .crtab-scrollarrow {
    animation: none;
  }
}

.tabulator-cell.tabulator-editing input,
.tabulator-cell.tabulator-editing select {
  margin: 0; /* theme default gives bare <input> a 32px bottom margin (colormag-pro) -- that's the entire cause of the row growing when editing */
  background-color: var(--surface) !important;
  font-size: 12px !important;
  font-family: "Open Sans", sans-serif !important;
  letter-spacing: -0.2px !important; /* match .crtab-skin .tabulator-row's letter-spacing so editor text doesn't read larger than the display text */
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: auto !important;
  color: var(--expand-value-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 3px !important;
  padding: 2px 4px !important;
  box-sizing: border-box !important;
  font-weight: normal !important;
}

/* flashes before a row deletes itself ~400ms later, after a Status edit moves it out of the current watchlist view */
.tabulator-row.flash-red {
  background-color: #f8d7da !important;
  transition: background-color 0.3s ease-in-out;
}
body.dark-skin .tabulator-row.flash-red {
  background-color: #5a2328 !important;
}

/* FOC-date urgency (CRTabCore.focUrgencyClass) -- colors match admin.css's DB Stats scale, duplicated as literals since admin.css doesn't load on these public-facing pages */
.tabulator-cell.cr-foc-warning {
  background-color: #fffaf0 !important;
  box-shadow: inset 3px 0 0 #fab219;
  font-weight: 700;
}
.tabulator-cell.cr-foc-critical {
  background-color: #fdf1f1 !important;
  box-shadow: inset 3px 0 0 #d03b3b;
  color: #d03b3b;
  font-weight: 700;
}
body.dark-skin .tabulator-cell.cr-foc-warning {
  background-color: #3a3218 !important;
}
body.dark-skin .tabulator-cell.cr-foc-critical {
  background-color: #3a2020 !important;
}

.cr-expand-table tr.cr-foc-warning td,
.cr-expand-table tr.cr-foc-warning th {
  background-color: #fffaf0 !important;
}
.cr-expand-table tr.cr-foc-warning td {
  font-weight: 700;
}
.cr-expand-table tr.cr-foc-critical td,
.cr-expand-table tr.cr-foc-critical th {
  background-color: #fdf1f1 !important;
}
.cr-expand-table tr.cr-foc-critical td {
  color: #d03b3b;
  font-weight: 700;
}
body.dark-skin .cr-expand-table tr.cr-foc-warning td,
body.dark-skin .cr-expand-table tr.cr-foc-warning th {
  background-color: #3a3218 !important;
}
body.dark-skin .cr-expand-table tr.cr-foc-critical td,
body.dark-skin .cr-expand-table tr.cr-foc-critical th {
  background-color: #3a2020 !important;
}

/* Price Comp: cheapest of CGN Σ/PBC Σ/IST Σ per row (CRTabCore.highlightBestPrice). Reuses the
   same "good" green as admin.css's DB Stats tile scale (.cr-stat-tile--good) for consistency. */
.tabulator-cell.cr-best-price {
  color: #0ca30c;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 #0ca30c;
}

/* ==========================================================================
   8. Expand Quick View Panel (slide-in replacement for the expand modal,
      all 4 Tabulator pages -- see expandQuickViewPanel() in functions.php)
   ========================================================================== */

/* Generic slide-in-from-right panel shell, shared by the quick-view panel (.cr-expand-panel)
   and the help panel (.cr-help-panel) -- add new panels by pairing .cr-slide-panel with a
   panel-specific class for width/layout, not by copying these rules. */
.cr-slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0; /* anchored, not height:100% -- mobile browsers cache vh/% against the viewport with toolbar shown, leaving a gap once it retracts on scroll */
  height: 100dvh; /* belt-and-suspenders: overrides bottom above on browsers that support it, tracking the live visible viewport directly */
  background: var(--surface);
  box-shadow: -8px 0 24px rgba(var(--shadow-color-rgb), 0.18);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  z-index: 100000; /* above #wpadminbar's 99999 so the panel overlays the WP admin toolbar too */
  display: flex;
  flex-direction: column;
  width: min(600px, 100vw); /* matches Bootstrap's default .modal-dialog desktop width, so it reads as "the same popup, docked" */
}

.cr-slide-panel.show {
  transform: translateX(0);
  display: flex !important; /* bootstrap.css's generic .show{display:block!important} otherwise wins and kills the flex column, so cr-slide-panel-body's flex:1+overflow-y:auto never gets a bounded height to scroll within */
}


.cr-expand-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cr-slide-panel .modal-header,
.cr-slide-panel .modal-footer {
  flex-shrink: 0;
}

.cr-expand-panel-navbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: var(--zebra-bg);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.cr-expand-nav-btn {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.cr-expand-nav-btn:hover {
  background: rgba(var(--accent-color-rgb), 0.12);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

#expand-panel-position {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--expand-label-color);
  font-variant-numeric: tabular-nums;
}

.cr-expand-panel-navbar .close {
  /* .close is normally styled for the accent-color .modal-header bg (crdb.css) -- override for this zebra-bg row */
  color: var(--text-muted) !important;
  text-shadow: none !important;
  border: 1px solid var(--border-color) !important;
  opacity: 1 !important;
}

.cr-expand-panel-navbar .close:hover {
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.cr-slide-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; /* unset overflow-x computes to auto alongside overflow-y:auto, which was showing a horizontal scrollbar */
  -webkit-overflow-scrolling: touch;
}

#expand-update-log-loading,
#expand-update-log-empty,
#expand-update-log-error {
  padding: 10px 20px;
  font-size: 12px;
  color: var(--expand-label-color);
}

#expand-update-log-error {
  color: #a94442; /* matches Bootstrap .alert-danger text color */
}

/* Real 3-column data table (Date/Type/Change), unlike .cr-expand-table's 2-column key/value rows --
   reusing that class would force a fixed-width uppercase label column onto every header cell here. */
.cr-update-log-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.cr-update-log-table th {
  padding: 6px 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--expand-label-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  /* both !important: bootstrap.css's ".table > thead/tbody > tr > th/td" selector is more specific
     than this one and would otherwise win the border fight with its own hardcoded #ddd border-top
     (2px on th specifically) regardless of source order -- a plain reset here isn't enough */
  border: none !important;
  border-bottom: 1px solid var(--darker-border, #e0e0e0) !important;
}

.cr-update-log-table td {
  padding: 8px 20px;
  font-size: 12px;
  color: var(--expand-value-color);
  vertical-align: middle;
  border: none !important; /* same Bootstrap .table border-top reset as th above */
}

.cr-update-log-table tr:nth-child(even) { background: var(--zebra-bg, #f7f7f7); }
.cr-update-log-table tr:nth-child(odd) { background: var(--surface); }

.cr-slide-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 99999; /* just under the panel, still above #wpadminbar */
}

.cr-slide-panel-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* ColorMag scrolls the <html> element itself, not <body> -- overflow:hidden on body alone
   left the page scrollbar live behind the panel's own, so both are needed here */
html:has(body.cr-slide-panel-open),
body.cr-slide-panel-open {
  overflow: hidden;
}

.cr-help-panel-body {
  padding: 20px;
}

@media screen and (max-width: 580px) {
  .cr-slide-panel {
    width: 100%; /* not 100vw -- that includes the scrollbar gutter on non-overlay scrollbars, pushing this fixed+right:0 panel's left edge off-screen */
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-slide-panel,
  .cr-slide-panel-backdrop {
    transition: none;
  }
}

/* Full-viewport "Focus mode" overlay for the main table -- fixed positioning applies immediately
   (real layout box is full-size from the start, so Tabulator's redraw(true) doesn't need to wait
   on the transition). Opacity-only fade, deliberately no transform: scale() -- Tabulator's column-fit
   and row-virtualization math both read real layout measurements that a mid-transition scale() distorts
   (columns fit against a shrunk width, rows against a shrunk height), which either needs a janky
   second redraw once the transition settles or, as here, just doesn't happen in the first place because
   opacity never affects layout at all. */
.crtab-focus-mode {
  position: fixed;
  inset: 0;
  z-index: 100000; /* matches .cr-slide-panel, above #wpadminbar's 99999 */
  display: flex;
  flex-direction: column;
  height: 100dvh;
  /* border-box: .crtab-card's 1px border is otherwise added on top of the 100dvh content height,
     rendering 2px taller than the viewport with the overflow always spilling past the bottom edge */
  box-sizing: border-box;
  background: var(--surface);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.crtab-focus-mode.show {
  opacity: 1;
  pointer-events: auto;
}

/* Slide panels (quick-view, Help) share Focus mode's own 100000 z-index, so whichever last got
   reparented to <body> wins ties -- if Help (or quick-view) was ever opened before Focus mode even
   once, the panel ends up earlier in <body> than the Focus mode card, and the card then wins the tie
   and hides it completely, even though the panel is otherwise showing correctly underneath. Bumping
   both above Focus mode here (only while it's open) makes panels always win, regardless of DOM order. */
body.cr-focus-mode-open .cr-slide-panel {
  z-index: 100002 !important;
}
body.cr-focus-mode-open .cr-slide-panel-backdrop {
  z-index: 100001 !important;
}

/* #crtab-table's real sizing while in Focus mode is set directly in JS (openFocusMode/closeFocusMode
   in crtab-core.js), not here -- Tabulator writes its own height/max-height as an inline style and
   uses it to size its internal virtual-DOM scroll math, so overriding it via a CSS !important instead
   of Tabulator's own mechanism left that math measuring against an unbounded/unmeasured height and
   rendered the entire dataset unclamped instead of just the visible window. */
/* the CLS-reserving 75dvh min-height would override that JS height and skew its measurement */
.crtab-focus-mode #crtab-table {
  min-height: 0;
}

/* Gallery's own height is also set in JS the same way (CRTabCore._sizeFocusModeChild) -- this just
   gives the wrapper its scrollbar. #crtab-gallery itself keeps its normal, unconstrained grid layout;
   outside Focus mode the whole page scrolls it, so nothing here applies until Focus mode sets a height. */
.crtab-focus-mode #crtab-gallery-viewport {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  .crtab-focus-mode {
    transition: none;
  }
}

/* TODO: hide site header/intro copy behind body.cr-focus-mode-open once the live theme's actual
   header/content selectors are confirmed -- not done yet since no ColorMag header class appears
   anywhere else in this stylesheet to copy. Not strictly required for the visual result: the
   overlay above is already opaque, full-viewport, and z-indexed above everything including
   #wpadminbar, so nothing underneath is visible regardless. */

/* ==========================================================================
   9. Watchlist Dashboard ([cr_watchlist_dashboard]) -- plain HTML widgets, no
      Tabulator instance, so this page only loads this stylesheet, not the JS.
   ========================================================================== */

.cr-dashboard {
  max-width: 1100px;
  margin: 0 auto;
}

.cr-dash-tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.cr-dash-tile {
  flex: 1 1 140px;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.cr-dash-tile-value {
  display: inline-block;
  max-width: 100%;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-color);
  white-space: nowrap; /* lets the fit-text JS measure real overflow instead of letting it wrap first */
}

.cr-dash-tile-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--expand-label-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.cr-dash-upcoming {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

/* single scrollable row instead of a wrapping grid -- CRTabCore._buildScrollArrows (dashboard.js)
   overlays the click-to-scroll arrows on .cr-gallery-scroll-wrap; touch devices swipe instead */
.cr-dash-upcoming .cr-gallery-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 12px;
  padding: 0 0 2px; /* overrides base .cr-gallery-grid's 18px horizontal card-inset padding, which isn't wanted here */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
}
.cr-dash-upcoming .cr-gallery-grid::-webkit-scrollbar { display: none; }
.cr-dash-upcoming .cr-gallery-card {
  flex: 0 0 130px;
}

.cr-gallery-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-color);
}

.cr-dash-columns {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* right-hand column: FOC/Breakdown/Trivia stacked vertically -- column direction means no cross-axis stretch, so each card keeps its own natural height */
.cr-dash-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 320px;
  min-width: 280px;
}
.cr-dash-stack .cr-dash-col {
  flex: none; /* override the row-context flex-basis below -- in a column parent that would set height, not width */
  min-width: 0;
}

.cr-dash-col {
  flex: 1 1 320px;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
}

.cr-dash-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted-strong);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
}

.cr-dash-heading-sub {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--expand-label-color);
  font-size: 11px;
  margin-left: 6px;
}

/* same active/hover language as .crtab-toolbar .btn.active, a fresh copy since the dashboard doesn't load into a .crtab-toolbar context */
.cr-dash-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.cr-dash-pill {
  font-size: 11px;
  padding: 4px 12px;
  line-height: 1.25;
  background: var(--surface);
  color: var(--chrome-text);
  border: 1px solid var(--chrome-border);
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.cr-dash-pill:hover {
  background: var(--chrome-hover-bg);
  border-color: var(--chrome-hover-border);
  color: var(--chrome-text-strong);
}
.cr-dash-pill.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}
.cr-dash-pill.active:hover {
  background: var(--accent-hover);
}

.cr-dash-empty {
  color: var(--expand-label-color);
  font-size: 12px;
  margin: 0;
}

.cr-dash-foc-list,
.cr-dash-feed {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

/* FOC Reminders item: same meta-gutter (date) + content-column (title, publisher tag) shape as
   the Recent Activity feed -- consistent pattern, not a wrapping single row. */
.cr-dash-foc-item {
  display: flex;
  gap: 10px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--darker-border);
  font-size: 12px;
}
.cr-dash-foc-item:last-child {
  border-bottom: none;
}

.cr-dash-foc-meta {
  flex: 0 0 74px;
}

.cr-dash-foc-date {
  font-variant-numeric: tabular-nums;
  color: var(--expand-label-color);
}

.cr-dash-feed-date {
  font-variant-numeric: tabular-nums;
  color: var(--expand-label-color);
  /* no flex-basis here -- .cr-dash-feed-date lives in .cr-dash-feed-meta's column layout, where
     flex-basis would size height, not width; sizing that column belongs to .cr-dash-feed-meta itself */
}

/* FOC content is title + publisher tag sharing one line (title truncates to make room) --
   unlike the feed's content column below, a tag alone on its own line was mostly empty space. */
.cr-dash-foc-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cr-dash-feed-content {
  flex: 1;
  min-width: 0; /* lets the title's text-overflow:ellipsis actually clip instead of forcing the flex item wider */
}

.cr-dash-foc-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--text-muted-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-dash-foc-content .crtab-publisher-tag {
  flex: 0 0 auto; /* never shrinks/truncates -- the title gives up room instead */
}

.cr-dash-feed-book {
  font-weight: 600;
  color: var(--text-muted-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

/* metadata gutter (date over type badge) beside a content column (title over change detail), instead of cramming everything onto one wrapping line */
.cr-dash-feed-item {
  display: flex;
  gap: 10px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--darker-border);
  font-size: 12px;
}
.cr-dash-feed-item:last-child {
  border-bottom: none;
}

.cr-dash-feed-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 0 0 84px;
}

.cr-dash-feed-change {
  margin-top: 2px;
  color: var(--expand-label-color);
  font-variant-numeric: tabular-nums;
}

/* Watchlist Breakdown: a small horizontal bar per publisher/format, sized relative to the
   group's own max count (not a shared scale across both groups). */
.cr-dash-breakdown-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--expand-label-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
}
.cr-dash-breakdown-label-spaced {
  margin-top: 16px;
}

.cr-dash-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}

.cr-dash-bar-label {
  flex: 0 0 90px;
  color: var(--chrome-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-dash-bar-track {
  flex: 1;
  height: 8px;
  background: var(--zebra-bg);
  border-radius: 4px;
  overflow: hidden;
}

.cr-dash-bar-fill {
  height: 100%;
  background: var(--accent-color);
  border-radius: 4px;
}

.cr-dash-bar-count {
  flex: 0 0 auto;
  min-width: 18px;
  text-align: right;
  color: var(--expand-label-color);
  font-variant-numeric: tabular-nums;
}

/* Watchlist Trivia: title + a single stat value, no date/tag gutter needed like the other lists. */
.cr-dash-trivia-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cr-dash-trivia-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}

.cr-dash-trivia-title {
  flex: 1;
  min-width: 0;
  color: var(--text-muted-strong);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-dash-trivia-value {
  flex: 0 0 auto;
  color: var(--accent-color);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* generic-element variants of B5's FOC urgency classes (that CSS is scoped to .tabulator-cell
   and .cr-expand-table tr; this is a third, plain-list context using the same color values) */
.cr-dash-foc-item.cr-foc-warning {
  background-color: #fffaf0;
  box-shadow: inset 3px 0 0 #fab219;
}
.cr-dash-foc-item.cr-foc-critical {
  background-color: #fdf1f1;
  box-shadow: inset 3px 0 0 #d03b3b;
}
.cr-dash-foc-item.cr-foc-critical .cr-dash-foc-title {
  color: #d03b3b;
}
body.dark-skin .cr-dash-foc-item.cr-foc-warning {
  background-color: #3a3218;
}
body.dark-skin .cr-dash-foc-item.cr-foc-critical {
  background-color: #3a2020;
}

#cr-dash-feed-load-more {
  font-size: 11px;
  padding: 6px 14px;
  line-height: 1.25;
  background: var(--surface);
  color: var(--chrome-text);
  border: 1px solid var(--chrome-border);
  border-radius: 20px;
  text-transform: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
#cr-dash-feed-load-more:hover {
  background: var(--chrome-hover-bg);
  border-color: var(--chrome-hover-border);
  color: var(--chrome-text-strong);
}
#cr-dash-feed-load-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media screen and (max-width: 600px) {
  .cr-dash-tile {
    flex: 1 1 calc(50% - 6px);
  }
}

/* ==========================================================================
   10. Gallery View (Main/Upcoming + Watchlist, CRTabCore.wireViewToggle) -- an
       alternate cover-art-forward card layout for #crtab-table's data.
   ========================================================================== */

.cr-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px 18px 20px; /* horizontal padding matches the rest of .crtab-card's content (row1/rail use the same 18px) -- this had none, so cards sat flush against the card's border */
}

.cr-gallery-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.cr-gallery-card:hover,
.cr-gallery-card:focus {
  border-color: var(--accent-color);
  box-shadow: 0 4px 10px rgba(var(--shadow-color-rgb), 0.1);
  outline: none;
}

.cr-gallery-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--zebra-bg, #f0f0f0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cr-gallery-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cr-gallery-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.cr-gallery-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--expand-value-color);
  line-height: 1.3;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cr-gallery-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cr-gallery-format {
  font-size: 11px;
  color: var(--expand-label-color);
}

.cr-gallery-date {
  font-size: 11px;
  color: var(--expand-label-color);
  margin-top: auto;
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* Group by Solicited/Week (Gallery mode) -- header + body are direct children of .cr-gallery-grid,
   so each spans the full grid width; .cr-gallery-group-body re-declares the card grid for its own cards. */
.cr-gallery-group-header {
  grid-column: 1 / -1;
  padding: 8px 10px;
  margin-top: 8px;
  background: var(--zebra-bg, #f0f0f0);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--expand-label-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cr-gallery-group-header::before {
  content: "▾";
  transition: transform 0.15s ease;
}
.cr-gallery-group-header.collapsed::before {
  transform: rotate(-90deg);
}
.cr-gallery-group-body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

@media screen and (max-width: 600px) {
  .cr-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }

  .cr-gallery-group-body {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }

  .cr-dash-upcoming .cr-gallery-card {
    flex-basis: 120px;
  }
}