/* The owner's 10-12 (13-szinvilag-swing10): Nunito for text and buttons, from our own files (the OFL beside them), and
   Georgia for headings. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("../fonts/nunito/nunito-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("../fonts/nunito/nunito-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-display: swap;
  font-weight: 200 1000;
  src: url("../fonts/nunito/nunito-latin-ext-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-display: swap;
  font-weight: 200 1000;
  src: url("../fonts/nunito/nunito-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* html:root outranks Bootstrap's own :root, so its variables take ours. */
html:root {
  --bs-body-font-family: "Nunito", Helvetica, Arial, sans-serif;
  --bs-font-sans-serif: "Nunito", Helvetica, Arial, sans-serif;
  /* Bootstrap's own colours follow the theme's tokens: its primary is our button brown, its red and green our status ones. */
  --bs-primary: var(--tc-primary);
  --bs-primary-rgb: var(--tc-primary-rgb);
  --bs-link-color: var(--tc-link);
  --bs-link-color-rgb: var(--tc-link-rgb);
  --bs-link-hover-color: var(--tc-primary-hover);
  --bs-danger-rgb: var(--tc-danger-rgb);
  --bs-success-rgb: var(--tc-success-rgb);
  --bs-danger: var(--tc-denied);
  /* The subtle alerts and badges: Bootstrap's blue and cyan give way to the theme's, its own red, amber and green keep their
     meaning in the theme's shades - in the dark theme too (html:root outranks its data-bs-theme block). */
  --bs-primary-text-emphasis: var(--tc-brand-text);
  --bs-primary-bg-subtle: var(--tc-chip-on-bg);
  --bs-primary-border-subtle: var(--tc-amber);
  --bs-info-text-emphasis: var(--tc-info);
  --bs-info-bg-subtle: var(--tc-info-bg);
  --bs-info-border-subtle: var(--tc-border);
  --bs-warning-text-emphasis: var(--tc-amber-text);
  --bs-warning-bg-subtle: var(--tc-warn-bg);
  --bs-warning-border-subtle: var(--tc-amber);
  --bs-danger-text-emphasis: var(--tc-danger-text);
  --bs-danger-bg-subtle: var(--tc-bad-bg);
  --bs-danger-border-subtle: var(--tc-understaffed-border);
  --bs-success-text-emphasis: var(--tc-success-text);
  --bs-success-bg-subtle: var(--tc-ok-bg);
  --bs-success-border-subtle: var(--tc-border);
  --bs-focus-ring-color: color-mix(in srgb, var(--tc-focus) 30%, transparent);
  font-size: 14px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-title, .navbar-brand {
  font-family: Georgia, "Times New Roman", serif;
}

/* Bootstrap's components that compile its blue in: the theme's brown instead (the owner's 10-12). */
.btn-outline-primary {
  --bs-btn-color: var(--tc-primary);
  --bs-btn-border-color: var(--tc-primary);
  --bs-btn-hover-color: var(--tc-on-primary);
  --bs-btn-hover-bg: var(--tc-primary);
  --bs-btn-hover-border-color: var(--tc-primary);
  --bs-btn-active-color: var(--tc-on-primary);
  --bs-btn-active-bg: var(--tc-primary-hover);
  --bs-btn-active-border-color: var(--tc-primary-hover);
  --bs-btn-disabled-color: var(--tc-primary);
  --bs-btn-disabled-border-color: var(--tc-primary);
}

.btn-check:checked + .btn-outline-primary {
  color: var(--tc-on-primary);
  background-color: var(--tc-primary);
  border-color: var(--tc-primary);
}

.btn-link {
  --bs-btn-color: var(--tc-link);
  --bs-btn-hover-color: var(--tc-primary-hover);
  --bs-btn-active-color: var(--tc-primary-hover);
}

.form-check-input:checked {
  background-color: var(--tc-primary);
  border-color: var(--tc-primary);
}

/* The owner's 10-14 (item 3): a row's tick box that cannot be ticked looks it - grey, not a faded white box that reads as
   active - and its label (which carries the reason as a title) shows the not-allowed pointer. */
.tc-tap.tc-tap-blocked {
  cursor: not-allowed;
}

.tc-tap-blocked .form-check-input:disabled {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  opacity: 0.6;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--tc-focus);
}

.form-range {
  accent-color: var(--tc-primary);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--tc-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-color: var(--tc-on-primary);
  --bs-dropdown-link-active-bg: var(--tc-primary);
}

.list-group {
  --bs-list-group-active-color: var(--tc-on-primary);
  --bs-list-group-active-bg: var(--tc-primary);
  --bs-list-group-active-border-color: var(--tc-primary);
}

.pagination {
  --bs-pagination-color: var(--tc-link);
  --bs-pagination-hover-color: var(--tc-primary-hover);
  --bs-pagination-active-color: var(--tc-on-primary);
  --bs-pagination-active-bg: var(--tc-primary);
  --bs-pagination-active-border-color: var(--tc-primary);
}

.nav-pills {
  --bs-nav-pills-link-active-color: var(--tc-on-primary);
  --bs-nav-pills-link-active-bg: var(--tc-primary);
}

/* A table row's state (the sweep's products #15): Bootstrap's table-warning/-success/-info/-primary are fixed light colours
   with black text in every theme, and text-bg-info its cyan - the rows and the badge take the theme's tints instead. */
.tc-row-warn {
  --bs-table-bg: var(--tc-warn-bg);
  --bs-table-color: var(--tc-text);
  color: var(--tc-text);
}

.tc-row-ok {
  --bs-table-bg: var(--tc-ok-bg);
  --bs-table-color: var(--tc-text);
  color: var(--tc-text);
}

.tc-row-info {
  --bs-table-bg: var(--tc-info-bg);
  --bs-table-color: var(--tc-text);
  color: var(--tc-text);
}

/* A release summary drawn from the saved draft while the fields were typed in (F1, 10-15): faded until saved. */
.tc-stale {
  opacity: 0.45;
}

/* Waiting on somebody else - the CNC list's batch whose drawing is not yet released (C, 10-15): the "off" tint, muted text. */
.tc-row-muted {
  --bs-table-bg: var(--tc-chip-off-bg);
  --bs-table-color: var(--tc-text-muted);
  color: var(--tc-text-muted);
}

/* "On its way", and the row a link was followed to (the stock target from Készletszinkron). */
.tc-row-on,
.tc-row-focus {
  --bs-table-bg: var(--tc-chip-on-bg);
  --bs-table-color: var(--tc-text);
  color: var(--tc-text);
}

.badge.tc-badge-info {
  color: var(--tc-info);
  background-color: var(--tc-info-bg);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--tc-card), 0 0 0 0.25rem var(--tc-focus);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ToldiClub auth screens (login / access denied) */

.auth-body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--tc-badge-end) 0%, var(--tc-brand-text) 55%, var(--tc-brand) 100%);
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--tc-card);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--tc-backdrop) 35%, transparent);
}

.tc-trial-role { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.tc-trial-role-help { margin-top: .25rem; line-height: 1.4; }
.tc-on-behalf-mobile-name { display: none; }
@media (max-width: 767px) {
  .tc-trial-sign-in { padding: 1.5rem 1.1rem; }
  [data-on-behalf] { padding: .25rem .5rem; }
  [data-on-behalf] > .container { flex-wrap: nowrap !important; padding-inline: 0; gap: .5rem !important; }
  [data-on-behalf] .tc-on-behalf-copy { flex: 1; min-width: 0; }
  [data-on-behalf-name] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
  [data-on-behalf] :is(.tc-on-behalf-desktop-name, .tc-on-behalf-explanation) { display: none; }
  .tc-on-behalf-mobile-name { display: inline; }
  [data-on-behalf] form { flex-shrink: 0; }
  [data-on-behalf-end] { min-height: 36px; padding: .2rem .65rem; }
}

.auth-badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--tc-badge-start), var(--tc-badge-end));
  color: var(--tc-on-dark);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-badge--denied {
  background: linear-gradient(135deg, var(--tc-denied), var(--tc-denied-end));
  font-size: 1.5rem;
}

.auth-title {
  font-weight: 700;
  color: var(--tc-auth-title);
  margin-bottom: 0.25rem;
}

.auth-subtitle {
  color: var(--tc-text-subtle);
  margin-bottom: 0;
}

.auth-footnote {
  margin: 1.5rem 0 0;
  font-size: 0.8rem;
  color: var(--tc-footnote);
}

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--tc-google-bg);
  border: 1px solid var(--tc-google-border);
  color: var(--tc-google-text);
  font-weight: 500;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-google:hover {
  background: var(--tc-google-hover);
  color: var(--tc-google-text);
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
}

.google-icon {
  flex: none;
}

.welcome-card {
  max-width: 480px;
  margin: 3rem auto;
  background: var(--tc-card);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--tc-backdrop) 12%, transparent);
}

.avatar-circle {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tc-badge-start), var(--tc-badge-end));
  color: var(--tc-on-dark);
  font-weight: 700;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ToldiClub scheduling module */

/* ---------------------------------------------------------------- themes (P17; the owner's palette 10-12)
   Every colour is a token, here and only here. The palette is Dávid's newsletter picture's brown world
   (13-szinvilag-swing10): the brand brown #B9834B for the bar and the active item, with dark text; buttons the deeper
   #8A5A2B with white; cream, peach, sand, oak and walnut beside them; green (#34C800) and red (#B52323) only for status.
   "Professzionális" (the default) is :root; "Sötét" (walnut and cream, a brown accent) and "Műhely – nagy kontraszt"
   override the tokens under html[data-theme]. The layout writes data-theme on the server, so nothing flashes.
   A unit test holds the brand colours to the palette, and every theme's text to its backgrounds: at least 4.5:1, large
   text and controls at least 3:1 (WCAG AA). No colour is written outside these blocks, in any of the stylesheets. */

