/* Pregmate look (guide Section 4): white background, black text, thin grey borders, no colour for normal work. */

* { box-sizing: border-box; }

/* Settings (Natalia, 4 November 2026): text size, button size and screen font, set by nav.js from the Settings page.
   Text sizes are in rem (parts of the text size), so all the writing follows it; buttons also follow the button size.
   Label previews keep their own exact sizes. */
:root {
  --text-size: 16px;
  --button-scale: 1;
  --screen-font: "Segoe UI", Helvetica, Arial, sans-serif;
}
html { font-size: var(--text-size); }

/* Something hidden stays hidden, whatever its own style says (buttons are display: block). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: #ffffff;
  color: #000000;
  font-family: var(--screen-font);
  font-size: 1rem;
  line-height: 1.5;
}

.topbar {
  border-bottom: 1px solid #d0d7de;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
}

.logo {
  font-weight: 700;
  font-size: 1.125rem;
}

/* One top bar, same on every screen. The current screen is bold and underlined. */
.nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.nav a { color: #000000; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; }

.container {
  max-width: 720px;
  margin: 24px auto;
  padding: 0 16px;
}

h1 { font-size: 1.5rem; margin: 0 0 16px; }
h2 { font-size: 1rem; margin: 0 0 8px; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.required {
  font-weight: 400;
  font-size: 0.875rem;
  color: #555555;
  margin-left: 6px;
}

label.spaced { margin-top: 20px; }

input[type="text"],
input[type="search"],
input[type="date"],
input[type="number"],
select {
  width: 100%;
  font: inherit;
  font-size: 1.125rem;
  padding: 10px 12px;
  border: 1px solid #8c959f;
  border-radius: 0;
  color: #000000;
  background: #ffffff;
}
input:focus,
select:focus { outline: 2px solid #000000; outline-offset: 1px; }

/* Small helper text under a field: the only grey text. */
.help { color: #555555; font-size: 0.875rem; margin: 6px 0 0; }

/* Error under a field: the only place colour is allowed. */
.error { color: #b00020; font-weight: 600; margin: 6px 0 0; }
.error:empty { display: none; }

/* A warning: something to check, in bold red (Natalia, 29 October 2026). It starts with "Check:" and never stops the label. */
.warning { color: #b00020; font-weight: 700; margin: 6px 0 0; }
.warning:empty { display: none; }

/* The one main button: black, white text, large and bold. */
button.primary {
  display: block;
  margin-top: 16px;
  padding: calc(12px * var(--button-scale)) calc(28px * var(--button-scale));
  font: inherit;
  font-size: calc(1.125rem * var(--button-scale));
  font-weight: 700;
  color: #ffffff;
  background: #000000;
  border: 2px solid #000000;
  border-radius: 0;
  cursor: pointer;
}
button.primary:disabled { background: #555555; border-color: #555555; cursor: wait; }

/* Every other button: white, with a thick black border. */
button.secondary {
  display: block;
  margin-top: 16px;
  padding: calc(10px * var(--button-scale)) calc(26px * var(--button-scale));
  font: inherit;
  font-size: calc(1.125rem * var(--button-scale));
  font-weight: 700;
  color: #000000;
  background: #ffffff;
  border: 3px solid #000000;
  border-radius: 0;
  cursor: pointer;
}
button.secondary:disabled { color: #555555; border-color: #555555; cursor: wait; }

/* Print label and Download PDF, side by side under the preview. */
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.button-row[hidden] { display: none; }
.button-row button.secondary { margin-top: 0; }
.button-row .history-note { flex-basis: 100%; margin: 0; }

/* Home: the Scan box, large, at the top. */
.scan { margin-bottom: 24px; }
.scan label { font-size: 1.125rem; }
.scan-row { display: flex; gap: 12px; align-items: stretch; }
.scan-row input { flex: 1; font-size: 1.5rem; padding: 12px 14px; border: 2px solid #000000; }
.scan-row button.secondary { margin-top: 0; }
.scan-result { border: 1px solid #d0d7de; padding: 16px; margin-bottom: 32px; }
.scan-result h2 { margin-top: 20px; }
.received { margin: 0; overflow-wrap: anywhere; }
.received-text { font-family: Consolas, "Courier New", monospace; font-weight: 700; white-space: pre-wrap; }
.none { font-weight: 700; margin: 16px 0 4px; }
#scan-none .row-button { display: inline-block; margin-top: 12px; }

/* Home: six big job buttons, three in a row (two on a phone). */
.home-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.big-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(96px * var(--button-scale));
  padding: calc(16px * var(--button-scale));
  font-size: calc(1.25rem * var(--button-scale));
  font-weight: 700;
  text-align: center;
  color: #000000;
  background: #ffffff;
  border: 3px solid #000000;
  text-decoration: none;
}
.big-button:hover { background: #f6f8fa; }
.big-button:focus { outline: 3px solid #000000; outline-offset: 3px; }

.small-link { margin-top: 24px; font-size: 0.875rem; }
.small-link a { color: #000000; }

/* Presets list: one row per preset, its Open button on the right. */
.preset-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid #d0d7de; }
.preset-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #d0d7de;
}
.preset-main { flex: 1; min-width: 0; }
.preset-main p { margin: 0; overflow-wrap: anywhere; }
.preset-name { font-weight: 600; white-space: pre-wrap; } /* exact names: keep double spaces */
.row-button {
  padding: calc(8px * var(--button-scale)) calc(20px * var(--button-scale));
  font-size: calc(1rem * var(--button-scale));
  font-weight: 700;
  color: #000000;
  background: #ffffff;
  border: 3px solid #000000;
  text-decoration: none;
}
.row-button:hover { background: #f6f8fa; }
button.row-button { font-family: inherit; line-height: inherit; font-weight: 700; cursor: pointer; }
button.row-button:disabled { color: #555555; border-color: #555555; background: #ffffff; cursor: default; }
.row-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* History and Permanent Saved: the label's details across the page, its buttons under them. */
.label-row { flex-wrap: wrap; gap: 8px; }
.label-row .preset-main { flex-basis: 100%; }
.label-row .row-buttons { justify-content: flex-start; }

/* "Remove from Permanent Saved" asks first, on the page (no pop-up). */
.confirm { border: 1px solid #d0d7de; padding: 16px; margin-top: 16px; }
.confirm[hidden] { display: none; }
.confirm p { margin: 0; font-weight: 600; }

/* A title with one button beside it (Presets: Add a preset). */
.title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.title-row h1 { margin: 0; }

/* Company check boxes. */
.companies { border: 0; margin: 20px 0 0; padding: 0; }
.companies legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.companies label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 4px 0; }
.companies input { width: 20px; height: 20px; }

input[type="file"] { font: inherit; margin-top: 4px; }

/* A preset's stored values. */
.details { margin: 0 0 4px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.details dt { font-weight: 600; }
.details dd { margin: 0; overflow-wrap: anywhere; }
.back-link { margin: 0 0 8px; }

/* Custom size: width and height side by side. */
.custom-size { display: flex; gap: 16px; margin-top: 8px; }
.custom-size[hidden] { display: none; }
.custom-size > div { flex: 1; }
.custom-size label { font-weight: 400; }

.preview { margin-top: 32px; }

/* Recent batches, at the bottom of the Flexibag and Expiration pages, under the preview. */
.recent-batches { margin-top: 40px; }
.recent-batches .help { margin: 0 0 8px; }

/* "Add a company" under a form's company check boxes. */
.companies .add-company-label { display: block; font-weight: 600; margin: 12px 0 4px; }
.add-company { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.add-company input { flex: 1; min-width: 180px; }

/* A label's caption and companies, on its own page. */
.label-info { margin-top: 40px; }

/* Settings: each button's usual name beside a box for its new one (one under the other on a phone). */
.settings-part { margin-top: 32px; font-size: 1.125rem; }
.name-group { border: 0; margin: 16px 0 0; padding: 0; }
.name-group legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.name-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: center; margin-top: 8px; }
.name-row label { margin: 0; font-weight: 400; }
.name-row .error { grid-column: 1 / -1; }

/* Correct and Delete, at the very bottom of a product's page. */
.product-actions { margin-top: 40px; }

.preview-box {
  border: 1px solid #d0d7de;
  padding: 24px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-box svg { width: 100%; max-width: 560px; height: auto; }
.preview-box[data-kind="2d"] svg { max-width: 280px; }
.preview-box[data-kind="label"] svg { max-width: 100%; height: auto; border: 1px solid #8c959f; }

.note { margin: 8px 0 0; font-size: 0.875rem; }
.note:empty { display: none; }

/* What a square code holds, shown as plain text so it can be checked by eye. */
.inside {
  margin: 8px 0 0;
  font-size: 0.875rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

input[readonly] { background: #f6f8fa; }

/* Pins: a "Pin" check box under a field, "Pinned" with its date, and "Change this time". A pinned field is locked. */
.pin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; }
.pin { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.pin input { width: 20px; height: 20px; margin: 0; }
.pin-note { font-size: 0.875rem; }
.pin-row a { color: #000000; font-size: 0.875rem; }
select:disabled, input:disabled:not([type="checkbox"]) { background: #f6f8fa; color: #000000; border-style: dashed; }

/* A number box with the words the label prints after it (Case Pack: "pcs per case"). */
.with-suffix { display: flex; align-items: center; gap: 12px; }
.with-suffix input { max-width: 160px; }
.with-suffix span { font-size: 1.125rem; }

/* A name for something shown, not typed (the box-label header on New product). */
.field-name { font-weight: 600; margin: 20px 0 0; }

.checks p { margin: 8px 0 0; font-size: 0.875rem; }

/* The short guide for everyone (Natalia, 4 November 2026). */
.guide h2 { font-size: 1.125rem; margin: 32px 0 8px; padding-top: 16px; border-top: 1px solid #d0d0d0; }
.guide ol, .guide ul { margin: 0; padding-left: 24px; }
.guide li { margin: 0 0 8px; line-height: 1.45; }
.guide p { line-height: 1.45; }
.guide .toc { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0; font-size: 0.875rem; }
.guide .toc a { color: #000000; }
@media print {
  .topbar, .guide .toc, .guide .back-link { display: none; }
  .guide h2 { break-after: avoid; }
}

@media (max-width: 600px) {
  .home-buttons { grid-template-columns: repeat(2, 1fr); }
  .details { grid-template-columns: 1fr; gap: 0; }
  .details dd { margin-bottom: 8px; }
  .preset-row { flex-wrap: wrap; }
  .row-buttons { justify-content: flex-start; }
  .scan-row { flex-direction: column; }
  .name-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  button.primary,
  button.secondary { width: 100%; }
}

/* Sign-in (only the online copy): the sign-in and PIN pages, and the account corner of the top bar. */
.container.narrow { max-width: 420px; }
.spaced-help { margin-top: 24px; }
.spaced-heading { margin-top: 32px; }
.account { margin-left: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; font-size: 0.875rem; }
.account a { color: #000000; }
.account a[aria-current="page"] { font-weight: 700; }
.link-button { font: inherit; font-size: 0.875rem; color: #000000; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
/* People: a row's new-PIN box or question, under its buttons. */
.row-extra { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row-extra:empty { display: none; }
.row-extra p { flex-basis: 100%; margin: 0; }
.row-extra input { flex: 1; min-width: 200px; }