/* ============================================================
   GENERAL PAGE + TABLE
============================================================ */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--packet-bg);
  color: var(--packet-text);
  font-family: var(--font-family-base);
}

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body > h1 {
  margin: 10px 20px;
}

/* MAIN CONTENT AREA */
.main-content {
  padding: 0 30px;
  transition: padding var(--transition-fast);
}
@media (max-width: 768px) {
  .main-content {
    padding: 0 2.5dvw;
    transition: padding var(--transition-fast);
  }
}

#condimenttable {
  width: 100%;
  padding-left: 2dvw;
  padding-right: 2dvw;
}

div.dt-container {
  width: 100%;
  /*overflow: auto;*/
}
#condimenttable_wrapper {
  padding-right: 20px;
}

.page-container {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* ============================================================
   THUMBNAILS + GRID MODE
============================================================ */
.thumbnailsizeandtrim,
.landscapethumbnailsizeandtrim {
  display: block;
  height: var(--thumb-size);
  width: auto;
  object-fit: contain;
  background: var(--thumb-bg);
  transition: transform 300ms ease, width 150ms ease, height 150ms ease;
}

/* Landscape rotation */
img.landscapethumbnailsizeandtrim {
  transform: rotate(90deg);
}

.thumb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--thumb-size);
  transition: transform 0.05s linear;
}

.thumb-wrap:hover {
  transform: scale(var(--thumb-hover-scale));
}

/* Thumbnails-only grid for DataTables rows */
#condimenttable.thumbnails tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  gap: 4px;
}

/* When sort stack is active, override spacing */
.sorting-active #condimenttable.thumbnails tbody {
  justify-content: flex-start !important;
}

/* Only show first TD (the thumbnail) */
#condimenttable.thumbnails tbody td:not(:first-child) {
  display: none !important;
}

/* Justification filler */
#condimenttable.thumbnails tbody::after {
  content: "";
  flex-grow: 999999999;
}

/* Indent headers */
tr.stack-header-row > td.stack-header-cell {
  cursor: pointer;
  padding-left: /*calc(10px + var(--level, 0) * var(--chunk-indent))*/ 10px !important;
}

/* Each row item is inline-block/flex-friendly */
#condimenttable.thumbnails tbody tr {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
}

/* Indent first thumbnail (and in each row) in chunk */
#condimenttable.thumbnails tbody tr.first-in-chunk .thumb-wrap,
#condimenttable.thumbnails tbody .thumb-wrap.first-in-chunk-row {
  margin-left: calc(5px + var(--level, 0) * var(--chunk-indent)) !important;
}

#condimenttable.thumbnails tbody tr.last-in-chunk {
  margin-bottom: 6px;
}

#condimenttable.thumbnails tbody tr.last-in-chunk:not(.stack-header-row) {
  margin-bottom: 6px;
}

/* Hide grid header */
#condimenttable.thumbnails thead {
  display: none !important;
}

/* ============================================================
   CHUNK BARS + COLLAPSE
============================================================ */

/* Layer that holds all the vertical bars */
.chunk-bar-layer {
  position: absolute;
  z-index: 0;
}

/* Individual vertical bar for a chunk */
.chunk-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px; /* overridden in JS */
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  cursor: pointer;
  margin-left: calc(var(--stack-level) * 10px);
  opacity: 1; /* 0 if you want to enable fade in*/
  transition: opacity 220ms ease-out, filter 50ms linear, height 120ms ease-out;
}
/* Fade-in class
.chunk-bar.fade-in {
  opacity: 1;
}*/

.chunk-bar:hover {
  filter: brightness(2);
}

.chunk-toggle-button {
  position: absolute;
  top: 4px;
  left: -2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--packet-text);
  font-weight: bold;
  text-align: center;
  line-height: 18px;
  cursor: pointer;
  z-index: 4;
}

/* Provides indents for sort stack chunk headers */
tr.color-header-row,
tr.stack-header-row {
  width: 100%;
  background: #222;
  color: white;
  padding: 6px 10px;
  margin: 10px 0 4px;
  font-weight: bold;
}

tr.collapsed,
tr.collapsed .thumb-wrap {
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
  height: 0 !important;
}

/* ============================================================
   SAUCE METADATA
============================================================ */
.sauce-meta {
  border-bottom: none;
  position: relative;
}