:root {
  /* Text */
  --tc-text: #222222;
  --tc-text-strong: #222222;
  --tc-text-figure: #222222;
  --tc-text-chip: #222222;
  --tc-text-muted: #666666;
  --tc-legend: #4a3a2e;
  --tc-text-subtle: #666666;

  /* Light greys: captions, tags, empty cells - the faint grey only where nothing depends on it */
  --tc-text-faint: #999999;
  --tc-tag: #999999;
  --tc-cell-empty-text: #999999;
  --tc-deco: #a89a8c;
  --tc-footnote: #6b6b6b;

  /* Coloured text; green and red are status colours only (the success text a darker green, readable small) */
  --tc-link: #8a5a2b;
  --tc-auth-title: #644431;
  --tc-chip-on-text: #644431;
  --tc-success-text: #1f7a00;
  --tc-danger-text: #b52323;
  --tc-cell-warning: #b52323;
  --tc-amber-text: #7a4e0e;
  --tc-stock-warning-text: #8a4b12;
  --tc-stock-committed-text: #8a5a10;
  --tc-google-text: #3c4043;
  --tc-on-dark: #ffffff;
  --tc-on-brand: #222222;
  --tc-on-primary: #ffffff;

  /* Backgrounds: white cards on the light grey page, cream and sand for what stands out */
  --tc-card: #ffffff;
  --tc-surface: #f4f4f4;
  --tc-figure-bg: #fbf6ee;
  --tc-bar-recorded: #f7f2ea;
  --tc-weekend: #f7f4ef;
  --tc-head-bg: #fbf8f3;
  --tc-thumb-bg: #f3efe8;
  --tc-tabs-bg: #f5ecdf;
  --tc-stack-track: #efe8dd;
  --tc-bar-bg: #efe8dd;
  --tc-chip-off-bg: #efe8dd;
  --tc-outline-hover: #f5ecdf;
  --tc-entry-recorded: #fdf3d6;
  --tc-chip-on-bg: #fae9b3;
  --tc-today-bg: #fff8e6;
  --tc-understaffed-bg: #fdf1f0;
  --tc-row-group-bg: #f7f3ec;
  --tc-row-group-text: #222222;
  --tc-google-bg: #ffffff;
  --tc-google-hover: #f8f9fa;
  --tc-ok-bg: #eaf6e2;
  --tc-warn-bg: #fbf0d9;
  --tc-bad-bg: #fbe8e5;
  --tc-info: #3f5a66;
  --tc-info-bg: #eef3f5;

  /* Borders and rules */
  --tc-border: #dddddd;
  --tc-field-border: #dee2e6;
  --tc-field-bg: #ffffff;
  --tc-figure-border: #eaeaea;
  --tc-bar-border: #eaeaea;
  --tc-rule: #eaeaea;
  --tc-divider: #f1ede6;
  --tc-total-rule: #d9cfc2;
  --tc-cell-empty-border: #d9cfc2;
  --tc-understaffed-border: #e0a4a0;
  --tc-row-group-border: #d9cfc2;
  --tc-google-border: #dadce0;

  /* The brand: the brown bar and the active item (#B9834B, dark text on it - never cream, never small white), the buttons
     in the deeper brown with white; the dark theme a walnut bar with cream, a brown accent */
  --tc-brand: #b9834b;
  --tc-brand-text: #8a5a2b;
  --tc-nav-hover: #000000;
  --tc-amber: #f1b56d;
  --tc-primary: #8a5a2b;
  --tc-primary-border: #74491f;
  --tc-primary-hover: #74491f;
  --tc-badge-start: #8a5a2b;
  --tc-badge-end: #644431;
  --tc-denied: #b52323;
  --tc-denied-end: #7c2622;
  --tc-focus: #8a5a2b;
  --tc-nav-bg: #644431;
  --tc-nav-text: #fae9b3;
  --tc-nav-muted: #e8c59c;
  --tc-nav-active-bg: #b9834b;
  --tc-nav-active-text: #222222;
  --tc-status-ok: #34c800;
  --tc-status-bad: #b52323;
  --tc-backdrop: #000000;

  /* The workshop view's areas, each its own shade */
  --tc-area-sales: #8a5a2b;
  --tc-area-production: #6b5a2e;
  --tc-area-engineering: #5e5a52;
  --tc-area-finance: #4f5b5e;
  --tc-area-team: #6a4f63;
  --tc-area-system: #666666;

  /* The charts: segments, the pending ones, the marks */
  --tc-base: #d9a661;
  --tc-base-pending: #f3e3c6;
  --tc-project: #644431;
  --tc-project-pending: #d8c3b3;
  --tc-extra: #b52323;
  --tc-extra-pending: #ebc0c0;
  --tc-mark-avg: #4a3a2e;
  --tc-mark-median: #222222;
  --tc-mark-moving: #8a5a2b;
  --tc-chart-cost: #a89a8c;
  --tc-chart-result: #8a5a2b;
  --tc-hours-base: #8a5a2b;
  --tc-hours-project: #4f5b5e;
  --tc-hours-production: #d9a661;
  --tc-hours-freejob: #806b98;
  --tc-hours-norm: #644431;
  --tc-hours-extra: #b52323;
  --tc-urgent: #b52323;

  /* The planner's cover: waiting for the hand-over, from the free stock (H1-10r2) - apart from "in production" */
  --tc-plan-waiting: #222222;
  --tc-plan-free: #e8c59c;

  /* The stock charts and the stock value's four holdings */
  --tc-stock-wood: #b9834b;
  --tc-stock-adhesive: #644431;
  --tc-stock-ink: #222222;
  --tc-stock-ink-muted: #5e5248;
  --tc-stock-axis: #c9bfb3;
  --tc-stock-empty: #e6e0d6;
  --tc-stock-free: #34c800;
  --tc-stock-committed: #f1b56d;
  --tc-stock-track: #efe8dd;
  --tc-stock-committed-tint: #fdf3e1;
  --tc-sv-material: #644431;
  --tc-sv-blank: #d9a661;
  --tc-sv-wip: #8a5a2b;
  --tc-sv-product: #34c800;

  /* The CRM's waiting colours: fresh, due, late */
  --tc-age-fresh-bg: #eaf6e2;
  --tc-age-fresh-text: #1f5a00;
  --tc-age-due-bg: #fff3ca;
  --tc-age-due-text: #6b4b00;
  --tc-age-late-bg: #fbe6e4;
  --tc-age-late-text: #952b22;

  /* A blank's wood on its drawing, where no card gives its own (JÚN-UX2) */
  --tc-blank-wood: #d9ab72;
  --tc-blank-grain: #b07b41;

  /* Bootstrap's channel triplets of the colours above */
  --tc-primary-rgb: 138, 90, 43;
  --tc-link-rgb: 138, 90, 43;
  --tc-danger-rgb: 181, 35, 35;
  --tc-success-rgb: 31, 122, 0;
}

/* "Sötét": Bootstrap's own dark mode (data-bs-theme="dark" on <html>), walnut and cream. */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Text */
  --tc-text: #fae9b3;
  --tc-text-strong: #fff4d6;
  --tc-text-figure: #fae9b3;
  --tc-text-chip: #fae9b3;
  --tc-text-muted: #e8c59c;
  --tc-legend: #e8c59c;
  --tc-text-subtle: #e0c49e;

  /* Light greys: captions, tags, empty cells - the faint grey only where nothing depends on it */
  --tc-text-faint: #d9c2a0;
  --tc-tag: #d9c2a0;
  --tc-cell-empty-text: #d9c2a0;
  --tc-deco: #d9c2a0;
  --tc-footnote: #d9c2a0;

  /* Coloured text; green and red are status colours only (the success text a darker green, readable small) */
  --tc-link: #f1b56d;
  --tc-auth-title: #f1b56d;
  --tc-chip-on-text: #fae9b3;
  --tc-success-text: #8fe36a;
  --tc-danger-text: #ff9f94;
  --tc-cell-warning: #ff9f94;
  --tc-amber-text: #f1b56d;
  --tc-stock-warning-text: #f2b36b;
  --tc-stock-committed-text: #f1b56d;
  --tc-google-text: #3c4043;
  --tc-on-dark: #ffffff;
  --tc-on-brand: #fae9b3;
  --tc-on-primary: #222222;

  /* Backgrounds: white cards on the light grey page, cream and sand for what stands out */
  --tc-card: #3b2a20;
  --tc-surface: #261b14;
  --tc-figure-bg: #4a3426;
  --tc-bar-recorded: #4a3426;
  --tc-weekend: #4a3426;
  --tc-head-bg: #4a3426;
  --tc-thumb-bg: #4a3426;
  --tc-tabs-bg: #4a3426;
  --tc-stack-track: #4a3426;
  --tc-bar-bg: #4a3426;
  --tc-chip-off-bg: #4a3426;
  --tc-outline-hover: #4a3426;
  --tc-entry-recorded: #5a3e2c;
  --tc-chip-on-bg: #644431;
  --tc-today-bg: #4a3416;
  --tc-understaffed-bg: #4a1f1a;
  --tc-row-group-bg: #4a3426;
  --tc-row-group-text: #fae9b3;
  --tc-google-bg: #ffffff;
  --tc-google-hover: #f8f9fa;
  --tc-ok-bg: #24361a;
  --tc-warn-bg: #4a3a10;
  --tc-bad-bg: #4a1f1a;
  --tc-info: #c9d9e0;
  --tc-info-bg: #2b3a40;

  /* Borders and rules */
  --tc-border: #6b4d39;
  --tc-field-border: #495057;
  --tc-field-bg: #212529;
  --tc-figure-border: #6b4d39;
  --tc-bar-border: #6b4d39;
  --tc-rule: #5a4232;
  --tc-divider: #4e3829;
  --tc-total-rule: #7a5a44;
  --tc-cell-empty-border: #7a5a44;
  --tc-understaffed-border: #8a3a32;
  --tc-row-group-border: #7a5a44;
  --tc-google-border: #dadce0;

  /* The brand: the brown bar and the active item (#B9834B, dark text on it - never cream, never small white), the buttons
     in the deeper brown with white; the dark theme a walnut bar with cream, a brown accent */
  --tc-brand: #644431;
  --tc-brand-text: #f1b56d;
  --tc-nav-hover: #f1b56d;
  --tc-amber: #d9a661;
  --tc-primary: #b9834b;
  --tc-primary-border: #b1773f;
  --tc-primary-hover: #c99560;
  --tc-badge-start: #8a5a2b;
  --tc-badge-end: #644431;
  --tc-denied: #b52323;
  --tc-denied-end: #7c2622;
  --tc-focus: #f1b56d;
  --tc-nav-bg: #1e150f;
  --tc-nav-text: #fae9b3;
  --tc-nav-muted: #e8c59c;
  --tc-nav-active-bg: #b9834b;
  --tc-nav-active-text: #222222;
  --tc-status-ok: #34c800;
  --tc-status-bad: #ff8a80;
  --tc-backdrop: #000000;

  /* The workshop view's areas, each its own shade */
  --tc-area-sales: #f1b56d;
  --tc-area-production: #e8c59c;
  --tc-area-engineering: #d9c2a0;
  --tc-area-finance: #c9d3d6;
  --tc-area-team: #e3c9dd;
  --tc-area-system: #d9cfc2;

  /* The charts: segments, the pending ones, the marks */
  --tc-base: #b9834b;
  --tc-base-pending: #4a3426;
  --tc-project: #e8c59c;
  --tc-project-pending: #5a4232;
  --tc-extra: #ff8a80;
  --tc-extra-pending: #5a2622;
  --tc-mark-avg: #e8c59c;
  --tc-mark-median: #fae9b3;
  --tc-mark-moving: #f1b56d;
  --tc-chart-cost: #7a5a44;
  --tc-chart-result: #f1b56d;
  --tc-hours-base: #f1b56d;
  --tc-hours-project: #c9d3d6;
  --tc-hours-production: #d9a661;
  --tc-hours-freejob: #c8b6e0;
  --tc-hours-norm: #e8c59c;
  --tc-hours-extra: #ff8a80;
  --tc-urgent: #ff8a80;

  /* The planner's cover: waiting for the hand-over, from the free stock (H1-10r2) - apart from "in production" */
  --tc-plan-waiting: #a89a8c;
  --tc-plan-free: #6b4d39;

  /* The stock charts and the stock value's four holdings */
  --tc-stock-wood: #d9a661;
  --tc-stock-adhesive: #f1b56d;
  --tc-stock-ink: #fae9b3;
  --tc-stock-ink-muted: #e8c59c;
  --tc-stock-axis: #7a5a44;
  --tc-stock-empty: #4a3426;
  --tc-stock-free: #34c800;
  --tc-stock-committed: #d9a661;
  --tc-stock-track: #4a3426;
  --tc-stock-committed-tint: #4a3416;
  --tc-sv-material: #e8c59c;
  --tc-sv-blank: #d9a661;
  --tc-sv-wip: #f1b56d;
  --tc-sv-product: #34c800;

  /* The CRM's waiting colours: fresh, due, late */
  --tc-age-fresh-bg: #24361a;
  --tc-age-fresh-text: #a8e88a;
  --tc-age-due-bg: #4a3a10;
  --tc-age-due-text: #f1d27a;
  --tc-age-late-bg: #4a1f1a;
  --tc-age-late-text: #ff9f94;

  /* A blank's wood on its drawing, where no card gives its own (JÚN-UX2) */
  --tc-blank-wood: #d9ab72;
  --tc-blank-grain: #b07b41;

  /* Bootstrap's channel triplets of the colours above */
  --tc-primary-rgb: 185, 131, 75;
  --tc-link-rgb: 241, 181, 109;
  --tc-danger-rgb: 181, 35, 35;
  --tc-success-rgb: 31, 122, 0;
}

/* "Műhely – nagy kontraszt": light, black on white, larger text and larger things to press - for a bright workshop,
   and for gloves; the brown in its deepest shades. */
