/* Baseline Kitchen Toolkit design kit.
   One stylesheet for every screen. Colours come from the client's branding
   (set by kt-core.js as --kt-* variables); everything else is fixed here so
   every screen looks like part of the same product.
   Status colours (ok, late, problem) carry meaning, so they never follow branding.
   Rule kept from earlier fixes: no "inset" (older iOS Safari), overflow-x clip on body. */

:root {
  --kt-primary: #0d365f;
  --kt-accent: #5a9194;
  --kt-bg: #ffffff;
  --kt-text: #222222;
  --kt-on-primary: #ffffff;
  --kt-on-accent: #ffffff;
  --kt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ui-serif: ui-serif, "New York", Georgia, "Times New Roman", serif;

  /* Surfaces: page is a touch darker than cards, both follow the client's background. */
  --ui-surface: var(--kt-bg);
  --ui-page: #f6f5f2;
  --ui-page: color-mix(in srgb, var(--kt-bg) 95%, var(--kt-text));
  --ui-line: #e3e1dc;
  --ui-line: color-mix(in srgb, var(--kt-text) 13%, var(--kt-bg));
  --ui-line-soft: #eeece8;
  --ui-line-soft: color-mix(in srgb, var(--kt-text) 7%, var(--kt-bg));
  --ui-muted: #5c636b;
  --ui-muted: color-mix(in srgb, var(--kt-text) 70%, var(--kt-bg));
  --ui-hover: color-mix(in srgb, var(--kt-text) 4%, var(--kt-bg));

  --ui-ok: #1f6b43;   --ui-ok-bg: #e5f3ea;
  --ui-warn: #7a4200; --ui-warn-bg: #fbebd3; --ui-warn-dot: #c77700;
  --ui-bad: #a32b20;  --ui-bad-bg: #fdecea;
  --ui-off: #8a9199;

  --ui-r: 14px;
  --ui-r-sm: 10px;
  --ui-tabbar-h: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ui-page);
  color: var(--kt-text);
  font-family: var(--kt-font);
  font-size: 16px;
  line-height: 1.45;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1 { margin: 0 0 8px; font-size: 1.6rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
h2 { margin: 0 0 8px; font-size: 1rem; font-weight: 600; }
h3 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; }
p { margin: 0 0 12px; }
a { color: var(--kt-primary); }
.ui-muted { color: var(--ui-muted); font-size: 0.9rem; }
.ui-num { font-variant-numeric: tabular-nums; }
.ui-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Page widths */
.ui-wrap { max-width: 720px; margin: 0 auto; padding: 20px 16px 28px; }
.ui-narrow { max-width: 420px; margin: 0 auto; padding: 32px 20px; }
.ui-stack > * + * { margin-top: 20px; }

/* Section heading with an optional link on the right */
.ui-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.ui-head h2 { margin: 0; }
.ui-head a, .ui-head button { font: inherit; font-size: 0.9rem; font-weight: 500; color: var(--kt-primary); background: none; border: 0; padding: 6px 0; text-decoration: none; cursor: pointer; }

/* Cards */
.ui-card { padding: 16px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r); }
.ui-card > :last-child { margin-bottom: 0; }

/* Lists: rows inside one card */
.ui-list { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r); overflow: hidden; }
.ui-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; color: var(--kt-text); text-decoration: none; border-top: 1px solid var(--ui-line-soft); }
.ui-row:first-child { border-top: 0; }
a.ui-row:active, button.ui-row:active { background: var(--ui-hover); }
button.ui-row { width: 100%; font: inherit; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
.ui-row .ui-ic { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--kt-primary); background: var(--ui-page); border-radius: 10px; }
.ui-row .ui-tx { flex-grow: 1; min-width: 0; }
.ui-row .ui-tx b { display: block; font-weight: 600; }
.ui-row .ui-tx small { display: block; font-size: 0.85rem; color: var(--ui-muted); }
.ui-row .ui-end { flex-shrink: 0; text-align: right; font-size: 0.9rem; color: var(--ui-muted); }
.ui-row .ui-chev { flex-shrink: 0; color: var(--ui-off); display: flex; }
.ui-row.ui-off { opacity: 0.55; }

/* Status dots and pills */
.ui-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-off); }
.ui-dot.ok { background: var(--ui-ok); }
.ui-dot.warn { background: var(--ui-warn-dot); }
.ui-dot.bad { background: var(--ui-bad); }
.ui-pill { display: inline-block; padding: 2px 10px; font-size: 0.8rem; font-weight: 600; line-height: 1.5; border-radius: 999px; color: var(--ui-muted); background: var(--ui-page); border: 1px solid var(--ui-line); vertical-align: middle; }
.ui-pill.ok { color: var(--ui-ok); background: var(--ui-ok-bg); border-color: transparent; }
.ui-pill.warn { color: var(--ui-warn); background: var(--ui-warn-bg); border-color: transparent; }
.ui-pill.bad { color: var(--ui-bad); background: var(--ui-bad-bg); border-color: transparent; }

