table.deals {
  table-layout: fixed;
  width: 100%;
}
/*
 Because of issues hiding header borders with 'border-collapse: collapse'
 this approach is to implement border-collapse manually and it takes multiple steps:
   1. table resets borders
   2. borders are placed on the BOTTOM and RIGHT of every cell including header
   3. remove the double border on the LAST column of every row
   4. remove the double border on the LAST row of the table
*/
table.deals {
  border-collapse: separate;
  xborder-collapse: collapse;

  border-spacing: 0;
  border: 1px solid #888;  /* outer border of entire table */
}
/*  2. borders are placed on the BOTTOM and RIGHT of every cell including header */
table.deals th,
table.deals td {
  border-bottom: 3px solid white;  /* scott, fixme, transparent makes them dissappear or pickup color of the cell ?? */
  border-right: 3px solid white;  /* maybe because of border-box, border is inside the box, so transparent get box color */
  /* transparent almost worked, still would need to fix the header background color bleeding through on the th cells */
  xborder-bottom: 3px solid transparent;  /* scott, fixme, transparent makes them dissappear or pickup color of the cell ?? */
  xborder-right: 3px solid transparent;
  /* CRITICAL: Stops the cell color from bleeding under the border */
  background-clip: padding-box;
 }
/* 3. Remove the right border for the LAST column in every row */
table.deals th:last-child,
table.deals td:last-child {
  border-right: none;
}
/* 4. Remove the bottom border for the LAST row */
table.deals tr:last-child th,
table.deals tr:last-child td {
  border-bottom: none;
}
/* border that is between the two header rows */
/* border collapsing is making this so it only works on the first header row ?? */
table.deals th {
  xborder-bottom: hidden;
  border-bottom: 2px solid #888;  /* working */
  border-bottom: 2px solid #fff;

}
/* Add a border before the first row of the table body only as a seperator */
table.deals tbody tr:first-child td {
  xborder-top: 2px solid red;  /* scott removed this, its part of body, so dissappears when scroll with sticky headers */
}
/* ------ this completes the border styling ------ */

/* default for EVERY CELL, place this at top */
table.deals th,
table.deals td { /* this also fixed the overflow hidden */
  xword-wrap: break-word; /* Prevents long text from breaking the layout */  /* this fixed the not honoring widths */
  vertical-align: top;
  text-align: left;
  padding-left: 0.2rem; /* scott, fixme, this ends up applying to the navbar and footer th colspan row */
  padding-right: 0.2rem; /* scott, fixme, this ends up applying to the navbar and footer th colspan row */
  xoverflow: hidden;
  xtext-overflow: ellipsis;
  xwhite-space: nowrap;  /* this might prevent dates from breaking on a hyphen */
  xdisplay: inline-block;  /* this really messes things up */
}

/* scott experimenting with headers */
/* off for now as I lost my sticky headers */
table.deals th {
  /* next 2 were not noticable*/
  font-weight: 600; /* Use a explicit numeric weight instead of 'bold' to keep width identical */
  -moz-osx-font-smoothing: grayscale; /* Softens sub-pixel tracking constraints in Firefox */
  /* this help at tiny bit with firefox, not safari */
  letter-spacing: -0.02em; /* Gives the text a tiny bit of breathing room at boundary scales */
  /* these next 2 seem best option */
  white-space: nowrap;
  overflow: hidden;
  padding-right: 1px;
}

table.deals .column-headers th i {
  font-size: 0.9rem;
  color: blue;
}


/* short name class to hide the element since browsers dont handling hiding columns consistently */
/* scott, fixme, should be at end of css, just in case another rule changes something */
table.deals th.X,
table.deals td.X {
  visibility: collapse;
  display: none;
}


table.deals caption {
  caption-side: bottom;  /* default top */
  xtext-align: center; /* default center? Controls horizontal alignment */
}


table.deals thead tr {
  background-color: #d8d8d8;
}
table.deals th,
table.deals td {
  background-color: transparent;  /* so can color columns */
}

/*
While the col classes work for background color, the real purpose
is so JavaScript can target them so can turn on/off the entire column.
They are not used for styling due to the limited properties and how they handle width.


So for the deals table, I'm thinking, one colgroup, no group name, its only
purpose is technically because col must be within a colgroup.
Then for EACH column, a COL element with a unique class.
The only purpose of this col element/class is so that the column can be
completely hidden using JavaScript.  Because the css styling available to
a col is so minimal, the css styling will still be done using
fixed harcoded nth-child() selectors.  This will complicate the table
if the code generating the dynamic HTML is to need different columns
or column orders.

*/


/* stops */
 /* this gets used for stops */
