/* ========================================================
   HOME REDESIGN - Modern responsive layout
   Uses existing theme variables from theme.css

   This file MUST load AFTER style.css and media-sizes.css
   to properly override conflicting styles.
   ======================================================== */


/* ==========================================================
   SECTION 1: HARD RESET - Kill all conflicting old CSS
   ========================================================== */

/* Reset zoom hacks from media-sizes.css */
.Homebuttons,
.endOfdaysContent,
.cashCountContents,
.unPaidContents,
.searchDiv,
.s_btn_product,
.table_headers,
.table-container,
.table-container-total,
.table-total-amount,
.upperButtons,
.lowerButtons,
.img-logo,
#container1,
#container2 {
  zoom: 1 !important;
  -moz-transform: none !important;
}

/* Kill position:absolute from old layout */
.table_buttons,
.table-container-total,
.searchInput_container,
.table_container_headers {
  position: relative !important;
  max-width: none !important;
}


/* ==========================================================
   SECTION 2: MAIN LAYOUT
   ========================================================== */
section {
  height: 100vh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  /* flow-root, not plain block: .home-container 10px margin used to collapse
     straight through this wrapper, so a 100vh section started 10px down the
     page and overflowed the viewport by exactly that much. The scrollbar that
     produced narrowed a 1024px terminal to ~1007px, which then tripped the
     narrow-screen stacking rules. flow-root contains the margin without
     clipping absolutely-positioned children the way overflow:hidden would. */
  display: flow-root !important;
}

.home-container {
  display: flex !important;
  height: calc(100vh - 20px) !important;
  width: calc(100vw - 20px) !important;
  margin: 10px !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  max-width: none !important;
}

/* Kill Bootstrap container-fluid padding */
.container-fluid.home-container {
  padding: 0 !important;
}

.d-flex-home {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  gap: 0 !important;
  min-height: auto !important;
  align-items: stretch !important;
}


/* ==========================================================
   SECTION 3: LEFT PANEL (container1)
   ========================================================== */
#container1 {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
  padding: 0 !important;
}


/* ==========================================================
   SECTION 4: SEARCH BAR
   ========================================================== */
.searchDiv {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  background: var(--secondary-color) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px 8px 0 0 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  position: relative !important;
}

/* Barcode icon */
.barcode-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--text-color);
}

.search_input {
  flex: 1 !important;
  padding: 10px 14px !important;
  background: var(--background-color) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  color: var(--text-color) !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.search_input:focus {
  border-color: var(--primary-color) !important;
}

.search_input::placeholder {
  color: #666 !important;
}

.wholeSaleRetailsBtn,
.overidePrice {
  border-radius: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  width: auto !important;
  overflow: visible !important;
}

/* Override Price = outline style (transparent bg, green border) */
.overidePrice {
  background: transparent !important;
  color: var(--primary-ink, var(--primary-color)) !important;
  border: 1.5px solid var(--primary-color) !important;
}

/* ==========================================================
   SECTION 5: TABLE - Matching proposal column grid
   Both header and body tables must use same % widths
   Proposal grid: SKU(80px) | ITEM(flex) | QTY(65px) | PRICE(80px) | TOTAL(90px)
   Actual has 7 cols: SKU | empty | ITEM | QTY | PRICE | empty(icon) | TOTAL
   Hide columns 2 and 6, then size the rest by percentage
   ========================================================== */
.table_headers {
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

.table_header_row {
  border: none !important;
  border-color: transparent !important;
}

.primary_color_table {
  background-color: var(--secondary-color) !important;
  color: var(--text-color) !important;
  border-bottom: 2px solid var(--primary-color) !important;
}

.primary_color_table th {
  color: var(--text-color) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 8px 14px !important;
}

/* Both tables: fixed layout with same column sizing */
#theads,
#tableTransactions {
  table-layout: fixed !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ---- Hide empty columns (2nd and 6th) in BOTH tables ---- */
#theads th:nth-child(2),
#theads th:nth-child(6),
#tableTransactions td:nth-child(2),
#tableTransactions td:nth-child(6) {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* ---- Column widths using % so both tables align ---- */
/* Col 1: SKU = ~7% */
#theads th:nth-child(1),
#tableTransactions td:nth-child(1) {
  width: 7% !important;
}

/* Col 3: ITEM/DESCRIPTION = auto (remaining %) */
#theads th:nth-child(3),
#tableTransactions td:nth-child(3) {
  width: auto !important;
}