:root[data-theme="workshop"] {
  /* Text */
  --tc-text: #000000;
  --tc-text-strong: #000000;
  --tc-text-figure: #000000;
  --tc-text-chip: #000000;
  --tc-text-muted: #333333;
  --tc-legend: #222222;
  --tc-text-subtle: #333333;

  /* Light greys: captions, tags, empty cells - the faint grey only where nothing depends on it */
  --tc-text-faint: #444444;
  --tc-tag: #444444;
  --tc-cell-empty-text: #444444;
  --tc-deco: #444444;
  --tc-footnote: #444444;

  /* Coloured text; green and red are status colours only (the success text a darker green, readable small) */
  --tc-link: #5c3a1a;
  --tc-auth-title: #3e2a1e;
  --tc-chip-on-text: #3e2a1e;
  --tc-success-text: #145200;
  --tc-danger-text: #8c1d18;
  --tc-cell-warning: #8c1d18;
  --tc-amber-text: #6b4000;
  --tc-stock-warning-text: #6b3a00;
  --tc-stock-committed-text: #6b4000;
  --tc-google-text: #3c4043;
  --tc-on-dark: #ffffff;
  --tc-on-brand: #ffffff;
  --tc-on-primary: #ffffff;

  /* Backgrounds: white cards on the light grey page, cream and sand for what stands out */
  --tc-card: #ffffff;
  --tc-surface: #ffffff;
  --tc-figure-bg: #f2f2f2;
  --tc-bar-recorded: #f2f2f2;
  --tc-weekend: #f2f2f2;
  --tc-head-bg: #f2f2f2;
  --tc-thumb-bg: #eeeeee;
  --tc-tabs-bg: #e6e6e6;
  --tc-stack-track: #e6e6e6;
  --tc-bar-bg: #eeeeee;
  --tc-chip-off-bg: #eeeeee;
  --tc-outline-hover: #e6e6e6;
  --tc-entry-recorded: #f6ead2;
  --tc-chip-on-bg: #f3dfb0;
  --tc-today-bg: #fff4dc;
  --tc-understaffed-bg: #fdecea;
  --tc-row-group-bg: #f2f2f2;
  --tc-row-group-text: #000000;
  --tc-google-bg: #ffffff;
  --tc-google-hover: #f8f9fa;
  --tc-ok-bg: #e3f4ea;
  --tc-warn-bg: #fff4dc;
  --tc-bad-bg: #fdecea;
  --tc-info: #1d3a46;
  --tc-info-bg: #e6eef2;

  /* Borders and rules */
  --tc-border: #767676;
  --tc-field-border: #dee2e6;
  --tc-field-bg: #ffffff;
  --tc-figure-border: #767676;
  --tc-bar-border: #767676;
  --tc-rule: #767676;
  --tc-divider: #bbbbbb;
  --tc-total-rule: #4d4d4d;
  --tc-cell-empty-border: #767676;
  --tc-understaffed-border: #b3261e;
  --tc-row-group-border: #767676;
  --tc-google-border: #dadce0;

  /* The brand: the brown bar and the active item (#B9834B, dark text on it - never cream, never small white), the buttons
     in the deeper brown with white; the dark theme a walnut bar with cream, a brown accent */
  --tc-brand: #8a5a2b;
  --tc-brand-text: #5c3a1a;
  --tc-nav-hover: #ffe08a;
  --tc-amber: #b36b00;
  --tc-primary: #5c3a1a;
  --tc-primary-border: #3e2a1e;
  --tc-primary-hover: #3e2a1e;
  --tc-badge-start: #5c3a1a;
  --tc-badge-end: #3e2a1e;
  --tc-denied: #b3261e;
  --tc-denied-end: #6b1a15;
  --tc-focus: #000000;
  --tc-nav-bg: #3e2a1e;
  --tc-nav-text: #ffffff;
  --tc-nav-muted: #f3dfb0;
  --tc-nav-active-bg: #ffe08a;
  --tc-nav-active-text: #000000;
  --tc-status-ok: #1f7a00;
  --tc-status-bad: #b3261e;
  --tc-backdrop: #000000;

  /* The workshop view's areas, each its own shade */
  --tc-area-sales: #5c3a1a;
  --tc-area-production: #4a3e1e;
  --tc-area-engineering: #333333;
  --tc-area-finance: #2e3a3d;
  --tc-area-team: #4a2e44;
  --tc-area-system: #333333;

  /* The charts: segments, the pending ones, the marks */
  --tc-base: #8a5a2b;
  --tc-base-pending: #f3dfb0;
  --tc-project: #3e2a1e;
  --tc-project-pending: #e0cfc2;
  --tc-extra: #b3261e;
  --tc-extra-pending: #f0b8b3;
  --tc-mark-avg: #333333;
  --tc-mark-median: #000000;
  --tc-mark-moving: #8a5a00;
  --tc-chart-cost: #767676;
  --tc-chart-result: #5c3a1a;
  --tc-hours-base: #8a5a2b;
  --tc-hours-project: #2e3a3d;
  --tc-hours-production: #b36b00;
  --tc-hours-freejob: #4a2e6b;
  --tc-hours-norm: #3e2a1e;
  --tc-hours-extra: #b3261e;
  --tc-urgent: #8c1d18;

  /* The planner's cover: waiting for the hand-over, from the free stock (H1-10r2) - apart from "in production" */
  --tc-plan-waiting: #1d2124;
  --tc-plan-free: #d9a661;

  /* The stock charts and the stock value's four holdings */
  --tc-stock-wood: #8a5a2b;
  --tc-stock-adhesive: #3e2a1e;
  --tc-stock-ink: #000000;
  --tc-stock-ink-muted: #333333;
  --tc-stock-axis: #767676;
  --tc-stock-empty: #e1e0d9;
  --tc-stock-free: #1f7a00;
  --tc-stock-committed: #b36b00;
  --tc-stock-track: #eceee9;
  --tc-stock-committed-tint: #fdf6e7;
  --tc-sv-material: #3e2a1e;
  --tc-sv-blank: #b36b00;
  --tc-sv-wip: #5c3a1a;
  --tc-sv-product: #1f7a00;

  /* The CRM's waiting colours: fresh, due, late */
  --tc-age-fresh-bg: #e3f4ea;
  --tc-age-fresh-text: #0b4a1e;
  --tc-age-due-bg: #fff4dc;
  --tc-age-due-text: #6b4000;
  --tc-age-late-bg: #fdecea;
  --tc-age-late-text: #8c1d18;

  /* A blank's wood on its drawing, where no card gives its own (JÚN-UX2) */
  --tc-blank-wood: #d9ab72;
  --tc-blank-grain: #b07b41;

  /* Bootstrap's channel triplets of the colours above */
  --tc-primary-rgb: 92, 58, 26;
  --tc-link-rgb: 92, 58, 26;
  --tc-danger-rgb: 179, 38, 30;
  --tc-success-rgb: 20, 82, 0;
}

/* "Nyugodt" (the owner, 10-17: "kiég a szemem"): off-white cards on a warm grey ground, borders and fields that can be seen
   (card on ground 1.10:1, borders 1.36:1, fields 1.30:1 before). Light; the other themes are not touched. */
:root[data-theme="calm"] {
  color-scheme: light;
  --tc-text: #262220; --tc-text-strong: #1c1916; --tc-text-figure: #262220; --tc-text-chip: #262220; --tc-text-muted: #554e47; --tc-legend: #463b32; --tc-text-subtle: #554e47;
  --tc-text-faint: #615951; --tc-tag: #615951; --tc-cell-empty-text: #615951; --tc-deco: #655b51; --tc-footnote: #615951;
  --tc-link: #74491f; --tc-auth-title: #5e3e2c; --tc-chip-on-text: #5e3e2c; --tc-success-text: #2f6a17; --tc-danger-text: #a5332b; --tc-cell-warning: #a5332b; --tc-amber-text: #7a4e0e; --tc-stock-warning-text: #8a4b12; --tc-stock-committed-text: #8a5a10; --tc-google-text: #3c4043; --tc-on-dark: #ffffff; --tc-on-brand: #222222; --tc-on-primary: #ffffff;
  --tc-card: #efeae2; --tc-surface: #ddd6cb; --tc-figure-bg: #e9e3d9; --tc-bar-recorded: #e6dfd4; --tc-weekend: #e6e0d7; --tc-head-bg: #e8e2d8; --tc-thumb-bg: #e4ddd2; --tc-tabs-bg: #e3dbcf; --tc-stack-track: #ddd5c9; --tc-bar-bg: #ddd5c9; --tc-chip-off-bg: #ddd5c9; --tc-outline-hover: #e4dccf; --tc-entry-recorded: #ede2c8; --tc-chip-on-bg: #e9dcb8; --tc-today-bg: #efe5cf; --tc-understaffed-bg: #efe0dc; --tc-row-group-bg: #e6e0d6; --tc-row-group-text: #262220; --tc-google-bg: #ffffff; --tc-google-hover: #f8f9fa; --tc-ok-bg: #dde8d5; --tc-warn-bg: #ece2c8; --tc-bad-bg: #eed9d5; --tc-info: #3f5a66; --tc-info-bg: #dce5e8;
  --tc-border: #a99d8d; --tc-field-border: #8c7f6e; --tc-field-bg: #f6f3ee; --tc-figure-border: #c4b9aa; --tc-bar-border: #c4b9aa; --tc-rule: #cbc1b4; --tc-divider: #d8d0c4; --tc-total-rule: #a99d8d; --tc-cell-empty-border: #b5aa9b; --tc-understaffed-border: #dba8a3; --tc-row-group-border: #b5aa9b; --tc-google-border: #dadce0;
  --tc-brand: #b9834b; --tc-brand-text: #74491f; --tc-nav-hover: #000000; --tc-amber: #e6b77f; --tc-primary: #8a5a2b; --tc-primary-border: #74491f; --tc-primary-hover: #74491f; --tc-badge-start: #8a5a2b; --tc-badge-end: #644431; --tc-denied: #a5332b; --tc-denied-end: #7c2622; --tc-focus: #8a5a2b; --tc-nav-bg: #644431; --tc-nav-text: #fae9b3; --tc-nav-muted: #e8c59c; --tc-nav-active-bg: #b9834b; --tc-nav-active-text: #222222; --tc-status-ok: #58a33c; --tc-status-bad: #b0443a; --tc-backdrop: #000000;
  --tc-area-sales: #7d5634; --tc-area-production: #625636; --tc-area-engineering: #5a5650; --tc-area-finance: #4d585b; --tc-area-team: #64505f; --tc-area-system: #5d5650;
  --tc-base: #d9a661; --tc-base-pending: #e6d6b8; --tc-project: #644431; --tc-project-pending: #cfbcae; --tc-extra: #b0443a; --tc-extra-pending: #dfbdb8; --tc-mark-avg: #4a3a2e; --tc-mark-median: #222222; --tc-mark-moving: #8a5a2b; --tc-chart-cost: #a89a8c; --tc-chart-result: #8a5a2b; --tc-hours-base: #8a5a2b; --tc-hours-project: #4f5b5e; --tc-hours-production: #d9a661; --tc-hours-freejob: #806b98; --tc-hours-norm: #644431; --tc-hours-extra: #b0443a; --tc-urgent: #a5332b;
  --tc-plan-waiting: #222222; --tc-plan-free: #d9b98f;
  --tc-stock-wood: #b9834b; --tc-stock-adhesive: #644431; --tc-stock-ink: #222222; --tc-stock-ink-muted: #5e5248; --tc-stock-axis: #c9bfb3; --tc-stock-empty: #d6cec2; --tc-stock-free: #58a33c; --tc-stock-committed: #e6b77f; --tc-stock-track: #efe8dd; --tc-stock-committed-tint: #ede0c8; --tc-sv-material: #644431; --tc-sv-blank: #d9a661; --tc-sv-wip: #8a5a2b; --tc-sv-product: #58a33c;
  --tc-age-fresh-bg: #dde8d5; --tc-age-fresh-text: #2c5718; --tc-age-due-bg: #efe2bd; --tc-age-due-text: #634a10; --tc-age-late-bg: #eed8d4; --tc-age-late-text: #8e2f27;
  --tc-blank-wood: #d9ab72; --tc-blank-grain: #b07b41;
  --tc-primary-rgb: 138, 90, 43; --tc-link-rgb: 116, 73, 31; --tc-danger-rgb: 165, 51, 43; --tc-success-rgb: 47, 106, 23;
}

/* "Esti": neutral warm graphite, off-white text, a quiet brown accent. Dark. */
:root[data-theme="evening"] {
  color-scheme: dark;
  --tc-text: #e8e2d9; --tc-text-strong: #f3eee6; --tc-text-figure: #e8e2d9; --tc-text-chip: #e8e2d9; --tc-text-muted: #bcb3a7; --tc-legend: #c9bdad; --tc-text-subtle: #b5ac9f;
  --tc-text-faint: #a99f93; --tc-tag: #a99f93; --tc-cell-empty-text: #a99f93; --tc-deco: #a99f93; --tc-footnote: #a99f93;
  --tc-link: #dcb68c; --tc-auth-title: #dcb68c; --tc-chip-on-text: #f1e6cc; --tc-success-text: #93cf78; --tc-danger-text: #f09a90; --tc-cell-warning: #f09a90; --tc-amber-text: #e2b783; --tc-stock-warning-text: #e4ae74; --tc-stock-committed-text: #e2b783; --tc-google-text: #3c4043; --tc-on-dark: #ffffff; --tc-on-brand: #f1e6cc; --tc-on-primary: #1f1c19;
  --tc-card: #2a2623; --tc-surface: #171513; --tc-figure-bg: #34302b; --tc-bar-recorded: #34302b; --tc-weekend: #312d29; --tc-head-bg: #34302b; --tc-thumb-bg: #34302b; --tc-tabs-bg: #34302b; --tc-stack-track: #3b3631; --tc-bar-bg: #3b3631; --tc-chip-off-bg: #3b3631; --tc-outline-hover: #38332e; --tc-entry-recorded: #3a332a; --tc-chip-on-bg: #4a3d2c; --tc-today-bg: #3a3223; --tc-understaffed-bg: #3d2522; --tc-row-group-bg: #34302b; --tc-row-group-text: #e8e2d9; --tc-google-bg: #ffffff; --tc-google-hover: #f8f9fa; --tc-ok-bg: #243022; --tc-warn-bg: #3a3220; --tc-bad-bg: #3d2522; --tc-info: #c3d2d8; --tc-info-bg: #26323a;
  --tc-border: #5a524a; --tc-field-border: #857a6d; --tc-field-bg: #1f1c1a; --tc-figure-border: #4a443e; --tc-bar-border: #4a443e; --tc-rule: #46403a; --tc-divider: #38332e; --tc-total-rule: #645b52; --tc-cell-empty-border: #645b52; --tc-understaffed-border: #6e3a33; --tc-row-group-border: #645b52; --tc-google-border: #dadce0;
  --tc-brand: #4a3a2d; --tc-brand-text: #dcb68c; --tc-nav-hover: #dcb68c; --tc-amber: #c9a06d; --tc-primary: #c49a6c; --tc-primary-border: #b58b5d; --tc-primary-hover: #d2ab80; --tc-badge-start: #8a5a2b; --tc-badge-end: #644431; --tc-denied: #b52323; --tc-denied-end: #7c2622; --tc-focus: #dcb68c; --tc-nav-bg: #181614; --tc-nav-text: #e8e2d9; --tc-nav-muted: #bcb3a7; --tc-nav-active-bg: #b9834b; --tc-nav-active-text: #222222; --tc-status-ok: #6fb552; --tc-status-bad: #ec8b80; --tc-backdrop: #000000;
  --tc-area-sales: #dcb68c; --tc-area-production: #d2c39d; --tc-area-engineering: #c7bfb3; --tc-area-finance: #bcc8cc; --tc-area-team: #d5c1cf; --tc-area-system: #c7bfb3;
  --tc-base: #b9834b; --tc-base-pending: #3a332a; --tc-project: #e8c59c; --tc-project-pending: #3d3833; --tc-extra: #ec8b80; --tc-extra-pending: #5a2622; --tc-mark-avg: #c9bdad; --tc-mark-median: #f3eee6; --tc-mark-moving: #dcb68c; --tc-chart-cost: #5c544b; --tc-chart-result: #f1b56d; --tc-hours-base: #f1b56d; --tc-hours-project: #c9d3d6; --tc-hours-production: #d9a661; --tc-hours-freejob: #c8b6e0; --tc-hours-norm: #e8c59c; --tc-hours-extra: #ec8b80; --tc-urgent: #ec8b80;
  --tc-plan-waiting: #a99f93; --tc-plan-free: #5c4b3a;
  --tc-stock-wood: #d9a661; --tc-stock-adhesive: #f1b56d; --tc-stock-ink: #e8e2d9; --tc-stock-ink-muted: #bcb3a7; --tc-stock-axis: #5c544b; --tc-stock-empty: #3b3631; --tc-stock-free: #6fb552; --tc-stock-committed: #d9a661; --tc-stock-track: #3b3631; --tc-stock-committed-tint: #3a3223; --tc-sv-material: #e8c59c; --tc-sv-blank: #d9a661; --tc-sv-wip: #f1b56d; --tc-sv-product: #6fb552;
  --tc-age-fresh-bg: #243022; --tc-age-fresh-text: #a9d993; --tc-age-due-bg: #3a3220; --tc-age-due-text: #e6cc84; --tc-age-late-bg: #3d2522; --tc-age-late-text: #f09a90;
  --tc-blank-wood: #d9ab72; --tc-blank-grain: #b07b41;
  --tc-primary-rgb: 196, 154, 108; --tc-link-rgb: 220, 182, 140; --tc-danger-rgb: 165, 51, 43; --tc-success-rgb: 47, 106, 23;
}