table.deals td.st ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column; /* Stacks items vertically */
  /* First value = Row gap (vertical), Second value = Column gap (horizontal) */
  gap: 0px 12px;
  padding: 0;
  list-style: none;
}

table.deals td.st ul li {
  /* Optional: set a minimum/maximum width if desired, or let it fit content */
  flex: 0 1 auto;
  margin: 0;
  line-height: 1.2;
}

table.deals td.st ul + ul {
  border-top: 1px dashed #999;  /* Styled as a dashed line */
  border-top: 1px solid #999;  /* Styled as a dashed line */
  padding-top: 2px;            /* Space between divider and second list */
  margin-top: 2px;             /* Space between first list and divider */
}

/* for sold out amounts */
table.deals td.s {
  color: red;
  text-decoration-line: line-through;
  text-decoration-thickness: 0.5px; /* Controls the thickness 0.5 very thin */
  text-decoration-color: red;     /* Optional: Controls the color (if different) */
  font-size: 1.1em;
}  /* soldout price */


/* tags */
 /* this gets used for tags */
table.deals td.tg ul {
  display: flex;        /* Aligns items on one line */
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
}

table.deals td.tg ul li.B2B {color: red;}
table.deals td.tg ul li.B2B {color: purple;}
table.deals td.tg ul li.OBC {color: green;}
table.deals td.tg ul li.ABC {color: blue;}
table.deals td.tg ul li.SXM {color: blue;}
table.deals td.tg ul li.T55 {color: brown;}
table.deals td.tg ul li.OUT {color: red; text-decoration: line-through;}