/* Numbers at a glance */
.ui-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.ui-stat { display: block; padding: 12px; color: var(--kt-text); text-decoration: none; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r); min-width: 0; }
.ui-stat .n { display: block; font-size: 1.65rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ui-stat .n small { font-size: 0.95rem; font-weight: 500; color: var(--ui-muted); }
.ui-stat .l { display: block; font-size: 0.82rem; color: var(--ui-muted); }
.ui-stat.warn .n { color: var(--ui-warn); }
.ui-stat.bad .n { color: var(--ui-bad); }
.ui-stat.ok .n { color: var(--ui-ok); }

/* Quick tiles */
.ui-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ui-tile { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; color: var(--kt-text); text-decoration: none; font-weight: 500; font-size: 0.95rem; line-height: 1.25; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r); }
.ui-tile svg { flex-shrink: 0; color: var(--kt-primary); }
.ui-tile:active { background: var(--ui-hover); }
@media (min-width: 600px) { .ui-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Buttons */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 10px 18px; font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; color: var(--kt-on-primary); background: var(--kt-primary); border: 1px solid var(--kt-primary); border-radius: 12px; cursor: pointer; }
.ui-btn.secondary { color: var(--kt-text); background: var(--ui-surface); border-color: var(--ui-line); }
.ui-btn.danger { color: var(--ui-bad); background: var(--ui-surface); border-color: var(--ui-line); }
.ui-btn.block { display: flex; width: 100%; }
.ui-btn.small { min-height: 40px; padding: 6px 14px; font-size: 0.9rem; border-radius: 10px; }
.ui-btn[disabled] { opacity: 0.55; cursor: default; }
.ui-btn + .ui-btn.block, .ui-btn.block + .ui-btn.block { margin-top: 10px; }
.ui-link { display: inline-block; padding: 8px 0; font: inherit; font-weight: 500; color: var(--kt-primary); background: none; border: 0; text-decoration: none; cursor: pointer; }

/* Form fields */
.ui-field { margin: 0 0 14px; }
.ui-label, .ui-field label { display: block; margin: 0 0 6px; font-size: 0.9rem; font-weight: 600; }
.ui-input, .ui-field input, .ui-field select, .ui-field textarea {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px;
  font: inherit; font-size: 16px; /* stops iPhone zooming in */
  color: var(--kt-text); background: var(--ui-surface);
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm);
  -webkit-appearance: none; appearance: none;
}
.ui-field textarea { min-height: 96px; }
.ui-input:focus, .ui-field input:focus, .ui-field select:focus, .ui-field textarea:focus { outline: 2px solid var(--kt-primary); outline-offset: 1px; border-color: transparent; }
.ui-search { position: relative; }
.ui-search svg { position: absolute; left: 12px; top: 13px; color: var(--ui-muted); pointer-events: none; }
.ui-search input { padding-left: 42px; }

/* Messages */
.ui-msg { margin-top: 14px; padding: 12px 14px; font-size: 0.95rem; background: var(--ui-page); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); }
.ui-msg.err { color: var(--ui-bad); background: var(--ui-bad-bg); border-color: transparent; }
.ui-msg.ok { color: var(--ui-ok); background: var(--ui-ok-bg); border-color: transparent; }
.ui-empty { padding: 18px 14px; text-align: center; color: var(--ui-muted); font-size: 0.95rem; }

/* Tabs: segmented row, scrolls sideways if long */
.ui-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; background: var(--ui-line-soft); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.ui-tabs button { flex: 0 0 auto; min-height: 40px; padding: 6px 14px; font: inherit; font-size: 0.92rem; font-weight: 500; white-space: nowrap; color: var(--ui-muted); background: none; border: 0; border-radius: 9px; cursor: pointer; }
.ui-tabs button.on, .ui-tabs button[aria-selected="true"] { color: var(--kt-text); font-weight: 600; background: var(--ui-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

/* Tables */
.ui-table-wrap { overflow-x: auto; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r); }
.ui-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.ui-table th { padding: 10px 12px; text-align: left; font-size: 0.8rem; font-weight: 600; color: var(--ui-muted); border-bottom: 1px solid var(--ui-line); white-space: nowrap; }
.ui-table td { padding: 10px 12px; border-bottom: 1px solid var(--ui-line-soft); vertical-align: top; }
.ui-table tr:last-child td { border-bottom: 0; }

/* Pop-up sheet */
.ui-sheet-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; padding: 12px; overflow: auto; overscroll-behavior: contain; background: rgba(15, 20, 26, 0.55); }
.ui-sheet { max-width: 520px; margin: 8vh auto 0; padding: 20px; background: var(--ui-surface); color: var(--kt-text); border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); }

/* Bottom bar */
.ui-has-tabbar { padding-bottom: calc(var(--ui-tabbar-h) + env(safe-area-inset-bottom)); }
.ui-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; background: var(--ui-surface); border-top: 1px solid var(--ui-line); padding-bottom: env(safe-area-inset-bottom); }
.ui-tabbar-in { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; max-width: 560px; }
.ui-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--ui-tabbar-h); font-size: 0.72rem; font-weight: 500; color: var(--ui-muted); text-decoration: none; }
.ui-tabbar a.on { color: var(--kt-primary); font-weight: 600; }