/* Col 4: QTY = ~6% */
#theads th:nth-child(4),
#tableTransactions td:nth-child(4) {
  width: 6% !important;
  text-align: right !important;
}

/* Col 5: PRICE = ~7% */
#theads th:nth-child(5),
#tableTransactions td:nth-child(5) {
  width: 7% !important;
  text-align: right !important;
}

/* Col 7: TOTAL = ~8% */
#theads th:nth-child(7),
#tableTransactions td:nth-child(7) {
  width: 8% !important;
  text-align: right !important;
  font-weight: 700 !important;
}

/* Kill Bootstrap .col-* widths inside the tables */
#theads th[class*="col-"],
#tableTransactions td[class*="col-"] {
  flex: none !important;
  max-width: none !important;
}


/* ==========================================================
   SECTION 6: TABLE BODY (scrollable)
   ========================================================== */
.pos-transaction {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: none !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.table-container {
  flex: 1 !important;
  overflow-y: auto !important;
  background: var(--secondary-color) !important;
  position: relative !important;
  max-height: none !important;
  height: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
  font-size: inherit !important;
}

/* Hide scrollbar but keep scroll functionality */
.table-container::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

.table-container {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Override JS inline styles on product description cells.
   The product name is a bare text node inside the <td>, so it can't be styled
   on its own: the cell carries the name's weight and the barcode <p> below
   resets itself back to a lighter sub-text. The name stays at regular weight —
   it already separates from the barcode by size and colour, so bolding it too
   made the row shout.

   18px, well above the 13px the rest of the row uses: the item name is what
   the cashier and the customer actually read off the cart, often across a
   counter, so it is the one thing here that has to carry at a distance. The
   narrow-terminal tier in responsive-1024.css steps it down a little, which is
   only possible because this value lives here and not inline. */
#tbody-cashiering tr td.prod_desc {
  max-width: none !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Barcode / shelf / promo details under the product name — quiet sub-text.
   The colour and bold weight come from inline styles written by process.js,
   so both need !important to be undone here.

   --search-meta-color rather than a fixed rgba white: it is the theme's token
   for exactly this kind of muted meta text and it flips with light mode, where
   a translucent white would disappear into the background. */
#tbody-cashiering tr td.prod_desc #extraText {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--search-meta-color) !important;
  position: relative !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

#tbody-cashiering tr td.prod_desc #extraText span {
  font-weight: 400 !important;
}

#tbody-cashiering .selectable-row.selected td.prod_desc #extraText,
#tbody-cashiering .selectable-row.selected td.prod_desc #extraText span {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Override JS inline styles on SKU cell — reference data, not a headline */
#tbody-cashiering tr td#table-sku {
  max-width: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--search-meta-color) !important;
}

#tbody-cashiering .selectable-row.selected td#table-sku {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Amounts that the cashier reads off the row */
#tbody-cashiering tr td.cus-col-qty,
#tbody-cashiering tr td.cus-col-price {
  font-weight: 600 !important;
}

#tbody-cashiering tr td#totalRowPrice {
  font-weight: 700 !important;
}

.pos-transaction tbody {
  font-size: 13px !important;
  line-height: normal !important;
  text-transform: none !important;
}

.pos-transaction td,
.pos-transaction th {
  font-size: 13px !important;
}

#tbody-cashiering .selectable-row {
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid var(--hairline);
}

#tbody-cashiering .selectable-row:hover {
  background: rgba(255,255,255,0.03);
}

#tbody-cashiering .selectable-row.selected {
  background-color: var(--primary-color);
  color: var(--on-primary, #fff);
}

/* Override JS inline padding/height on all cells - vertically centered */
#tbody-cashiering tr td {
  padding: 6px 14px !important;
  vertical-align: middle !important;
  height: auto !important;
  line-height: 1.4 !important;
}


/* ==========================================================
   SECTION 7: TOTALS BAR
   ========================================================== */
.total_summary_amount {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  border: none !important;
  border-top: 2px solid var(--primary-color) !important;
  background: var(--secondary-color) !important;
  color: var(--primary-ink, var(--primary-color)) !important;
  margin: 0 !important;
  max-height: none !important;
  min-height: auto !important;
  height: auto !important;
  flex-shrink: 0 !important;
  border-radius: 0 0 8px 8px !important;
}

.summary-amount-row {
  display: contents !important;
  min-height: auto !important;
  max-height: none !important;
  height: auto !important;
}

.summary-amount-row > div {
  padding: 14px 8px !important;
  text-align: center !important;
  border-right: 1px solid var(--hairline) !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}