table.deals tbody tr.even {xbackground-color: #e0e0e0; background-color: rgba(200, 200, 200, 0.20);}
table.deals tbody tr.odd  {xbackground-color: #f8f8f8;}
table.deals tbody tr.color-row {background-color: yellow;}  /* testing for expandable rows */


/* at end of css because above classes also touch background color */
/* for testing only, Purple class */
table.deals th.P,
table.deals td.P {
  background-color: #B19CD9;
}


/* ID, DD, DA, DE, CL, CS, PO, ST, IN, OC, BA, TO, PP, ZS, TG */

/* color groups */
table.deals th.id, table.deals td.id,
table.deals th.dd, table.deals td.dd,
table.deals th.da, table.deals td.da,
table.deals th.de, table.deals td.de {
  background-color: rgba(173,216,230, 0.60);  /* lightblue 173,216,230 */
}
/* color groups */
table.deals th.cl, table.deals td.cl,
table.deals th.cs, table.deals td.cs,
table.deals th.po, table.deals td.po,
table.deals th.st, table.deals td.st {
  background-color: rgba(255,182,193,0.20);  /* lightpink 255,182,193 */
}
/* color groups */
table.deals th.in, table.deals td.in,
table.deals th.oc, table.deals td.oc,
table.deals th.ba, table.deals td.ba,
table.deals th.to, table.deals td.to,
table.deals th.pp, table.deals td.pp {
  background-color: rgba(144,238,144,0.20); /* lightgreen 144,238,144 */

}
/* color groups */
table.deals th.zs, table.deals td.zs {
  background-color: rgba(147,112,219,0.20); /* lavender 230,230,250 */ /* mediumpurple 147,112,219 */
}
/* color groups */
table.deals th.tg, table.deals td.tg {
  background-color: rgba(255,255,224,0.40);    /* lightyellow 255,255,224 */
}

/* scott, fixme, we could set the fonts and alignment above and override for headers or do it separately */

table.deals th.id, table.deals td.id {
  text-align: center;
  font-size: 0.9em;
}

/* Dates headers and body */
table.deals th.dd, table.deals td.dd,
table.deals th.de, table.deals td.de {
  xtext-align: left;  /* td default ?? */
}
table.deals th.da, table.deals td.da {
  text-align: center;
}

/* Dollar Amounts */
table.deals th.in, table.deals td.in,
table.deals th.oc, table.deals td.oc,
table.deals th.ba, table.deals td.ba,
table.deals th.to, table.deals td.to,
table.deals th.pp, table.deals td.pp,
table.deals th.zs, table.deals td.zs {
  text-align: right;
}

/* Numbers BODY only */
table.deals td.id,
table.deals td.dd,
table.deals td.da,
table.deals td.de {
  font-family: "Roboto"; /* suggested for dates and dollar amounts */
  font-variant-numeric: tabular-nums;
}
/* Dollar Amounts BODY only */
table.deals td.in,
table.deals td.oc,
table.deals td.ba,
table.deals td.to,
table.deals td.pp,
table.deals td.zs {
  font-family: "Roboto"; /* suggested for dates and dollar amounts */
  font-variant-numeric: tabular-nums;
}

/* table.deals.XL */
/* do not use these on the first heading row as that is colspan */
/* ship */
/* scott, fixme, max-width not possible when width is specified on col element because it has already decided the width */
table.deals th:nth-child(6), table.deals td:nth-child(6) {
  max-width: 40px;  /* not working */
  xbackground-color: blue;
}
table.deals th:nth-child(7), table.deals td:nth-child(7) {
  max-width: 10px; /* not working */
  xbackground-color: blue;
}







/* Scrollable wrapper */
.main-container {
  xborder: 3px solid red;  /* whole container for debug */
  position: relative;
}

/* Base table styling */
xdeals.table {
  width: 100%;
  border-collapse: separate; /* Required for sticky borders to work properly */
  border-spacing: 0;
}

/* The main header (Title + Pagination) */
/* this header actually is working, it will stick */
/* I cant get the 2nd header to stick, even when this header is not present */
.sticky-header-row {
  position: sticky;
  top: 0;
  z-index: 2; /* Keeps the header above data while scrolling */
}

.sticky-header-row th {
}

/* google AI had to back track and correct itself haha */
/* do not put display flex on the row because the row needs to be display: table-row */
/* instead put it on the th element */

.header-content {
  box-sizing: border-box;
  padding: 0;
}

deals.table thead {
  position: sticky;

}
.column-headers {
  position: sticky;
  top: 40px;
  z-index: 1; /* Keeps the header above data while scrolling */
}
.column-headers th {
  xborder-bottom: 4px solid yellow;   /* does not show up, except with important */
  xborder-bottom: 4px solid orange !important;   /* does not show up, except with important */
  border-bottom: 2px solid #888 !important;   /* does not show up, except with important */
  border-bottom: 2px solid #000 !important;   /* does not show up, except with important */
  border-bottom: 2px solid #fff !important;   /* does not show up, except with important */

}


/* Individual column headers (ID, Name, etc.) */
.xcolumn-headers th {
  position: sticky;
  xtop: 56px; /* Offset by the height of the main header row */
  top: 40x; /* Offset by the height of the main header row */
  z-index: 1;
  padding: 10px 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  font-size: 0.80em; /* this works */
}

/* Pagination UI */
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: space-between;
  padding: 12px 5px;
  height: 40px;  /* this works */  /* scott must match the top: above on column-headers */
  background-color: #d8d8d8;

}

.page-indicator {
  padding-left: 20px;
  padding-right: 20px;
}

/* Configure the main header cell as a vertical container */
.hdr-split {
  xdisplay: inline-flex;  /* Keeps table layout intact while utilizing flex tools */
  xdisplay: flex;  /* Keeps table layout intact while utilizing flex tools */

  xflex-direction: column;
  xalign-items: stretch;   /* Ensures internal divs stretch to full cell width */
  xpadding: 0;             /* Remove padding so internal borders hit the edges */
}

/* Style the internal simulated rows */
.hdr-split .hdr-top,
.hdr-split .hdr-bot {
  xpadding: 8px 12px;      /* Move padding here to keep text spaced correctly */
  xtext-align: center;
}

/* Add a visual horizontal divider between the two internal divs */
.hdr-split .hdr-top {
  xborder-bottom: 1px solid #ccc;
}

/* Optional: Align standard headers to look vertically centered next to split headers */
.hdr-top{
  xbackground-color: red;
  vertical-align: top;
}
/* Optional: Align standard headers to look vertically centered next to split headers */
.hdr-mid {
  vertical-align: middle;
}
/* Optional: Align standard headers to look vertically centered next to split headers */
.hdr-bot {
  vertical-align: bottom;
}
.hdr-sml {
  font-size: 0.85em;
}
.hdr-center {
  text-align: center;
}
.hdr-left {
  text-align: left;
}
.hdr-right {
  text-align: right;
}





/* Expandable row styling */
table.deals tr.detail-row {
  padding: 0;  /* why is the td above overriding this ?? */
  display: none; /* Hidden by default */ /* scott is this really needed *? */
}

/* Expandable row styling */
table.deals tr.detail-row td {
  padding: 0;  /* why is the td above overriding this ?? */
}


table.deals tr.detail-row.open {
  display: table-row; /* Shown when toggled */
}

table.deals tr.detail-row td {
  padding: 0;
  padding-left: 20px;
  padding-bottom: 10px;
  color: blue;
  cursor: default;  /* scott */
}

table.deals tr.detail-row td button {
  cursor: pointer;  /* scott */   /* links get a pointer, but button must inherit the default from above */
}

table.deals .detail-content {
  background: lightyellow;
  border: 2px solid black;
}


/* classes to dynamically apply to table to hide/show items */

table.deals.hide-tips i.fa-hand-holding-dollar {
  display: none;
}

table.deals.hide-filters i.fa-filter {
  display: none;
}

/* this works but button is still clickable */
table.deals.gray-prev button.deal-button-prev {
  background-color: #e0e0e0;
}


/*

The typical minimum size for a touch target is 44 to 48 pixels in both height and width,
correlating to a physical area of roughly \(9 \text{ mm}\) to \(10 \text{ mm}\) .
This dimension comfortably accommodates the average adult fingertip, preventing accidental taps on mobile devices.
Apple Human Interface Guidelines:
  Recommends a minimum touch target size of \(44 \times 44\) points for all interactive elements.
Google Material Design:
  Specifies a minimum touch target area of \(48 \times 48\) dp (density-independent pixels).
WCAG Accessibility (Target Size Minimum):
  Requires that the minimum size of a target for pointer inputs is at least \(24 \times 24\) CSS pixels,
  though this allows exceptions for elements embedded in lines of text.

other google:
Minimum button size should be 42 px (9×9 mm) for accessibility.
Comfortable button size is around 50 px (10×10 mm), matching the fingertip area.
Apple (44×44 pt), Google (48×48 dp), Microsoft (34×34 px + spacing) set size rules.
Spacing of 12-48 px between buttons prevents accidental taps and errors.
Visual Size vs. Touch Target Size
The visual size is what you see, while the touch target size is the actual area your finger can press.
For example, a button may have a visual size of 24×24 px, but accessibility guidelines
recommend a minimum touch target size of 44×44 px.
Apple suggests a minimum 44x44 points touch target. This size matches the average fingertip.
It can significantly reduce errors and make iOS apps easy, accurate, and more touch-friendly.
Google recommends 48x48 dp as the standard button size. This measurement ensures buttons remain
comfortable across different Android devices. It keeps layouts consistent and simple for every user.
Microsoft advises at least 34x34 pixels, with extra spacing around buttons.
This approach ensures better touch accuracy, especially on smaller devices,
and improves accessibility for users with larger fingers.
Placing buttons where the thumb naturally rests makes tapping effortless.
For example, on large phones, the bottom areas are more comfortable than the top.
Following this practice reduces strain and improves usability across many screen sizes.
Buttons should never be too close together. A spacing of 12 to 48 pixels is ideal
between two user interface elements. This gap prevents accidental touches,
reduces frustration, and ensures each button feels separate and visually balanced inside the layout.
Buttons should always respond when tapped. Feedback can be a color change, a shadow,
or a small animation. This gives users confidence that their touch worked,
creating trust and improving engagement in every app interaction.

*/


.nav-btn {
  padding: 6px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.2s;
}

.nav-btn:hover {
  background-color: #0056b3;
}

.nav-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}


