/* ==========================================================================
   1. Main Table Component Container Layout (Old .crTable mappings)
   ========================================================================== */

.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;
}

#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;
}

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

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

/* ==========================================================================
   2. Header Stack Layout (Old .crTable thead mappings)
   ========================================================================== */

.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) */
.crtab-skin .tabulator-row,
.crtab-skin .tabulator-cell {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.crtab-skin .tabulator-cell.tabulator-editing,
.crtab-skin .tabulator-cell.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;
  align-items: flex-start !important; /* inert -- .tabulator-cell isn't a flex container */
  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. Global Desktop Hover Expansion Transitions & Heights
   ========================================================================== */

@media only screen and (min-width: 1140px) {
  /* 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 */
  }

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

/* Portrait mobile layout policy (Everything wraps naturally on phones) */
@media screen and (max-width: 768px) {
  #crtab-table .tabulator-row,
  #crtab-table .tabulator-row .tabulator-cell {
    height: auto !important;
  }
  #crtab-table .tabulator .tabulator-cell:not(.col-actions) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
  }
}

/* ==========================================================================
   5. Mobile Card View (pure CSS reflow -- every column shows directly, none fold/collapse)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* Tabulator's base .tabulator-table is display:inline-block + white-space:nowrap unconditionally (for desktop horizontal scroll) -- both break card wrapping */
  #crtab-table .tabulator-table {
    display: block !important;
    white-space: normal !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #crtab-table .tabulator-tableholder {
    white-space: normal !important;
  }

  /* each row becomes a card: visible cells form the header line, the collapse panel becomes the body */
  #crtab-table .tabulator-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    background: var(--surface) !important;
    border: 1px solid var(--crtab-table-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(var(--crtab-shadow-rgb), 0.08) !important;
    margin: 10px !important;
    padding: 10px 12px !important;
  }

  #crtab-table .tabulator-row.tabulator-row-even,
  #crtab-table .tabulator-row:nth-child(even) {
    background: var(--surface) !important; /* zebra striping looks like noise once rows are cards */
  }

  /* desktop-only resize handles are still in the DOM as flex children here and wrap inconsistently, which was adding unpredictable row height and scrambling virtual-DOM scroll position */
  #crtab-table .tabulator-col-resize-handle {
    display: none !important;
  }

  /* Frozen cells (the action column) get their own zebra background on desktop -- reset that too. */
  #crtab-table .tabulator-cell.tabulator-frozen {
    background: var(--surface) !important;
  }

  /* #crtab-table id-selector outranks the desktop hover rule's background but not its color, leaving white-on-white -- override both together */
  #crtab-table .tabulator-row:hover {
    background: var(--surface) !important;
    color: var(--crtab-row-text) !important;
    box-shadow: 0 3px 8px rgba(var(--crtab-shadow-rgb), 0.14) !important;
  }
  #crtab-table .tabulator-row:hover .tabulator-cell a,
  #crtab-table .tabulator-row:hover .tabulator-cell a:hover {
    color: var(--accent-color, #ad1111) !important;
  }
  /* mobile-hover rule above forces accent-red text, which is invisible over the pill's own solid accent-red :hover bg -- requires :hover on the link itself, not the row, or unhovered pills get white-on-pink text too */
  #crtab-table .tabulator-row:hover .tabulator-cell a.crtab-aff-link:hover {
    color: #fff !important;
  }
  #crtab-table .tabulator-row:hover .tabulator-cell.col-release {
    color: var(--expand-label-color) !important;
  }
  #crtab-table .tabulator-row:hover .tabulator-cell.tabulator-frozen {
    background: transparent !important;
  }

  #crtab-table .tabulator-row .tabulator-cell {
    padding: 3px 4px !important;
    border: 0 !important;
  }
  /* Manage's bulk-edit selection checkbox -- sits first, ahead of the title, when bulk mode is on. */
  #crtab-table .tabulator-row .tabulator-cell.col-select {
    order: 0;
    flex: 0 0 auto !important;
  }
  #crtab-table .tabulator-row .tabulator-cell.col-title {
    flex: 1 1 100% !important;
    order: 1;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  #crtab-table .tabulator-row .tabulator-cell.col-release {
    order: 2;
    font-weight: 600 !important;
    color: var(--expand-label-color) !important;
  }
  #crtab-table .tabulator-row .tabulator-cell.col-watch,
  #crtab-table .tabulator-row .tabulator-cell.col-aff {
    order: 3;
    flex: 1 1 auto !important;
    text-align: right !important;
  }
  /* Tied with col-watch/col-aff so the expand button sits next to the date, matching Main. */
  #crtab-table .tabulator-row .tabulator-cell.col-actions {
    order: 3;
    position: static !important; /* drop Tabulator's frozen-column absolute positioning */
    left: auto !important;
  }

  /* fields with no cssClass of their own get tagged data-label by CRTabCore.applyMobileCardLabels and styled generically here instead of one cssClass per field */
  #crtab-table .tabulator-row .tabulator-cell[data-label] {
    order: 4;
    flex: 1 1 100% !important;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: end;
    column-gap: 8px;
  }
  /* Cover's thumbnail box has its own inline margin:0 auto for desktop centering, which beats any external rule regardless of specificity -- !important needed to flush it right here to match other columns */
  #crtab-table .tabulator-row .tabulator-cell[data-label].col-cover .cr-cover-thumb-box {
    margin: 0 0 0 auto !important;
  }
  #crtab-table .tabulator-row .tabulator-cell[data-label]::before {
    content: attr(data-label);
    justify-self: start;
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--expand-label-color);
    letter-spacing: 0.5px;
  }
  /* Stack to one column while editing -- an active input/select needs more room than a display value. */
  #crtab-table .tabulator-row .tabulator-cell[data-label].tabulator-editing {
    grid-template-columns: 1fr;
    justify-items: stretch;
    align-items: start;
    row-gap: 2px;
    height: auto !important;
    overflow: visible !important;
  }
  #crtab-table .tabulator-row .tabulator-cell[data-label].tabulator-editing::before {
    justify-self: start;
  }

  /* Comments (shown by default) can run long, so it always stacks + gets a height cap in its
     display state; the cap lifts while editing so it doesn't squeeze the input. */
  #crtab-table .tabulator-row .tabulator-cell.col-comments {
    grid-template-columns: 1fr;
    justify-items: start;
    row-gap: 2px;
    max-height: 4.2em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #crtab-table .tabulator-row .tabulator-cell.col-comments.tabulator-editing {
    max-height: none;
    overflow: visible;
  }
  #crtab-table .tabulator-row .tabulator-cell.col-comments::before {
    justify-self: start;
  }

}



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