/* The Bootstrap bridge, for the two new themes only: its own body, border and field colours follow the theme's tokens, so no
   white Bootstrap element is left in them. (The old themes keep what they had; widening this to all is a decision after go-live.) */
html:root:is([data-theme="calm"], [data-theme="evening"]) {
  --bs-body-bg: var(--tc-card);
  --bs-body-color: var(--tc-text);
  --bs-emphasis-color: var(--tc-text-strong);
  --bs-secondary-color: var(--tc-text-muted);
  --bs-secondary-bg: var(--tc-head-bg);
  --bs-tertiary-bg: var(--tc-figure-bg);
  --bs-border-color: var(--tc-border);
}

:is([data-theme="calm"], [data-theme="evening"]) :is(.form-control, .form-select) {
  background-color: var(--tc-field-bg);
  border-color: var(--tc-field-border);
  color: var(--tc-text);
}

/* Bootstrap's outline buttons and red text keep their own fixed colours, which on the darker cards fall under 4.5:1
   (measured 3.2-3.9 in a browser): in the two new themes they take the theme's readable text tokens. */
:is([data-theme="calm"], [data-theme="evening"]) .btn-outline-secondary {
  --bs-btn-color: var(--tc-text);
  --bs-btn-border-color: var(--tc-field-border);
  --bs-btn-hover-color: var(--tc-text);
  --bs-btn-hover-bg: var(--tc-outline-hover);
  --bs-btn-hover-border-color: var(--tc-field-border);
  --bs-btn-active-color: var(--tc-text);
  --bs-btn-active-bg: var(--tc-outline-hover);
  --bs-btn-active-border-color: var(--tc-field-border);
}

:is([data-theme="calm"], [data-theme="evening"]) .btn-outline-success {
  --bs-btn-color: var(--tc-success-text);
  --bs-btn-border-color: var(--tc-success-text);
}

:is([data-theme="calm"], [data-theme="evening"]) .btn-outline-danger {
  --bs-btn-color: var(--tc-danger-text);
  --bs-btn-border-color: var(--tc-danger-text);
}

:is([data-theme="calm"], [data-theme="evening"]) .text-danger {
  color: var(--tc-danger-text) !important;
}

/* The order list's small "Szűrők törlése" is drawn in the primary colour, which on the calm ground is 4.07:1: the link colour here. */
:is([data-theme="calm"], [data-theme="evening"]) [data-orders-clear] {
  color: var(--tc-link);
}

/* An eighth larger than the site's own size - on a phone and on a wide screen alike. */
:root[data-theme="workshop"] {
  font-size: calc(14px * 1.125);
}

@media (min-width: 768px) {
  :root[data-theme="workshop"] {
    font-size: calc(16px * 1.125);
  }
}

:root[data-theme="workshop"] body {
  color: var(--tc-text);
}

:root[data-theme="workshop"] .btn,
:root[data-theme="workshop"] .form-control,
:root[data-theme="workshop"] .form-select {
  min-height: 2.75rem;
}

:root[data-theme="workshop"] .btn-sm,
:root[data-theme="workshop"] .form-control-sm,
:root[data-theme="workshop"] .form-select-sm {
  min-height: 2.5rem;
  font-size: 1rem;
}

:root[data-theme="workshop"] .form-check-input {
  width: 1.4em;
  height: 1.4em;
}

/* The larger box needs more room beside its label, and a switch stays a switch, wider than tall (SR1r: the box had
   squeezed the switch into an empty ring and touched the checkbox's label). */
:root[data-theme="workshop"] .form-check {
  padding-left: 2em;
}

:root[data-theme="workshop"] .form-check .form-check-input {
  margin-left: -2em;
}

:root[data-theme="workshop"] .form-switch {
  padding-left: 3.1em;
}

:root[data-theme="workshop"] .form-switch .form-check-input {
  width: 2.5em;
  margin-left: -3.1em;
}

:root[data-theme="workshop"] .table > :not(caption) > * > * {
  padding: 0.6rem 0.6rem;
}

:root[data-theme="workshop"] :focus-visible {
  outline: 3px solid var(--tc-focus);
  outline-offset: 2px;
}

:root[data-theme="workshop"] .task-meta,
:root[data-theme="workshop"] .text-muted {
  color: var(--tc-text-muted) !important;
}

/* A group's head row in a list (the gluing board's kinds): Bootstrap's table-light, but following the theme. */
.table > tbody > tr.tc-row-group {
  --bs-table-color: var(--tc-row-group-text);
  --bs-table-bg: var(--tc-row-group-bg);
  --bs-table-border-color: var(--tc-row-group-border);
}

.app-body {
  background: var(--tc-surface);
}

.tc-navbar {
  background: var(--tc-brand);
}

.tc-navbar .navbar-brand,
.tc-navbar .nav-link {
  color: var(--tc-on-brand);
}

.tc-navbar .nav-link:hover {
  color: var(--tc-nav-hover);
}

.page-eyebrow {
  color: var(--tc-brand-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-title {
  color: var(--tc-text);
  font-weight: 700;
  margin: 0.25rem 0 0.35rem;
}

.page-subtitle {
  color: var(--tc-text-muted);
  margin-bottom: 0;
}

.btn-tc {
  background: var(--tc-primary);
  color: var(--tc-on-primary);
  border: 1px solid var(--tc-primary-border);
  font-weight: 600;
}

.btn-tc:hover {
  background: var(--tc-primary-hover);
  color: var(--tc-on-primary);
}

.btn-tc-outline {
  background: var(--tc-card);
  color: var(--tc-text-strong);
  border: 1px solid var(--tc-border);
  font-weight: 600;
}

.btn-tc-outline:hover {
  background: var(--tc-outline-hover);
  color: var(--tc-text-strong);
}

.tc-tabs {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--tc-tabs-bg);
  border-radius: 0.75rem;
  padding: 0.3rem;
}

.tc-tabs a {
  padding: 0.45rem 1.1rem;
  border-radius: 0.55rem;
  text-decoration: none;
  color: var(--tc-text-muted);
  font-weight: 600;
}

.tc-tabs a.active {
  background: var(--tc-card);
  color: var(--tc-text);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--tc-backdrop) 12%, transparent);
}

/* A second row of tabs inside a section, quieter than the first so the two read as a hierarchy
   rather than as two equal choices. */
/* A cost sheet: numbers in one column width so they line up, and the sub-lines quieter than the
   kind they belong to. */
.cost-sheet__num {
  font-variant-numeric: tabular-nums;
}

.cost-sheet__child > td {
  border-top-style: dashed;
}

.cost-sheet__total > td {
  border-top: 2px solid var(--tc-border);
}

.tc-tabs--inner {
  background: transparent;
  padding: 0;
  gap: 0.15rem;
}

.tc-tabs--inner a {
  padding: 0.3rem 0.8rem;
  font-weight: 500;
  font-size: 0.925rem;
}

.tc-tabs--inner a.active {
  background: var(--tc-tabs-bg);
  box-shadow: none;
}

.tc-card {
  background: var(--tc-card);
  border: 1px solid var(--tc-border);
  border-radius: 0.85rem;
}

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.15rem 0;
  font-weight: 600;
  color: var(--tc-text-chip);
}

.member-initial {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  color: var(--tc-on-dark);
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.schedule-scroll {
  overflow-x: auto;
}

/* A table's "what happens" sentence keeps a readable width on a phone; the table scrolls sideways instead. */
.tc-col-what {
  min-width: 14rem;
}

.schedule-table {
  width: 100%;
  min-width: 60rem;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--tc-card);
  border: 1px solid var(--tc-border);
  border-radius: 0.85rem;
  overflow: clip;
}

.schedule-table th,
.schedule-table td {
  border-bottom: 1px solid var(--tc-border);
  border-right: 1px solid var(--tc-border);
  padding: 0.85rem 1rem;
  vertical-align: top;
}

.schedule-table th:last-child,
.schedule-table td:last-child {
  border-right: 0;
}

.schedule-table tr:last-child td {
  border-bottom: 0;
}

.schedule-table thead th {
  background: var(--tc-head-bg);
  text-align: center;
  color: var(--tc-text);
}

.schedule-table thead th.task-col,
.schedule-table td.task-col {
  text-align: left;
  min-width: 15rem;
}

.schedule-table th.today,
.schedule-table td.today {
  background: var(--tc-today-bg);
}

.schedule-table th.today {
  border-top: 3px solid var(--tc-amber);
  color: var(--tc-amber-text);
}

.schedule-table th.weekend,
.schedule-table td.weekend {
  background: var(--tc-weekend);
}

.task-meta {
  color: var(--tc-text-muted);
  font-size: 0.82rem;
}

.cell-link {
  display: block;
  text-decoration: none;
  color: inherit;
  min-height: 2.5rem;
}

.cell-empty {
  border: 1px dashed var(--tc-cell-empty-border);
  border-radius: 0.5rem;
  color: var(--tc-cell-empty-text);
  text-align: center;
  padding: 0.5rem;
  font-size: 0.85rem;
}

.cell-understaffed {
  border: 1px solid var(--tc-understaffed-border);
  background: var(--tc-understaffed-bg);
  border-radius: 0.5rem;
  padding: 0.4rem 0.5rem;
}

.cell-warning {
  color: var(--tc-cell-warning);
  font-size: 0.78rem;
  font-weight: 600;
}

.day-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  padding: 0.2rem 0.35rem;
  margin-right: 0.2rem;
  border-radius: 0.4rem;
  background: var(--tc-chip-off-bg);
  color: var(--tc-deco);
  font-size: 0.78rem;
  font-weight: 600;
}

.day-chip.on {
  background: var(--tc-chip-on-bg);
  color: var(--tc-chip-on-text);
}

.task-row {
  padding: 1rem 1.15rem;
}

.section-label {
  color: var(--tc-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Phone-first cards: the same data as the wide tables, one block at a time. */

.day-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--tc-border);
  background: var(--tc-head-bg);
  border-radius: 0.85rem 0.85rem 0 0;
}

.day-card-today .day-card-head {
  background: var(--tc-today-bg);
  border-top: 3px solid var(--tc-amber);
  color: var(--tc-amber-text);
}

.day-card-row {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--tc-divider);
}

.day-card-row:last-child {
  border-bottom: 0;
}

.entry-card {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--tc-divider);
}

.entry-card:last-child {
  border-bottom: 0;
}

.entry-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.entry-card-figure {
  font-weight: 700;
  white-space: nowrap;
}

.entry-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}