/* Inject the Zigzag Line */
.sauce-meta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px; /* The vertical height of the zigzags */

  /* Inherit dynamic theme color */
  background-color: var(--color-accent);

  /* 🛠️ THE MASK: An inline SVG that cuts the background into a 2px thick line */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><polyline points="0,6 5,1 10,6" fill="none" stroke="black" stroke-width="2"/></svg>')
    repeat-x;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><polyline points="0,6 5,1 10,6" fill="none" stroke="black" stroke-width="2"/></svg>')
    repeat-x;

  -webkit-mask-size: 6px 6px; /* Width (6px) and Height (6px) of one "tooth" */
  mask-size: 6px 6px;
}

.sauce-meta-toggle {
  width: 100%;
  padding: 12px 4px;
  font-weight: bold;
  font-size: 1.25em;
  display: flex;
  justify-content: left;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--packet-text);
}

.sauce-meta-body {
  overflow: hidden;
  transition: max-height 200ms ease;
}

.sauce-meta.collapsed .sauce-meta-body {
  max-height: 0;
}

.sauce-meta:not(.collapsed) .sauce-meta-body {
  max-height: 500px; /* safe upper bound */
}

.sauce-meta-content {
  padding: 0 8px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.sauce-meta-citation {
  opacity: 0.8;
  font-size: var(--font-size-xxxs);
}
/* =========================================
   TALLY MASTER CLEAR BUTTON (Pill Shape)
   ========================================= */
/* DYNAMIC FONT SIZING BASED ON SLOT CONTEXT & SCREEN SIZE */

/* Base Sizing (Desktop)*/
.tally-text-default {
  font-size: var(--font-size-lg);
}
.tally-text-active {
  font-size: var(--font-size-md);
}

/* Mobile Adjustments (Under 768px) */
@media (max-width: 768px) {
  /* Squeezed inside the header (Standard Sauce Pages) */
  .tally-text-default {
    font-size: var(--font-size-md);
  }
  .tally-text-active {
    font-size: var(--font-size-xs);
  }

  /* PARENT OVERRIDE: Expanded in the full-width slot (Brand/Collection Pages) */
  #mobileMetaTallySlot #metaPanelTally div,
  #mobileMetaTallySlot #metaPanelTally span {
    font-size: var(--font-size-lg) !important;
  }
}

.meta-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* UNIVERSAL PILL STYLING */
.meta-tally-wrapper {
  display: flex;
  height: 24px;
  align-items: center;
  flex-shrink: 0;
  background: white;
  color: black;
  padding: 2px 8px;
  border-radius: 30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

#metaPanelTally {
  text-align: center !important;
}

.meta-tally-wrapper .tally-clear-btn {
  background: rgba(255, 0, 0, 0.85);
  border-color: rgba(0, 0, 0, 0.2);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-left: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
  position: relative; /* Anchors the ::after hitbox */
}

.meta-tally-wrapper .tally-clear-btn:hover {
  background: rgba(255, 0, 0, 0.6);
}

.metaTallyMover {
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none; /* Keep it non-interactive while invisible */
}

.metaTallyMover.visible {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================
     THE INVISIBLE HITBOX (48x48px Touch Target)
     ========================================= */
.meta-tally-wrapper .tally-clear-btn::after {
  content: "";
  position: absolute;
  /* This pushes the invisible clickable area outward by 12px in all directions */
  top: -12px;
  bottom: -12px;
  left: -12px;
  right: -12px;
  /* background: rgba(0,255,0,0.3); border-radius: 50%; */
}

/* =========================================
     MOBILE FULL-WIDTH SLOT OVERRIDES
     ========================================= */
#mobileMetaTallySlot {
  width: 100%;
  margin-top: 12px;
  margin-bottom: 8px;
  box-sizing: border-box;
  display: none; /* Hidden by default */
}

#mobileMetaTallySlot .meta-tally-wrapper {
  justify-content: center;
  position: relative; /* Anchors the right-aligned button below */
}

/* 🔥 PIN CLEAR BUTTON TO RIGHT EDGE ON FULL-WIDTH PILLS */
#mobileMetaTallySlot .tally-clear-btn {
  position: absolute;
  right: 4px; /* Docks it cleanly inside the right edge of the white pill */
  margin-left: 0; /* Overrides the 4px desktop margin */
}

/* Center title text on mobile ONLY if this page is allowed to use the mobile slot */
$ {
  canUseMobileSlot ? ` @media (max-width: 768px) {
    .meta-title-wrapper {
      justify-content: center;
      padding-right: 0;
    }
  }
  `: ``;
}

