/* Enzo's at Home — shared styles
   Brand colours are set once here and the whole app follows. */
:root {
  --enzo-red: #EF0400;        /* exact logo red: sidebar and logo */
  --enzo-red-deep: #B80300;   /* selected menu item */
  --enzo-red-strong: #D60400; /* buttons and red text on white (easier to read) */
  --enzo-red-soft: #FDE8E7;
  --red-text: #D60400;
  --on-red: #FFFFFF;

  --bg: #EEF0F3;
  --surface: #FFFFFF;
  --ink: #1D1F23;
  --muted: #646A73;
  --line: #DDE1E6;
  --track: #E6E9ED;
  --basil: #2E7D4F;
  --basil-soft: #E3F1E8;
  --saffron: #B87E04;
  --saffron-soft: #FBF1DA;
  --tint: #F5F7F9;
  --paper-line: #B3BAC3; --paper-head: #F1F3F5; --paper-shade: #E2E5E9;

  --radius-panel: 10px;
  --radius-control: 8px;
  --rail-w: 280px;
  --rail-w-collapsed: 72px;

  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --enzo-red: #C80300; --enzo-red-deep: #8E0200; --enzo-red-strong: #D60400; --enzo-red-soft: #3A1514; --red-text: #FF8A84;
    --bg: #141619; --surface: #1D2025; --ink: #ECEEF1; --muted: #9AA1AB; --line: #2C3036; --track: #2C3036;
    --basil: #5DBB82; --basil-soft: #1E3326; --saffron: #E0AE3C; --saffron-soft: #3A2F14; --tint: #181B1F; --paper-line: #434A53; --paper-head: #23272C; --paper-shade: #2B3036;
  }
}
:root[data-theme="dark"] {
  --enzo-red: #C80300; --enzo-red-deep: #8E0200; --enzo-red-strong: #D60400; --enzo-red-soft: #3A1514; --red-text: #FF8A84;
  --bg: #141619; --surface: #1D2025; --ink: #ECEEF1; --muted: #9AA1AB; --line: #2C3036; --track: #2C3036;
  --basil: #5DBB82; --basil-soft: #1E3326; --saffron: #E0AE3C; --saffron-soft: #3A2F14; --tint: #181B1F; --paper-line: #434A53; --paper-head: #23272C; --paper-shade: #2B3036;
}

* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--enzo-red-strong); outline-offset: 2px; }
.sidebar :focus-visible, .flyout :focus-visible { outline-color: #fff; }
[hidden] { display: none !important; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout: the sidebar is always pinned ---------- */
.shell { display: flex; height: 100%; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
#view { flex: 1; overflow-y: auto; padding: 22px 28px calc(40px + env(safe-area-inset-bottom, 0px)); outline: none; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--rail-w); flex: 0 0 var(--rail-w); height: 100%;
  background: var(--enzo-red); color: var(--on-red);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  transition: width .2s ease, flex-basis .2s ease;
  z-index: 30; position: relative;
}
.brand { display: flex; align-items: center; padding: 20px 20px 14px 22px; min-height: 98px; }
.wordmark { display: block; width: 148px; height: 65px; background: url("data:image/png;base64,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") left center / contain no-repeat; }
.wordmark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 12px 12px; }
.nav-group { margin-bottom: 2px; }
.nav-top, .nav-sub a {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; background: transparent; color: var(--on-red);
  text-decoration: none; text-align: left; cursor: pointer; border-radius: var(--radius-control);
}
.nav-top { min-height: 44px; padding: 0 10px 0 13px; font-weight: 600; font-size: 15px; position: relative; }
.nav-top:hover { background: rgba(0, 0, 0, .1); }
.nav-top .label { flex: 1; line-height: 1.25; padding: 10px 0; white-space: normal; }
.nav-top .chev { width: 16px; height: 16px; transition: transform .18s ease; }
.nav-group.open > .nav-top .chev { transform: rotate(180deg); }
.nav-top.current, .nav-group.has-current > .nav-top.rail-current { background: var(--enzo-red-deep); }
.pill { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #fff; color: var(--enzo-red-deep); }
.nav-sub { list-style: none; margin: 2px 0 6px; padding: 0 0 0 45px; display: none; }
.nav-group.open .nav-sub { display: block; }
.nav-sub a { min-height: 40px; padding: 0 12px; font-size: 14px; position: relative; }
.nav-sub a:hover { background: rgba(0, 0, 0, .1); }
.nav-sub a[aria-current="page"] { background: var(--enzo-red-deep); font-weight: 600; }
.nav-sub a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: #fff; }
.nav-divider { height: 1px; background: rgba(255, 255, 255, .22); margin: 12px 10px; }

.rail-foot { border-top: 1px solid rgba(255, 255, 255, .22); padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.rail-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 13px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--on-red); font-weight: 600; font-size: 14px; cursor: pointer; }
.rail-toggle:hover { background: rgba(0, 0, 0, .1); }
.rail-toggle svg { transition: transform .2s ease; }

/* Collapsed: a slim icon rail that stays pinned */
.shell.collapsed .sidebar { width: var(--rail-w-collapsed); flex-basis: var(--rail-w-collapsed); }
.shell.collapsed .brand { justify-content: center; padding: 18px 0 14px; min-height: 84px; }
.shell.collapsed .wordmark { width: 42px; height: 42px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAABUCAYAAAD+twu4AAAGrUlEQVR42u2df4hUVRTHPytKMFPo0kZYQWUZQ7a6YES1qAURrlCEJYSrYmRtFkgaQpAbJQRGYawQlQmZptLWgiHk2i/aVQvS9UfSJq0u/dIx1FzJGYj+uP1xz+JzmB/vvTn3zZtxvjDM7vruufd933nn3vPjXhuMMdShgzF1CupkxhJjYzCGJuAGYCJwE5ACbgOS8rekXJcB0vL9B/CbfB8HzgK/A9lK3khDhWxmCpgF3A7MACYB48uQdx74HvgFGAT6gKO1TmY7MBdoEQJdIQ3sAbYC22uNzMXAStHEqHEMeBN4r5rJTAKPAmvE9lUa54EXgG2ubKsrMhcBS8Qexg0HgXXAxmogcxOwsApWMu8DT8eVzBZgS4XsYlgMAo8DR+K0aH9SXp9qIhIZ749AR1zI7AI2VLnz8i7wViXJTIh9XFYj3uDzohiJStjMbmBeDbrYoSemsJrZU6NEAjwlGhoJmd3iEtYylgHLXZO5soY1MhdrJZbgxGa2AZ+WY6CrEGlgDnBIk8xGYD9uIz1xRT82XKj2mm+IgMgsMCB+8wJ5gA15PlOBZ4DNwDDuA8IzgZe0NHMR8KHDwQ4An2Njj2ECurOB+cADuItOZYHpJcdnjCn1OW7c4CdjTIeP/v1+UsaYNcaYEUfj7S41hlIDXORoYJ3GmIQikd5P0hiz09G4m8shU/spnzTGXBuCoDZjTFPANisdkLk/LJmdygM5XurJFvlkjDFdIdq5eLPagpKZEJumqZEtJW68RV7PA2L7WuXvHZ6HMXptq1zTIxpYTO5SZTJ3BiVzsfIAZvvUpP48Az8gP2eMMcs9v49itQ+5q6NQjEKddytPNkFezSHNGbbIgyoHq/2SmRL2tZ5iGBvZ50N2T8AVQUq0WwP9+frO5wGlFBe/nSHbzZHFfCGsw6aRg3g/RxUzAjOAW/y4k1MUk1WfhWjXDpwSj6MQlkhMNRlQ9gfY/LkG7vJD5nylznYAZwK2WQ98BFzpI2UyFxgCWgPIPwR8oXR/j/lxJzWQERsVxE525ZGxPsd+d+eZoE4G7Ktd6R5HcmWPzRNq08CvAYMWTdL3QeAvaduHLboa8Vy3D3hCkl/TgFuBqyRE5re/LcDblFd1R772uWQ2K5G5L+D1Z4AVnp+9GJfzewZ4zfMQrgD+DdjfYQmtlYtWYG8hmzlLicztIdqcKWBjBzxhsKE8bU6EsM19Svd5b7EJaLJSJ18qxhK3eUzHdiWZ3ynJaS5G5o1KnWQUyXxHvnsUZe5WknNNMZt5nUIHFxxEuh8GvlGUp/WwE8XI1MA/DmTuiGmyrSFMQq0OxexkHQVSaK7JvJyKFLLFyEwrdDC+CkhojoLMU0qdJGNO5lQlOX8WI/OEUiczYk7mnVGQud+FmxVDaLnNl7i3ueUxjcDfCp30Kw7YBTJKE2XRdeY5pcFOxkZ04ojFrlYc+ZZGAwpyJxLfotiHlOQM+iFzr6I/HTdMA+5RkvWVHzJ/UOpsJnbXWpzwIHqZ126/r7nG4j3Bxeh5HJDCFslqIO33NT+KPVVAAwsJlj10iaXoVT/vyTdZj/FrD8rAppi4j5o76b72O5uPEjCs1PEkbD68UkgCuxTlpSmQQxpTZFG7UXEAoXd9lYkmuXHNWvdPKJBWLrVBYATdKNBm7IaDKNCCrS2arigzK67y4SCaOYpXlW9wIbATvWKHQmjH7uCYriy3txCRfjRT04/NtTsvOpqcXB5r0cilFSaBNBPgOQeDmojdW3RSlixJhZvswqYRXBG5qhiRfjUzgS0EcOkeZmU59q0Y9zRwWtZy2ZyZeQI2X90iK4X7cB8/HcRHqaXfvZNRb0JNC5FnPaZmVHuvBq4n2vTIAmzBlwqZYPdfr+Xyg+8VSNBjJWr1KIlC2E2AarkwZ3QMYesiax3D5KlbL4YwefO56ESV4owLwCNBG4Uh8wj2UKgLNUpkVpZXgU/hKuconlZssX2ixohsJ2QdaLlnwTVic8eJGiGyFZ/ncWi95l6cA+7GHvhZzTgm93GoHCEahVtHxAvprVIie2X8ZZ9UqFUFd0K8pFVVRuQKGbdKWZCLw0gbsTmSOB//OIBevZG6Zuba0SnA6zFcjx4DXnZBpCvN9CKFDbHNo7KHOA9jz8jcil6lX+RkekltA56N2BXdjY2b9rokMWoyc23qK460NQv8DHwMvBH1jVXqv2Pwauz92PqfO7CbSpPiBIwr4Axkgf/kO4ON1h/g4sbViqHSZBYi+GbsBtMJef59BLv173QUr261k1m1qO8DqpMZT/wPa8q97Fw3cs8AAAAASUVORK5CYII="); background-position: center; }
.shell.collapsed #nav { padding: 4px 10px 12px; }
.shell.collapsed .nav-top { justify-content: center; padding: 0; min-height: 48px; }
.shell.collapsed .nav-top .label, .shell.collapsed .nav-top .chev, .shell.collapsed .nav-sub, .shell.collapsed .rail-toggle .label { display: none; }
.shell.collapsed .nav-top .pill { position: absolute; top: 6px; right: 5px; width: 9px; height: 9px; padding: 0; font-size: 0; border: 2px solid var(--enzo-red); }
.shell.collapsed .nav-divider { margin: 10px 6px; }
.shell.collapsed .rail-foot { padding: 10px; }
.shell.collapsed .rail-toggle { justify-content: center; padding: 0; }
.shell.collapsed .rail-toggle svg { transform: rotate(180deg); }

/* Pop-out menu and labels for the collapsed rail */
.flyout {
  position: fixed; z-index: 60; min-width: 230px; max-width: 280px;
  background: var(--enzo-red-deep); color: #fff; border-radius: 10px;
  padding: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
.flyout h3 { font-size: 13px; font-weight: 700; margin: 4px 10px 6px; opacity: .85; }
.flyout a { display: flex; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 7px; color: #fff; text-decoration: none; font-size: 14px; }
.flyout a:hover { background: rgba(255, 255, 255, .12); }
.flyout a[aria-current="page"] { background: rgba(255, 255, 255, .18); font-weight: 600; }
.tip { position: fixed; z-index: 61; background: #1D1F23; color: #fff; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 25; }

/* ---------- Top bar ---------- */
.topbar { display: flex; align-items: center; gap: 14px; padding: calc(12px + env(safe-area-inset-top, 0px)) 28px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.crumbs { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs b { color: var(--ink); font-weight: 600; }
.search { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 0 12px; width: min(320px, 28vw); height: 40px; color: var(--muted); }
.search input { border: 0; background: transparent; outline: none; width: 100%; font-size: 14px; color: var(--ink); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-control); border: 0; background: transparent; cursor: pointer; }
.bell { position: relative; color: var(--muted); }
.bell .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--enzo-red-strong); border: 2px solid var(--surface); }
.user { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--enzo-red-soft); color: var(--red-text); font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.user .name { font-weight: 600; line-height: 1.2; }
.user .role { color: var(--muted); font-size: 12px; line-height: 1.2; }
.signout { font-size: 13px; font-weight: 600; color: var(--red-text); text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.signout:hover { background: var(--enzo-red-soft); }

/* ---------- Shared page parts ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { font-weight: 700; font-size: 28px; line-height: 1.1; margin: 0; letter-spacing: -.025em; }
.page-head .period { color: var(--muted); font-size: 14px; margin-top: 4px; }
.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-control); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn-primary { background: var(--enzo-red-strong); color: #fff; }
.btn-primary:hover { background: var(--enzo-red-deep); }
.btn-quiet { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-quiet:hover { border-color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); padding: 2px; }
.seg button { border: 0; background: transparent; padding: 0 12px; min-height: 34px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: inset 0 -2px 0 var(--enzo-red-strong); }
.due { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-control); background: var(--enzo-red-soft); color: var(--red-text); font-weight: 600; font-size: 14px; text-decoration: none; }
.due i { width: 8px; height: 8px; border-radius: 50%; background: var(--enzo-red-strong); }
.sample-note { font-size: 12px; color: var(--muted); margin: -6px 0 14px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 16px 18px; min-width: 0; }
.card h2 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.card h2 em { font-style: normal; margin-left: 6px; }
.card .sub { color: var(--muted); font-size: 12.5px; margin: 2px 0 10px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pos { color: var(--basil); } .neg { color: var(--red-text); } .warn { color: var(--saffron); }

/* ---------- Dashboard ---------- */
.grid { display: grid; gap: 14px; margin-bottom: 14px; }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kpi-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kpi-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.kpi-value { font-size: 30px; font-weight: 700; line-height: 1.1; margin-top: 4px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.kpi-rows { margin-top: 10px; display: grid; grid-template-columns: auto 1fr auto; gap: 3px 10px; font-size: 13px; }
.kpi-rows .k { color: var(--muted); }
.kpi-rows .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-rows .d { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ring { width: 60px; height: 60px; flex: 0 0 60px; }
.ring text { font-size: 12.5px; font-weight: 700; fill: var(--ink); font-family: var(--font-body); }
.spark { display: block; width: 100%; height: 36px; margin-top: 10px; }
.split { margin-top: 12px; }
.split .labels { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.split .bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--track); }
.split .bar span:first-child { background: var(--basil); }
.split .bar span:last-child { background: var(--enzo-red-soft); }
.dots { display: flex; justify-content: space-around; margin-top: 12px; gap: 6px; }
.dot { text-align: center; font-size: 12px; color: var(--muted); min-width: 0; }
.dot i { display: block; width: 14px; height: 14px; border-radius: 50%; margin: 0 auto 3px; }
.dot b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.chart-box { position: relative; height: 250px; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }

.rank { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rank th { font-size: 12px; color: var(--muted); font-weight: 500; text-align: left; padding: 0 6px 6px; white-space: nowrap; }
.rank th.num, .rank td.num { text-align: right; }
.rank td { padding: 8px 6px; white-space: nowrap; border-top: 1px solid var(--line); }
.rank td.name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.rank td.num { font-variant-numeric: tabular-nums; }
.rank td.i { color: var(--muted); width: 1.4rem; text-align: right; }
.rank td.barcell { width: 42%; }
.bullet { position: relative; height: 10px; background: var(--track); border-radius: 3px; }
.bullet span { position: absolute; left: 0; top: 1px; bottom: 1px; border-radius: 3px; }
.bullet b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.rank td.pct { font-weight: 700; font-size: 13px; text-align: right; width: 3.6rem; }

.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.tag-red { background: var(--enzo-red-soft); color: var(--red-text); }
.tag-saffron { background: var(--saffron-soft); color: var(--saffron); }
.tag-basil { background: var(--basil-soft); color: var(--basil); }
.rank .meta { font-size: 11.5px; color: var(--muted); }
.select { height: 36px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13px; cursor: pointer; }


/* Main dashboard overview */
.home-cta { margin-left: auto; }
.home-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); margin-bottom: 22px; overflow: hidden; }
.figure-link { display: block; padding: 16px 18px; text-decoration: none; border-left: 1px solid var(--line); }
.figure-link:first-child { border-left: 0; }
.figure-link:hover { background: var(--tint); }
.fig-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.home-h2 { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.tile.live { border-color: var(--enzo-red-strong); box-shadow: inset 0 3px 0 var(--enzo-red-strong); }
.tile-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--enzo-red-soft); color: var(--red-text); }
.tile:not(.live) .tile-icon { background: var(--bg); color: var(--muted); }
.tile h3 { margin: 4px 0 0; font-size: 15.5px; font-weight: 700; }
.tile p { margin: 0; color: var(--muted); font-size: 13.5px; flex: 1; }
.tile-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.tile-soon { font-size: 12px; color: var(--muted); margin-top: 6px; }
@media (max-width: 1023px) { .home-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .figure-link:nth-child(3) { border-left: 0; } .figure-link:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) { .home-figures { grid-template-columns: 1fr; } .figure-link { border-left: 0; border-top: 1px solid var(--line); } .figure-link:first-child { border-top: 0; } .st-status { flex-wrap: wrap; } .home-cta { margin-left: 0; } }


/* Heatmaps */
:root { --hm1: #E4EFF5; --hm2: #BCD6E4; --hm3: #87B4CC; --hm4: #4F8EAF; --hm5: #23698D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hm1: #1C2A31; --hm2: #23414F; --hm3: #2E5D72; --hm4: #3D7E9B; --hm5: #5BA3C4; } }
:root[data-theme="dark"] { --hm1: #1C2A31; --hm2: #23414F; --hm3: #2E5D72; --hm4: #3D7E9B; --hm5: #5BA3C4; }
.hm-card { margin-bottom: 14px; }
.hm-card-narrow { max-width: 760px; }
.hm-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 4px 0 10px; }
.hm-key { display: inline-flex; gap: 2px; }
.hm-key i { display: inline-block; width: 16px; height: 12px; border-radius: 2px; }
.hm-wrap { overflow-x: auto; position: relative; }
table.hm { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
table.hm th.hm-name { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 500; font-size: 12.5px; padding: 0 10px 0 0; max-width: 210px; min-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.hm .hm-group th { text-align: left; font-weight: 700; font-size: 12.5px; padding: 10px 0 3px; position: sticky; left: 0; background: var(--surface); }
table.hm th.hm-col { font-size: 10.5px; font-weight: 600; color: var(--muted); text-align: center; padding: 0 0 4px; line-height: 1.15; vertical-align: bottom; }
table.hm th.hm-col span { display: block; font-weight: 500; }
table.hm th.hm-col em { display: block; font-style: normal; font-weight: 500; font-size: 10px; }
table.hm th.hm-month { color: var(--ink); }
.hm-c { width: 24px; min-width: 24px; height: 22px; border-radius: 3px; padding: 0; text-align: center; font-size: 10.5px; font-weight: 700; cursor: default; font-variant-numeric: tabular-nums; }
.hm-c:focus-visible, .hm-c.hm-sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.hm-stock .hm-c { width: var(--hm-w, 24px); min-width: var(--hm-w, 24px); }
.hm-s4, .hm-s5, .hm-up3, .hm-dn3 { color: #fff; }
.hm-s1, .hm-s2, .hm-s3 { color: var(--ink); }
.hm-useby .hm-c { width: 44px; min-width: 44px; height: 24px; }
.hm-cal .hm-c { width: 76px; min-width: 76px; height: 30px; font-size: 11.5px; }
.hm-empty { background: var(--bg); }
.hm-na, .hm-key .hm-na { background: repeating-linear-gradient(135deg, var(--paper-shade) 0 3px, var(--surface) 3px 6px); border: 1px solid var(--line); }
.hm-s1 { background: var(--hm1); } .hm-s2 { background: var(--hm2); } .hm-s3 { background: var(--hm3); } .hm-s4 { background: var(--hm4); } .hm-s5 { background: var(--hm5); }
.hm-d0 { background: var(--bg); border: 1px solid var(--line); }
.hm-up1 { background: #DCEFE3; } .hm-up2 { background: #9FD1B1; } .hm-up3 { background: #3E8F60; }
.hm-dn1 { background: #FBE0DE; } .hm-dn2 { background: #F2A49E; } .hm-dn3 { background: #D23A31; }
.hm-r1 { background: #FCE4E2; } .hm-r2 { background: #F7B9B4; } .hm-r3 { background: #EE8880; } .hm-r4 { background: #DE5047; color: #fff; } .hm-r5 { background: #B8241B; color: #fff; }
.hm-a1 { background: #FBF1DA; } .hm-a2 { background: #F5DCA0; } .hm-a3 { background: #EBC25E; } .hm-a4 { background: #D9A21F; } .hm-a5 { background: #A87B05; color: #fff; }
.hm-g1 { background: #E3F1E8; } .hm-g2 { background: #BFE0CB; } .hm-g3 { background: #8FC7A5; } .hm-g4 { background: #5AA57B; color: #fff; } .hm-g5 { background: #2E7D4F; color: #fff; }
.hm-r1, .hm-r2, .hm-r3, .hm-a1, .hm-a2, .hm-a3, .hm-a4, .hm-g1, .hm-g2, .hm-g3 { color: #1D1F23; }
.hm-rh { color: var(--red-text) !important; } .hm-ah { color: var(--saffron) !important; }
.hm-ontime, .hm-key .hm-ontime { background: var(--basil); color: #fff; }
.hm-late, .hm-key .hm-late { background: var(--saffron); color: #fff; }
.hm-missed, .hm-key .hm-missed { background: var(--red-text); color: #fff; }
.hm-off, .hm-key .hm-off { background: var(--bg); border: 1px solid var(--line); }
.hm-pending { background: var(--surface); border: 1.5px dashed var(--muted); color: var(--muted); font-weight: 600; }
.hm-future { background: transparent; }
.hm-detail { font-size: 13px; color: var(--ink); background: var(--tint); border-radius: var(--radius-control); padding: 8px 12px; margin: 10px 0 0; min-height: 1.5em; }
@media (pointer: coarse) { .hm-c { height: 26px; } .hm-stock .hm-c { min-width: max(28px, var(--hm-w, 28px)); } .hm-useby .hm-c { width: 48px; min-width: 48px; height: 30px; } }

.legend i.sw { width: 12px; height: 12px; border: 0; border-radius: 3px; vertical-align: -1px; }
.item-box { min-height: 200px; }
.card-head .controls { gap: 8px; }


/* Red, amber, green heatmap */
.rag-g, .hm-key .rag-g { background: #CFE9D7; color: #1E5A37; }
.rag-a, .hm-key .rag-a { background: #F7E1A6; color: #6B4E00; }
.rag-r, .hm-key .rag-r { background: #F6C3BF; color: #8E1A12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rag-g { background: #24543A; color: #DDF3E5; } :root:not([data-theme="light"]) .rag-a { background: #6B5212; color: #FBEFCF; } :root:not([data-theme="light"]) .rag-r { background: #6E2621; color: #FDE3E1; } }
:root[data-theme="dark"] .rag-g { background: #24543A; color: #DDF3E5; } :root[data-theme="dark"] .rag-a { background: #6B5212; color: #FBEFCF; } :root[data-theme="dark"] .rag-r { background: #6E2621; color: #FDE3E1; }
#ragCard { margin-top: 14px; }


/* ---------- Sales reports ---------- */
.sr-upload { cursor: pointer; }
#view.sr-dragging { outline: 3px dashed var(--enzo-red-strong); outline-offset: -10px; }
.sr-empty .sr-cols { font-size: 12px; margin-top: 16px; }
.sr-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.sr-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 4px 10px; }
.sr-range label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sr-range input { height: 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); padding: 0 6px; font: inherit; font-size: 14px; }
.sr-range input:focus { outline: none; border-color: var(--enzo-red-strong); }
.sr-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sr-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.sr-card { margin-bottom: 14px; }
.sr-trend-box { height: 300px; }
.sr-dow-box { height: 190px; margin-top: 16px; }
.sr-cats .name { white-space: normal; }
.sr-catbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.sr-catbtn:hover { color: var(--red-text); text-decoration: underline; }
.sr-cats tr.sr-on td { background: var(--tint); }
.sr-demand .hm-c { width: 38px; min-width: 38px; height: 28px; }
.sr-demand th.hm-name { min-width: 92px; }

.sr-map { position: relative; }
.sr-map svg { display: block; width: 100%; height: auto; max-height: 560px; stroke: none; stroke-width: 0; }
.sr-map svg text { stroke: none; }
.sr-state { stroke: var(--surface); stroke-width: 2.5; cursor: pointer; transition: opacity .15s ease; }
.sr-state:hover, .sr-act:hover .sr-state { stroke: var(--ink); stroke-width: 3; }
.sr-state:focus-visible, .sr-act:focus-visible .sr-state, .sr-state.sr-sel, .sr-act.sr-sel .sr-state { outline: none; stroke: var(--ink); stroke-width: 4; }
.sr-act { cursor: pointer; }
.sr-act:focus-visible { outline: none; }
.sr-dim { opacity: .35; }
.sr-s0 { fill: var(--track); background: var(--track); }
.sr-s1 { fill: #FBE3E1; background: #FBE3E1; } .sr-s2 { fill: #F5B5AF; background: #F5B5AF; } .sr-s3 { fill: #EC7F76; background: #EC7F76; }
.sr-s4 { fill: #DD3F33; background: #DD3F33; } .sr-s5 { fill: #B80300; background: #B80300; }
.sr-tag text { text-anchor: middle; fill: var(--ink); font-family: var(--font-body); }
.sr-tag.on-dark text, .sr-code.on-dark { fill: #fff; }
.sr-code { font-size: 28px; font-weight: 700; text-anchor: middle; fill: var(--ink); pointer-events: none; }
.sr-code.sr-small { font-size: 17px; }
.sr-amt { font-size: 23px; font-weight: 500; }
.sr-lead { stroke: var(--muted); stroke-width: 1.5; pointer-events: none; }
.sr-scale { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-top: 6px; flex-wrap: wrap; }
.sr-scale i { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
.sr-scale span { margin: 0 4px; }

.sr-pop { position: absolute; z-index: 5; width: 310px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, .22); padding: 12px 16px 14px; }
.sr-pop[hidden] { display: none; }
.sr-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sr-pop-head h3 { margin: 0; font-size: 16px; }
.sr-pop-head .icon-btn { width: 32px; height: 32px; color: var(--muted); }
.sr-pop-big { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.sr-pop-big span { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.sr-pop-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0 0 10px; }
.sr-pop-stats div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 4px; font-size: 13px; }
.sr-pop-stats dt { color: var(--muted); } .sr-pop-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sr-pop h4 { font-size: 12.5px; margin: 8px 0 4px; color: var(--muted); font-weight: 600; }
.sr-pop ol { margin: 0; padding-left: 18px; font-size: 13px; }
.sr-pop li span { display: inline-block; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.sr-pop li b { float: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sr-pop .meta { font-size: 12px; color: var(--muted); margin: 10px 0; }
@media (max-width: 1100px) { .sr-top { grid-template-columns: 1fr; } .sr-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sr-figures { grid-template-columns: 1fr; } .sr-pop { position: static; width: auto; margin-top: 10px; box-shadow: none; } }


/* Product performance (sales reports) */
#srPerf .card-head .controls { gap: 8px; }
.pf-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.pf-key-l { margin-left: 10px; }
.pf-key { display: inline-flex; gap: 2px; } .pf-key i { width: 16px; height: 10px; border-radius: 2px; display: inline-block; }
.pf-wrap { overflow-x: auto; position: relative; }
table.pf { width: 100%; border-collapse: separate; border-spacing: 0 2px; font-size: 13px; }
table.pf th { font-weight: 500; color: var(--muted); font-size: 11.5px; line-height: 1.15; padding: 0 5px 6px; text-align: center; vertical-align: bottom; white-space: nowrap; }
table.pf th.num, table.pf td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.pf td { padding: 0 5px; height: 32px; vertical-align: middle; }
table.pf .pf-name { text-align: left; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.pf tr.pf-cat td { background: var(--tint); height: 46px; cursor: pointer; }
table.pf tr.pf-cat td.pf-c.pf-h0 { background: #FDE8E7; } table.pf tr.pf-cat td.pf-c.pf-h1 { background: #F5B5AF; } table.pf tr.pf-cat td.pf-c.pf-h2 { background: #EC7F76; } table.pf tr.pf-cat td.pf-c.pf-h3 { background: #DD3F33; } table.pf tr.pf-cat td.pf-c.pf-h4 { background: #B80300; }
table.pf tr.pf-cat td:first-child { border-radius: 8px 0 0 8px; } table.pf tr.pf-cat td:last-child { border-radius: 0 8px 8px 0; }
table.pf tr.pf-cat:hover td { background: var(--bg); }
table.pf tr.pf-cat:focus-visible { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; }
.pf-chev { display: inline-block; width: 14px; color: var(--muted); transition: transform .15s ease; }
tr.open .pf-chev { transform: rotate(90deg); }
.pf-count { color: var(--muted); font-size: 12px; }
.pf-sum { font-size: 11.5px; color: var(--muted); margin-left: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-prod { padding-left: 22px !important; }
.pf-rank { display: inline-block; width: 22px; color: var(--muted); font-size: 12px; }
.pf-badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.pf-best { background: var(--basil); color: #fff; }
.pf-pop { background: var(--basil-soft); color: var(--basil); }
.pf-mid { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.pf-slow { background: var(--saffron-soft); color: var(--saffron); }
td.pf-fc { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--enzo-red-soft) !important; color: var(--red-text); font-weight: 700; border-radius: 4px; }
td.pf-fc small { display: block; font-size: 10.5px; font-weight: 500; opacity: .85; }
.pf-na { color: var(--muted); }
td.pf-c { min-width: 22px; border-radius: 3px; text-align: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-wide td.pf-c { min-width: 66px; font-size: 12px; }
.pf-h-none { background: var(--bg); }
.pf-h0, .pf-key .pf-h0 { background: #FDE8E7; color: #8E1A12; } .pf-h1, .pf-key .pf-h1 { background: #F5B5AF; color: #8E1A12; } .pf-h2, .pf-key .pf-h2 { background: #EC7F76; color: #5C0A05; }
.pf-h3, .pf-key .pf-h3 { background: #DD3F33; color: #fff; } .pf-h4, .pf-key .pf-h4 { background: #B80300; color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pf-h0 { background: #3A1514; color: #FBC9C4; } :root:not([data-theme="light"]) .pf-h1 { background: #6E1D18; color: #FDE3E1; } :root:not([data-theme="light"]) .pf-h2 { background: #9E1A10; color: #fff; } :root:not([data-theme="light"]) .pf-h3 { background: #D23A2E; color: #fff; } :root:not([data-theme="light"]) .pf-h4 { background: #F2776C; color: #3A0906; } }
:root[data-theme="dark"] .pf-h0 { background: #3A1514; color: #FBC9C4; } :root[data-theme="dark"] .pf-h1 { background: #6E1D18; color: #FDE3E1; } :root[data-theme="dark"] .pf-h2 { background: #9E1A10; color: #fff; } :root[data-theme="dark"] .pf-h3 { background: #D23A2E; color: #fff; } :root[data-theme="dark"] .pf-h4 { background: #F2776C; color: #3A0906; }
.pf-sel { outline: 2px solid var(--ink); outline-offset: 1px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) table.pf tr.pf-cat td.pf-c.pf-h0 { background: #3A1514; } :root:not([data-theme="light"]) table.pf tr.pf-cat td.pf-c.pf-h1 { background: #6E1D18; } :root:not([data-theme="light"]) table.pf tr.pf-cat td.pf-c.pf-h2 { background: #9E1A10; } :root:not([data-theme="light"]) table.pf tr.pf-cat td.pf-c.pf-h3 { background: #D23A2E; } :root:not([data-theme="light"]) table.pf tr.pf-cat td.pf-c.pf-h4 { background: #F2776C; } }
:root[data-theme="dark"] table.pf tr.pf-cat td.pf-c.pf-h0 { background: #3A1514; } :root[data-theme="dark"] table.pf tr.pf-cat td.pf-c.pf-h1 { background: #6E1D18; } :root[data-theme="dark"] table.pf tr.pf-cat td.pf-c.pf-h2 { background: #9E1A10; } :root[data-theme="dark"] table.pf tr.pf-cat td.pf-c.pf-h3 { background: #D23A2E; } :root[data-theme="dark"] table.pf tr.pf-cat td.pf-c.pf-h4 { background: #F2776C; }
.sr-dow-box { height: 260px; margin-top: 4px; }
@media (max-width: 640px) { table.pf .pf-name { max-width: 170px; } .pf-sum { display: none; } }


/* ---------- Daily Packing Record ---------- */
.pk-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-dash-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-dash-figures .figure-link:nth-child(4) { border-left: 0; }
.pk-dash-figures .figure-link:nth-child(n+4) { border-top: 1px solid var(--line); }
.pk-search { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); min-width: 220px; }
.pk-modal { width: min(1280px, 100%); }
.pk-sheet { background: var(--surface); border: 1px solid var(--paper-line); border-radius: 4px; padding: 14px 16px; }
.pk-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.pk-head b { color: var(--red-text); }
.pk-head h3 { margin: 0 auto; font-size: 20px; letter-spacing: -.01em; }
.pk-date { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.pk-date input { height: 36px; border: 0; border-bottom: 1.5px solid var(--paper-line); background: transparent; color: var(--ink); font-size: 16px; width: 150px; }
.pk-date input[type="number"] { width: 70px; }
.pk-row1 { display: grid; grid-template-columns: minmax(0, 2.1fr) repeat(2, minmax(0, .8fr)) minmax(0, .6fr) repeat(2, minmax(0, 1fr)) repeat(2, minmax(132px, 1.25fr)) minmax(0, .8fr); border-top: 1px solid var(--paper-line); border-left: 1px solid var(--paper-line); }
.pk-row2 { display: grid; grid-template-columns: minmax(220px, 1fr) 2.6fr; gap: 0; margin-top: 12px; border-left: 1px solid var(--paper-line); border-top: 1px solid var(--paper-line); }
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-cell { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); min-width: 0; }
.pk-cell > span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pk-cell input, .pk-cell select, .pk-cell textarea { width: 100%; min-height: 38px; border: 1px solid transparent; border-radius: 6px; background: var(--tint); color: var(--ink); font-size: 16px; padding: 0 8px; font-family: inherit; }
.pk-cell textarea { padding: 8px; resize: vertical; }
.pk-cell input:focus, .pk-cell select:focus, .pk-cell textarea:focus { outline: none; border-color: var(--enzo-red-strong); background: var(--surface); }
.pk-cell input.pk-hot { background: var(--enzo-red-soft); color: var(--red-text); font-weight: 700; border-color: var(--red-text); }
.pk-check input { width: 26px; height: 26px; min-height: 0; accent-color: var(--enzo-red-strong); margin: 6px 0 0; }
.pk-wide { grid-column: span 3; }
.pk-metal { grid-row: span 3; }
.pk-metal-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.pk-metal-row .seg button { min-height: 32px; }
.pk-metal-row .seg button.pk-fail { background: var(--enzo-red-soft); color: var(--red-text); box-shadow: inset 0 -2px 0 var(--red-text); }
.pk-label { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.pk-label > span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pk-photo { flex: 1; min-height: 220px; border: 2px dashed var(--line); border-radius: 8px; display: grid; place-items: center; text-align: center; font-size: 13px; color: var(--muted); padding: 10px; overflow: hidden; }
.pk-photo img { max-width: 100%; max-height: 360px; border-radius: 4px; }
.pk-photo-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pk-photo-actions label { cursor: pointer; }
.pk-shelf { min-height: 38px; display: flex; align-items: center; font-weight: 700; font-size: 15px; gap: 6px; }
.pk-sign > div { min-height: 38px; display: flex; align-items: center; }
.pk-signed { display: flex; flex-direction: column; line-height: 1.2; }
.pk-signed small { color: var(--muted); font-size: 11.5px; }
.pk-signed .link { align-self: flex-start; padding: 2px 0; }
.pk-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 10px; }
@media (max-width: 1100px) { .pk-row1 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pk-product { grid-column: span 3; } .pk-row2 { grid-template-columns: 1fr; } .pk-dash-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pk-row1, .pk-grid { grid-template-columns: 1fr 1fr; } .pk-product, .pk-wide { grid-column: span 2; } .pk-metal { grid-column: span 2; } .pk-figures, .pk-dash-figures { grid-template-columns: 1fr; } .pk-head h3 { margin: 0; width: 100%; } .pk-search { min-width: 0; width: 100%; } }


/* Packing dashboard: day by day tracker and timeline */
.pk-curve-box { height: 300px; }
#pkAttention { list-style: none; margin: 0; padding: 0; }
#pkAttention li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
#pkAttention li:last-child { border-bottom: 0; }
#pkAttention .tag { flex: none; max-width: 48%; text-align: right; white-space: normal; }
.pk-key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; font-size: 12px; }
.pk-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-chip.pos { background: var(--basil-soft); color: var(--basil); }
.pk-chip.warn { background: var(--saffron-soft); color: var(--saffron); }
.pk-chip.neg { background: var(--enzo-red-soft); color: var(--red-text); }
table.pk-days tr.pk-day { cursor: pointer; }
table.pk-days tr.pk-day:hover td { background: var(--tint); }
table.pk-days tr.pk-day:focus-visible { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; }
table.pk-days tr.pk-day.open td { background: var(--tint); }
table.pk-days .pk-chev { display: inline-block; width: 14px; color: var(--muted); transition: transform .15s ease; }
table.pk-days tr.open .pk-chev { transform: rotate(90deg); }
table.pk-days tr.pk-week td { background: var(--bg); font-weight: 700; font-size: 12.5px; color: var(--muted); border-bottom: 2px solid var(--line); }
table.pk-days tr.pk-timeline-row td { background: var(--tint); padding: 4px 16px 14px; }
.pk-tl { padding-top: 6px; }
.pk-tl-hours { position: relative; height: 18px; margin: 0 2px; }
.pk-tl-hours span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.pk-tl-track { position: relative; height: 54px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pk-tl-track > i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.pk-bar { position: absolute; top: 6px; bottom: 6px; border-radius: 5px; padding: 3px 6px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; font-size: 11px; line-height: 1.2; color: #fff; background: var(--muted); min-width: 4px; cursor: default; }
.pk-bar b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.pk-bar span { opacity: .9; font-variant-numeric: tabular-nums; }
.pk-bar.pos { background: var(--basil); } .pk-bar.warn { background: var(--saffron); } .pk-bar.neg { background: var(--red-text); }
.pk-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.pk-gap { position: absolute; top: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; }
.pk-gap span { font-size: 10.5px; font-weight: 700; margin-bottom: 2px; white-space: nowrap; }
.pk-gap.pos span { color: var(--muted); } .pk-gap.warn { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--saffron-soft) 4px 8px); } .pk-gap.warn span { color: var(--saffron); }
.pk-gap.neg { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--enzo-red-soft) 4px 8px); } .pk-gap.neg span { color: var(--red-text); }
.pk-tl .meta { margin: 8px 0 0; font-size: 12px; }
@media (max-width: 1100px) { .pk-dash-figures .figure-link:nth-child(4) { border-left: 1px solid var(--line); } .pk-dash-figures .figure-link:nth-child(odd) { border-left: 0; } .pk-dash-figures .figure-link:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) { .pk-tl-track { height: 64px; } .pk-bar b { display: none; } }

.st-purge-all { margin-left: 8px; color: var(--red-text); font-weight: 600; }


/* ---------- Business health card (main Dashboard) ---------- */
.health-card { margin-bottom: 22px; }
.health-overall { display: flex; flex-direction: column; align-items: flex-end; padding: 8px 14px; border-radius: 10px; line-height: 1.2; }
.health-overall span { font-size: 11.5px; font-weight: 600; opacity: .85; }
.health-overall b { font-size: 16px; }
.rag-bg-green { background: var(--basil-soft); color: var(--basil); } .rag-bg-amber { background: var(--saffron-soft); color: var(--saffron); }
.rag-bg-red { background: var(--enzo-red-soft); color: var(--red-text); } .rag-bg-grey { background: var(--bg); color: var(--muted); }
.health-summary { background: var(--tint); border-radius: var(--radius-control); padding: 12px 14px; margin: 4px 0 14px; }
.health-summary p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.health-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.rag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; }
.rag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rag-green { background: var(--basil-soft); color: var(--basil); } .rag-amber { background: var(--saffron-soft); color: var(--saffron); }
.rag-red { background: var(--enzo-red-soft); color: var(--red-text); } .rag-grey { background: var(--bg); color: var(--muted); }
table.health { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.health th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 10px 8px; border-bottom: 1px solid var(--line); }
table.health td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.health tr.h-row { cursor: pointer; }
table.health tr.h-row td:first-child { box-shadow: inset 4px 0 0 var(--line); }
table.health tr.h-green td:first-child { box-shadow: inset 4px 0 0 var(--basil); } table.health tr.h-amber td:first-child { box-shadow: inset 4px 0 0 var(--saffron); }
table.health tr.h-red td:first-child { box-shadow: inset 4px 0 0 var(--red-text); }
table.health tr.h-row:hover td, table.health tr.h-row.open td { background: var(--tint); }
table.health tr.h-row:focus-visible { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; }
.h-area { white-space: nowrap; } .h-area b { font-weight: 700; } .h-area small { display: block; margin: 2px 0 0 34px; }
.h-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--enzo-red-soft); color: var(--red-text); margin-right: 8px; vertical-align: middle; }
.h-icon svg { width: 16px; height: 16px; }
.h-head { white-space: nowrap; } .h-head b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; } .h-head small { display: block; color: var(--muted); font-size: 12px; white-space: normal; max-width: 190px; }
.h-comment { color: var(--ink); line-height: 1.45; min-width: 260px; }
.h-chev { color: var(--muted); font-size: 20px; width: 24px; transition: transform .15s ease; }
tr.open .h-chev { transform: rotate(90deg); }
table.health tr.h-detail td { background: var(--tint); padding: 4px 14px 16px 18px; }
.h-mini { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.h-mini .h-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.h-mini-2 .h-kpis-wide { grid-column: 1 / -1; }
.h-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.h-kpi-v { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.h-kpi-v small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.h-kpi-v.pos { color: var(--basil); } .h-kpi-v.warn { color: var(--saffron); } .h-kpi-v.neg { color: var(--red-text); }
.h-chart { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; height: 220px; position: relative; }
.h-list { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.h-list h4, .h-days h4 { margin: 0 0 6px; font-size: 13px; }
.h-list ol { margin: 0; padding-left: 18px; font-size: 13px; }
.h-list li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.h-list li:last-child { border-bottom: 0; }
.h-list li span small { display: block; color: var(--muted); font-size: 11.5px; }
.h-list li b { float: right; font-weight: 600; margin-left: 10px; } .h-list li b.neg { color: var(--red-text); } .h-list li b.warn { color: var(--saffron); } .h-list li b.pos { color: var(--basil); }
.h-days { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.h-day-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.h-day { border-radius: 8px; padding: 6px 4px; text-align: center; line-height: 1.2; font-size: 12px; }
.h-day b { display: block; font-size: 11px; } .h-day span { display: block; font-size: 16px; font-weight: 700; } .h-day small { display: block; font-size: 10.5px; }
.h-day.done { background: var(--basil-soft); color: var(--basil); } .h-day.missed { background: var(--enzo-red-soft); color: var(--red-text); } .h-day.today { border: 1.5px dashed var(--muted); color: var(--muted); }
.h-link { margin-top: 12px; }
.health-rules { margin-top: 12px; font-size: 13px; color: var(--muted); }
.health-rules summary { cursor: pointer; font-weight: 600; }
.health-rules ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.5; }
@media (max-width: 900px) { .h-mini { grid-template-columns: 1fr; } .h-mini .h-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .h-day-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 640px) { table.health thead { display: none; } table.health tr.h-row { display: grid; grid-template-columns: 1fr auto; } table.health tr.h-row td { border-bottom: 0; padding: 6px 10px; }
  table.health tr.h-row td.h-area { grid-column: 1; } table.health tr.h-row td:nth-child(2) { grid-column: 2; grid-row: 1; } table.health tr.h-row td.h-head, table.health tr.h-row td.h-comment { grid-column: 1 / -1; } table.health tr.h-row td.h-chev { display: none; }
  table.health tr.h-row { border-bottom: 1px solid var(--line); } .h-comment { min-width: 0; } .health-card .card-head { flex-wrap: wrap; } }

/* Placeholder pages */
.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-panel); padding: 48px 28px; text-align: center; }
.empty .glyph { width: 56px; height: 56px; border-radius: 14px; background: var(--enzo-red-soft); color: var(--red-text); display: grid; place-items: center; margin: 0 auto 14px; }
.empty .glyph svg { width: 26px; height: 26px; }
.empty h2 { font-size: 18px; margin: 0 0 6px; }
.empty p { color: var(--muted); margin: 0 auto 18px; max-width: 52ch; }
.siblings { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.page-head p { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }

/* ---------- Sign-in and no-access pages ---------- */
.auth-page { display: block; }
.auth { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100%; }
.auth-brand { background: var(--enzo-red); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 48px clamp(32px, 7vw, 96px); padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
.wordmark-lg { width: min(360px, 70%); height: 160px; background-position: left center; }
.auth-tag { font-size: 20px; font-weight: 500; line-height: 1.35; max-width: 22ch; margin: 18px 0 0; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 36px 32px 30px; }
.wordmark-card { display: none; }
.auth-card h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 8px; }
.auth-lead { color: var(--muted); margin: 0 0 24px; }
.auth-lead b { color: var(--ink); font-weight: 600; }
.auth-btn { width: 100%; min-height: 50px; font-size: 16px; }
.auth-state { min-height: 1.2em; font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.auth-help { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; margin: 14px 0 0; }
.auth-steps { margin: 0 0 24px; padding-left: 20px; color: var(--ink); }
.auth-steps li { margin: 6px 0; }
.auth-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.auth-actions .btn { flex: 1 1 auto; }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-panel { align-items: flex-start; padding-top: calc(0px + env(safe-area-inset-top, 0px)); background: var(--enzo-red); }
  .auth-card { margin-top: 28px; border: 0; }
  .wordmark-card { display: block; width: 100%; height: 88px; margin: -8px 0 22px; background-color: var(--enzo-red); background-position: center; background-size: auto 64px; border-radius: 10px; }
}


/* ---------- End of Day Stocktake ---------- */
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 15px; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.link { background: none; border: 0; color: var(--red-text); font-weight: 600; font-size: 13px; cursor: pointer; padding: 6px 4px; text-decoration: underline; text-underline-offset: 2px; }
.due.done { background: var(--basil-soft); color: var(--basil); }
.due.done i { background: var(--basil); }
.st-status { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-panel); margin-bottom: 10px; font-size: 14.5px; }
.st-status.due { background: var(--enzo-red-soft); color: var(--ink); border-left: 5px solid var(--enzo-red-strong); }
.st-status.done { background: var(--basil-soft); color: var(--ink); border-left: 5px solid var(--basil); }
.st-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; background: var(--enzo-red-strong); }
.st-status.done .st-dot { background: var(--basil); }

.table-card { padding: 0; overflow: hidden; }
.card-pad { padding: 16px 18px 6px; }
.table-scroll { overflow-x: auto; position: relative; }
table.records { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 14px; }
table.records th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.records td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.records tbody tr:last-child td { border-bottom: 0; }
table.records .num { text-align: right; font-variant-numeric: tabular-nums; }
table.records .strong { font-weight: 600; }
table.records .meta, .history .meta { font-size: 12px; color: var(--muted); }
table.records .nowrap { white-space: nowrap; }
table.records tr.just-saved td { background: var(--basil-soft); transition: background 2s ease; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: var(--saffron-soft); color: var(--saffron); margin-left: 6px; vertical-align: 1px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; white-space: nowrap; }
.history-row td { background: var(--tint); }
.history { list-style: none; margin: 0; padding: 0; }
.history li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.history li:last-child { border-bottom: 0; }
.empty-row { text-align: center; color: var(--muted); padding: 28px !important; }

/* Pop-up form */
body.modal-open #view { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(15, 17, 20, .5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--surface); border-radius: 14px; width: min(1260px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
.modal-head h2 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -.015em; }
.modal-head .sub { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.modal-close { color: var(--muted); flex: 0 0 auto; }
.modal-close:hover { background: var(--bg); color: var(--ink); }
.modal-body { overflow-y: auto; padding: 16px 20px 20px; background: var(--bg); flex: 1; }
.modal-foot { display: flex; align-items: center; gap: 14px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.foot-summary { font-size: 14px; color: var(--muted); }
.foot-summary b { color: var(--ink); }
.foot-actions { display: flex; gap: 10px; margin-left: auto; }
.foot-actions .btn { min-height: 44px; padding: 0 20px; }
.error { color: var(--red-text); font-size: 13px; margin: 0; flex: 1 1 260px; }
.error:empty { display: none; }

.field-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.draft-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; min-height: 1em; }

.st-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 12px; }
.st-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--line); }
.st-legend .l-exp::before { background: var(--enzo-red-soft); border-color: var(--red-text); }
.st-legend .l-soon::before { background: var(--saffron-soft); border-color: var(--saffron); }
.st-legend .l-off::before { background: repeating-linear-gradient(135deg, var(--track) 0 3px, transparent 3px 6px); }



/* ---------- The stocktake form, laid out like the paper sheet ---------- */
.modal-paper { width: min(1680px, 100%); height: 100%; }
.modal-paper .modal-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 10px; }
.modal-paper .draft-note { margin: 6px 0 0; }
.modal-paper .st-legend { margin-top: 6px; }
.correction { display: block; margin-bottom: 12px; }
.correction input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.field-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.paper-fit { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 4px; }
.paper { width: max-content; background: var(--surface); color: var(--ink); border: 1px solid var(--paper-line); border-radius: 4px; padding: 16px 18px 14px; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.paper-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; margin-bottom: 12px; }
.paper-head h3 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.paper-date { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.paper-date input, .paper-foot input { border: 0; border-bottom: 1.5px solid var(--paper-line); background: transparent; color: var(--ink); height: 36px; font-size: 16px; padding: 0 4px; }
.paper-date input:focus, .paper-foot input:focus { outline: none; border-bottom-color: var(--enzo-red-strong); }
.paper-top { display: flex; gap: 14px; align-items: flex-start; }
.paper-bottom { display: flex; gap: 14px; align-items: stretch; margin-top: 14px; }
.b-customer { flex: 1; min-width: 320px; border: 1px solid var(--paper-line); padding: 8px 10px; display: flex; flex-direction: column; }
.cust-label { font-weight: 700; font-size: 14px; }
.b-customer textarea { flex: 1; min-height: 72px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; resize: none; padding: 4px 0; }
.b-customer textarea:focus { outline: none; }
.b-customer:focus-within { border-color: var(--enzo-red-strong); }
.paper-foot { display: flex; align-items: flex-end; gap: 22px; margin-top: 16px; font-weight: 700; font-size: 15px; }
.paper-foot label { display: flex; align-items: flex-end; gap: 6px; }
.paper-foot label span { padding-bottom: 7px; }
.pf-label { padding-bottom: 7px; }
.paper-foot input { width: 230px; font-weight: 400; }
.pf-time { margin-left: auto; }
.paper-foot .pf-time input { width: 150px; }

.paper-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; border-top: 1px solid var(--paper-line); border-left: 1px solid var(--paper-line); }
.paper-table caption { display: none; }
.paper-table col.c-prod { width: 182px; }
.paper-table col.c-qty { width: 50px; }
.paper-table col.c-use { width: 92px; }
.t-sauce col.c-prod, .t-desserts col.c-prod { width: 160px; }
.paper-table th, .paper-table td { border: 0; border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); padding: 0; height: 38px; background: var(--surface); }
/* pinned while scrolling: product names on the left, headings at the top */
.paper-table th.prod, .paper-table td.prod { position: sticky; left: 0; z-index: 2; }
.paper-table thead th { position: sticky; top: 0; z-index: 3; }
.paper-table thead tr:nth-child(2) th { top: 29px; }
.paper-table thead th.prod { z-index: 4; }
.paper-table thead th, .paper-table .sub-head th { background: var(--paper-head); font-size: 12.5px; font-weight: 700; text-align: center; height: 28px; padding: 2px 4px; }
.paper-table th.prod { text-align: left; padding-left: 8px; font-size: 14.5px; }
.paper-table td.prod { padding: 2px 44px 2px 7px; font-size: 13px; line-height: 1.2; }
.paper-table .off { background: var(--paper-shade); position: static; }
.paper-table td.cell input { display: block; width: 100%; height: 37px; border: 0; background: transparent; color: var(--ink); font-size: 16px; text-align: center; padding: 0 3px; }
.paper-table td.cell input.qty { text-align: right; padding-right: 6px; }
.paper-table td.cell input.useby { font-variant-numeric: tabular-nums; letter-spacing: -.02em; padding: 0 2px; }
@media (pointer: fine) { .paper-table td.cell input { font-size: 15px; } }
.paper-table td.cell input:focus { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; background: var(--tint); }
.paper-table input.useby.expired { background: var(--enzo-red-soft); color: var(--red-text); font-weight: 700; }
.paper-table input.useby.soon { background: var(--saffron-soft); color: var(--saffron); font-weight: 700; }
.paper-table input.invalid { outline: 2px solid var(--red-text); outline-offset: -2px; background: var(--enzo-red-soft); }
.paper-table tr.is-na td.cell { background: repeating-linear-gradient(135deg, var(--paper-shade) 0 5px, transparent 5px 10px); }
.paper-table tr.is-na td.cell input { visibility: hidden; }
.paper-table tr.is-na .pname { color: var(--muted); text-decoration: line-through; }
.na-chip { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-size: 10.5px; font-weight: 700; border: 1px solid var(--paper-line); background: var(--surface); color: var(--muted); border-radius: 4px; padding: 0 5px; min-height: 22px; cursor: pointer; }
.na-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.st-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 12px; }
.st-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--line); }
.st-legend .l-exp::before { background: var(--enzo-red-soft); border-color: var(--red-text); }
.st-legend .l-soon::before { background: var(--saffron-soft); border-color: var(--saffron); }
.st-legend .l-off::before { background: var(--paper-shade); }
.st-legend .l-tip::before { display: none; }
@media (pointer: coarse) {
  .na-chip { min-height: 30px; padding: 0 8px; }
  .paper-table td { height: 46px; }
  .paper-table td.cell input { height: 45px; }
}
/* Phones: the window fills the screen and the sheet scrolls at full size */
@media (max-width: 999px) {
  .modal-backdrop { padding: 0; }
  .modal, .modal-paper { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .foot-actions { width: 100%; }
  .foot-actions .btn { flex: 1; min-height: 48px; }
}
@media (max-width: 640px) {
  .modal-backdrop:has(.modal-small) { padding: 16px; align-items: center; }
  .paper { padding: 12px; }
  .paper-head { justify-content: flex-start; }
  .paper-head h3 { position: sticky; left: 12px; font-size: 18px; }
  .st-legend { display: none; }
}




/* Stocktake statuses */
.status-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.status-badge.s-not-started { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.status-badge.s-due { background: var(--enzo-red-soft); color: var(--red-text); }
.status-badge.s-in-progress { background: var(--saffron-soft); color: var(--saffron); }
.status-badge.s-completed { background: var(--basil-soft); color: var(--basil); }
.status-badge.s-not-required { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.status-badge.s-deleted { background: var(--bg); color: var(--muted); border: 1px dashed var(--line); }
.st-status .status-badge { margin-left: auto; }
.st-status.s-not-started { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--muted); }
.st-status.s-not-started .st-dot { background: var(--muted); }
.st-status.s-not-required { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--line); }
.st-status.s-not-required .st-dot { background: var(--line); }
.st-status.s-due { background: var(--enzo-red-soft); border-left: 5px solid var(--enzo-red-strong); }
.st-status.s-in-progress { background: var(--saffron-soft); border-left: 5px solid var(--saffron); }
.st-status.s-in-progress .st-dot { background: var(--saffron); }
.st-status.s-completed { background: var(--basil-soft); border-left: 5px solid var(--basil); }
.st-status.s-completed .st-dot { background: var(--basil); }
.due.s-not-started { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.due.s-not-started i { background: var(--muted); }
.due.s-not-required { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.due.s-not-required i { background: var(--line); }
.due.s-in-progress { background: var(--saffron-soft); color: var(--saffron); }
.due.s-in-progress i { background: var(--saffron); }
.due.s-completed { background: var(--basil-soft); color: var(--basil); }
.due.s-completed i { background: var(--basil); }
.pill-in-progress { color: var(--saffron); }
table.records tr.today-row td { background: var(--tint); }
table.records td:first-child .strong { white-space: nowrap; }
table.records tr.deleted-row td { color: var(--muted); }
.btn-danger { color: var(--red-text); }
.btn-danger:hover { border-color: var(--red-text); background: var(--enzo-red-soft); }
.btn-danger-solid { background: var(--enzo-red-strong); }
.modal-small { width: min(520px, calc(100% - 32px)) !important; height: auto !important; border-radius: 14px !important; }
.modal-small .modal-body { overflow: visible; }
.modal-small .modal-body p { margin: 0 0 14px; }


/* Live saving */
.save-state { font-size: 12.5px; margin-left: 10px; color: var(--muted); }
.save-state.ss-saved { color: var(--basil); }
.save-state.ss-saving, .save-state.ss-pending { color: var(--muted); }
.save-state.ss-failed { color: var(--red-text); font-weight: 600; }
.conflict { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--saffron-soft); border-left: 5px solid var(--saffron); border-radius: var(--radius-control); padding: 10px 14px; margin-bottom: 10px; font-size: 14px; }
.conflict[hidden] { display: none; }
.status { color: var(--muted); padding: 18px 0; }
.status p { margin: 0 0 12px; color: var(--ink); }
.st-status.s-loading { background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.st-status.s-loading .st-dot { background: var(--line); }


/* Use-by calendar */
.cal { position: fixed; z-index: 95; width: 292px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); padding: 10px 12px 8px; font-size: 14px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-head b { font-size: 15px; }
.cal-nav { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.cal-nav:hover { background: var(--bg); }
.cal-recent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.cal-recent > span { width: 100%; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.cal-chip { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 4px 10px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--ink); }
.cal-chip small { color: var(--muted); font-weight: 500; }
.cal-chip:hover { border-color: var(--enzo-red-strong); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-grid > span { font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-day { height: 36px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cal-day:hover { background: var(--bg); }
.cal-day.past { color: var(--red-text); }
.cal-day.soon { color: var(--saffron); font-weight: 700; }
.cal-day.stocktake-day { box-shadow: inset 0 0 0 1.5px var(--muted); }
.cal-day.between { background: var(--enzo-red-soft); border-radius: 0; }
.cal-day.chosen { background: var(--enzo-red-strong); color: #fff; font-weight: 700; }
.cal-hint { margin: 6px 0 4px; font-size: 12px; color: var(--muted); text-align: center; }
.cal-foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 6px; }
.cal-range { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-right: auto; cursor: pointer; }
.cal-range input { width: 18px; height: 18px; accent-color: var(--enzo-red-strong); }
@media (pointer: coarse) { .cal { width: 320px; } .cal-day { height: 42px; font-size: 16px; } .cal-chip { padding: 7px 12px; font-size: 14px; } }

/* Confirmation message */
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; background: #1D1F23; color: #fff; border-radius: 10px; padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 14px; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); max-width: calc(100% - 32px); transition: opacity .5s ease; }
.toast button { background: #fff; color: #1D1F23; border: 0; border-radius: 7px; font-weight: 700; font-size: 13px; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.toast.out { opacity: 0; }

/* Touch screens: 16px text stops iPhone zooming, bigger targets */

@media (max-width: 1199px) {
  .modal-backdrop { padding: 0; }
  .modal { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .foot-actions { width: 100%; }
  .foot-actions .btn { flex: 1; min-height: 48px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .two { grid-template-columns: 1fr; }
  .search { display: none; }
}
/* Phones: the slim rail stays pinned; opening it slides the full menu over the page */
@media (max-width: 640px) {
  :root { --rail-w-collapsed: 60px; }
  .shell { padding-left: var(--rail-w-collapsed); }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  .shell:not(.collapsed) .sidebar { box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
  #view { padding: 16px 14px calc(32px + env(safe-area-inset-bottom, 0px)); }
  .topbar { padding-left: 14px; padding-right: 12px; gap: 6px; }
  .user .who { display: none; }
  .kpis { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 24px; }
  .rank td.barcell { width: 34%; }
}
@media (pointer: coarse) {
  input[type="search"], input[type="text"], input[type="number"], input[type="date"], input[type="time"], select { font-size: 16px; }
  .seg button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* =====================================================================
   Cleaner look (2026 refresh): softer canvas, rounded cards with gentle
   shadows instead of borders, lighter numbers, pill controls.
   Light mode only changes colours; dark mode keeps its own palette.
   The stocktake and packing forms keep their paper look.
   ===================================================================== */
:root { --bg: #F3F5F8; --line: #E4E8ED; --tint: #F6F8FA; --radius-panel: 20px; --radius-control: 12px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06); --brand-bar: #B80300; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-card: none; } }
:root[data-theme="dark"] { --shadow-card: none; }

/* layout and type */
#view { padding: 26px 34px calc(48px + env(safe-area-inset-bottom, 0px)); }
.page-head h1 { font-weight: 600; font-size: 32px; letter-spacing: -.03em; }
.page-head p { color: var(--muted); }
.topbar { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--line); }
.search { border-radius: 999px; background: var(--tint); border-color: transparent; }

/* cards: no hard borders, soft shadow, more breathing room */
.card, .home-figures, .ov-strip, .ov-summary, .hp-section { background: var(--surface); border: 1px solid transparent; border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .home-figures, :root:not([data-theme="light"]) .ov-strip, :root:not([data-theme="light"]) .ov-summary, :root:not([data-theme="light"]) .hp-section { border-color: var(--line); } }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .home-figures, :root[data-theme="dark"] .ov-strip, :root[data-theme="dark"] .ov-summary, :root[data-theme="dark"] .hp-section { border-color: var(--line); }
.card { padding: 22px 24px; }
.card h2 { font-weight: 600; font-size: 17px; }
.grid { gap: 18px; }
.figure-link { border-left: 0; padding: 20px 24px; }
.home-figures .figure-link + .figure-link { box-shadow: inset 1px 0 0 var(--line); }
.kpi-value { font-weight: 500; letter-spacing: -.025em; }
.kpi-label { font-weight: 500; }

/* controls: pills */
.seg { border-radius: 999px; border-color: transparent; background: var(--tint); padding: 3px; }
.seg button { border-radius: 999px; font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.btn { border-radius: 999px; }
.select { border-radius: 999px; padding-left: 14px; }
.st-status { border-radius: 16px; }
table.records th { font-weight: 500; }
.pk-chip, .status-badge, .badge { border-radius: 999px; }
.h-kpi, .h-chart, .h-list, .h-days { border-color: transparent; box-shadow: var(--shadow-card); border-radius: 14px; }

/* ---------- Overview (main Dashboard) ---------- */
.ov-head h1 { font-size: 40px; }
.ov-notice { margin-bottom: 14px; }
.ov-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 0; margin-bottom: 18px; }
.ov-stat { padding: 16px 24px; }
.ov-stat + .ov-stat { box-shadow: inset 1px 0 0 var(--line); }
.ov-stat-label { font-size: 14px; color: var(--muted); font-weight: 500; }
.ov-stat-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ov-stat-value { font-size: 30px; font-weight: 500; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.ov-stat-value.muted { color: var(--muted); }
.ov-trend { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ov-trend.up { color: var(--basil); } .ov-trend.down { color: var(--red-text); }
.ov-stat-note { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ov-sample { background: var(--tint); border-radius: 999px; padding: 1px 7px; font-size: 11px; margin-left: 4px; }
.ov-summary { padding: 22px 24px; margin-bottom: 22px; }
.ov-summary-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.ov-summary-head h2 { margin: 0; font-size: 19px; font-weight: 600; }
.ov-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ov-points li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.ov-points li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.ov-points li.s-red::before { background: var(--red-text); } .ov-points li.s-amber::before { background: var(--saffron); } .ov-points li.s-green::before { background: var(--basil); }
.ov-points li b { margin-right: 4px; }
.hp-section { overflow: hidden; margin-bottom: 18px; }
.hp-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--brand-bar); color: #fff; padding: 14px 24px; }
.hp-bar h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.hp-bar div span { font-size: 12.5px; opacity: .85; }
.hp-bar-status { font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.hp-cols, .hp-row { display: grid; grid-template-columns: 28px minmax(150px, 1.1fr) minmax(130px, .9fr) minmax(0, 2.6fr) 136px 18px; gap: 14px; align-items: start; padding: 0 24px; }
.hp-cols { padding-top: 14px; padding-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.hp-row { padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--line); cursor: pointer; }
.hp-cols + .hp-row { border-top-color: transparent; }
.hp-row:hover, .hp-row.open { background: var(--tint); }
.hp-row:focus-visible { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; }
.hp-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hp-arrow.s-green { color: var(--basil); } .hp-arrow.s-red { color: var(--red-text); } .hp-arrow.s-amber { color: var(--saffron); } .hp-arrow.s-grey { color: var(--muted); }
.hp-name b { font-weight: 600; font-size: 15px; } .hp-name small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.hp-head b { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .hp-head small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.hp-comment { font-size: 14px; line-height: 1.5; color: var(--ink); }
.hp-row .rag { justify-self: start; }
.hp-chev { color: var(--muted); font-size: 20px; line-height: 1; transition: transform .15s ease; }
.hp-row.open .hp-chev { transform: rotate(90deg); }
.hp-detail { background: var(--tint); padding: 4px 24px 20px 66px; }
@media (max-width: 1100px) {
  .h-mini { grid-template-columns: minmax(0, 1fr); }
  .hp-cols { display: none; }
  .hp-row { grid-template-columns: 26px minmax(0, 1fr) auto 16px; row-gap: 6px; }
  .hp-row .hp-head, .hp-row .hp-comment { grid-column: 2 / 4; }
  .hp-row .rag { grid-column: 3; grid-row: 1; justify-self: end; }
  .hp-row .hp-chev { grid-column: 4; grid-row: 1; }
  .hp-detail { padding-left: 24px; }
  .ov-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-stat:nth-child(3) { box-shadow: none; } .ov-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  #view { padding: 18px 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
  .ov-head h1 { font-size: 32px; }
  .ov-strip { grid-template-columns: 1fr; } .ov-stat + .ov-stat { box-shadow: none; border-top: 1px solid var(--line); }
  .hp-bar { flex-wrap: wrap; padding: 12px 16px; } .hp-cols, .hp-row { padding-left: 16px; padding-right: 16px; }
  .ov-summary-head { flex-wrap: wrap; }
  .hp-detail { padding: 4px 12px 16px; }
  .h-mini { grid-template-columns: minmax(0, 1fr); }
  .hp-detail .h-mini { gap: 10px; }
  .hp-detail .h-mini .h-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hp-detail .h-kpi { padding: 8px 10px; min-width: 0; }
  .hp-detail .h-kpi-v { font-size: 18px; overflow-wrap: anywhere; }
  .hp-detail .h-chart { height: 190px; }
  .hp-detail .h-day-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =====================================================================
   Mini CRM (Sales > Customers, Sales > Sales pipeline)
   ===================================================================== */
.crm-filters .pk-search { min-width: 240px; }
.crm-due[aria-pressed="true"] { background: var(--enzo-red-soft); color: var(--red-text); }
.crm-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--red-text); color: #fff; font-size: 11.5px; font-weight: 700; }
.crm-rep { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.crm-rep i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rep); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; }
.crm-stage { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--tint); color: var(--ink); }
.crm-stage.st-lead { background: #EEF0F3; color: #4A5260; } .crm-stage.st-contacted { background: #E7F0F7; color: #2E6F95; }
.crm-stage.st-meeting { background: #EFE9F6; color: #6B4590; } .crm-stage.st-sample { background: var(--saffron-soft); color: var(--saffron); }
.crm-stage.st-feedback { background: #FFF1DE; color: #A35A00; } .crm-stage.st-trial { background: #E3F4EC; color: #2B7A57; }
.crm-stage.st-won { background: var(--basil-soft); color: var(--basil); } .crm-stage.st-hold { background: #EEF0F3; color: var(--muted); }
.crm-stage.st-lost { background: var(--enzo-red-soft); color: var(--red-text); }
.crm-health { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 600; }
.crm-health.h-ok { color: var(--basil); } .crm-health.h-risk { color: var(--saffron); } .crm-health.h-lapsed { color: var(--red-text); } .crm-health.h-none { color: var(--muted); }
.crm-table tbody tr { cursor: pointer; }
.crm-table tbody tr:hover td { background: var(--tint); }
.crm-table tbody tr:focus-visible { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; }
.crm-more { padding: 14px; text-align: center; }
/* board */
.crm-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.crm-col { background: var(--tint); border-radius: 16px; padding: 10px; min-height: 200px; }
.crm-col header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 4px 4px 10px; }
.crm-col header b { font-size: 14px; } .crm-col header span { font-size: 12px; font-weight: 700; background: var(--surface); border-radius: 999px; padding: 1px 8px; }
.crm-col header small { width: 100%; color: var(--muted); font-size: 12px; }
.crm-col-note { margin: 0 4px 8px; font-size: 12px; }
.crm-cards { display: grid; gap: 8px; }
.crm-card { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.crm-card:hover { outline: 1.5px solid var(--line); } .crm-card:focus-visible { outline: 2px solid var(--enzo-red-strong); }
.crm-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; margin-top: 2px; }
/* profile pop-up */
.crm-modal { width: min(1180px, 100%); }
.crm-modal .modal-head { gap: 12px; }
.crm-head-badges { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.crm-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; gap: 4px; overflow-x: auto; }
.crm-steps li { flex: 1 1 0; min-width: 104px; }
.crm-steps button { width: 100%; min-height: 38px; padding: 0 10px; border: 0; background: var(--tint); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.crm-steps li:first-child button { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 10px 0 0 10px; }
.crm-steps li:last-child button { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); border-radius: 0 10px 10px 0; }
.crm-steps button.done { background: var(--basil-soft); color: var(--basil); }
.crm-steps button.now { background: var(--enzo-red-strong); color: #fff; }
.crm-steps button:hover:not(.now) { background: var(--line); color: var(--ink); }
.crm-steps button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.crm-closed { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.crm-closed .btn.on { background: var(--ink); color: var(--surface); }
.crm-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.crm-inline select, .crm-inline input { height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.crm-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; }
.crm-grid h3 { font-size: 14px; margin: 4px 0 8px; display: flex; justify-content: space-between; align-items: center; grid-column: 1 / -1; }
.crm-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-content: start; }
.crm-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.crm-f input, .crm-f select { height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 400; }
.crm-f input:focus, .crm-f select:focus, .crm-contact input:focus, .crm-next input:focus, .crm-log-form textarea:focus { outline: none; border-color: var(--enzo-red-strong); box-shadow: 0 0 0 3px var(--enzo-red-soft); }
.crm-wide { grid-column: 1 / -1; }
#cContacts { grid-column: 1 / -1; display: grid; gap: 8px; }
.crm-contact { display: grid; grid-template-columns: 1.2fr .9fr 1fr 1.3fr 32px; gap: 6px; }
.crm-contact input { height: 38px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.crm-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.crm-next { background: var(--tint); border-radius: 14px; padding: 12px 14px; }
.crm-next.late { background: var(--enzo-red-soft); }
.crm-next h3 { margin-top: 0; }
.crm-next-row { display: grid; grid-template-columns: 150px 1fr; gap: 8px; }
.crm-next-row input { height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; min-width: 0; }
.crm-late { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; }
.crm-tabs { align-self: flex-start; }
.crm-log-types { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-log-form { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--tint); display: grid; gap: 8px; }
.crm-log-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; resize: vertical; }
.crm-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; max-height: 170px; overflow-y: auto; font-size: 13px; }
.crm-prods label { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.crm-prods input { width: 18px; height: 18px; accent-color: var(--enzo-red-strong); }
.crm-log-actions { display: flex; justify-content: flex-end; gap: 8px; }
.crm-timeline { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; max-height: 340px; overflow-y: auto; }
.crm-timeline li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.crm-timeline li p { margin: 2px 0 0; color: var(--ink); }
.crm-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--muted); }
.t-call .crm-dot { background: #2E6F95; } .t-visit .crm-dot { background: #6B4590; } .t-email .crm-dot { background: #4A5260; } .t-sample .crm-dot { background: var(--saffron); } .t-stage .crm-dot { background: var(--enzo-red-strong); } .t-created .crm-dot { background: var(--basil); }
.crm-ostats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.crm-ostats div { background: var(--tint); border-radius: 10px; padding: 8px 10px; } .crm-ostats b { display: block; font-size: 17px; font-weight: 600; }
.crm-ostats .meta { font-size: 12px; }
.crm-tab h4 { font-size: 13px; margin: 6px 0; }
.crm-top { margin: 0; padding-left: 18px; font-size: 13.5px; }
.crm-top li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.crm-top li b { float: right; font-weight: 600; margin-left: 8px; }
/* pipeline dashboard */
.crm-figures { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.crm-funnel { display: grid; gap: 6px; }
.crm-fstep { display: grid; grid-template-columns: 200px 1fr 50px 130px; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.crm-fstep:hover { background: var(--tint); } .crm-fstep:focus-visible { outline: 2px solid var(--enzo-red-strong); }
.crm-fstep b { text-align: right; font-variant-numeric: tabular-nums; }
.crm-flabel small { color: var(--muted); font-weight: 400; }
.crm-fbar { height: 14px; background: var(--tint); border-radius: 999px; overflow: hidden; }
.crm-fbar i { display: block; height: 100%; border-radius: 999px; background: var(--enzo-red-strong); }
.crm-fstep.st-sample .crm-fbar i, .crm-fstep.st-feedback .crm-fbar i { background: var(--saffron); }
.crm-fstep.st-trial .crm-fbar i, .crm-fstep.st-won .crm-fbar i { background: var(--basil); }
.crm-fstep.st-hold .crm-fbar i, .crm-fstep.st-lost .crm-fbar i { background: var(--muted); }
.crm-mapgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.crm-statepanel { background: var(--tint); border-radius: 16px; padding: 14px 16px; }
.crm-statepanel h4 { font-size: 12.5px; margin: 10px 0 4px; color: var(--muted); font-weight: 600; }
.crm-statepanel .sr-pop-head h3 { font-size: 17px; }
@media (max-width: 900px) { .crm-mapgrid { grid-template-columns: 1fr; } }
.crm-pop-list { margin: 0 0 6px; display: grid; gap: 2px; }
.crm-pop-list div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.crm-pop-list dt { min-width: 0; } .crm-pop-list dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.crm-statepanel .btn { margin-top: 10px; }
#crmReps .meta, .crm-table td.num .meta { white-space: nowrap; }
.crm-list li { cursor: pointer; } .crm-list li:hover { background: var(--tint); }
.crm-list li:focus-visible { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; }
@media (max-width: 1100px) { .crm-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } .crm-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .crm-figures { grid-template-columns: 1fr 1fr; }
  .crm-details { grid-template-columns: 1fr; }
  .crm-contact { grid-template-columns: 1fr 1fr; } .crm-contact button { grid-column: 2; justify-self: end; }
  .crm-fstep { grid-template-columns: 1fr 44px; } .crm-fstep .crm-fbar { grid-column: 1 / -1; grid-row: 2; } .crm-fstep .meta { display: none; }
  .crm-next-row { grid-template-columns: 1fr; }
  .crm-filters .pk-search { min-width: 0; width: 100%; }
  .crm-prods { grid-template-columns: 1fr; }
}

/* CRM tables with in-cell bars */
.crm-tbl td, .crm-tbl th { vertical-align: middle; }
.crm-tbl tr[data-stage], .crm-tbl tr[data-id], .crm-tbl tr[data-state] { cursor: pointer; }
.crm-tbl tbody tr[data-stage]:hover td, .crm-tbl tbody tr[data-id]:hover td, .crm-tbl tbody tr[data-state]:hover td { background: var(--tint); }
.crm-tbl tbody tr:focus-visible { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; }
.crm-tbl tfoot td { border-top: 2px solid var(--line); padding-top: 12px; }
.crm-barcol { width: 22%; min-width: 120px; }
.crm-barcol .crm-bar + .crm-pct { margin-left: 8px; }
.crm-bar { display: inline-block; vertical-align: middle; width: calc(100% - 46px); min-width: 70px; height: 10px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.crm-barcol .crm-bar:only-child { width: 100%; }
.crm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--enzo-red-strong); }
.crm-bar.b-lead i { background: #8A93A0; } .crm-bar.b-contacted i { background: #2E6F95; } .crm-bar.b-meeting i { background: #6B4590; }
.crm-bar.b-sample i, .crm-bar.b-feedback i { background: var(--saffron); } .crm-bar.b-trial i, .crm-bar.b-won i { background: var(--basil); }
.crm-bar.b-value i { background: var(--enzo-red-strong); } .crm-bar.b-late i { background: var(--red-text); }
.crm-pct { display: inline-block; width: 36px; text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: middle; }
.crm-unassigned td { color: var(--muted); }
.crm-subhead { font-size: 15px; margin: 18px 0 6px; }
.crm-mini { width: 100%; border-collapse: collapse; font-size: 13px; }
.crm-mini td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.crm-mini td:first-child { padding-right: 8px; } .crm-mini td.num { width: 44px; text-align: right; }
.crm-mini .crm-barcol { width: 38%; min-width: 60px; padding-right: 8px; }
.crm-mini .crm-bar { width: 100%; height: 8px; }

/* =====================================================================
   CRM customer record (Salesforce-style record page)
   ===================================================================== */
.sf-modal { width: min(1320px, 100%); background: var(--bg); }
.sf-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sf-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--enzo-red-strong); color: #fff; flex: none; }
.sf-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sf-titles { min-width: 0; } .sf-kind { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.sf-titles h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.sf-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sf-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.sf-actions .btn svg { width: 15px; height: 15px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.sf-highlights { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 10px 20px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sf-highlights div { padding: 0 14px 0 0; } .sf-highlights div + div { padding-left: 14px; box-shadow: inset 1px 0 0 var(--line); }
.sf-highlights dt { font-size: 12px; color: var(--muted); } .sf-highlights dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.sf-body { padding: 14px 18px 18px; background: var(--bg); }
.sf-path { background: var(--surface); border-radius: 14px; padding: 10px 12px 2px; margin-bottom: 14px; box-shadow: var(--shadow-card); }
.sf-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sf-col { display: grid; gap: 14px; min-width: 0; }
.sf-card { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.sf-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--tint); }
.sf-card > header h3 { margin: 0; font-size: 14px; }
.sf-card-body { padding: 8px 14px 12px; }
.sf-card > footer { padding: 8px 14px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; }
.sf-toggle { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.sf-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; color: var(--muted); }
.sf-toggle[aria-expanded="true"] .sf-chev, .sf-titem[aria-expanded="true"] .sf-chev { transform: rotate(90deg); }
.sf-field { display: grid; grid-template-columns: 1fr 26px; gap: 0 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sf-field:last-child { border-bottom: 0; }
.sf-label { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.sf-val { font-size: 14px; min-width: 0; overflow-wrap: anywhere; } .sf-val a { color: var(--ink); }
.sf-pencil { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; opacity: .55; }
.sf-field:hover .sf-pencil, .sf-pencil:focus-visible { opacity: 1; } .sf-pencil:hover { background: var(--tint); color: var(--ink); }
.sf-pencil svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.sf-field.edit { grid-template-columns: 1fr; gap: 4px; }
.sf-field.edit label { font-size: 12px; color: var(--muted); font-weight: 600; }
.sf-field.edit input, .sf-field.edit select { height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px; }
.sf-field.edit input:focus, .sf-field.edit select:focus, .sf-followform input:focus, .sf-newcontact input:focus { outline: none; border-color: var(--enzo-red-strong); box-shadow: 0 0 0 3px var(--enzo-red-soft); }
/* activity */
.sf-composer { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 12px 12px 6px; }
.sf-ctype { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.sf-ctype span, .sf-ticon, .sf-ricon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; background: var(--muted); flex: none; }
.sf-ctype svg, .sf-ticon svg, .sf-ricon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sf-ctype:hover { background: var(--tint); } .sf-ctype.on { border-color: var(--enzo-red-strong); box-shadow: 0 0 0 3px var(--enzo-red-soft); }
.sf-ctype.t-call span, .sf-ticon.t-call { background: #2E6F95; } .sf-ctype.t-visit span, .sf-ticon.t-visit { background: #6B4590; } .sf-ctype.t-email span, .sf-ticon.t-email { background: #4A5260; }
.sf-ctype.t-note span, .sf-ticon.t-note { background: #8A6A2E; } .sf-ctype.t-sample span, .sf-ticon.t-sample, .sf-ricon.t-sample { background: var(--saffron); }
.sf-ticon.t-stage { background: var(--enzo-red-strong); } .sf-ticon.t-created { background: var(--basil); } .sf-ticon.t-follow { background: #2E6F95; }
.sf-mid .crm-log-form { margin: 6px 12px 0; }
.sf-filter { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px 0; font-size: 13px; }
.sf-filter select { height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; margin-left: 6px; }
.sf-group { margin: 14px 14px 4px; padding: 6px 10px; border-radius: 8px; background: var(--tint); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.sf-empty { padding: 4px 14px; }
.sf-next, .sf-followform { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.sf-next.late { border-color: var(--red-text); background: var(--enzo-red-soft); }
.sf-next > div:nth-child(2) { flex: 1; min-width: 140px; font-size: 13.5px; }
.sf-next-actions { display: flex; align-items: center; gap: 10px; }
.sf-followform input { height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; flex: 1; min-width: 130px; }
.sf-followform .crm-log-actions { width: 100%; }
.sf-timeline { list-style: none; margin: 0; padding: 0 8px 10px; }
.sf-titem { display: grid; grid-template-columns: 14px 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.sf-titem:hover { background: var(--tint); }
.sf-tmain { min-width: 0; } .sf-tmain b { margin-right: 6px; } .sf-tsum { color: var(--muted); }
.sf-tdate { white-space: nowrap; font-size: 12.5px; }
.sf-tdetail { margin: 0 6px 6px 60px; padding: 8px 10px; border-left: 2px solid var(--line); font-size: 13.5px; }
.sf-tdetail p { margin: 0 0 4px; }
/* related lists */
.sf-rel { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.sf-rel:last-child { border-bottom: 0; }
.sf-ricon { background: #2E6F95; }
.sf-rel b { font-size: 14px; } .sf-rel a { color: var(--ink); }
.sf-rm { width: 28px; height: 28px; color: var(--muted); }
.sf-mini { margin: 4px 0 0; display: grid; gap: 2px; font-size: 12.5px; }
.sf-mini div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 6px; }
.sf-mini dt { color: var(--muted); } .sf-mini dd { margin: 0; overflow-wrap: anywhere; }
.sf-mini-wide div { grid-template-columns: 140px minmax(0, 1fr); padding: 5px 0; border-bottom: 1px solid var(--line); }
.sf-mini-wide div:last-child { border-bottom: 0; }
.sf-card h5 { margin: 10px 0 4px; font-size: 12.5px; color: var(--muted); }
.sf-newcontact { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 10px; }
.sf-newcontact input { height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; min-width: 0; }
.sf-newcontact .crm-log-actions { grid-column: 1 / -1; }
@media (max-width: 1100px) { .sf-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .sf-cols > .sf-col:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; } .sf-highlights div:nth-child(4) { box-shadow: none; padding-left: 0; } }
@media (max-width: 760px) {
  .sf-cols, .sf-cols > .sf-col:last-child { grid-template-columns: 1fr; }
  .sf-highlights { grid-template-columns: 1fr 1fr; } .sf-highlights div, .sf-highlights div + div { box-shadow: none; padding-left: 0; }
  .sf-actions { width: 100%; margin-left: 0; } .sf-composer { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 10px 8px 4px; } .sf-ctype { font-size: 10.5px; padding: 6px 2px; }
  .sf-titem { grid-template-columns: 14px 30px minmax(0, 1fr); } .sf-tdate { grid-column: 3; }
  .sf-head { padding: 12px 14px; } .sf-body { padding: 10px; } .sf-newcontact { grid-template-columns: 1fr; }
}

/* CRM map: customer dots, zoom and pan */
.crm-zoommap { position: relative; overflow: hidden; border-radius: 14px; background: var(--tint); }
.crm-zoommap svg { cursor: grab; touch-action: pan-y; user-select: none; max-height: 560px; }
.crm-zoommap svg.dragging { cursor: grabbing; }
.crm-zoommap svg.zoomed .sr-tag { display: none; }
.crm-dot { stroke: #fff; stroke-width: 1.2; cursor: pointer; transition: opacity .15s ease; }
.crm-dot:hover { stroke: var(--ink); }
.crm-dot.d-won { fill: #2E7D4F; } .crm-dot.d-sample { fill: #D99A00; } .crm-dot.d-trial { fill: #3FA371; }
.crm-dot.d-meeting { fill: #6B4590; } .crm-dot.d-contacted { fill: #2E6F95; } .crm-dot.d-lead { fill: #6B7380; }
.crm-zoom { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; }
.crm-zoom button { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-card); }
.crm-zoom button[data-z="reset"] { font-size: 12px; }
.crm-zoom button:hover { background: var(--tint); } .crm-zoom button:focus-visible { outline: 2px solid var(--enzo-red-strong); }
.crm-maphint { margin: 6px 10px 8px; font-size: 12px; color: var(--muted); }

.crm-cities { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 0; }
.crm-zoommap svg path, .crm-zoommap svg circle.sr-state, .crm-zoommap svg line { vector-effect: non-scaling-stroke; }
.crm-zoommap svg.zoomed .sr-state { fill: var(--surface); stroke: #C9CED6; stroke-width: 1.2px; }
.crm-zoommap svg.zoomed .sr-state.sr-sel { fill: #FBF3F2; stroke: var(--enzo-red-strong); stroke-width: 2px; }
.crm-zoommap svg.zoomed .sr-act text, .crm-zoommap svg.zoomed .sr-lead { display: none; }
.crm-zoommap svg .crm-dot { vector-effect: none; }

/* Overview: "How the business is tracking" as a table */
.ov-table { margin-top: 12px; }
.ov-table td { vertical-align: middle; }
.ov-area { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.ov-area .hp-arrow { flex: none; }
.ov-table tbody tr { cursor: pointer; }
.ov-table tbody tr:hover td { background: var(--tint); }
.ov-table tbody tr:focus-visible { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; }
.ov-table tr.h-red td:first-child { box-shadow: inset 3px 0 0 var(--red-text); } .ov-table tr.h-amber td:first-child { box-shadow: inset 3px 0 0 var(--saffron); }
.ov-table tr.h-green td:first-child { box-shadow: inset 3px 0 0 var(--basil); } .ov-table tr.h-grey td:first-child { box-shadow: inset 3px 0 0 var(--line); }
@media (max-width: 640px) { .ov-area { min-width: 170px; } }

.crm-demo { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--saffron-soft); color: var(--ink); border: 1px solid var(--saffron); font-size: 13.5px; line-height: 1.45; }
.crm-demo b { color: var(--ink); }

/* =====================================================================
   Critical Control Points (form register and digital HACCP forms)
   ===================================================================== */
.nav-subhead { list-style: none; margin: 12px 0 2px; padding: 0 12px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .72); letter-spacing: .02em; }
.flyout .nav-subhead { padding: 0 10px; color: var(--muted); margin: 8px 0 2px; }
.qa-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qa-limits { padding: 16px 20px; margin-bottom: 16px; }
.qa-limits h2 { margin: 0 0 4px; font-size: 15px; } .qa-limits p { margin: 4px 0 0; font-size: 14px; }
.qa-register .qa-head th { background: var(--tint); font-size: 13px; font-weight: 700; color: var(--ink); padding-top: 10px; padding-bottom: 10px; text-transform: none; }
.qa-register tbody tr[data-href] { cursor: pointer; } .qa-register tbody tr[data-href]:hover td { background: var(--tint); }
.qa-register tbody tr:focus-visible { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; }
.qa-register .qa-lim { font-size: 13px; max-width: 320px; } .qa-note { font-size: 12px; margin-top: 4px; }
.qa-register .qa-missing td { color: var(--muted); }
.qa-ccp { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--enzo-red-soft); color: var(--red-text); font-size: 10.5px; font-weight: 700; }
.qa-why { font-size: 12.5px; margin-top: 3px; }
.qa-modal { width: min(1320px, 100%); }
.qa-sheet { background: var(--surface); border: 1px solid var(--paper-line, var(--line)); border-radius: 6px; padding: 14px 16px; }
.qa-sheethead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.qa-sheethead b { color: var(--red-text); } .qa-sheethead h3 { margin: 0 auto; font-size: 18px; text-align: center; }
.qa-date { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.qa-date input { height: 36px; border: 0; border-bottom: 1.5px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 15px; }
.qa-instr { margin: 0 0 10px; padding: 8px 12px; background: var(--tint); border-radius: 8px; font-size: 13px; }
.qa-headfields { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.qa-gridwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.qa-grid { border-collapse: collapse; width: 100%; font-size: 13px; }
.qa-grid th, .qa-grid td { border: 1px solid var(--line); padding: 3px; vertical-align: middle; }
.qa-grid thead th { background: var(--tint); font-size: 12px; font-weight: 600; text-align: left; padding: 6px; }
.qa-limhint { font-weight: 500; color: var(--red-text); font-size: 11px; }
.qa-grid .qa-rowlabel { text-align: left; white-space: nowrap; font-weight: 600; background: var(--tint); padding: 4px 8px; min-width: 130px; }
.qa-grid input:not([type=checkbox]), .qa-grid select { width: 100%; min-width: 64px; height: 34px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; padding: 0 6px; }
.qa-grid input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--enzo-red-strong); display: block; margin: 0 auto; }
.qa-grid input:focus, .qa-grid select:focus, .qa-f input:focus, .qa-f textarea:focus { outline: none; border-color: var(--enzo-red-strong); background: var(--surface); box-shadow: 0 0 0 3px var(--enzo-red-soft); }
.qa-grid td.qa-bad, .qa-f.qa-bad input { background: var(--enzo-red-soft); }
.qa-grid td.qa-bad input, .qa-f.qa-bad input { color: var(--red-text); font-weight: 700; }
.qa-grid.wide input { min-width: 150px; }
.qa-add { margin-top: 8px; }
.qa-sec { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px 12px; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.qa-sec legend { font-weight: 700; font-size: 13.5px; padding: 0 6px; }
.qa-sec.ticks { flex-direction: column; gap: 6px; }
.qa-tick { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 30px; }
.qa-tick input { width: 22px; height: 22px; accent-color: var(--enzo-red-strong); flex: none; }
.qa-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 150px; flex: 1 1 150px; }
.qa-f.wide { flex-basis: 100%; }
.qa-f em { font-style: normal; color: var(--red-text); font-weight: 500; }
.qa-f input, .qa-f textarea { height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 400; }
.qa-f textarea { height: auto; padding: 8px 10px; resize: vertical; }
.qa-sec .qa-tick + .qa-f { max-width: 240px; }
.qa-signs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.qa-signs .qa-f:first-child { max-width: 260px; }
.qa-f.qa-need textarea { border-color: var(--red-text); box-shadow: 0 0 0 3px var(--enzo-red-soft); }
.qa-f.qa-need span { color: var(--red-text); }
.qa-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.qa-status { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--tint); font-size: 13.5px; }
@media (max-width: 1100px) { .qa-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qa-figures { grid-template-columns: 1fr; } .qa-sheethead h3 { margin: 0; text-align: left; } .qa-f { min-width: 0; flex-basis: 100%; } }

/* =====================================================================
   Receival of goods (Form 12)
   ===================================================================== */
.rc-modal { width: min(1360px, 100%); }
.rc-rule { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--enzo-red-soft); color: var(--red-text); font-weight: 700; font-size: 13.5px; text-align: center; }
.rc-head { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 8px; }
.rc-codes { margin: 6px 0 8px; font-size: 12.5px; }
.rc-grid td { white-space: nowrap; }
.rc-grid td:nth-child(1) input { min-width: 170px; } .rc-grid td:nth-child(3) input, .rc-grid td:nth-child(4) input { min-width: 70px; }
.rc-code { display: flex; gap: 4px; } .rc-code select { min-width: 130px; } .rc-code input { min-width: 110px; }
.rc-grid td:nth-child(8) input { min-width: 74px; } .rc-grid td:nth-child(11) input { min-width: 220px; }
.rc-var { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 64px; padding-right: 10px !important; }
.rc-grid tr.rc-rejected td { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--enzo-red-soft) 6px 8px); }
.rc-grid tr.rc-rejected select[data-k="status"] { color: var(--red-text); font-weight: 700; }
.rc-notes { margin-top: 12px; }
.rc-sign { align-items: flex-start; }
.rc-sign > .qa-f { max-width: 300px; }
.rc-sigbox { flex: 1 1 380px; display: grid; gap: 8px; }
.rc-pad { width: 100%; max-width: 560px; height: 150px; border: 1.5px dashed var(--line); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }
.rc-pad:focus-visible { outline: 2px solid var(--enzo-red-strong); }
.rc-sigtools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 560px; }
.rc-sigtools .meta { flex: 1; }
.rc-sigshow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rc-sigshow img { height: 80px; max-width: 320px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.rc-upload { cursor: pointer; justify-self: start; }
.rc-sigthumb { height: 30px; max-width: 110px; object-fit: contain; background: #fff; border-radius: 4px; display: block; }
.rc-grid select[data-k=unit] { min-width: 92px; } .rc-grid select[data-k=storage] { min-width: 104px; } .rc-grid select[data-k=condition] { min-width: 108px; } .rc-grid select[data-k=status] { min-width: 112px; }

/* Stocktake dashboard: "Is the coolroom holding up?" as collapsible categories */
.cr-list { display: grid; gap: 8px; margin-top: 6px; }
.cr-group { border-radius: 14px; background: var(--tint); overflow: hidden; }
.cr-head { display: grid; grid-template-columns: 18px minmax(190px, 1.25fr) 96px minmax(120px, 1.6fr) 100px 150px 66px; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cr-head:hover { background: rgba(0, 0, 0, .03); } .cr-head:focus-visible { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; border-radius: 14px; }
.cr-chev { font-size: 20px; line-height: 1; color: var(--muted); transition: transform .15s ease; display: inline-block; }
.cr-group.open .cr-chev { transform: rotate(90deg); }
.cr-name { min-width: 0; } .cr-name b { font-size: 15px; }
.cr-sub { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cr-bars { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-bars i { display: block; border-radius: 3px; min-width: 0; }
.cr-now { height: 14px; } .cr-before { height: 5px; background: var(--track); }
.cr-head .cr-now { height: 16px; }
.cr-num { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.25; }
.cr-num b { font-size: 15px; font-weight: 600; } .cr-num .meta { display: block; font-size: 11.5px; }
.cr-chg { text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.cr-chg.pos { color: var(--basil); } .cr-chg.neg { color: var(--red-text); }
.cr-items { background: var(--surface); padding: 6px 16px 10px; border-top: 1px solid var(--line); }
.cr-item { display: grid; grid-template-columns: 18px minmax(190px, 1.25fr) 96px minmax(120px, 1.6fr) 100px 150px 66px; align-items: center; gap: 14px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.cr-item::before { content: ''; }
.cr-item:last-child { border-bottom: 0; }
.cr-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-item .cr-num b { font-size: 13.5px; }
@media (max-width: 760px) {
  .cr-head { grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "chev name name" ". bars bars" ". num chg" ". risk spark"; gap: 6px 10px; padding: 12px; }
  .cr-head .cr-spark { grid-area: spark; justify-self: end; } .cr-head .cr-riskcell { grid-area: risk; }
  .cr-chev { grid-area: chev; } .cr-name { grid-area: name; } .cr-head .cr-bars { grid-area: bars; }
  .cr-head .cr-num { grid-area: num; text-align: left; } .cr-head .cr-num .meta { display: inline; margin-left: 6px; } .cr-head .cr-chg { grid-area: chg; }
  .cr-sub { white-space: normal; }
  .cr-items { padding: 4px 12px 8px; }
  .cr-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pname pname" "bars num" "risk chg"; gap: 4px 10px; padding: 7px 0; }
  .cr-item .cr-spark { display: none; } .cr-item .cr-riskcell { grid-area: risk; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cr-item::before { display: none; }
  .cr-pname { grid-area: pname; white-space: normal; } .cr-item .cr-bars { grid-area: bars; } .cr-item .cr-num { grid-area: num; } .cr-item .cr-chg { grid-area: chg; min-width: 44px; }
}

.cr-colhead { display: grid; grid-template-columns: 18px minmax(190px, 1.25fr) 96px minmax(120px, 1.6fr) 100px 150px 66px; gap: 14px; padding: 0 16px 2px; font-size: 12px; color: var(--muted); font-weight: 600; }
.cr-colhead .r { text-align: right; }
.cr-spark { width: 92px; height: 26px; display: block; overflow: visible; }
.cr-riskcell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cr-risk { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.cr-risk.r-past { background: var(--enzo-red-soft); color: var(--red-text); } .cr-risk.r-soon { background: var(--saffron-soft); color: var(--saffron); }
.cr-riskmeta { font-size: 12px; white-space: nowrap; }
@media (max-width: 1180px) { .cr-colhead { display: none; } }
@media (min-width: 761px) and (max-width: 1180px) { .cr-head, .cr-item { grid-template-columns: 18px minmax(160px, 1.2fr) minmax(100px, 1.4fr) 92px 140px 60px; } .cr-head .cr-spark, .cr-item .cr-spark { display: none; } }


/* =====================================================================
   Business rules register and production forecast scenario model (Admin)
   ===================================================================== */
table.records.br-table { table-layout: fixed; min-width: 940px; }
.br-table col.c-rule { width: 16%; } .br-table col.c-def { width: 20%; } .br-table col.c-calc { width: 30%; } .br-table col.c-data { width: 10%; } .br-table col.c-set { width: 14%; } .br-table col.c-status { width: 10%; }
table.records.br-table td, table.records.br-table th[scope="row"] { vertical-align: top; font-size: 13.5px; line-height: 1.45; }
.br-table th[scope="row"] { font-weight: 400; text-align: left; color: var(--ink); font-size: 14px; white-space: normal; text-transform: none; }
.br-table tbody tr { cursor: pointer; } .br-table tbody tr:hover td, .br-table tbody tr:hover th { background: var(--tint); }
.br-table tbody tr:focus-visible { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; }
.br-id { display: block; font-size: 11.5px; font-weight: 700; color: var(--red-text); letter-spacing: .02em; }
.br-calc { font-size: 13px; } .br-set { font-size: 12.5px; color: var(--muted); } .br-set b { color: var(--ink); }
.br-chip { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px; border-radius: 999px; background: var(--tint); font-size: 12px; font-weight: 600; }
.br-modal { width: min(820px, 100%); } .br-form { display: flex; flex-wrap: wrap; gap: 12px 14px; } .br-form textarea { min-height: 60px; }
.br-scenario { padding: 18px 22px; margin: 16px 0; scroll-margin-top: 80px; }
.br-sc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; margin-top: 12px; align-items: start; }
.br-inputs { display: grid; gap: 12px; }
.br-in { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.br-in > span:first-child { display: flex; justify-content: space-between; gap: 8px; } .br-in em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 12px; }
.br-in select, .br-in input { height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 400; width: 100%; }
.br-in input:focus, .br-in select:focus { outline: none; border-color: var(--enzo-red-strong); box-shadow: 0 0 0 3px var(--enzo-red-soft); }
.br-inrow { display: flex; align-items: center; gap: 8px; } .br-inrow input { flex: 1; text-align: right; } .br-inrow i { font-style: normal; color: var(--muted); font-size: 13px; min-width: 40px; }
.br-in small { font-weight: 400; color: var(--muted); font-size: 12px; }
.br-in.over input { border-color: var(--saffron); background: var(--saffron-soft); }
.br-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.br-answer { border-radius: 16px; padding: 16px 18px; background: var(--tint); border-left: 5px solid var(--basil); }
.br-answer.neg { border-left-color: var(--red-text); } .br-answer.warn { border-left-color: var(--saffron); }
.br-big { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 2px; } .br-big b { font-weight: 800; }
.br-range, .br-cover { font-size: 13.5px; margin-top: 2px; }
.br-steps { list-style: none; counter-reset: s; margin: 14px 0 0; padding: 0; font-size: 14px; }
.br-steps li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.br-steps li b { font-variant-numeric: tabular-nums; } .br-steps li.br-sub { background: var(--tint); font-weight: 600; } .br-steps li.br-total { font-weight: 700; } .br-steps li:last-child { border-bottom: 2px solid var(--ink); }
.br-foot { margin-top: 8px; font-size: 12px; }
.br-list tbody tr { cursor: pointer; } .br-list tbody tr:hover td, .br-list tbody tr:hover th { background: var(--tint); }
.br-list th[scope="row"] { font-weight: 400; text-align: left; color: var(--ink); font-size: 14px; text-transform: none; white-space: normal; }
.br-list tfoot td { border-top: 2px solid var(--line); padding-top: 12px; }
.di-sig { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--tint); }
.di-sig.s-pos { background: var(--basil-soft); color: var(--basil); } .di-sig.s-neg { background: var(--enzo-red-soft); color: var(--red-text); } .di-sig.s-warn { background: var(--saffron-soft); color: var(--saffron); } .di-sig.s-meta { color: var(--muted); }
@media (max-width: 1000px) { .br-sc-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .br-pair { grid-template-columns: 1fr; } .br-big { font-size: 22px; } }

/* Stocktake dashboard: forecast columns in "How has each item's stock looked?" (BR-10) */
.hm-fcbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 13px; }
.hm-fcbar label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.hm-fcbar input[type=date] { height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface); color: var(--ink); font: inherit; }
.hm .hm-fcc { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .45) 0 3px, transparent 3px 7px); }
.hm-key .hm-fcc { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 5px); }
.hm th.hm-fc { color: var(--muted); font-style: italic; }
.hm th.hm-fcstart, .hm td.hm-fcstart { box-shadow: inset 2px 0 0 var(--ink); }
.hm th.hm-fc em { font-style: normal; font-weight: 700; color: var(--ink); }
.hm td.hm-exp { position: relative; }
.hm td.hm-exp::after { content: '✕'; position: absolute; top: 1px; right: 3px; font-size: 9px; font-weight: 800; color: var(--red-text); line-height: 1; }
.hm-exp-key { font-style: normal; font-size: 11px; font-weight: 800; color: var(--red-text); display: inline-grid; place-items: center; background: var(--tint); }

/* Stocktake dashboard: collapsible categories in "How has each item's stock looked?" */
.hm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; } .hm-toolbar .hm-fcbar { margin: 0; } .hm-toolbar #ragOpenAll { margin-left: auto; }
.hm tr.hm-catrow th.hm-name { padding: 0; }
.hm-cattoggle { display: flex; align-items: center; gap: 6px; width: 100%; height: 100%; min-height: 30px; padding: 4px 8px 4px 2px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; border-radius: 6px; }
.hm-cattoggle i { font-style: normal; color: var(--muted); width: 14px; } .hm-cattoggle .meta { font-weight: 500; }
.hm-cattoggle:hover { background: var(--tint); } .hm-cattoggle:focus-visible { outline: 2px solid var(--enzo-red-strong); outline-offset: -2px; }
.hm tr.hm-catrow td { font-weight: 800; }
.hm td.hm-catc { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .14); }
.hm tr.hm-catrow + tr.hm-catrow th, .hm tr.hm-child + tr.hm-catrow th { padding-top: 6px; }
.hm tr.hm-child th.hm-name { padding-left: 20px; font-weight: 400; }
.hm td.hm-catc.hm-fcstart { box-shadow: inset 2px 0 0 var(--ink), inset 0 0 0 1.5px rgba(0, 0, 0, .14); }
/* arrows for the collapsible heatmaps, matching the coolroom table */
.hm-cattoggle .hm-chev { display: inline-block; font-size: 18px; line-height: 1; color: var(--muted); transition: transform .15s ease; width: 14px; text-align: center; }
.hm-cattoggle[aria-expanded="true"] .hm-chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .hm-cattoggle .hm-chev { transition: none; } }
#ubCard { margin-top: 16px; }
/* Units in the coolroom: the products with the most and fewest units, and their share */
.kpi-rows .v small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.kpi-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.kpi-prod { border-radius: 10px; padding: 8px 10px; background: var(--tint); min-width: 0; display: grid; gap: 1px; }
.kpi-prodlabel { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi-prod b { font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
.kpi-prod span:last-child { font-size: 12px; color: var(--muted); } .kpi-prod em { font-style: normal; font-weight: 700; color: var(--ink); margin-left: 4px; }
.kpi-prod.hi { box-shadow: inset 3px 0 0 var(--basil); } .kpi-prod.lo { box-shadow: inset 3px 0 0 var(--saffron); }
.kpi-note { margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.35; }

/* Stocktake dashboard: square tiles (this page only) */
#dashBody .card, #dashBody .hm-card, #dashBody .home-figures, #dashBody .cr-group, #dashBody .cr-head { border-radius: 0 !important; }
#dashBody .kpi-prod { border-radius: 0 !important; }

/* Stock heatmap pop up: dark card beside the square */
.hm-pop { position: fixed; z-index: 60; pointer-events: none; max-width: 320px; padding: 10px 14px; background: rgba(11,20,51,.95); color: #FFFFFF; font-size: 13px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.hm-pop b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.hm-pop .hm-pop-value { font-size: 15px; font-weight: 700; }
.hm-pop .up { color: #7FE0A6; font-weight: 700; } .hm-pop .down { color: #FF9C94; font-weight: 700; }

/* use-by heatmap: weekly columns after the first two weeks */
.hm th.hm-wkcol { font-size: 10px; white-space: nowrap; }
.hm td.hm-wkstart, .hm th.hm-wkstart { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ink) 35%, transparent); }
#ubTable .hm-c { width: var(--ub-w, 36px); min-width: var(--ub-w, 36px); font-size: 10px; }
#ubTable th.hm-col { font-size: 10px; }

/* Units in the coolroom: mini column chart with a day axis */
.mcol { margin-top: 12px; }
.mcol-plot { position: relative; height: 46px; margin-top: 16px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; border-bottom: 1px solid var(--line); }
.mcol-bar { position: relative; flex: 1 1 0; min-width: 3px; max-width: 34px; background: color-mix(in srgb, var(--ink) 22%, var(--surface)); border-radius: 2px 2px 0 0; }
.mcol-bar.now { background: var(--ink); }
.mcol-bar:hover { background: color-mix(in srgb, var(--ink) 55%, var(--surface)); }
.mcol-target { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--muted); opacity: .7; pointer-events: auto; }
.mcol-axis { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.mcol-axis span { flex: 1 1 0; min-width: 3px; max-width: 34px; font-size: 10px; color: var(--muted); text-align: center; white-space: nowrap; overflow: visible; }
.mcol-axis span:last-child { color: var(--ink); font-weight: 700; }
.mcol-bar b { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mcol-bar.now b { color: var(--ink); font-weight: 800; }
.mcol { margin-top: 4px; }

/* Units in the coolroom: highest and lowest product as a small table */
.kpi-ptable { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kpi-ptable thead th { font-size: 11px; font-weight: 600; color: var(--muted); text-align: right; padding: 0 0 4px 8px; }
.kpi-ptable tbody th { text-align: left; font-weight: 700; color: var(--ink); padding: 6px 4px 6px 10px; line-height: 1.25; overflow-wrap: anywhere; }
.kpi-ptable tbody th .kpi-prodlabel { display: block; margin-bottom: 1px; }
.kpi-ptable td { text-align: right; padding: 6px 0 6px 8px; white-space: nowrap; vertical-align: bottom; }
.kpi-ptable tbody tr { background: var(--tint); border-top: 3px solid var(--surface); }
.kpi-ptable tr.hi th { box-shadow: inset 3px 0 0 var(--basil); } .kpi-ptable tr.lo th { box-shadow: inset 3px 0 0 var(--saffron); }
.kpi-ptable td:last-child { padding-right: 8px; font-weight: 700; }
/* Units in the coolroom: highest and lowest as plain rows, like "vs target": the name, then units, share and change */
.kpi-pprows { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; margin-top: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.kpi-pprows .k { color: var(--muted); font-weight: 400; margin-right: 4px; }
.kpi-pprows .pp-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; padding-top: 6px; line-height: 1.3; }
.kpi-pprows .pp-figs { display: flex; gap: 12px; color: var(--ink); white-space: nowrap; }
.kpi-pprows .pp-chg { margin-left: auto; font-weight: 700; }
.kpi-pprows .pp-figs + .pp-name { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }

/* use-by heatmap: date range controls and daily columns */
.ub-toolbar { flex-wrap: wrap; gap: 10px 14px; }
.ub-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; font-weight: 600; }
.ub-range label { display: inline-flex; align-items: center; gap: 6px; }
.ub-range input[type=date] { height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; font-size: 13px; }
#ubTable th.hm-col { font-size: 10px; line-height: 1.15; white-space: nowrap; }
#ubTable th.hm-col span { display: block; color: var(--muted); font-weight: 600; }
#ubTable th.hm-col em { display: block; font-style: normal; font-weight: 700; color: var(--ink); }
#ubTable th.ub-wkend, #ubTable th.ub-wkend span { color: color-mix(in srgb, var(--muted) 70%, transparent); }
#ubTable td.hm-empty.ub-wkend { opacity: .6; }
#ubTable .ub-sum { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ink) 30%, transparent); }
#ubTable.ub-short .hm-c { font-size: 9px; letter-spacing: -.02em; }
#ubTable thead th.hm-col { vertical-align: bottom; }

/* =====================================================================
   Orders page: square tiles, rows lined up, KPI trends, lighter reds
   ===================================================================== */
.sr-figures, .sr-top > .card, #srPerf, .sr-figures > .figure-link, section.empty { border-radius: 0 !important; }
/* tiles in the same row share one height */
.sr-top { align-items: stretch; }
.sr-top > .card { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.sr-top > .card .sr-map { flex: 1; }
.sr-figures { align-items: stretch; }
.sr-figures > .sr-kpi { display: flex; flex-direction: column; }
.sr-figures > .sr-kpi .mcol { margin-top: auto; padding-top: 10px; }
/* the change next to each figure */
.sr-delta { margin-left: 8px; font-size: 14px; font-weight: 700; letter-spacing: 0; vertical-align: 3px; font-variant-numeric: tabular-nums; }
.sr-kpinote { margin: -6px 0 16px; font-size: 12.5px; color: var(--muted); }
/* product table: light shades of red with dark red numbers (light mode; dark mode keeps its own shades) */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .pf-h0, :root:not([data-theme="dark"]) .pf-key .pf-h0, :root:not([data-theme="dark"]) table.pf tr.pf-cat td.pf-c.pf-h0, :root:not([data-theme="dark"]) table.pf td.pf-c.pf-h0 { background: #FFF5F4; color: #7A1A12; }
:root:not([data-theme="dark"]) .pf-h1, :root:not([data-theme="dark"]) .pf-key .pf-h1, :root:not([data-theme="dark"]) table.pf tr.pf-cat td.pf-c.pf-h1, :root:not([data-theme="dark"]) table.pf td.pf-c.pf-h1 { background: #FDE6E3; color: #7A1A12; }
:root:not([data-theme="dark"]) .pf-h2, :root:not([data-theme="dark"]) .pf-key .pf-h2, :root:not([data-theme="dark"]) table.pf tr.pf-cat td.pf-c.pf-h2, :root:not([data-theme="dark"]) table.pf td.pf-c.pf-h2 { background: #FBD2CD; color: #7A1A12; }
:root:not([data-theme="dark"]) .pf-h3, :root:not([data-theme="dark"]) .pf-key .pf-h3, :root:not([data-theme="dark"]) table.pf tr.pf-cat td.pf-c.pf-h3, :root:not([data-theme="dark"]) table.pf td.pf-c.pf-h3 { background: #F7B9B2; color: #6A140D; }
:root:not([data-theme="dark"]) .pf-h4, :root:not([data-theme="dark"]) .pf-key .pf-h4, :root:not([data-theme="dark"]) table.pf tr.pf-cat td.pf-c.pf-h4, :root:not([data-theme="dark"]) table.pf td.pf-c.pf-h4 { background: #F29C93; color: #5C0F0A; }
:root:not([data-theme="dark"]) td.pf-fc { background: #FFF5F4 !important; }
}
:root[data-theme="light"] .pf-h0, :root[data-theme="light"] .pf-key .pf-h0, :root[data-theme="light"] table.pf tr.pf-cat td.pf-c.pf-h0, :root[data-theme="light"] table.pf td.pf-c.pf-h0 { background: #FFF5F4; color: #7A1A12; }
:root[data-theme="light"] .pf-h1, :root[data-theme="light"] .pf-key .pf-h1, :root[data-theme="light"] table.pf tr.pf-cat td.pf-c.pf-h1, :root[data-theme="light"] table.pf td.pf-c.pf-h1 { background: #FDE6E3; color: #7A1A12; }
:root[data-theme="light"] .pf-h2, :root[data-theme="light"] .pf-key .pf-h2, :root[data-theme="light"] table.pf tr.pf-cat td.pf-c.pf-h2, :root[data-theme="light"] table.pf td.pf-c.pf-h2 { background: #FBD2CD; color: #7A1A12; }
:root[data-theme="light"] .pf-h3, :root[data-theme="light"] .pf-key .pf-h3, :root[data-theme="light"] table.pf tr.pf-cat td.pf-c.pf-h3, :root[data-theme="light"] table.pf td.pf-c.pf-h3 { background: #F7B9B2; color: #6A140D; }
:root[data-theme="light"] .pf-h4, :root[data-theme="light"] .pf-key .pf-h4, :root[data-theme="light"] table.pf tr.pf-cat td.pf-c.pf-h4, :root[data-theme="light"] table.pf td.pf-c.pf-h4 { background: #F29C93; color: #5C0F0A; }
:root[data-theme="light"] td.pf-fc { background: #FFF5F4 !important; }
td.pf-fc, table.pf td.pf-c { border-radius: 0; }
table.pf tr.pf-cat td, table.pf tr.pf-cat th, table.pf tr td:first-child, table.pf tr td:last-child { border-radius: 0 !important; }
/* mini column charts: green when up on the column before, red when down; the latest in solid colour */
.mcol-bar.up { background: color-mix(in srgb, var(--basil) 28%, var(--surface)); }
.mcol-bar.down { background: color-mix(in srgb, var(--red-text) 22%, var(--surface)); }
.mcol-bar.now.up { background: var(--basil); } .mcol-bar.now.down { background: var(--red-text); }
.mcol-bar.up:hover { background: color-mix(in srgb, var(--basil) 55%, var(--surface)); } .mcol-bar.down:hover { background: color-mix(in srgb, var(--red-text) 45%, var(--surface)); }
.mcol-bar.now.up b { color: var(--basil); } .mcol-bar.now.down b { color: var(--red-text); }
.mcol-legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.mcol-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; vertical-align: -1px; }
/* Orders KPI tiles: the change badge (arrow and percentage in a pill, then what it's compared with) */
.sr-change { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 6px 0 2px; font-size: 13px; color: var(--muted); }
.sr-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-pill.up { background: color-mix(in srgb, var(--basil) 16%, var(--surface)); color: var(--basil); }
.sr-pill.down { background: color-mix(in srgb, var(--red-text) 12%, var(--surface)); color: var(--red-text); }
.sr-pill.flat { background: var(--tint); color: var(--muted); }
.sr-change > span:last-child { flex-basis: 100%; line-height: 1.35; }

/* =====================================================================
   Overview: the control room (six square tiles between the headline strip and the summary)
   ===================================================================== */
.cr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 0 24px; align-items: stretch; }
@media (max-width: 1100px) { .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 640px) { .cr-grid { grid-template-columns: 1fr; gap: 12px; } }
.cr-tile { background: var(--surface); padding: 24px; box-shadow: 0 1px 2px rgba(11,20,51,.04), 0 4px 14px rgba(11,20,51,.05); display: flex; flex-direction: column; min-width: 0; }
.cr-title { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.cr-title a { color: var(--ink); text-decoration: none; display: inline-flex; gap: 6px; align-items: baseline; }
.cr-title a span { color: var(--muted); font-weight: 400; transition: transform .15s; }
.cr-title a:hover span { transform: translateX(3px); color: var(--ink); }
.cr-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cr-big small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.cr-big .sr-pill { align-self: center; }
.cr-big.neg { color: var(--red-text); }
.cr-sub { margin: 6px 0 12px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.cr-foot { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.cr-empty { margin: auto 0; font-size: 13px; color: var(--muted); }
.cr-tile .mcol { margin-top: auto; }
/* orders: one tick per weekday */
.cr-ticks { display: flex; align-items: flex-end; gap: 2px; height: 64px; margin-top: auto; }
.cr-ticks i { flex: 1 1 0; min-width: 2px; border-radius: 1px; background: var(--basil); }
.cr-ticks i.low { background: var(--red-text); }
.cr-ticks i:hover { opacity: .7; }
.cr-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 4px; }
/* top products */
.cr-rank { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; gap: 2px 10px; align-items: center; padding: 6px 0; font-size: 13px; border-top: 1px solid var(--line); }
.cr-rank:first-of-type { border-top: 0; }
.cr-rank-name { grid-column: 1 / -1; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cr-rank-bar { height: 8px; background: var(--tint); border-radius: 999px; overflow: hidden; } .cr-rank-bar i { display: block; height: 100%; background: var(--ink); opacity: .75; border-radius: 999px; }
.cr-rank-n { font-variant-numeric: tabular-nums; text-align: right; } .cr-rank-d { font-size: 12px; font-weight: 700; text-align: right; }
/* use-by: next 7 days */
.cr-ubs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 96px; margin-top: auto; }
.cr-ub { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; min-width: 0; }
.cr-ub b { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.cr-ub i { display: block; background: color-mix(in srgb, var(--red-text) 30%, var(--surface)); border-radius: 2px 2px 0 0; }
.cr-ub i.soon { background: var(--red-text); }
.cr-ub span { font-size: 10px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 3px; white-space: nowrap; }
/* today's checks */
.cr-progress { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 8px; }
.cr-progress .split { flex: 1; margin: 0; } .cr-progress .bar { height: 8px; border-radius: 999px; background: var(--tint); display: flex; overflow: hidden; } .cr-progress .bar span { border-radius: 999px; }
.cr-checks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); }
.cr-checks li + li { border-top: 1px solid var(--line); }
.cr-checks a { display: flex; gap: 12px; align-items: center; padding: 9px 12px; color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.cr-checks a:hover { background: var(--tint); }
.cr-checks i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink) 30%, var(--surface)); display: grid; place-items: center; font-style: normal; font-size: 12px; color: var(--basil); }
.cr-checks li.ok i { border-color: var(--basil); background: color-mix(in srgb, var(--basil) 12%, var(--surface)); }
.cr-checks li.todo i { border-color: var(--red-text); }
.cr-checks small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.cr-checks li.ok span { color: var(--muted); }
.cr-tile p.cr-sub, .cr-tile p.cr-foot { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.cr-cta { align-self: flex-start; margin-top: auto; }