.summary-amount-row > div:last-child {
  border-right: none !important;
}

.summary-amount-row h6 {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--primary-ink, var(--primary-color)) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 2px !important;
}

.amount-text {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  margin: 0 !important;
  align-items: unset !important;
  justify-content: unset !important;
  gap: unset !important;
}

.text-value-of-retail,
.totalPayment {
  display: inline !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* Reset Bootstrap col classes inside totals */
.total_summary_amount .col-6,
.total_summary_amount .col-md-3 {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 10px 8px !important;
}

/* Old total style resets */
.table-total-amount {
  height: auto !important;
  line-height: normal !important;
  bottom: auto !important;
  position: relative !important;
  max-width: none !important;
}

.table-container-total {
  position: relative !important;
  bottom: auto !important;
  max-width: none !important;
  height: auto !important;
}


/* ==========================================================
   SECTION 8: RESIZER
   ========================================================== */
.resizer {
  width: 8px !important;
  height: auto !important;
  background: transparent !important;
  cursor: ew-resize !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
  user-select: none !important;
  z-index: 10 !important;
  position: relative !important;
}

.resizer span {
  display: block !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #666 !important;
  margin: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
}


/* ==========================================================
   SECTION 9: RIGHT PANEL (container2)
   Even gap: home-container margin=10px on all sides.
   No extra padding on container2 so right gap matches left.
   ========================================================== */
#container2 {
  width: 340px;
  min-width: 260px;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
  height: 100% !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

/* Hide container2 scrollbar */
#container2::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

#container2 {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}


/* ==========================================================
   SECTION 10: LOGO
   ========================================================== */
.img-logo {
  max-height: 20vh !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.image-container {
  margin: 8px !important;
}


/* ==========================================================
   SECTION 11: ACTION BUTTONS
   ========================================================== */
.table_buttons_1 {
  width: 100% !important;
  max-width: none !important;
  position: relative !important;
  border-spacing: 4px !important;
}

.table_buttons {
  position: relative !important;
  max-width: none !important;
  max-height: none !important;
}

.table_buttons_1 td {
  padding: 2px !important;
}

/* All button rows: same fixed height */
.table_buttons_1 tr,
.upperButtons tr,
.lowerButtons tr {
  height: 90px !important;
}

/* Buttons and cards fill the cell */
.table_buttons_1 td .homeButtons,
.table_buttons_1 td .full-height-btn,
.table_buttons_1 td button {
  height: 90px !important;
  min-height: 90px !important;
  max-height: 90px !important;
  display: flex !important;
  overflow: hidden !important;
}

.table_buttons_1 td .homeButtons .card {
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.homeButtons {
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  transition: all 0.15s !important;
  box-shadow: none !important;
}

.homeButtons:hover {
  border-color: rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.05) !important;
}

.homeButtons:active {
  transform: scale(0.97);
}

.homeButtons .card {
  border: none !important;
  border-radius: 8px !important;
  background-color: var(--secondary-color) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 6px !important;
  gap: 2px !important;
  margin: 0 !important;
}

/* Kill Bootstrap p-3 utility */
.homeButtons .card.p-3 {
  padding: 6px 6px !important;
}

/* Kill all margin/padding on icon wrappers inside buttons */
.homeButtons .card > div {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.homeButtons small {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  color: var(--text-color) !important;
  line-height: 1.3 !important;
}

/* Force ALL icons to same size */
.homeButtons svg {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
}


/* ==========================================================
   SECTION 12: STORE INFO
   ========================================================== */
.systemInformation {
  padding: 8px 10px !important;
}

.toSwitchUI {
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  background-color: var(--secondary-color) !important;
  box-shadow: none !important;
  max-height: none !important;
  height: auto !important;
  width: auto !important;
}

.infoSystem {
  font-size: 15px !important;
  font-family: inherit !important;
  text-align: left !important;
  color: var(--text-color) !important;
}

.infoSystem label {
  font-size: 15px !important;
  display: block !important;
  padding: 3px 0 !important;
}

.info-label {
  color: var(--information-color) !important;
  font-weight: 600 !important;
}

.info-value {
  color: var(--info-val-color) !important;
}


/* ----------------------------------------------------------
   STORE INFO — grid layout
   ----------------------------------------------------------
   Replaces the old two-column build, which stacked all the LABELS in one
   column and all the VALUES in another and relied on every value being
   exactly one line tall to stay aligned. It wasn't: "Software Name" already
   wrapped to two lines, so every label below it sat against the wrong value.

   A two-track grid binds each label to its own value, so a value that wraps
   pushes only its own row. Duplicated in assets/js/index.js, which re-renders
   this card wholesale on click — keep the two in step.
   ---------------------------------------------------------- */
.pos-info {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 10px;
  margin: 0;
  /* Breathing room on the left so the labels aren't flush against the card
     edge, and a matching inset on the right. */
  padding: 6px 16px 6px 18px;
  align-items: baseline;
}

.pos-info dt {
  color: var(--information-color);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
  white-space: nowrap;
}

.pos-info dd {
  color: var(--info-val-color);
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
  /* Long values (store names, the version string) wrap inside their own cell
     instead of stretching the card. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The clock reads in the same visual language as Settings > General > Date &
   Time: tabular figures so the seconds don't make the row jitter, and the time
   itself in the accent colour because that is the value people actually check. */
.pos-info .pos-info-clock {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pos-info .pos-clock-time {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0.2px;
}

.pos-info .pos-clock-date {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  opacity: 0.9;
}

/* Where the time came from — NTP, manual, or this machine's own clock. A quiet
   chip rather than another coloured signal: the dot already carries "is this
   OK", this only says "trusting what". */
.pos-info .pos-clock-src {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  line-height: 1.5;
}

:root.light-mode .pos-info .pos-clock-src {
  border-color: rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.55);
}

/* A quiet dot rather than a banner. Green = the posted time is verified;
   amber = running on this computer's clock, which is the state that used to go
   unnoticed all day. Cashiers can't fix it here, so it informs without nagging;
   the controls stay in Settings > General. */
.pos-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: #3fb950;
  box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.15);
}

.pos-status-dot.is-warn {
  background: #d9a441;
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.16);
}

.pos-status-dot.is-bad {
  background: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.16);
}