/* ============================================================
   MODAL (DESKTOP)
============================================================ */
/* Prevent scrolling */

body.filter-dragging,
body.filter-panel-open {
  overflow: hidden;
  touch-action: none;
}

/* Container inside table cell */
.packet-row-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

/* keep swatch from stretching weirdly */
.packet-swatch-wrap {
  flex: 0 0 auto;
}

/* let palette take remaining space and right-align */
.packet-palette-wrap {
  width: 100%;
}

/* Hide the magnifying glass button container entirely */
div.dtsp-searchPane div.dtsp-searchButtonCont {
  display: none !important;
}

/* Make each filter pane grow inside .dtsp-searchPane */
#dtFilters .dtsp-searchPane .dt-container,
#dtFilters .dtsp-searchPane .dt-layout-row,
#dtFilters .dtsp-searchPane .dt-layout-cell,
#dtFilters .dtsp-panesContainer,
#dtFilters .dtsp-searchPanes {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Hide global "Clear All", "Show All" */
.dtsp-panesContainer button.dtsp-clearAll,
.dtsp-panesContainer button.dtsp-showAll,
.dtsp-panesContainer button.dtsp-collapseAll {
  display: none !important;
}

/* Remove DT’s internal forced heights */
.dtsp-dataTable {
  max-height: none !important;
}

/* Gap between filter pane input and clear button */
div.dtsp-topRow,
#paneSearchWrapper .dt-search {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Search icon + input grouping */
.dtsp-searchPane .dtsp-searchCont {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
}

/* Override DataTables bold for SearchPane inputs */
div.dtsp-searchPane div.dtsp-searchCont input.dtsp-paneInputButton.dtsp-search {
  font-weight: normal !important;
  flex-basis: auto !important;
}

/* Override DataTables blue box around focued search inputs */
div.dtsp-searchPane div.dtsp-searchCont input.dtsp-paneInputButton.dtsp-search,
.dt-input:focus {
  outline: none !important;
}

.dtsp-name {
  white-space: unset;
}

/* ============================================================
   CARDVIEW MODE
============================================================ */
#condimenttable.cardview {
  width: 100% !important;
}

#condimenttable.cardview tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 8px 0;
}

#condimenttable.cardview thead {
  display: none !important;
}

/* The Card Wrapper */
#condimenttable.cardview tbody tr {
  display: block;
  width: 100%;

  /* Swapped to the 'dark' variant for better text contrast! */
  background: var(--packet-accent-dark, #1a1a1a);

  /* Optional: You can use the 'light' or 'medium' for the border so it pops! */
  border: 1px solid var(--packet-accent-medium, #333);

  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  margin: 0;
  padding-bottom: 4px;
  text-align: center;
  line-height: 1.1;

  transition: transform 0.25s ease, box-shadow 0.4s ease;
  position: relative;
}

#condimenttable.cardview tbody tr:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  z-index: 2;
  cursor: pointer;

  /* 2. THE HOVER: Extremely snappy and eager */
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}

/* --------------------------------------------------------
   SYNCED THUMBNAIL ANIMATION 
-------------------------------------------------------- */
#condimenttable.cardview tbody .thumb-wrap:hover {
  transform: scale(1);
}

#condimenttable.cardview tbody tr .thumb-wrap {
  transition: transform 0.25s ease !important;
}

#condimenttable.cardview tbody tr:hover .thumb-wrap {
  transform: scale(var(--thumb-hover-scale, 1.25)) !important;
  transition: transform 0.05s ease-out !important;
}

/* ========================================================
   MINI-TABLE TEXT STYLING (INLINE FLOW)
======================================================== */

/* Base reset: Make all TDs flow like sentences */
#condimenttable.cardview tbody td {
  display: inline !important;
  border: none !important;
  padding: 0 !important;
}

/* 1st TD: The Thumbnail */
#condimenttable.cardview tbody td:nth-child(1) {
  display: block !important; /* Force the image to its own block */
  padding: 8px 4px !important;
  background: #000;
}

/* ========================================================
   MINI-TABLE TEXT STYLING (INLINE FLOW)
======================================================== */

/* Base reset: Make all TDs flow like sentences */
#condimenttable.cardview tbody td {
  display: inline !important;
  border: none !important;
  padding: 0 !important;
}

/* 1st TD: The Thumbnail */
#condimenttable.cardview tbody td:nth-child(1) {
  display: block !important;
  padding: 8px 4px !important;
  background: #000;
  border-radius: var(--radius-sm);
}

