/* Print only Product Catalog section */
@media print {
  /* Hide everything by default */
  body * {
    visibility: hidden;
  }
  /* Show Product Catalog section */
  #productCatalogSection,
  #productCatalogSection * {
    visibility: visible;
  }
  /* Move it to top-left for printing */
  #productCatalogSection {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  /* Hide controls in Product Catalog while printing */
  #productCatalogSection .controls {
    display: none !important;
  }
}
/* Smaller date line for Lamination inputs audit tray cells */
#lamInputs .lam-table td .lam-date {
  font-size: 0.85em;
}
/* Selects styled as tbutton: black text on white background */
select.tbutton {
  color: #000 !important;
  background-color: #fff !important;
  border-color: rgb(222, 222, 222) !important;
  border-width: 1px;
  border-style: solid;
}
/* Inputs styled as tbutton: match select visuals */
input.tbutton {
  color: #000 !important;
  background-color: #fff !important;
  border-color: rgb(222, 222, 222) !important;
  border-width: 1px;
  border-style: solid;
  height: 31px !important;
  line-height: 31px;
  font-size: 16px;
}
/* Trolley number input: use same colors as buttons */
#lamTrolleyNumber.tbutton {
  color: #fff !important;
  background-color: #316a98 !important;
}
/* Global select styles (height + size, no weight) */
select {
  height: 31px !important;
  min-height: 31px;
  line-height: 31px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 16px;
}
/* (Reverted) No global select overrides */
:root {
  --bg: #f4f4f4;
  --text: #333;
  --muted: #666;
  --border: #ccc;
  --table-head: #f2f2f2;
  --btn-bg: #f7f7f7;
  --btn-bg-hover: #eee;
  --ok: #0a7;
  --bad: #c00;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: white;
  color: var(--text);
  background-color: black;
}

h1 {
  margin: 0 0 12px;
  background-color: rgb(238, 238, 238);

  text-align: center;
  font-size: 50px;
  border-radius: 10px;
  padding: 7px;
}

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

.controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

button {
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  border-radius: 6px;
  cursor: pointer;
}
button:hover {
  background: var(--btn-bg-hover);
}

.hint {
  color: var(--muted);
  font-size: 0.9em;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: #fff;
}
table,
th,
td {
  border: 1px solid var(--border);
}
th,
td {
  padding: 10px;
  text-align: left;
}
th {
  background-color: var(--table-head);
}

tr.placeholder td {
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

input[type="text"],
input[type="number"] {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

input[readonly] {
  background: #f7f7f7;
}

#pasteCatcher {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
}

.status-ok {
  color: var(--ok);
  font-weight: 600;
}
.status-bad {
  color: var(--bad);
  font-weight: 600;
}

@media (max-width: 720px) {
  .controls {
    gap: 8px;
  }
  th,
  td {
    padding: 8px;
  }
}

:root {
  --bg: #f4f4f4;
  --text: #333;
  --muted: #666;
  --border: #ccc;
  --table-head: #f2f2f2;
  --btn-bg: #f7f7f7;
  --btn-bg-hover: #eee;
  --ok: #0a7;
  --bad: #c00;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: white;
  color: var(--text);
}

h1 {
  margin: 0 0 12px;
}

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

.controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

button {
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  border-radius: 6px;
  cursor: pointer;
}
button:hover {
  background: var(--btn-bg-hover);
}

.hint {
  color: var(--muted);
  font-size: 0.9em;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: #fff;
  table-layout: fixed;
}
table,
th,
td {
  border: 1px solid var(--border);
}
th,
td {
  padding: 10px;
  text-align: left;
}
th {
  background-color: var(--table-head);
}

tr.placeholder td {
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

input[type="text"],
input[type="number"] {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

input[readonly] {
  background: #f7f7f7;
}

#pasteCatcher {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
}

.status-ok {
  color: var(--ok);
  font-weight: 600;
}
.status-bad {
  color: var(--bad);
  font-weight: 600;
}

@media (max-width: 720px) {
  .controls {
    gap: 8px;
  }
  th,
  td {
    padding: 8px;
  }
}
.todo-btn {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
}
.todo-ok {
  background: #e6ffea;
  color: #137333;
  border-color: #b7e5c1;
}
.todo-bad {
  background: #ffecec;
  color: #a00;
  border-color: #f1b3b3;
}
#boxes_number {
  background-color: rgb(242, 255, 0);
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  padding-left: 0;
  padding-right: 0;
  width: 200px;
}
#prod_coming {
  background-color: rgb(0, 255, 238);
  text-align: center;

  font-weight: 800;
  font-size: 14px;
  padding-left: 0;
  padding-right: 0;
}
#prod_coming::placeholder {
  color: black;
}
#name_i {
  width: fit-content;
}
#sku_n {
  width: 50px;
  padding-left: 7px;
}
#week_supply {
  width: 60px;
}
/* ...existing code... */
@media print {
  [data-action="download-pdf"],
  #pasteBtn,
  #clearBtn,
  #pasteCatcher,
  .todo-btn,
  #skuForm button {
    display: none !important;
  }
  input,
  button,
  select,
  textarea {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* ...existing code... */
.sku-colour-select {
  padding: 2px 4px;
}

/* Optional: stronger border for contrast */
tr.colour-yellow td,
tr.colour-orange td,
tr.colour-green td,
tr.colour-red td {
  transition: background-color 0.25s;
}

#code_sku {
  width: 71px;
}
#name_sku {
  width: 270px;
}
#latestUpdate {
  font-size: 30px;
}