button.deal-button {  /* defaults */
  /* when you style a button, you lose all the default browser styling for a button so set everything */
  /* scott, consider moving this to override or reset */
}

button.deal-button {  /* specifics after defaults above */
  /* when you style a button, you lose all the default browser styling for a button so set everything */
  border: 1px solid blue;
  border-style: outset;
  border-radius: 4px;
  line-height: 1.0rem;
  font-weight: bold;
  font-size: 0.8rem;
  padding-top: 0.5rem;
  padding-right: 1.0rem;
  padding-bottom: 0.5rem;
  padding-left: 1.0rem;
  xwidth: 4.0rem;  /* if I set width, I seem to lose the centering, probably padding overrides */
  xtext-align: center;
  xjustify-content: center;
  overflow: hidden;   /* might need this if rounded corners are appearing not to work */
}

/* from google */
button.deal-button {
  /* Crucial Layout Properties */
  display: inline-flex;
  align-items: center;      /* Centers icon and text vertically */
  justify-content: center;   /* Centers everything horizontally */
  gap: 8px;                  /* Creates uniform spacing between icon and text */
  /* Optional Styling */
  padding: 10px 5px;
  font-size: 0.8rem;
  background-color: #007bff;
  color: white;
  border: none;
  border: 1px solid #404040;
  border-radius: 4px;
  cursor: pointer;
  height: 32px;
}



/* just the icon of any deal-button */
button.deal-button i {
  xfont-size: 1.3rem;  /* if this is too big and is on the left of text, the button will position incorrectly */
  xfont-size: 1.0rem;  /* if this is any bigger than text font and is on the left of text, the button will position incorrectly */
  /* might need to look at padding and other things as this entire row has to be exactly a fixed pixel height */
}

/* just the prev button */
button.deal-button-prev {
  xbackground-color: lightyellow;
  xcolor: blue;
}
/* just the next button */
button.deal-button-next {
  xbackground-color: lightgreen;
  xcolor: white;
}



button.deal-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;  /* will not work if below pointer-events is none */
  xpointer-events: none; /* Ensures no hover/click effects */
}