.pos-status-dot.is-off {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
}

.pos-info .pos-info-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Single column on narrow screens: the label sits above its value as a small
   caption instead of squeezing the value into a sliver. */
@media screen and (max-width: 575px) {
  .pos-info {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .pos-info dt {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-top: 8px;
  }

  .pos-info dt:first-child {
    margin-top: 0;
  }

  .pos-info dd {
    font-size: 15px;
  }
}


/* ==========================================================
   SECTION 13: LOWER BUTTONS
   ========================================================== */
.lowerButtons {
  margin-top: auto !important;
  width: 100% !important;
  position: relative !important;
  bottom: auto !important;
  margin-bottom: 0 !important;
}

.lowerButtons td {
  padding: 2px !important;
}


/* ==========================================================
   SECTION 14: SIDE PANEL MENU
   ========================================================== */
.menu-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background: var(--secondary-color);
  border-left: 1px solid rgba(255,255,255,0.07);
  z-index: 2001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -4px 0 20px rgba(0,0,0,0.4);
}

.side-menu.open {
  transform: translateX(0);
}

.side-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 2px solid var(--primary-color);
  flex-shrink: 0;
}

.side-menu-header .menu-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-ink, var(--primary-color));
  text-transform: uppercase;
  letter-spacing: 1px;
}

.side-menu-header .menu-close {
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  color: var(--text-color);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: none;
}

.side-menu-header .menu-close:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.side-menu-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  color: var(--text-color);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  border: none !important;
  background: none !important;
  width: 100%;
  text-align: left;
  font-family: inherit;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.menu-item:hover {
  background: rgba(255,255,255,0.04) !important;
  padding-left: 26px;
}

.menu-item .menu-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.7;
}

.menu-item .menu-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--text-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Version status strip -------------------------------------------------
   Sits between the menu items and the SETTINGS/SHUTDOWN footer. Four states,
   driven by [data-state] set from updater/badge.php:
     checking  neutral, shown until the probe answers
     current   confirmed up to date — quiet, informational only
     outdated  an update is waiting — the only state styled as actionable
     offline   couldn't reach the update server
   Only .is-actionable (set when the signed-in role may install) gets pointer
   affordances, so a cashier isn't invited to click something they can't do. */
/* ── BIR registration row (sits directly above the version strip) ─────────
   Only rendered on a terminal with no MIN/PTU yet, so it reads as a one-time
   setup task rather than a permanent menu entry. */