/* Highlight row for searched trolley */
.trolley-highlight td {
  background-color: #fffb8f; /* light yellow */
  transition: background-color 0.6s ease;
}

/* Section headers style for Product Catalogue, Lamination, Tray Up */
.section-head {
  margin: auto;
  margin-bottom: 20px;
  color: white;
  background-color: #316a98;
  text-align: center;
  font-size: 35px;
  border-radius: 10px;
  padding: 7px;
  width: 250px;
}
.butSize {
  font-size: 20px;
  font-weight: 700;
  margin-right: 10px;
}
#butColor {
  margin-top: 10px;
  margin-bottom: 10px;
}
#stock,
#salesO,
#avg,
#weekly,
#td_blue,
#td_back,
#todoI,
#statI,
#favI {
  width: 65px;
}
#hideI {
  width: 45px;
}
#stockButtons {
  margin-top: 15px;
  margin-bottom: 15px;
}
.tbuttons {
  background-color: #316a98;
  font-size: 15px;
  font-weight: 700;
  margin-right: 10px;
  color: white;
}

/* Lamination / Tray panels */
.panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.panel h2 {
  margin-top: 0;
}
.lam-table {
  width: 100%;
  font-weight: 600;
}
/* Product catalog tables: heavier font weight */
#productCatalog table.lam-table,
#lamProductCatalog table.lam-table,
#traySideProductCatalog table.lam-table {
  font-weight: 600;
}
/* Product catalog name column: match tbutton colors */
/* (Reverted) No special styling for product catalog name column */
.panel input[type="text"],
.panel input[type="number"],
.panel input[type="date"],
.panel input[type="datetime-local"],
.panel select {
  max-width: 220px;
}

/* Centered login form */
#logform {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.login-box {
  width: 360px;
  max-width: 90vw;
  margin: 0;
  background: #ccc; /* gray background */
  border: 4px solid #333; /* solid border */
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.login-box h1 {
  text-align: center;
  margin-bottom: 12px;
}
.login-box button {
  width: 100%;
}
#stockButtons {
  margin-bottom: 20px;
  margin-top: 20px;

  padding: 10px;
  border-radius: 10px;
  /* display: flex;
  justify-content: center; */
  background-color: color(srgb 0.9333 0.9333 0.9334);
  text-align: center;
}
#frzPackedSection,
#productCatalogSection,
#laminationSection,
#trayUpSection {
  padding: 20px;
  border-radius: 10px;
  background-color: color(srgb 0.9333 0.9333 0.9334);
}
#frz {
  color: white;
  background-color: #316a98;
}

/* Lamination: SEE ADDED PRODUCT table should have fixed cell sizes
   that fit content and do not reflow with screen size */
#lamInputs {
  overflow-x: auto; /* allow horizontal scroll when content overflows */
}
#lamInputs table.lam-table {
  table-layout: auto !important; /* size based on content */
  width: max-content; /* expand only as needed to fit content */
}
#lamInputs table.lam-table th,
#lamInputs table.lam-table td {
  white-space: nowrap; /* prevent wrapping to keep cell size stable */
}