.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: 6px !important;
  height: 6px !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: thin !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;
}

/* (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-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-warm-text: #e5e1db;
  --crtab-warm-muted: #a49d94;
  --crtab-warm-border-hover: #5a544c;
}

/* Full-width toggle: widens ColorMag's boxed shell itself (#page, .cm-container) rather than
   breaking the table out with 100vw, which has scrollbar-gutter offset issues on desktop. */
body.crtab-fullwidth #page {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.crtab-fullwidth .cm-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* ColorMag's sticky-nav script caches its own inline width (from #cm-primary-nav.outerWidth())
   at the moment it goes position:fixed, and only re-measures on the next unstick/restick --
   so it goes stale if the toggle fires while already stuck. Override it directly instead of
   trying to force the plugin to re-measure. */
body.crtab-fullwidth #cm-primary-nav {
  width: 100% !important;
  left: 0 !important;
}

/* 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: .4rem;
  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,
.crtab-pills-panel .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,
.crtab-pills-panel .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,
.crtab-pills-panel .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,
.crtab-pills-panel .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; }
#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 {
  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;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--crtab-line);
}

.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;
  width: 330px;
  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.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: 11px;
  padding: 6px 13px;
  line-height: 1.25;
  background: var(--surface);
  color: var(--crtab-warm-text);
  border: 1px solid var(--crtab-line-strong);
  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, transform .1s 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(--surface);
  border-color: var(--crtab-warm-border-hover);
  color: var(--crtab-warm-text);
  box-shadow: 0 1px 0 rgba(var(--crtab-shadow-rgb),.06), 0 3px 6px rgba(var(--crtab-shadow-rgb),.1);
  transform: translateY(-1px);
}
.crtab-pill:active { transform: translateY(0); 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 { transform: none; 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;
  transform: 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);
}

.crtab-menu-anchor { position: relative; flex: 0 0 auto; }
.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 10px 30px -10px rgba(var(--crtab-shadow-rgb), .35);
  padding: 6px;
  width: 220px;
  z-index: 50;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.crtab-menu-anchor.open .crtab-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.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-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--crtab-warm-muted);
  padding: 7px 10px 3px;
}
.crtab-menu hr { border: 0; border-top: 1px solid var(--crtab-line); margin: 5px 2px; }

.crtab-menu .btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  padding: 8px 10px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--crtab-warm-text);
}
.crtab-menu .btn i { opacity: .6; flex: 0 0 auto; width: 14px; text-align: center; line-height: 1; }
.crtab-menu .btn:hover { background: var(--crtab-chrome-b); border-color: transparent; color: var(--crtab-warm-text); }
.crtab-menu .btn.active { background: var(--accent-color); color: #fff; }

.crtab-menu-back {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--crtab-warm-muted);
  padding: 7px 8px 8px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.crtab-menu-back:hover { color: var(--crtab-warm-text); }

.crtab-menu-page-columns .crtab-pills-panel.crtab-collapsible-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 6px 2px;
  background: none;
  border: 0;
}

.crtab-rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--crtab-chrome);
  border: 1px solid var(--crtab-line);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 14px 18px 16px;
}
.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-pillgroup .crtab-pill { padding: 5px 10px; font-size: 10.5px; }
.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 travel together as one unit -- the badge alone on a line read as a
     stray, meaningless square */
  .crtab-toolbar-badge { order: -1; }
  .crtab-search-group { order: -1; 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 8px; }
  .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 .btn { flex: 0 0 auto; }

  .crtab-menu { width: min(220px, calc(100vw - 60px)); }
}

/* 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: 1px solid var(--crtab-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 18px 16px;
}
.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: 11px; 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-hover-bg);
  border-color: var(--crtab-chrome-hover-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;
  }
}

/* cosmetic only, no positioning -- Tabulator's own inline width/height:100% on the editor already fills the cell's padded content box */
.tabulator-cell.tabulator-editing input,
.tabulator-cell.tabulator-editing select {
  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);
}


.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: 24px;
  height: 24px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  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 {
  margin-left: auto;
  font-size: 11px;
  color: var(--expand-label-color);
  font-variant-numeric: tabular-nums;
}

.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;
}

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;
  }
}

/* ==========================================================================
   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 page only, 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;
}

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

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