/* Line 1: Brand/Franchise + Variation (2nd & 3rd TDs) */
#condimenttable.cardview tbody td:nth-child(2),
#condimenttable.cardview tbody td:nth-child(3) {
  font-size: 0.7rem;
  font-weight: bold;
  color: #fff;
}
#condimenttable.cardview tbody td:nth-child(3)::before {
  content: " "; /* Space between Brand and Variation */
}
#condimenttable.cardview tbody td:nth-child(3)::after {
  content: "\A"; /* Force a line break */
  white-space: pre;
}

/* Line 2: ID + Form Factor (4th & 5th TDs) */
#condimenttable.cardview tbody td:nth-child(4),
#condimenttable.cardview tbody td:nth-child(5) {
  font-family: monospace;
  font-size: 0.6rem;
  color: #aaa;
}
#condimenttable.cardview tbody td:nth-child(5) {
  text-transform: capitalize; /* Automatically turns "packet" into "Packet" */
}
#condimenttable.cardview tbody td:nth-child(5)::before {
  content: " - "; /* Dash between ID and Form Factor */
}
#condimenttable.cardview tbody td:nth-child(5)::after {
  content: "\A"; /* Force line break */
  white-space: pre;
}

/* Line 3: Date + Location (6th & 7th TDs) */
#condimenttable.cardview tbody td:nth-child(6),
#condimenttable.cardview tbody td:nth-child(7) {
  font-size: 0.6rem;
  color: #aaa;
}
#condimenttable.cardview tbody td:nth-child(7)::before {
  content: " - "; /* Dash separator between Date and Flag */
}
/* ============================================================
   TABLEVIEW MODE
============================================================ */
#condimenttable.tableview tbody {
  display: table-row-group !important;
}

#condimenttable.tableview tbody tr {
  display: table-row !important;
}

#condimenttable.tableview td {
  display: table-cell !important;
  padding: 8px 6px;
  border-bottom: 1px solid var(--packet-border);
}

#condimenttable.tableview tbody tr.collapsed {
  display: none !important;
}

#condimenttable.tableview img.thumbnailsizeandtrim {
  height: 60px;
  width: auto;
}

/* Allow default datatables look */
#condimenttable.tableview + .dataTables_wrapper .dataTables_info,
#condimenttable.tableview + .dataTables_wrapper .dataTables_paginate {
  display: block !important;
}

/* ============================================================
   MOBILE
============================================================ */
@media (max-width: 768px) {
  #condimenttable {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .sauce-meta-toggle {
    padding: 10px 0px;
  }

  .packet-pair {
    grid-template-columns: 1fr;
  }

  .packet-page-mode {
    position: relative !important;
    width: 100dvw !important;
    height: calc(100dvh - var(--titlebar-height-mobile)) !important;

    /* kill modal centering */
    top: auto !important;
    left: auto !important;
    transform: none !important;

    /* keep modal visuals */
    border-radius: var(--radius-lg);
    grid-template-columns: 1fr min(60%, 700px);
  }

  .packet-modal-title {
    margin: 0 0 10px 0;
    font-size: clamp(18px, 1.1cqw, 24px);
  }

  .perf-svg {
    height: 7px;
  }
}

/* To audit */
img.thumbnailsizeandtrim {
  display: block;
  height: var(--thumb-size);
  width: auto;
  object-fit: contain;
  background: #000;
  /* let JS / .color-reordering control transition for reorders */
  transition: transform 300ms ease;
}

/* Make sure rotated element still reserves space cleanly */
#condimenttable.thumbnails tbody td.landscape-row {
  display: inline-block; /* already used in your grid */
  vertical-align: top;
}

/* Landscape packet: rotate wrapper AND give proper bounding box */
.landscape-thumb {
  transform-origin: center center;

  display: flex; /* allow rotated box to occupy correct space */
  align-items: center;
  justify-content: center;

  width: var(--thumb-size); /* swapped dimensions */
  height: calc(var(--thumb-size) / 1.35) !important;
}

.landscape-thumb:hover {
  transform: scale(1.06) !important;
}

/* During reordering, we still neutralize hover if you want */
#condimenttable.color-reordering .thumb-wrap {
  pointer-events: none; /* no hover while animating */
}

table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td {
  padding: 0px !important;
}

/* DataTables default styling tweaks */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate {
  display: none !important;
}

/* Prevent wrapping EVER */
.dtsp-searchPane .dtsp-topRow * {
  white-space: nowrap;
}