.menu-bir-row {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.menu-bir-row[hidden] {
  display: none;
}

.menu-bir-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: rgba(255,255,255,0.04);
  border: none;
  border-left: 3px solid var(--primary-color);
  color: var(--primary-color);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.menu-bir-btn:hover {
  background: rgba(255,255,255,0.08);
}

.menu-bir-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-bir-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Help & Support row (sits above the BIR row) ──────────────────────────
   Two lines: the sub-label names the product filter to pick on the support
   site, because the default "All" mixes in online-plan articles that don't
   apply to this offline POS. */
.menu-support-row {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.menu-support-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: rgba(255,255,255,0.04);
  border: none;
  border-left: 3px solid transparent;
  color: var(--text-color);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.menu-support-btn:hover {
  background: rgba(255,255,255,0.08);
}

.menu-support-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-support-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-support-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.menu-support-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
}

.menu-support-sub {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.6;
}

/* ── BIR registration modal ───────────────────────────────────
   The dialog itself is built from the shared tp-modal system in
   modal-redesign.css. Only the three pieces below are specific to this flow. */

/* One feedback line, reused for every outcome, so the operator always looks in
   the same place for the verdict. */
.bir-message {
  margin-bottom: 16px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--background-color);
  color: var(--text-color);
  font-size: 0.85rem;
  line-height: 1.5;
}
.bir-message.is-success {
  border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.bir-message.is-error {
  border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.bir-serial-note {
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--information-color);
}
.bir-serial-note strong {
  color: var(--text-color);
  font-weight: 600;
}

/* tp-warn-row was built for short numeric values and pins them to one line.
   Company names and addresses are far longer, so let them wrap here. */
#birDetails .tp-warn-value,
#birDoneDetails .tp-warn-value {
  white-space: normal;
  word-break: break-word;
  font-size: 0.92rem;
}
#birDetails .tp-warn-row,
#birDoneDetails .tp-warn-row {
  align-items: flex-start;
}

/* Green tick beside the serial that matched this terminal — the one line in
   the summary the operator actually has to verify. */
.bir-match {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-ink, var(--primary-color));
}

.menu-version {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  background: none;
  border-left: 3px solid transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.menu-version-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-version-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-version-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.menu-version-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
}

.menu-version-sub {
  font-size: 11px;
  line-height: 1.25;
  opacity: 0.6;
}

/* checking / offline — muted, no call to action */
.menu-version[data-state="checking"],
.menu-version[data-state="offline"] {
  color: var(--text-color);
  opacity: 0.55;
}

/* current — confirmed good. Deliberately understated: "nothing to do here". */
.menu-version[data-state="current"] {
  color: #4ade80;
}
.menu-version[data-state="current"] .menu-version-sub {
  color: var(--text-color);
}

/* outdated — the one state that should pull the eye */
.menu-version[data-state="outdated"] {
  color: var(--primary-color);
  background: rgba(255,255,255,0.04);
  border-left-color: var(--primary-color);
}
.menu-version[data-state="outdated"] .menu-version-sub {
  color: var(--text-color);
  opacity: 0.75;
}

/* Clickable only for roles that can actually run the install. */
.menu-version.is-actionable {
  cursor: pointer;
}
.menu-version.is-actionable:hover {
  background: rgba(255,255,255,0.08);
}

/* Soft pulse on the outdated icon — noticeable at a glance without the
   jitter of a hard blink on a screen that stays open all shift. */
.menu-version[data-state="outdated"] .menu-version-icon {
  animation: menuVersionPulse 2s ease-in-out infinite;
}

@keyframes menuVersionPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-version[data-state="outdated"] .menu-version-icon { animation: none; }
}

/* License strip (menu-license.js) — same anatomy as .menu-version, always
   actionable: it opens the license panel. */
.menu-license {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid var(--primary-color);
  flex-shrink: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  color: var(--primary-ink, var(--primary-color));
  background: rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.menu-license[hidden] {
  display: none;
}
.menu-license:hover {
  background: rgba(255,255,255,0.08);
}
.menu-license .menu-version-sub {
  color: var(--text-color);
  font-weight: 400;
  opacity: 0.75;
}
.menu-license[data-state="expiring"] {
  color: #f59f00;
  border-left-color: #f59f00;
}
.menu-license[data-state="expired"] {
  color: var(--accent-color);
  border-left-color: var(--accent-color);
}

/* License panel (menu-license.js) on the shared .tp-modal shell */
.lic-panel-contact {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-color);
}
.lic-panel-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--primary-ink, var(--primary-color));
  text-decoration: underline;
  cursor: pointer;
}
.lic-panel-key {
  margin-top: 16px;
}