.entry-card dt {
  color: var(--tc-text-muted);
  font-weight: 500;
}

.entry-card dd {
  margin: 0;
}

details > summary {
  cursor: pointer;
}

/* D1/2 (the designer, 10-17): the station form's "és raktárra veszem" tick stands above its button - the label is the target,
   44 px at least, the box itself larger than the browser's 13 px. */
.tc-stock-tick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin: 0;
  font-size: 0.9rem;
  cursor: pointer;
}

.tc-stock-tick input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  margin: 0;
}

/* D1/4 (Gábor works on a tablet): the 44 px rule below lives under 768 px; a tablet - any coarse pointer - was about 31 px.
   The same sizes for a finger wherever the screen is wide. */
@media (pointer: coarse) {
  :root[data-theme] .btn,
  :root[data-theme] .form-control,
  :root[data-theme] .form-select {
    min-height: max(44px, 2.75rem);
  }

  :root[data-theme] .form-check-input {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
  }

  :root[data-theme] .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding-left: 0;
  }

  :root[data-theme] .form-check .form-check-input {
    margin-top: 0;
    margin-left: 0;
    float: none;
  }

  /* Review 10-17: the box above made a switch a round dot outside the workshop theme - the phone's switch rule holds here too. */
  :root[data-theme] .form-switch .form-check-input {
    width: 3.2rem;
    height: 1.6rem;
  }

  :root[data-theme] .form-switch {
    position: relative;
  }

  :root[data-theme] .form-switch .form-check-label::after {
    content: "";
    position: absolute;
    inset: 0;
  }
}

/* D3/18c (10-17): a small button or box that is still a finger's target - 44 px high at a desk too, not only on a phone. */
.tc-tap {
  min-height: 44px;
}

@media (max-width: 767.98px) {
  html {
    font-size: 15px;
  }

  /* D1/7 (the designer, 10-17): on a phone the small print - the muted lines, the card labels - was about 12 and 11 px. */
  .task-meta,
  .form-label {
    font-size: 0.9rem;
  }

  /* D1/6: the taking-in's save, a fixed full-width bar with the pieces that came; the page has room under it, and the site's own
     bottom bar (where there is one) stays under this one. */
  [data-acceptance-bar] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1031;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--tc-card);
    border-top: 1px solid var(--tc-border);
  }

  body.tc-has-bottombar [data-acceptance-bar] {
    bottom: 3.25rem;
    padding-bottom: 0.6rem;
  }

  /* Review 10-17: named from the theme's root, as the 44 px button rules are, and one step more specific - the bare selector lost
     to them and the save stayed 44 px. */
  :root[data-theme] [data-acceptance-bar] [data-submit] {
    flex: 1 1 auto;
    min-height: 48px;
    font-size: 1rem;
  }

  [data-acceptance-one-page] {
    padding-bottom: 6rem;
  }

  .page-title {
    font-size: 1.5rem;
  }

  /* MOBIL-1 (the user, 10-01): the tab rows wrap on a phone - every tab in sight, none off the edge (P18 had them
     scroll sideways). The markup's flex-wrap utility is !important, so this one is too. Each tab a full tap target.
     Kivétel - a tulajdonos 10-16-i döntése: a gyártási fülsáv telefonon egysoros, görgethető (K-T14; below). */
  .tc-tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    white-space: normal;
    flex-wrap: wrap !important;
  }

  /* K-T14 - a tulajdonos 10-16-i döntése: a gyártási fülsáv telefonon egysoros, görgethető (the row whose tabs are the
     process's: data-tab="process"). Its active tab is brought into sight on loading, and a faint edge shows where more
     tabs wait (site.js sets data-more-left / data-more-right; the mask is opaque currentColor fading out - no colour) - as
     the planner's row scrolls. A desk still wraps. */
  .tc-tabs:has(> a[data-tab="process"]) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
  }

  .tc-tabs[data-more-right]:has(> a[data-tab="process"]) {
    -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, currentColor calc(100% - 1.5rem), transparent);
  }

  .tc-tabs[data-more-left]:has(> a[data-tab="process"]) {
    -webkit-mask-image: linear-gradient(to right, transparent, currentColor 1.5rem);
    mask-image: linear-gradient(to right, transparent, currentColor 1.5rem);
  }

  .tc-tabs[data-more-left][data-more-right]:has(> a[data-tab="process"]) {
    -webkit-mask-image: linear-gradient(to right, transparent, currentColor 1.5rem, currentColor calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, currentColor 1.5rem, currentColor calc(100% - 1.5rem), transparent);
  }

  .tc-tabs a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* K-T14 (the coordinator's 10-16, MOBIL-1 kept): the production row's long names short on a phone - "4. Átvétel", "Egyéb";
     the whole name stays in the link's title and aria-label. */
  .tc-tab-rest {
    display: none;
  }

  .tc-tab-cap {
    text-transform: capitalize;
  }

  /* MOBIL-1: a 16 px margin each side of the page on a phone. */
  .container,
  .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* The design critique: the settings' inner row wraps instead of scrolling - a second row that scrolled hid its
     tabs off the screen; the stations' row scrolls, its active tab brought into view (site.js). */
  .tc-tabs.tc-tabs--inner {
    flex-wrap: wrap !important;
    white-space: normal;
    overflow-x: visible;
  }

  /* Every table scrolls inside its card instead of pushing the page sideways - the wrapped ones as before, the
     ones without a wrapper too (P18). The card scrolls, so a narrow table still stretches to the card's width (P18
     review); a table outside any card scrolls on its own. */
  .tc-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  main table.table:not(.tc-card table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* A workshop page's list (P19): marked tc-stack-sm, its rows become cards on a phone - each cell on its own line,
     under its column's name (site.js writes it as data-label), and its fields and buttons as wide as the card.
     The same forms, the same fields: only how they are laid out. */
  table.tc-stack-sm,
  table.tc-stack-sm > tbody,
  table.tc-stack-sm > tbody > tr,
  table.tc-stack-sm > tbody > tr > td {
    display: block;
    width: 100%;
  }

  table.tc-stack-sm {
    overflow-x: visible;
  }

  table.tc-stack-sm > thead {
    display: none;
  }

  table.tc-stack-sm > tbody > tr {
    border: 1px solid var(--tc-border);
    border-radius: 0.6rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--tc-card);
  }

  table.tc-stack-sm > tbody > tr > td {
    border: 0;
    padding: 0.3rem 0;
    text-align: left !important;
    white-space: normal;
  }

  table.tc-stack-sm > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tc-text-muted);
  }

  table.tc-stack-sm > tbody > tr > td .form-control,
  table.tc-stack-sm > tbody > tr > td .form-select,
  table.tc-stack-sm > tbody > tr > td .btn:not(.btn-link),
  table.tc-stack-sm > tbody > tr > td [style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  table.tc-stack-sm > tbody > tr > td .row > [class*="col"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Comfortable tap targets on a phone: 44 px at least (MOBIL-1) - 2.75rem alone is 41 px at the phone's 15 px root.
     In every theme (MOBIL-1r): the workshop theme's own sizes (2.75rem, the small ones 2.5rem) name the theme's root,
     so these name it too - as specific, and later. */
  :root[data-theme] .btn,
  :root[data-theme] .form-control,
  :root[data-theme] .form-select {
    min-height: max(44px, 2.75rem);
  }

  /* MOBIL-1: a tick box big enough to hit, its row (and its label) a 44 px target. */
  :root[data-theme] .form-check-input {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
  }

  /* The box sits in the row's flex, at its left: no indent kept for a floated box (MOBIL-1r). */
  :root[data-theme] .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding-left: 0;
  }

  :root[data-theme] .form-check .form-check-input {
    margin-top: 0;
    margin-left: 0;
    float: none;
  }

  .form-check-label {
    padding: 0.5rem 0;
  }

  /* A switch keeps its shape, twice as wide as tall, and its whole row - the switch and its words - is its target, 44 px
     high (MOBIL-1r): the label's layer over the row toggles it, as the label does. */
  :root[data-theme] .form-switch .form-check-input {
    width: 3.2rem;
    height: 1.6rem;
  }

  :root[data-theme] .form-switch {
    position: relative;
  }

  :root[data-theme] .form-switch .form-check-label::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* A bare tick box in a row (the planner's plan, the CNC issue): its own 44 px target around it. */
  .tc-tap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
  }

  /* F-035: the menu's own button a 44 px target too - it was 53 x 38 on a 375 px phone. */
  .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
  }

  /* The trial's banner: one line on a phone - the name and the day, the clock's everyday buttons (it had taken 110 px,
     a seventh of the screen); the rest opens on a tap of the name. */
  .trial-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.5rem;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .trial-banner:not(.is-open) [data-trial-banner-detail] {
    display: none !important;
  }

  .trial-banner .ms-2 {
    margin-left: 0 !important;
  }

  .trial-banner-toggle {
    min-height: 44px;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: inherit;
    font-weight: 700;
  }

  .trial-banner-toggle::after {
    content: " \25BE";
  }

  .trial-banner.is-open .trial-banner-toggle::after {
    content: " \25B4";
  }

  .kpi-card {
    flex: 1 1 100%;
  }

  .load-card {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Management dashboard: extra work is always red, base work always green. */

.kpi-card {
  flex: 1 1 14rem;
  padding: 1.1rem 1.25rem;
}

.kpi-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--tc-text);
  line-height: 1.1;
}

.kpi-value.extra {
  color: var(--tc-danger-text);
}

.stack-row {
  display: grid;
  grid-template-columns: 7rem 1fr 9rem;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.65rem;
}

.stack-track {
  position: relative;
  height: 1.75rem;
  background: var(--tc-stack-track);
  border-radius: 0.35rem;
  overflow: hidden;
}

.stack-seg {
  position: absolute;
  top: 0;
  bottom: 0;
}

.stack-seg.base {
  background: var(--tc-base);
}

.stack-seg.extra-approved {
  background: var(--tc-extra);
}

.stack-seg.extra-pending {
  background: repeating-linear-gradient(
    45deg,
    var(--tc-extra),
    var(--tc-extra) 4px,
    var(--tc-extra-pending) 4px,
    var(--tc-extra-pending) 8px
  );
}

/* Project work is blue everywhere, the way extra work is always red. */
.stack-seg.project {
  background: var(--tc-project);
}

.legend-swatch.project {
  background: var(--tc-project);
}

.stack-seg.project-pending {
  background: repeating-linear-gradient(45deg, var(--tc-project), var(--tc-project) 4px, var(--tc-project-pending) 4px, var(--tc-project-pending) 8px);
}

.legend-swatch.project-pending {
  background: repeating-linear-gradient(45deg, var(--tc-project), var(--tc-project) 3px, var(--tc-project-pending) 3px, var(--tc-project-pending) 6px);
}

.stack-seg.base-pending {
  background: repeating-linear-gradient(
    45deg,
    var(--tc-base),
    var(--tc-base) 4px,
    var(--tc-base-pending) 4px,
    var(--tc-base-pending) 8px
  );
}

.legend-swatch.base-pending {
  background: repeating-linear-gradient(45deg, var(--tc-base), var(--tc-base) 3px, var(--tc-base-pending) 3px, var(--tc-base-pending) 6px);
}

.goal-line {
  position: absolute;
  top: -0.2rem;
  bottom: -0.2rem;
  width: 0;
  border-left: 2px dashed var(--tc-mark-avg);
  z-index: 2;
}

.stack-scale {
  position: relative;
  height: 1.25rem;
  margin-left: 7.75rem;
  margin-right: 9.75rem;
  color: var(--tc-text-muted);
  font-size: 0.78rem;
}

.stack-scale span {
  position: absolute;
  transform: translateX(-50%);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  color: var(--tc-legend);
  font-size: 0.82rem;
  margin-bottom: 0.9rem;
}

.legend-swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 0.2rem;
  margin-right: 0.35rem;
  vertical-align: -1px;
}

.legend-swatch.base { background: var(--tc-base); }

.legend-swatch.extra-approved { background: var(--tc-extra); }

.legend-swatch.extra-pending {
  background: repeating-linear-gradient(45deg, var(--tc-extra), var(--tc-extra) 3px, var(--tc-extra-pending) 3px, var(--tc-extra-pending) 6px);
}

.legend-swatch.goal {
  width: 0;
  border-left: 2px dashed var(--tc-mark-avg);
  height: 1rem;
  border-radius: 0;
}

.diff-positive { color: var(--tc-success-text); font-weight: 600; }

.diff-negative { color: var(--tc-danger-text); font-weight: 600; }

@media (max-width: 640px) {
  .stack-row {
    grid-template-columns: 5.5rem 1fr;
  }

  .stack-row .stack-figures {
    grid-column: 1 / -1;
    text-align: left;
  }

  .stack-scale {
    margin-left: 6rem;
    margin-right: 0;
  }
}
/* Weekly load per person: one horizontal bar each, stacked under one another. The full width is
   whoever carries the most time that week; everybody else is drawn in proportion to them. Same
   colours as the reports — green base work, blue project, red extra. */