/* Footer */
.ui-foot { padding: 8px 16px 24px; text-align: center; font-size: 0.8rem; color: var(--ui-muted); }

/* Brand block for Baseline's own screens (login, errors) */
.ui-logo { display: block; width: 210px; max-width: 70%; height: auto; margin: 0 auto 28px; }

@media print {
  body { background: #fff; color: #000; }
  .ui-tabbar, .topbar, .no-print { display: none !important; }
  .ui-has-tabbar { padding-bottom: 0; }
  .ui-card, .ui-list, .ui-stat, .ui-table-wrap { border-color: #999; }
}

/* ---------------------------------------------------------------------------
   Older tool pages. Each tool page was built with the same class names (card,
   btn, lab, tabs, tab, empty, pill). A page that adds class="ui" to its body
   gets the new look through these rules without changing its markup or script.
   Screen only: printouts keep their own styles until the print batch. */
body.ui { --line: var(--ui-line); --card: var(--ui-surface); --muted: var(--ui-muted); }
@media screen {
  body.ui { background: var(--ui-page); }
  body.ui main { padding-top: 20px; }
  body.ui main > h1, body.ui main > .no-print > h1 { margin: 4px 0 16px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
  body.ui .card { padding: 16px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r); }
  body.ui .card > h2, body.ui main > h2, body.ui .card > .head > h2 { font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--kt-text); }
  body.ui label.lab { margin: 0 0 6px; font-size: 0.88rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--kt-text); }
  body.ui main input[type="text"], body.ui main input[type="date"], body.ui main input[type="time"], body.ui main input[type="number"],
  body.ui main input[type="search"], body.ui main input[type="email"], body.ui main input[type="tel"], body.ui main select, body.ui main textarea {
    min-height: 48px; padding: 10px 12px; background-color: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm);
  }
  body.ui main input:focus, body.ui main select:focus, body.ui main textarea:focus { outline: 2px solid var(--kt-primary); outline-offset: 1px; border-color: transparent; }
  body.ui .btn { min-height: 46px; border-radius: 12px; }
  body.ui .btn.small { min-height: 40px; border-radius: 10px; }
  body.ui .tabs { gap: 4px; padding: 4px; overflow-x: auto; background: var(--ui-line-soft); border-radius: 12px; -webkit-overflow-scrolling: touch; }
  body.ui .tab { flex: 1 0 auto; min-height: 40px; padding: 6px 14px; font-weight: 500; white-space: nowrap; color: var(--ui-muted); background: none; border: 0; border-radius: 9px; }
  body.ui .tab.on { font-weight: 600; color: var(--kt-text); background: var(--ui-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
  body.ui .empty { color: var(--ui-muted); background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r); }
  body.ui .pill { font-weight: 600; letter-spacing: 0; }
  body.ui .pill.good, body.ui .pill.ok { color: var(--ui-ok); background: var(--ui-ok-bg); }
  body.ui .pill.bad { color: var(--ui-bad); background: var(--ui-bad-bg); }
  body.ui .pill.warn { color: var(--ui-warn); background: var(--ui-warn-bg); }
  body.ui .toast { border-radius: 14px; }
}

/* ---------------------------------------------------------------------------
   Printed records and reports (the .paper record sheets, the monthly report,
   the inspection pack, and function sheets and charts). Screen and print.
   Venue name in the serif used in the header, a thin brand rule, plain section
   headings and a lighter table grid. Wording, warnings and what is printed do
   not change. Menus (.kmenu) keep the client's own print style. */
body.ui .paper, body.ui .rep, body.ui .pack { border-color: var(--ui-line); border-radius: var(--ui-r); }
body.ui .paper .head, body.ui .rep .head, body.ui .pack .head { border-bottom: 2px solid var(--kt-primary); }
body.ui .paper .venue, body.ui .rep .venue, body.ui .pack .venue, body.ui .kdoc:not(.kmenu) .venue {
  font-family: var(--ui-serif); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #333;
}
body.ui .paper .sec, body.ui .rep .sec, body.ui .pack .sec {
  padding: 0 0 3px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: #000; background: none; border-bottom: 1.5px solid var(--kt-primary);
}
body.ui .paper th, body.ui .pack th { font-size: 0.72rem; font-weight: 600; letter-spacing: 0; text-transform: none; background: #f2f2f2; }
body.ui .paper th, body.ui .paper td, body.ui .pack th, body.ui .pack td { border-color: #8a8a8a; }
body.ui .paper .pfoot, body.ui .rep .pfoot, body.ui .pack .pfoot { padding-top: 6px; border-top: 1px solid #ddd; }
@media print {
  body.ui .paper, body.ui .rep, body.ui .pack { border: 0; border-radius: 0; }
  body.ui .paper .sec, body.ui .rep .sec, body.ui .pack .sec { page-break-after: avoid; }
}