.side-menu-footer {
  display: flex;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.menu-footer-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
  border: none !important;
  background: none !important;
  font-family: inherit;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.menu-footer-btn:first-child {
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}

.menu-footer-btn:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--primary-color);
}

.menu-footer-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-footer-btn.shutdown-btn:hover {
  color: var(--accent-color);
}


/* ==========================================================
   SECTION 15: RESPONSIVE BREAKPOINTS
   ========================================================== */

/* 1366px monitors */
@media screen and (max-width: 1399px) {
  #container2 { width: 300px; }
  .homeButtons .card { padding: 10px 4px !important; }
  .homeButtons small { font-size: 13px !important; }
  .homeButtons svg { width: 24px !important; height: 24px !important; }
  .amount-text { font-size: 1.05rem !important; }
}

/* Tablet landscape / small laptops */
@media screen and (max-width: 1279px) {
  #container2 { width: 260px; min-width: 220px; }
  .homeButtons .card { padding: 8px 3px !important; }
  .homeButtons small { font-size: 12px !important; }
  .homeButtons svg { width: 22px !important; height: 22px !important; }
  .amount-text { font-size: 0.95rem !important; }
  .infoSystem label { font-size: 13px !important; }
  /* Same step-down for the grid build, which uses dt/dd rather than label. */
  .pos-info { column-gap: 14px; row-gap: 8px; }
  .pos-info dt,
  .pos-info dd { font-size: 13px; }
  .search_input { font-size: 13px !important; padding: 8px 12px !important; }
  .primary_button_style.s_btn_product { padding: 8px 12px !important; font-size: 11px !important; }
  .primary_color_table th { font-size: 10px !important; padding: 7px 10px !important; }
  #tbody-cashiering tr td { padding: 8px 10px !important; }
  .pos-transaction td,
  .pos-transaction th { font-size: 12px !important; }
}

/* Tablet portrait / phones.
   Deliberately NOT 1023px: a 1024x768 terminal reports ~1007px of viewport
   once a vertical scrollbar appears, which used to drop the POS into this
   stacked layout and force cashiers to scroll mid-sale. Stacking now starts
   below 900px, well clear of a real 1024 screen. */
@media screen and (max-width: 900px) {
  .home-container,
  .d-flex-home {
    flex-direction: column !important;
  }

  #container1 {
    height: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
  }

  .resizer {
    width: 100% !important;
    height: 8px !important;
    flex-direction: row !important;
    cursor: ns-resize !important;
  }

  #container2 {
    width: 100% !important;
    height: auto !important;
    min-width: unset !important;
    border-top: 2px solid var(--primary-color) !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow-y: visible !important;
    padding: 0 !important;
  }

  .img-logo { display: none !important; }

  .upperButtons {
    flex: 1;
    min-width: 200px;
  }

  .lowerButtons {
    flex: 1;
    min-width: 200px;
    margin-top: 0 !important;
  }

  .pos-information {
    flex: 1;
    min-width: 250px;
  }

  .homeButtons .card { padding: 8px 4px !important; }
  .amount-text { font-size: 0.95rem !important; }
  .table-container { max-height: 50vh !important; }
  .side-menu { width: 280px; }
}

/* Small tablets (under 768px) */
@media screen and (max-width: 767px) {
  .searchDiv {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .searchDiv > div:first-child { display: none !important; }

  .search_input {
    flex-basis: 100% !important;
    font-size: 16px !important;
  }

  .wholeSaleRetailsBtn,
  .overidePrice {
    flex: 1;
  }

  .total_summary_amount {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #container2 {
    flex-direction: column !important;
  }

  /* Hide SKU column on small screens */
  #theads th:nth-child(1),
  #tableTransactions td:nth-child(1) {
    display: none !important;
  }

  .side-menu { width: 280px; }
}

/* Touch devices */
@media (pointer: coarse) {
  .homeButtons .card { padding: 12px 6px !important; min-height: 60px; }
  .homeButtons small { font-size: 14px !important; }
  .homeButtons svg { width: 26px !important; height: 26px !important; }
  .search_input { padding: 12px 14px !important; }
  #tbody-cashiering tr td { padding: 12px 14px !important; }
}

/* The add-on marker on a cart line. An add-on is attached to the item above
   it, so it is marked rather than indented: the description cell is a single
   ellipsised line and indenting would eat the name on a narrow terminal. */
#tbody-cashiering tr td.prod_desc .cart-addon-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-right: 2px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  border-radius: 6px;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
}