.load-chart {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.load-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 8.5rem;
  gap: 0.75rem;
  align-items: center;
}

.load-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.9rem;
}

.load-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Two bars to a line: the plan above, what was recorded against it below. */
.load-bars {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.load-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 1.25rem;
  background: var(--tc-bar-bg);
  border: 1px solid var(--tc-bar-border);
  border-radius: 0.4rem;
  overflow: hidden;
}

/* The recorded bar is the quieter of the two: the plan is what the week is read against. */
.load-bar.recorded {
  height: 1rem;
  background: var(--tc-bar-recorded);
}

.load-bar.recorded .load-seg {
  opacity: 0.72;
}

.load-bar-tag {
  position: absolute;
  left: 0.3rem;
  z-index: 3;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tc-tag);
  pointer-events: none;
}

/* Reference lines drawn across every bar: the team's mean, median and moving average. */
.load-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 2;
}

.load-mark.avg { border-left: 2px dashed var(--tc-mark-avg); }

.load-mark.median { border-left: 2px dotted var(--tc-mark-median); }

.load-mark.moving { border-left: 2px dashed var(--tc-mark-moving); }

.load-seg {
  height: 100%;
  min-width: 3px;
}

/* Rounded on the outer edges only, so the three segments read as one bar. */
.load-seg:first-child {
  border-top-left-radius: 0.35rem;
  border-bottom-left-radius: 0.35rem;
}

.load-seg:last-child {
  border-top-right-radius: 0.35rem;
  border-bottom-right-radius: 0.35rem;
}

.load-seg.base { background: var(--tc-base); }

.load-seg.project { background: var(--tc-project); }

.load-seg.extra { background: var(--tc-extra); }

.load-free {
  padding-left: 2.6rem;
  font-size: 0.72rem;
  color: var(--tc-deco);
  white-space: nowrap;
}

/* The week's own line closes the chart, so it is set apart from the people above it. */
.load-row-total {
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--tc-total-rule);
}

.load-row-total .load-bar {
  height: 1.5rem;
}

.load-row-total .load-bar.recorded {
  height: 1.2rem;
}

.load-total {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.load-total .over { color: var(--tc-danger-text); }

.load-capacity {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--tc-text-faint);
}

.load-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--tc-text-muted);
}

.load-key {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.2rem;
  margin-right: 0.3rem;
  vertical-align: -1px;
}

.load-key.base { background: var(--tc-base); }

.load-key.project { background: var(--tc-project); }

.load-key.extra { background: var(--tc-extra); }

.load-key.mark-avg,
.load-key.mark-median,
.load-key.mark-moving {
  width: 0;
  height: 0.9rem;
  border-radius: 0;
  margin-right: 0.45rem;
}

.load-key.mark-avg { border-left: 2px dashed var(--tc-mark-avg); }

.load-key.mark-median { border-left: 2px dotted var(--tc-mark-median); }

.load-key.mark-moving { border-left: 2px dashed var(--tc-mark-moving); }

/* The three figures above the chart. */
.load-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.load-stat {
  flex: 1 1 8rem;
  background: var(--tc-figure-bg);
  border: 1px solid var(--tc-figure-border);
  border-radius: 0.45rem;
  padding: 0.4rem 0.6rem;
}

.load-stat-label {
  display: block;
  font-size: 0.72rem;
  color: var(--tc-text-muted);
}

.load-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tc-text-figure);
}

.load-stat-diff {
  display: block;
  font-size: 0.72rem;
  color: var(--tc-text-muted);
}

.load-stat-diff.up { color: var(--tc-danger-text); }

.load-stat-diff.down { color: var(--tc-success-text); }

/* Phone: the name and the figures sit above the pair of bars, which take the full width. */
@media (max-width: 640px) {
  .load-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.5rem;
  }

  .load-bars {
    grid-column: 1 / -1;
  }

  .load-name {
    font-size: 0.85rem;
  }

  .load-chart {
    gap: 0.75rem;
  }
}

/* Planned against actual on a project, side by side. */
.project-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.project-figure {
  flex: 1 1 11rem;
  background: var(--tc-figure-bg);
  border: 1px solid var(--tc-figure-border);
  border-radius: 0.45rem;
  padding: 0.5rem 0.7rem;
}

.project-figure-label {
  display: block;
  font-size: 0.72rem;
  color: var(--tc-text-muted);
}

.project-figure-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tc-text-figure);
}

/* A time entry the member has already dealt with: their own figure is in, so the row reads as
   done rather than waiting. */
.entry-recorded,
tr.entry-recorded > td {
  background: var(--tc-entry-recorded);
}

.entry-recorded {
  border-left: 3px solid var(--tc-base);
}

/* The gluer's card list. Everything here is sized for a thumb on a phone at the bench: no
   horizontal scrolling, no table, and touch targets well over 44 px. */
.job-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 0.75rem;
}

.job-card {
  padding: 1rem;
}

.job-card-active {
  border-color: var(--tc-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc-brand) 25%, transparent);
}

.job-card-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem 0.75rem;
}

.job-card-wide {
  grid-column: span 2;
}

.job-card-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}

.job-card-value {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tc-text-strong);
  overflow-wrap: anywhere;
}

.job-card-pieces {
  font-size: 1.6rem;
  line-height: 1.1;
}

/* Big enough to hit without looking: the bench is not a desk. */
.job-card-button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.job-card-input {
  min-height: 2.75rem;
  max-width: 7rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.job-card-finish {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--tc-border);
}

@media (max-width: 640px) {
  .job-cards {
    grid-template-columns: 1fr;
  }

  .job-card-input {
    max-width: 100%;
    flex: 1 1 8rem;
  }
}

/* SR1: the gluer's card in the simplified view, its wood on top. The wood's colours come on the card and on each band
   as --wood, --wood-ink, --wood-grain and --wood-pill - WoodSwatch works them out, the ink reading at 3:1 on the wood
   and its grain, the small labels at 4.5:1 on their pill -, so the head is the same in every theme: it is the wood's
   colour. The body wears the theme's tokens like every other card. The full view never carries .job-card-wood. */
/* The rounded corners clip the head; sideways, whatever is too wide still scrolls, as on every card on a phone (P18). */
.job-card-wood {
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* The head: the woods as bands by their shares, and over the main band the name's block on the same wood. An even
   mix (WoodHead.EvenShare), and on a phone every mix, runs the name across the whole head on the main wood instead,
   the woods below it as a thin strip by their shares: in half a band the name would break mid-word. */
.wood-head {
  display: grid;
  min-height: 6.75rem;
}

.wood-strip,
.wood-text {
  grid-area: 1 / 1;
}

.wood-strip {
  display: flex;
}

.wood-band {
  flex: 1 1 auto;
  min-width: 0;
}

.wood-head-even {
  grid-template-rows: 1fr auto;
}

.wood-head-even > .wood-text {
  width: auto;
  margin-left: 0;
}

/* The strip sits apart from the name's block by a hairline of the card, so the main wood's share reads as a share. */
.wood-head-even > .wood-strip {
  grid-area: 2 / 1;
  height: 0.6rem;
  border-top: 2px solid var(--tc-card);
}

/* The grain: three layers of lengthwise lines at slightly different angles and spacings, so they never settle into
   stripes, and a faint noise over them - at most 6 % dark (WoodSwatch.NoiseOpacity). */
.wood-band,
.wood-text {
  color: var(--wood-ink);
  background-color: var(--wood);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015 0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(179.2deg, transparent 0 17px, var(--wood-grain) 17px 19px, transparent 19px 31px),
    repeating-linear-gradient(180.6deg, transparent 0 7px, color-mix(in srgb, var(--wood-grain) 55%, transparent) 7px 8px, transparent 8px 13px),
    repeating-linear-gradient(179.7deg, transparent 0 3px, color-mix(in srgb, var(--wood-grain) 30%, transparent) 3px 4px, transparent 4px 9px);
}

.wood-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  width: var(--main-share, 100%);
  min-width: 0;
  margin-left: var(--main-offset, 0%);
  padding: 0.9rem 1rem 1rem;
}

.wood-title {
  min-width: 0;
}

/* The small labels sit on a pill of the wood, 85 % opaque (WoodSwatch.PillOpacity): readable whatever the admin picks. */
.wood-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wood-pill) 85%, transparent);
  color: var(--wood-ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.wood-eyebrow {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 24 px and more, bold: large text, 3:1. */
.wood-name {
  display: block;
  margin-top: 0.35rem;
  font-size: max(24px, 1.75rem);
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.job-card-body {
  padding: 1rem;
}

/* The length takes what it needs, the width the rest: "100 × 95" stays on one line on a phone. */
.wood-figures {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem 1.5rem;
}

.wood-figure {
  display: block;
  color: var(--tc-text-strong);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.wood-figure small,
.wood-pieces-value small {
  margin-left: 0.25rem;
  color: var(--tc-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.wood-specs {
  margin-top: 0.4rem;
  color: var(--tc-text-muted);
  font-size: 0.9rem;
}

.wood-pieces {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--tc-border);
}

.wood-pieces-label {
  color: var(--tc-text);
  font-weight: 600;
}

.wood-pieces-value {
  color: var(--tc-text-strong);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
}

/* The completion in the wood card: round step numbers, − and + beside the count, big enough for a thumb. */
.job-card-wood .gluing-finish {
  padding-top: 1rem;
  border-top: 1px solid var(--tc-border);
}

.finish-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--tc-text-strong);
  color: var(--tc-card);
  font-size: 0.95rem;
  font-weight: 800;
  vertical-align: middle;
}

.finish-count {
  align-items: center;
}

.job-card-wood .finish-count .job-card-input {
  flex: 0 1 5.5rem;
  max-width: 5.5rem;
  text-align: center;
}

.finish-count-button {
  min-width: max(44px, 2.75rem);
  min-height: max(44px, 2.75rem);
  padding: 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.finish-open {
  color: var(--tc-text-muted);
  font-weight: 600;
}

.job-card-wood .btn-group[aria-label="Forma"] {
  display: flex;
}

.job-card-wood .btn-group[aria-label="Forma"] .btn {
  flex: 1 1 0;
  min-height: max(44px, 2.75rem);
}

.finish-actions .btn-tc {
  flex: 1 1 auto;
}

/* The blank drawn in its wood; its labels in the card's text, the one inside the wood in the wood's ink on a halo. */
.job-card-wood .blank-drawing text {
  fill: var(--tc-text-strong);
}

.job-card-wood .blank-drawing [data-label="head"] {
  fill: var(--wood-ink);
  paint-order: stroke;
  stroke: var(--wood);
  stroke-width: 3px;
}

.wood-fill {
  fill: var(--wood);
}

.wood-line {
  fill: none;
  stroke: var(--wood-grain);
  stroke-width: 1.4;
}

.wood-line-soft {
  stroke-width: 0.8;
  opacity: 0.6;
}

/* JÚN-UX2: the blank from the side (_BlankDrawing), after the user's sample - in the card's wood where it gives one, a
   plain wood colour elsewhere; the dimension lines, the arrows and the dashed centre line in the text's colour. */
.blank-drawing {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  color: var(--tc-text-strong, currentColor);
}

.blank-drawing-sm {
  display: inline-block;
  max-width: 8rem;
  vertical-align: middle;
}

.blank-wood {
  fill: var(--wood, var(--tc-blank-wood));
}

.blank-grain {
  fill: none;
  stroke: var(--wood-grain, var(--tc-blank-grain));
  stroke-width: 1.2;
}

.blank-grain-soft {
  stroke-width: 0.7;
  opacity: 0.6;
}

.blank-body {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.blank-axis {
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 12 3 2 3;
  opacity: 0.75;
}

.blank-dim,
.blank-extension {
  stroke: currentColor;
  stroke-width: 1;
}

.blank-extension {
  opacity: 0.55;
}

.blank-arrow,
.blank-drawing text {
  fill: currentColor;
}

.blank-drawing text {
  font-size: 13px;
}

/* The admin's sample of a wood's colour, its name in the ink the card gives it. */
.wood-sample {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 0.4rem;
  background: var(--wood);
  color: var(--wood-ink);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* 16 px from the screen's edge on a phone: the container gives 0.75rem of it. */
  .job-cards {
    margin-inline: calc(16px - 0.75rem);
  }

  .wood-head-mix {
    grid-template-rows: 1fr auto;
  }

  .wood-head-mix > .wood-text {
    width: auto;
    margin-left: 0;
  }

  .wood-head-mix > .wood-strip {
    grid-area: 2 / 1;
    height: 0.6rem;
    border-top: 2px solid var(--tc-card);
  }
}

/* ---------------------------------------------------------------- stock chart
   Two charts, one hue each. Wood is m³ and adhesive is kg, so they never share a
   value axis — they are separate panels with separate scales. Text wears text
   tokens; only the bars carry the data colour. */

.stock-chart {
  --stock-wood: var(--tc-stock-wood);
  --stock-adhesive: var(--tc-stock-adhesive);
  --stock-ink: var(--tc-stock-ink);
  --stock-ink-muted: var(--tc-stock-ink-muted);
  --stock-axis: var(--tc-stock-axis);
  --stock-empty: var(--tc-stock-empty);
  display: grid;
  gap: 1.25rem;
}

.stock-chart__title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stock-ink-muted);
  margin-bottom: 0.35rem;
}

.stock-chart__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.stock-chart__bar--wood {
  fill: var(--stock-wood);
}

.stock-chart__bar--adhesive {
  fill: var(--stock-adhesive);
}

/* The claimed tail of a bar: the same hue as the bar it belongs to, paler. It is not a second
   series and gets no colour of its own — it is the same wood, just already spoken for. */
.stock-chart__bar--committed {
  fill-opacity: 0.32;
}

.stock-chart__note {
  flex-basis: 100%;
  margin-top: 0.25rem;
}

.stock-chart__empty {
  fill: var(--stock-empty);
}

.stock-chart__axis {
  stroke: var(--stock-axis);
  stroke-width: 1;
}

.stock-chart__label {
  fill: var(--stock-ink);
  font-size: 12px;
  font-weight: 600;
}

.stock-chart__value {
  fill: var(--stock-ink-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* On a phone the label column and the value column would squeeze the plot to
   nothing, so the chart scrolls sideways at its natural width instead of
   compressing until the bars stop being comparable. */
@media (max-width: 575.98px) {
  .stock-chart__svg {
    min-width: 32rem;
  }

  .stock-chart__panel {
    overflow-x: auto;
  }
}

/* Forced-colours mode replaces the fills; keep the bars visible by outlining them. */
@media (forced-colors: active) {
  .stock-chart__bar--wood,
  .stock-chart__bar--adhesive {
    forced-color-adjust: none;
    stroke: CanvasText;
    stroke-width: 1;
  }

  /* Opacity is dropped in forced colours, so the claimed part is told apart by a dashed outline
     instead — otherwise it would look identical to free stock. */
  .stock-chart__bar--committed {
    fill: Canvas;
    stroke-dasharray: 3 2;
  }
}

/* ---------------------------------------------------------------- stock overview

   An ordered table of bars. The bar makes a row comparable at a glance; the three number columns
   to its right are what somebody writes down, so they are tabular, right-aligned and share one
   width. Free is a restrained dark green, reserved is amber, and the track behind them is a
   neutral tint — so a row reads as one quantity split in two rather than two competing bars. */

.stock-table {
  --stock-free: var(--tc-stock-free);
  --stock-committed: var(--tc-stock-committed);
  --stock-track: var(--tc-stock-track);
  --stock-committed-tint: var(--tc-stock-committed-tint);

  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.stock-table__legend {
  display: flex;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--stock-ink-muted, var(--tc-text-muted));
}

.stock-table__key {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.stock-table__swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.2rem;
  display: inline-block;
}

.stock-table__swatch--free { background: var(--stock-free); }
.stock-table__swatch--committed { background: var(--stock-committed); }

.stock-table__block {
  border: 1px solid var(--tc-border);
  border-radius: 0.65rem;
  padding: 0.85rem 1rem;
}

.stock-table__head {
  margin-bottom: 0.5rem;
}

.stock-table__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}

.stock-table__scale {
  margin: 0.15rem 0 0;
  font-size: 0.78125rem;
  color: var(--stock-ink-muted, var(--tc-text-muted));
}

.stock-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.35rem;
  border-top: 1px solid var(--tc-border);
}

.stock-table__row--header {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 0.3rem;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--stock-ink-muted, var(--tc-text-muted));
}

/* A row with something reserved gets a faint amber wash, so it stands out in a long list without
   the number itself having to shout. */
.stock-table__row--committed {
  background: var(--stock-committed-tint);
  border-radius: 0.4rem;
}

.stock-table__name {
  min-width: 0;
}

.stock-table__label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.3rem;
  overflow-wrap: anywhere;
}

.stock-table__track {
  display: flex;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: var(--stock-track);
  overflow: hidden;
}

.stock-table__fill {
  display: block;
  height: 100%;
}

.stock-table__fill--free { background: var(--stock-free); }
.stock-table__fill--committed { background: var(--stock-committed); }

.stock-table__empty {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.78125rem;
  color: var(--stock-ink-muted, var(--tc-text-muted));
}

.stock-table__numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(5.5rem, auto));
  gap: 0.75rem;
  text-align: right;
}

.stock-table__value {
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
}

.stock-table__value--committed { color: var(--tc-stock-committed-text); }

/* The total is the figure most often quoted, so it carries slightly more weight than the two
   parts that make it up. */
.stock-table__value--total { font-weight: 700; }

.stock-table__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.stock-table__help {
  border-left: 3px solid var(--stock-committed);
  padding: 0.5rem 0.75rem;
  background: var(--stock-committed-tint);
  border-radius: 0.3rem;
}

.stock-table__warning {
  color: var(--tc-stock-warning-text);
}

/* On a phone the three columns cannot sit beside the bar without either wrapping badly or forcing
   the page to scroll sideways, so they drop underneath it and take their own labels with them. */
@media (max-width: 575.98px) {
  .stock-table__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .stock-table__row--header {
    display: none;
  }

  .stock-table__numbers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: left;
    gap: 0.5rem;
  }

  .stock-table__value::before {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--stock-ink-muted, var(--tc-text-muted));
  }

  .stock-table__numbers .stock-table__value:nth-child(1)::before { content: "Szabad"; }
  .stock-table__numbers .stock-table__value:nth-child(2)::before { content: "Lefoglalt"; }
  .stock-table__numbers .stock-table__value:nth-child(3)::before { content: "Összesen"; }
}

/* Forced colours drops the fills, so the two parts of a bar are told apart by an outline instead. */
@media (forced-colors: active) {
  .stock-table__fill {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
  }

  .stock-table__fill--committed {
    background: Canvas;
  }
}

/* P3: product pictures by their webshop address, with the drawing standing in. */
.tc-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: .35rem;
    background: var(--bs-tertiary-bg, var(--tc-thumb-bg));
    overflow: hidden;
    flex: none;
    width: var(--tc-thumb-size, 3rem);
    height: var(--tc-thumb-size, 3rem);
}

.tc-thumb img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

/* A package without its own picture: its components' pictures, small, side by side. */
.tc-thumb-parts {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    vertical-align: middle;
    max-width: 6.5rem;
}

/* The owner's 10-12: the picture shows on a phone too, a size smaller. */
@media (max-width: 575.98px) {
    .tc-thumb {
        width: calc(var(--tc-thumb-size, 3rem) * .75);
        height: calc(var(--tc-thumb-size, 3rem) * .75);
    }
}

.tc-thumb-drawing,
.tc-thumb-none {
    font-size: .7rem;
    color: var(--bs-secondary-color, var(--tc-text-subtle));
    text-decoration: none;
}

/* The owner's 10-12 (item 6): the product's own page - the header across; the sections side by side where the screen is
   wide, one under the other on a phone. */
.tc-product-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem 1rem; align-items: start; }
.tc-product-head__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.tc-product-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 992px) {
    .tc-product-head { grid-template-columns: auto minmax(0, 1fr) auto; }
    .tc-product-head__actions { grid-column: auto; justify-content: flex-end; align-self: center; max-width: 30rem; }
}
@media (min-width: 1200px) {
    .tc-product-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tc-product-section--wide { grid-column: 1 / -1; }
}
/* The row the list came back to is marked as Bootstrap marks an active row. Only the script's class marks it, not :target:
   a later history return lands on the old #termek-… address, and :target would keep marking that stale row. */
.table > tbody > tr.tc-row-returned { --bs-table-bg-state: var(--bs-table-active-bg); }

/* P4: the level number beside the tab's function name. */
.tc-tab-level {
    font-size: .75em;
    opacity: .6;
}

/* A fixed width written on an element - a narrow input, a name column - never pushes a phone's page sideways (P18). */
@media (max-width: 575.98px) {
  [style*="width:"],
  [style*="width :"] {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------- the planner's charts (H1-10 G5)
   Horizontal bars drawn as SVG on the server, one a row. The colours are the theme's tokens, so each theme draws them
   its own way; the text wears text tokens. On a phone the label goes above its bar. */

.plan-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}

.plan-chart__key {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.plan-chart__swatch {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 2px;
}

.plan-chart__swatch--marker {
  width: 3px;
  background: var(--tc-mark-moving);
}

.plan-chart__row {
  display: grid;
  grid-template-columns: minmax(8rem, 15rem) 1fr auto;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin-bottom: 0.35rem;
}

.plan-chart__label {
  font-size: 0.85rem;
  color: var(--tc-text);
  overflow-wrap: anywhere;
}

.plan-chart__value {
  font-size: 0.8rem;
  color: var(--tc-text-muted);
  white-space: nowrap;
}

.plan-chart__bar {
  width: 100%;
  height: 0.9rem;
  display: block;
}

.plan-chart__track { fill: var(--tc-bar-bg); }
.plan-chart__marker { stroke: var(--tc-mark-moving); stroke-width: 3; }

/* Each series its own hue (H1-10r: the gluing and the taking-in no longer both blue, the production no longer pale). */
.plan-chart__seg { stroke: var(--tc-card); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan-chart__seg--promised,
.plan-chart__seg--lead { fill: var(--tc-project); background: var(--tc-project); }
.plan-chart__seg--inprod,
.plan-chart__seg--acceptance { fill: var(--tc-brand-text); background: var(--tc-brand-text); }
.plan-chart__seg--waiting,
.plan-chart__seg--packing { fill: var(--tc-plan-waiting); background: var(--tc-plan-waiting); }
.plan-chart__seg--covered { fill: var(--tc-plan-free); background: var(--tc-plan-free); }
.plan-chart__seg--product { fill: var(--tc-base); background: var(--tc-base); }
.plan-chart__seg--tomake,
.plan-chart__seg--over { fill: var(--tc-extra); background: var(--tc-extra); }
.plan-chart__seg--blank,
.plan-chart__seg--gluing { fill: var(--tc-stock-wood); background: var(--tc-stock-wood); }
.plan-chart__seg--oiling,
.plan-chart__seg--shelf { fill: var(--tc-amber); background: var(--tc-amber); }

.plan-chart__detail { grid-column: 1 / -1; margin-top: -0.2rem; }

@media (max-width: 575.98px) {
  .plan-chart__row {
    grid-template-columns: 1fr auto;
  }

  .plan-chart__label {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------- UX-1: back where one was after a save
   The message shown where the person is (site.js copies a page's message here when its own place is out of sight),
   and the row or form just saved marked for a moment. */
.tc-toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(28rem, calc(100vw - 2rem));
}

.tc-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--tc-card);
  color: var(--tc-text);
  border: 1px solid var(--tc-border);
  border-left-width: 0.3rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.9rem rgba(0, 0, 0, 0.18);
}

.tc-toast--success { border-left-color: var(--tc-success-text); }
.tc-toast--danger { border-left-color: var(--tc-danger-text); }

.tc-toast__text { flex: 1 1 auto; }

.tc-just-saved {
  outline: 2px solid var(--tc-amber);
  outline-offset: 2px;
  animation: tc-just-saved 2.5s ease-out forwards;
}

@keyframes tc-just-saved {
  0%, 60% { outline-color: var(--tc-amber); }
  100% { outline-color: transparent; }
}

@media (max-width: 575.98px) {
  .tc-toasts {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}

/* The Haiku walk 7-8: on a phone the message sat over the bottom bar - above it now, its link clear of the bar's own. */
@media (max-width: 767.98px) {
  body.tc-has-bottombar .tc-toasts {
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }

  /* Review 10-17: above the taking-in's fixed bar too (D1/6: the 48 px save and its padding, about 4.5rem) - a message that stays
     until it is closed stood over "Átvétel rögzítése". With the site's bottom bar the taking-in's bar stands on it (3.25rem). */
  body:has([data-acceptance-bar]) .tc-toasts {
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
  }

  body.tc-has-bottombar:has([data-acceptance-bar]) .tc-toasts {
    bottom: calc(8.25rem + env(safe-area-inset-bottom));
  }
}

/* ===================================================================================================================
   PV1 (the Pénzügy and Vezetői look, 10-07): one status badge, one type label, the "now" card, the help, the figures band,
   the frame (groups, sub-pages, bottom bar), the progress bar; phone tables as label-value cards. Display only.
   =================================================================================================================== */
/* The status badge: a dot and a word - piros / sárga / zöld or the state itself; the same everywhere. */
.tc-st {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.tc-st::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.tc-st.r { color: var(--tc-danger-text); background: var(--tc-bad-bg); }
.tc-st.y { color: var(--tc-amber-text); background: var(--tc-warn-bg); }
.tc-st.g { color: var(--tc-success-text); background: var(--tc-ok-bg); }

/* The dot alone (menus, the bottom bar, the progress bar's steps). */
.tc-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; vertical-align: middle; }
/* The dot is a status mark alone: the palette's own red and green (the owner's 10-12). */
.tc-dot.r { background: var(--tc-status-bad); }
.tc-dot.y { background: var(--tc-amber-text); }
.tc-dot.g { background: var(--tc-status-ok); }

/* The type label, apart from the state, outlined: becsült (dashed amber), utólag (blue), tény (green). */
.tc-mark {
  display: inline-block;
  padding: 0 0.45rem;
  border: 1px solid currentColor;
  border-radius: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.tc-mark.est { color: var(--tc-amber-text); border-style: dashed; }
.tc-mark.late { color: var(--tc-info); background: var(--tc-info-bg); }
.tc-mark.fact { color: var(--tc-success-text); }

/* "Most ezt kell tudnod": a coloured stripe, a sentence, one main button. */
.tc-now {
  border: 1px solid var(--tc-border);
  border-top: 4px solid var(--tc-success-text);
  border-radius: 0.6rem;
  background: var(--tc-card);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.tc-now.r { border-top-color: var(--tc-danger-text); }
.tc-now.y { border-top-color: var(--tc-amber-text); }
.tc-now-text { font-weight: 600; }
.tc-now-sub { font-size: 0.85rem; color: var(--tc-text-muted); }

/* "? Mit mutat ez a lap": the page's introduction, word for word, behind a question mark. */
.tc-help > summary {
  display: inline-block;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--tc-link);
  list-style: none;
}

.tc-help > summary::-webkit-details-marker { display: none; }
.tc-help[open] > summary { margin-bottom: 0.35rem; }

/* The main figures in one band, the most important one green. */
.tc-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.tc-fig { border: 1px solid var(--tc-border); border-radius: 0.6rem; background: var(--tc-card); padding: 0.6rem 0.8rem; }
.tc-fig-label { font-size: 0.78rem; color: var(--tc-text-muted); }
.tc-fig-value { font-size: 1.15rem; font-weight: 700; color: var(--tc-text-figure); }
.tc-fig.key { border-color: var(--tc-success-text); background: var(--tc-ok-bg); }
.tc-fig.key .tc-fig-value { color: var(--tc-success-text); }

/* The group's bar: Vezetői · PÉNZÜGY · its groups with their dots; under it the progress bar, then the sub-pages. */
.tc-groupbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; background: var(--tc-brand); color: var(--tc-on-brand);
  border-radius: 0.6rem; padding: 0.45rem 0.85rem; margin-bottom: 0.6rem; }
/* Full strength on the light brown: a faded link would fall under 4.5:1 (the owner's 10-12). */
.tc-groupbar a { color: var(--tc-on-brand); text-decoration: none; }
.tc-groupbar a.active, .tc-groupbar a:hover { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tc-groupbar .tc-groupname { font-size: 0.72rem; letter-spacing: 0.08em; }
.tc-subnav { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.tc-subnav a { padding: 0.2rem 0.7rem; border: 1px solid var(--tc-border); border-radius: 999px; text-decoration: none; color: var(--tc-text); background: var(--tc-card); font-size: 0.85rem; }
.tc-subnav a.active { background: var(--tc-brand); color: var(--tc-on-brand); border-color: var(--tc-brand); }

/* The progress bar: the month's five steps, each its colour; a step a link to the page that solves it. */
.tc-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; border: 1px solid var(--tc-border); border-radius: 0.6rem;
  background: var(--tc-card); padding: 0.45rem 0.8rem; margin-bottom: 0.75rem; font-size: 0.85rem; }
.tc-progress-month { font-weight: 700; margin-right: 0.35rem; }
.tc-progress a { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; color: var(--tc-text); }
.tc-progress .sep { color: var(--tc-deco); }

/* The bottom bar: on a phone the five groups, each with its dot. */
.tc-bottombar { display: none; }

@media (max-width: 767.98px) {
  .tc-bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; justify-content: space-around;
    background: var(--tc-brand); padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom)); }
  .tc-bottombar a { color: var(--tc-on-brand); text-decoration: none; font-size: 0.72rem; text-align: center; }
  .tc-bottombar a.active { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  body.tc-has-bottombar main { padding-bottom: 4.5rem; }
  .tc-groupbar .tc-groupname, .tc-groupbar .tc-group-tabs { display: none; }
  .tc-subnav { width: 100%; overflow-x: auto; flex-wrap: nowrap; }

  /* Label left, value right: a phone's row card for the finance tables (tc-stack-sm tc-kv). */
  table.tc-stack-sm.tc-kv > tbody > tr > td[data-label] { display: flex; justify-content: space-between; gap: 0.75rem; }
  table.tc-stack-sm.tc-kv > tbody > tr > td[data-label]::before { flex: 0 0 auto; margin: 0; }
}

/* PV5: a mark with no word shows nothing. */
.tc-mark:empty { display: none; }

/* F-099: on a phone the finance and management pages' row forms (a reason, an amount, a button) wrap - each field and button the
   whole width, the button at the bottom - and a stacked cell holding a form or a sheet is not the label/value row (tc-kv), so
   nothing runs past its card. The same forms, the same fields: only how they are laid out. */
@media (max-width: 767.98px) {
  body.tc-has-bottombar main form.d-flex,
  body.tc-has-bottombar main form.d-inline-flex {
    flex-wrap: wrap;
    max-width: 100%;
  }

  body.tc-has-bottombar main form.d-flex > .form-control,
  body.tc-has-bottombar main form.d-flex > .form-select,
  body.tc-has-bottombar main form.d-flex > .btn,
  body.tc-has-bottombar main form.d-inline-flex > .form-control,
  body.tc-has-bottombar main form.d-inline-flex > .form-select,
  body.tc-has-bottombar main form.d-inline-flex > .btn {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100% !important;
  }

  table.tc-stack-sm.tc-kv > tbody > tr > td[data-label]:has(form, details) {
    display: block;
  }

  body.tc-has-bottombar main details[data-payment-sheet] > form,
  body.tc-has-bottombar main details[data-return-sheet] > form,
  body.tc-has-bottombar main details[data-correct-sheet] > form {
    max-width: 100% !important;
  }
}

/* F10: the accountant's read-only view - a page under the read-only note shows no form that would change anything (the handlers refuse it too). */
body:has([data-read-only]) form[method="post"] {
  display: none !important;
}

/* The order page's internal process map (the owner, 10-14): the stations wrap onto as many rows as a phone needs - never a
   sideways scroll -, each one's state said in words beside its colour: done in the theme's success green, the current one in
   its warning amber, the rest in its secondary grey; a station the line never needs (készletről) dashed, not greyed as pending. */
.tc-process-map {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tc-station {
  flex: 1 1 8.5rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--tc-border);
  border-radius: 0.375rem;
  background: var(--tc-surface);
  color: var(--tc-text-muted);
  overflow-wrap: anywhere;
}

.tc-station-name { font-weight: 600; }
.tc-station-state,
.tc-station-who { font-size: 0.8125rem; }

/* The owner, 10-16 evening: on a tablet or a screen the stations stand in ONE row (a phone still wraps - never a sideways scroll
   there); a row that is still too long for the width scrolls inside itself, the page does not. */
@media (min-width: 768px) {
  .tc-process-map { flex-wrap: nowrap; overflow-x: auto; }
  .tc-station { flex: 1 0 5.75rem; font-size: 0.875rem; overflow-wrap: break-word; }
}

.tc-station.is-done {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.tc-station.is-current {
  background: var(--bs-warning-bg-subtle);
  color: var(--tc-text);
  border: 2px solid var(--bs-warning-border-subtle);
}

.tc-station.is-current .tc-station-who { color: var(--bs-warning-text-emphasis); font-weight: 600; }

.tc-station.is-skipped {
  background: transparent;
  border-style: dashed;
}

.tc-engineering-editor { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
[data-production-focus] { scroll-margin-top: 8rem; }
[data-production-focus]:target { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.tc-engineering-editor .row > *, .tc-engineering-editor .d-flex > * { min-width: 0; }
.tc-engineering-editor input, .tc-engineering-editor select, .tc-engineering-editor textarea { max-width: 100%; }
.tc-engineering-navigation { border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1.5rem; max-width: min(36rem, calc(100vw - 2rem)); color: var(--bs-body-color); background: var(--bs-body-bg); }
.tc-engineering-navigation::backdrop { background: color-mix(in srgb, var(--tc-backdrop) 40%, transparent); }
@media (max-width: 575.98px) {
    .tc-engineering-editor .text-nowrap { white-space: normal !important; }
    .tc-engineering-editor .w-auto { max-width: 100%; }
    .tc-engineering-editor .kpi-value { font-size: 1.25rem; }
}

/* The owner's 10-21: the drawing's first page small on the data card (drawing-thumb.js). A plain link until the frame is in; then
   a 240 px card as wide as the column allows (a phone's whole width), the link laid over it so a tap anywhere opens it. */
.tc-drawing-thumb { margin: 0; }
.tc-drawing-thumb.has-frame {
    position: relative; width: 100%; max-width: 22rem; height: 15rem; overflow: hidden;
    border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-tertiary-bg);
}
.tc-drawing-thumb.has-frame iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.tc-drawing-thumb.has-frame .tc-drawing-thumb-open { position: absolute; inset: 0; display: flex; align-items: flex-end; text-decoration: none; }
.tc-drawing-thumb.has-frame .tc-drawing-thumb-open > span {
    width: 100%; padding: .35rem .5rem; font-size: .875rem;
    background: color-mix(in srgb, var(--bs-body-bg) 90%, transparent); border-top: 1px solid var(--bs-border-color);
}
.tc-drawing-thumb.has-frame .tc-drawing-thumb-open:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }

/* K-T3 (the phone walk, 10-16): a next step's link is a tap target - a padded block of at least 44 px, not a line whose gap
   between two wrapped rows does nothing. The arrow stays with its last word (site.js). */
@media (max-width: 767.98px), (pointer: coarse) {
    a[data-next-link]:not(.btn), a[data-next-step]:not(.btn), [data-next-card] a:not(.btn), a[data-planner-link]:not(.btn),
    a[data-to-planner]:not(.btn), a[data-cnc-ready-link]:not(.btn), .tc-toast__text a:not(.btn) {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.35rem 0.25rem;
    }
}

/* R13 (P10a): the order page's wide tables stack on a phone too (the estimate, the result sheet, the trade items, the UNAS
   history) - their totals row as one more card, and an empty spacer cell no empty block. */
@media (max-width: 767.98px) {
    table.tc-stack-sm > tfoot,
    table.tc-stack-sm > tfoot > tr,
    table.tc-stack-sm > tfoot > tr > td,
    table.tc-stack-sm > tfoot > tr > th {
        display: block;
        width: 100%;
    }

    table.tc-stack-sm > tfoot > tr {
        border: 1px solid var(--tc-border);
        border-radius: 0.6rem;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        font-weight: 600;
    }

    table.tc-stack-sm > tfoot > tr > td,
    table.tc-stack-sm > tfoot > tr > th {
        border: 0;
        padding: 0.2rem 0;
        text-align: left !important;
    }

    table.tc-stack-sm > tfoot > tr > td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        color: var(--tc-text-muted);
    }

    table.tc-stack-sm > tbody > tr > td:empty,
    table.tc-stack-sm > tfoot > tr > td:empty {
        display: none;
    }
}

/* The owner, 10-16 evening: the order page is one column - a readable measure on a large screen. */
.tc-order-single { max-width: 64rem; }

/* D4/12 (the designer, 10-17): "Ugrás a tartalomra" - the first thing a keyboard reaches, above the page's top edge until it has
   the focus; then a button-sized card in the theme's own colours with the focus ring. */
.tc-skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 2000;
  padding: 0.6rem 1rem;
  border: 2px solid var(--tc-focus);
  border-radius: 0.5rem;
  background: var(--tc-card);
  color: var(--tc-text-strong);
  font-weight: 600;
  text-decoration: none;
}

.tc-skip-link:focus {
  top: 0.5rem;
}

/* D4/9: the glossary link beside the sign-out. In the old dark band it is the band's light text; in the new menu - a light rail,
   in every theme - the theme's link colour (it was text-light, white on white). */
.tc-glossary-link {
  color: var(--tc-nav-text);
}

html[data-ui-view="focus"] .tc-navbar .tc-glossary-link {
  color: var(--tc-link);
  min-height: 44px;
}

/* D4/11: the "Más nevében" picker's field wears the theme's field colours (its colour mode is the page's: _OnBehalfPicker). */
[data-on-behalf-picker] .form-select {
  background-color: var(--tc-field-bg);
  border-color: var(--tc-field-border);
  color: var(--tc-text);
  /* The review of 10-17 (menu): inside the navbar's data-bs-theme="dark" Bootstrap still drew its pale dark-mode arrow, barely seen
     on a light field. The arrow is a small caret in the theme's text colour - two halves, so no fixed colour of an image. */
  background-image: linear-gradient(45deg, transparent 50%, var(--tc-text) 50%), linear-gradient(135deg, var(--tc-text) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* ... and the light themes' field border is lost on the light rail: the muted text colour draws it. */
[data-on-behalf-picker][data-bs-theme="light"] .form-select { border-color: var(--tc-text-muted); }