/* ═══════════════════════════════════════════════════════════════════════════
   HolyShape admin — The Tech Pack
   Every page is a sheet from the house tech pack: warm white paper on a blush
   ground, plum ink, hairline rules instead of shadows, crisp corners, a
   rose-gold tape measure under the menu and one garnet action per sheet. Each
   area of work carries its colourway (Закупівлі mocha, Замовлення rose,
   Маркетинг berry, Гроші sage, Сьогодні rose gold) so you know where you are
   by colour alone.

   The pages are written in Tailwind utilities; this file restyles the
   patterns they share, so every page moves at once and no page's markup or
   behaviour changes. Loaded after app.css. Dark theme at the end.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --ink:          #221A1E;   /* plum ink: text, the menu bar */
  --ink-soft:     #463A3F;
  --ink-muted:    #6E5F64;   /* 5.5:1 on the ground */
  --ink-faint:    #A8999E;
  --paper:        #FFFFFF;   /* a sheet */
  --ground:       #F6F2F1;   /* the table the sheets lie on */
  --paper-tint:   #FAF7F7;   /* ruled header cells, tiles */
  --rule:         rgba(34, 26, 30, .10);
  --rule-strong:  rgba(34, 26, 30, .18);
  --rule-input:   #D4C9CC;
  --garnet:       #8A3A4E;   /* the one action */
  --garnet-deep:  #722F41;
  --garnet-ring:  rgba(138, 58, 78, .20);
  --rose-gold:    #C9A192;   /* metal: tape, stamps, marks on ink */
  --rose-deep:    #B08878;
  --bar:          #221A1E;
  --bar-text:     rgba(244, 236, 238, .72);
  --bar-text-hi:  #F4ECEE;
  --bar-hover:    rgba(244, 236, 238, .07);
  --sheet-shadow: none;
  --float-shadow: 0 2px 6px -2px rgba(34, 26, 30, .12), 0 24px 48px -20px rgba(34, 26, 30, .30);
  --ease-out:     cubic-bezier(.16, 1, .3, 1);
  --ease-in:      cubic-bezier(.4, 0, 1, 1);

  /* Colourways. The page's own is --cw (set from body[data-area]). */
  --cw-today:     #B08878;   /* rose gold */
  --cw-buying:    #7A5A45;   /* mocha */
  --cw-orders:    #C27A88;   /* dusty rose, lighter than garnet */
  --cw-marketing: #6D3B72;   /* berry */
  --cw-money:     #4F7A62;   /* sage */
  --cw-settings:  #6E5F64;
  --cw:           var(--garnet);
}
[data-area="today"]     { --cw: var(--cw-today); }
[data-area="buying"]    { --cw: var(--cw-buying); }
[data-area="orders"]    { --cw: var(--cw-orders); }
[data-area="marketing"] { --cw: var(--cw-marketing); }
[data-area="money"]     { --cw: var(--cw-money); }
[data-area="settings"]  { --cw: var(--cw-settings); }

/* ─── Ground, type, browser surfaces ───────────────────────────────────── */
html { background-color: var(--ground); color-scheme: light; }
body {
  background-color: transparent;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .font-display {
  font-family: 'Onest', 'Inter', sans-serif;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h1 { letter-spacing: -0.025em; font-weight: 700; }
h1, h2 { text-wrap: balance; }
.font-display, td, th, .tabular-nums { font-variant-numeric: tabular-nums; }
.font-mono, code, kbd, pre, [class*="font-mono"] {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.uppercase.tracking-wide, .uppercase.tracking-wider { letter-spacing: .09em; }
span.rounded-full, span.rounded, span.rounded-md, span.rounded-lg { font-variant-numeric: tabular-nums; }

/* gray-400 text is 2.7:1 on white, too faint to read; it reads one step darker. */
html:not(.dark) .text-gray-400 { color: var(--ink-muted); }

::selection { background: rgba(201, 161, 146, .38); color: var(--ink); }
input, textarea { caret-color: var(--garnet); }
a { text-underline-offset: .2em; text-decoration-thickness: from-font; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(110, 95, 100, .32); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(110, 95, 100, .55); }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-color: rgba(110, 95, 100, .4) transparent; }

:focus-visible { outline: 2px solid var(--garnet); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ─── The sheet: every page's content, and how it arrives ─────────────── */
.hs-sheet { view-transition-name: hs-sheet; }

/* Page to page: the menu and title row stay put, the sheet is laid down.
   Cross-document view transitions; browsers without them just load. */
@view-transition { navigation: auto; }
#hsNav { view-transition-name: hs-nav; }
::view-transition-group(hs-nav) { animation: none; }
::view-transition-old(hs-nav), ::view-transition-new(hs-nav) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(hs-sheet) { animation: hs-sheet-out .12s var(--ease-in) both; }
::view-transition-new(hs-sheet) { animation: hs-sheet-in .28s var(--ease-out) both; }
::view-transition-group(hs-sheet) { animation-duration: .28s; }
@keyframes hs-sheet-out { to { opacity: 0; } }
@keyframes hs-sheet-in  { from { opacity: 0; transform: translateY(8px); } }
/* The tape's mark and the tab's underline travel to where you went. */
::view-transition-group(hs-tape-mark), ::view-transition-group(hs-tab-mark) {
  animation-duration: .38s; animation-timing-function: var(--ease-out);
}

/* ─── Motion policy ────────────────────────────────────────────────────── */
a, button, .nav-link, input, select, textarea, summary {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease, opacity .15s ease;
}
@keyframes hs-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.hs-pulse { animation: hs-pulse 2.4s ease-in-out infinite; }
@keyframes hs-unfold { from { clip-path: inset(0 0 100% 0 round 8px); opacity: .6; } to { clip-path: inset(0 0 0 0 round 8px); opacity: 1; } }
@keyframes hs-rise { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
@keyframes hs-fade { from { opacity: 0; } }
@keyframes hs-ink-in { from { background-size: 0% 100%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  @view-transition { navigation: none; }
}

/* ═══ The menu bar: plum ink, rose-gold tape ═════════════════════════════ */
.hs-bar { background: transparent; }
.hs-bar__ink { background: var(--bar); color: var(--bar-text); position: relative; }
.hs-bar__brand { color: var(--bar-text-hi); font-family: 'Onest', 'Inter', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.hs-bar__brand img { filter: drop-shadow(0 0 0 transparent); border-radius: 6px; }

.hs-bar__link {
  position: relative; display: flex; align-items: center; gap: .3rem;
  padding: 0 .8rem; font-size: 14px; font-weight: 500; color: var(--bar-text);
  border-radius: 0; white-space: nowrap;
}
.hs-bar__link:hover { color: var(--bar-text-hi); background: var(--bar-hover); }
.hs-bar__link.is-active { color: var(--bar-text-hi); font-weight: 600; }
/* The area's colourway as a small dot before the active label. */
.hs-bar__link.is-active::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; margin-right: .2rem;
  background: var(--cw); box-shadow: 0 0 0 1px rgba(244, 236, 238, .25);
}
.hs-bar__link[data-area="today"]     { --cw: var(--cw-today); }
.hs-bar__link[data-area="buying"]    { --cw: var(--cw-buying); }
.hs-bar__link[data-area="orders"]    { --cw: var(--cw-orders); }
.hs-bar__link[data-area="marketing"] { --cw: var(--cw-marketing); }
.hs-bar__link[data-area="money"]     { --cw: var(--cw-money); }
.hs-bar__chev { width: 12px; height: 12px; opacity: .5; transition: transform .2s var(--ease-out), opacity .15s; }
.group\/nav:hover .hs-bar__chev, .group\/nav:focus-within .hs-bar__chev { transform: rotate(180deg); opacity: .9; }
@media (max-width: 1400px) { .hs-bar__link { padding: 0 .55rem; } }

/* The tape measure: 1 mm ticks, a longer one every 5, tallest every 10. */
.hs-tape {
  height: 7px;
  background:
    repeating-linear-gradient(90deg, rgba(201,161,146,.85) 0 1px, transparent 1px 60px) 0 0 / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(201,161,146,.55) 0 1px, transparent 1px 30px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(201,161,146,.30) 0 1px, transparent 1px 6px) 0 0 / 100% 3px no-repeat,
    var(--bar);
  border-bottom: 1px solid rgba(201, 161, 146, .35);
}
/* The mark on the tape under the active area; it glides between pages. */
.hs-bar__mark {
  position: absolute; left: 50%; bottom: -8px; width: 14px; height: 8px; margin-left: -7px;
  background: var(--rose-gold); clip-path: polygon(50% 0, 100% 100%, 0 100%);
  view-transition-name: hs-tape-mark; pointer-events: none; z-index: 2;
}

.hs-bar__search { color: var(--bar-text); border: 1px solid rgba(244, 236, 238, .16); background: rgba(244, 236, 238, .04); }
.hs-bar__search:hover { color: var(--bar-text-hi); border-color: rgba(201, 161, 146, .55); background: rgba(244, 236, 238, .07); }
.hs-bar__kbd { font-size: 11px; padding: 1px 5px; border-radius: 4px; border: 1px solid rgba(244, 236, 238, .18); color: rgba(244, 236, 238, .6); }
.hs-bar__icon { color: var(--bar-text); }
.hs-bar__icon:hover, .hs-bar__icon.is-active { color: var(--bar-text-hi); background: var(--bar-hover); }
.hs-bar__icon.is-active { box-shadow: inset 0 -2px 0 var(--rose-gold); }
.hs-bar__user { color: var(--bar-text); }
.hs-bar__user:hover { color: var(--bar-text-hi); background: var(--bar-hover); }
.hs-bar__avatar {
  width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  font: 700 12px/1 'Onest', 'Inter', sans-serif; color: var(--ink); background: var(--rose-gold);
}
.hs-bar :focus-visible { outline-color: var(--rose-gold); }

/* Menus unfold from the tape. */
.hs-menu {
  min-width: 16rem; padding: .35rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: var(--float-shadow);
  border-top: 2px solid var(--cw);
  animation: hs-unfold .2s var(--ease-out) both;
}
.hs-menu[data-area="buying"]    { --cw: var(--cw-buying); }
.hs-menu[data-area="orders"]    { --cw: var(--cw-orders); }
.hs-menu[data-area="marketing"] { --cw: var(--cw-marketing); }
.hs-menu[data-area="money"]     { --cw: var(--cw-money); }
.hs-menu--right { border-top-color: var(--rose-gold); min-width: 12rem; }
.hs-menu__item {
  display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border-radius: 5px;
  font-size: 14px; color: var(--ink-soft);
}
.hs-menu__item:hover { background: var(--paper-tint); color: var(--ink); }
.hs-menu__item.is-active { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--cw) 9%, transparent); }
.hs-menu__item.is-active::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--cw); flex-shrink: 0; }
.hs-menu__item--danger { color: #9F1F2E; }
.hs-menu__item--danger:hover { background: #FBEDEE; color: #7F1824; }

/* ─── The sheet's title row: colourway, where you are, tabs, date ─────── */
.hs-sheet-head {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 10px 24px -22px rgba(34, 26, 30, .35);
}
.hs-sheet-head > div { min-height: 44px; }
.hs-sheet-head__where { padding-right: .75rem; border-right: 1px solid var(--rule); }
.hs-swatch {
  width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
  background: var(--cw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 3px color-mix(in srgb, var(--cw) 16%, transparent);
}
.hs-sheet-head__area { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.hs-sheet-head__sep { color: var(--ink-faint); }
.hs-sheet-head__place { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.hs-sheet-head__date {
  font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--ink-muted);
  padding-left: .75rem; border-left: 1px solid var(--rule); letter-spacing: 0;
}

.hs-areatabs { scrollbar-width: none; }
.hs-areatabs::-webkit-scrollbar { display: none; }
.hs-tab {
  position: relative; flex-shrink: 0; display: flex; align-items: center;
  padding: 0 .9rem; min-height: 44px; font-size: 14px; color: var(--ink-muted);
  border-right: 1px solid var(--rule);
}
.hs-tab:first-child { border-left: 1px solid var(--rule); }
.hs-tab:hover { color: var(--ink); background: var(--paper-tint); }
.hs-tab.is-active { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--cw) 6%, var(--paper)); }
.hs-tab.is-active::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px;
  background: var(--cw); view-transition-name: hs-tab-mark;
}
@media (max-width: 767px) {
  .hs-tab:first-child { border-left: 0; }
  .hs-sheet-head > div { padding-left: 0; padding-right: 0; }
}

/* ─── Phone menu panel ─────────────────────────────────────────────────── */
#hsMobileNav:not(.hidden) {
  position: fixed; left: 0; right: 0; top: calc(3.5rem + 8px); bottom: 0;
  height: calc(100vh - 3.5rem - 8px); height: calc(100dvh - 3.5rem - 8px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--paper); z-index: 40;
  animation: hs-unfold .24s var(--ease-out) both;
}
body.hs-nav-open { overflow: hidden; }
.hs-mnav__search { color: var(--ink-muted); border: 1px solid var(--rule-input); background: var(--paper-tint); }
.hs-mnav__top {
  display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: 0 .6rem; border-radius: 6px;
  font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none;
}
.hs-mnav__top::-webkit-details-marker { display: none; }
.hs-mnav__top:hover, .hs-mnav__top.is-active { background: var(--paper-tint); }
.hs-mnav__area[data-area="buying"], .hs-mnav__top[data-area="buying"]       { --cw: var(--cw-buying); }
.hs-mnav__area[data-area="orders"], .hs-mnav__top[data-area="orders"]       { --cw: var(--cw-orders); }
.hs-mnav__area[data-area="marketing"], .hs-mnav__top[data-area="marketing"] { --cw: var(--cw-marketing); }
.hs-mnav__area[data-area="money"], .hs-mnav__top[data-area="money"]         { --cw: var(--cw-money); }
.hs-mnav__top[data-area="today"] { --cw: var(--cw-today); }
.hs-mnav__area .hs-acc-arrow { color: var(--ink-faint); transition: transform .2s var(--ease-out); }
.hs-mnav__area[open] > summary .hs-acc-arrow { transform: rotate(90deg); color: var(--cw); }
.hs-mnav__area > div { border-left: 1px solid color-mix(in srgb, var(--cw) 35%, transparent); margin-left: 1.05rem; padding-left: .5rem !important; }
.hs-mnav__area[open] > div { animation: hs-rise .22s var(--ease-out) both; }
.hs-mnav__item {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; border-radius: 6px;
  font-size: 14.5px; color: var(--ink-soft);
}
.hs-mnav__item:hover { background: var(--paper-tint); color: var(--ink); }
.hs-mnav__item.is-active { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--cw) 9%, transparent); }
.hs-mnav__foot { border-top: 1px solid var(--rule); }

/* ─── Ctrl+K palette ───────────────────────────────────────────────────── */
.hs-palette__scrim { background: rgba(21, 15, 18, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: hs-fade .16s ease both; }
.hs-palette {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 30px 80px -24px rgba(21, 15, 18, .55); border-top: 2px solid var(--rose-gold);
  animation: hs-rise .2s var(--ease-out) both;
}
.hs-palette__input { border-bottom: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.hs-palette__input::placeholder { color: var(--ink-faint); }
.hs-palette__foot { color: var(--ink-muted); border-top: 1px solid var(--rule); background: var(--paper-tint); }
.hs-palette__foot kbd { font-size: 11px; padding: 0 4px; border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--paper); }

/* ═══ The shared Tailwind patterns, restyled as the tech pack ═════════════ */

/* Hairlines: neutral borders are plum rules. Coloured borders keep their hue. */
body .border-gray-100 { border-color: rgba(34, 26, 30, .07); }
body .border-gray-200 { border-color: var(--rule); }
body .border-gray-300 { border-color: var(--rule-strong); }
body .divide-gray-100 > * + * { border-color: rgba(34, 26, 30, .06); }
body .divide-gray-200 > * + * { border-color: rgba(34, 26, 30, .09); }

/* Cards are sheets: white paper and a hairline edge, nothing lifted. A card
   drawn with only a shadow gets the hairline instead. */
.bg-white.border.rounded-lg, .bg-white.border.rounded-xl, .bg-white.border.rounded-2xl { box-shadow: none; }
.bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl):is(.shadow-sm, .shadow, .shadow-md):not(.border) { box-shadow: 0 0 0 1px var(--rule); }
.bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl).border:is(.shadow-sm, .shadow, .shadow-md) { box-shadow: none; }
.shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: var(--float-shadow) !important; }

/* Stat tiles: a ruled cell on tinted paper. */
.bg-gray-50.rounded-lg, .bg-gray-50.rounded-xl, .bg-gray-50.rounded-2xl {
  background-color: var(--paper-tint);
  box-shadow: inset 0 0 0 1px rgba(34, 26, 30, .07);
}

/* Tables: the grading table of a spec sheet. */
thead th {
  background-color: var(--paper-tint);
  font-weight: 600; letter-spacing: .02em; color: var(--ink-soft);
}
thead th.uppercase, thead.uppercase th, thead tr.uppercase th { letter-spacing: .08em; }
thead { border-bottom: 1px solid var(--rule-strong); }
tbody tr { transition: background-color .12s ease; }
table.cellcopy td { cursor: cell; }
table.cellcopy td.cell-sel { background: rgba(201, 161, 146, .22) !important; box-shadow: inset 0 0 0 1px rgba(138, 58, 78, .45); }
table.cellcopy td:has(button), table.cellcopy td:has(a), table.cellcopy td:has(input), table.cellcopy td:has(select) { cursor: default; }

/* Primary action: garnet. Every page's green «do it» button becomes the
   sheet's one action; green stays for «good» states in pills and bars. */
body :is(a, button, input[type="submit"], label).bg-emerald-500,
body :is(a, button, input[type="submit"], label).bg-emerald-600,
body :is(a, button, input[type="submit"], label).bg-emerald-700,
body :is(a, button, input[type="submit"], label).bg-green-500,
body :is(a, button, input[type="submit"], label).bg-green-600,
body :is(a, button, input[type="submit"], label).bg-green-700,
body :is(a, button, input[type="submit"], label).bg-brand-500,
body :is(a, button, input[type="submit"], label).bg-brand-600 {
  background-color: var(--garnet); color: #fff;
  border-color: var(--garnet-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(114, 47, 65, .28);
}
body :is(a, button, input[type="submit"], label):is(.bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-green-500, .bg-green-600, .bg-green-700, .bg-brand-500, .bg-brand-600):hover {
  background-color: var(--garnet-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 10px -4px rgba(114, 47, 65, .5);
}
/* Decisive dark buttons: plum ink. */
body :is(a, button, input[type="submit"]):is(.bg-gray-900, .bg-gray-800) {
  background-color: var(--ink); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 1px 2px rgba(21, 15, 18, .3);
}
body :is(a, button, input[type="submit"]):is(.bg-gray-900, .bg-gray-800):hover { background-color: #0F0A0D; }
body :is(a, button):is(.bg-red-600, .bg-blue-600, .bg-purple-600) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(21, 15, 18, .2); }

/* Every solid button presses in by a hair. */
body :is(a, button):is([class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-brand-"], .bg-gray-900, .bg-gray-800, .bg-red-600, .bg-blue-600, .bg-white.border):active:not(:disabled) {
  transform: translateY(1px);
}

/* Secondary: paper with a rule. */
button.bg-white.border, a.bg-white.border { box-shadow: 0 1px 1px rgba(34, 26, 30, .04); }
button.bg-white.border:hover, a.bg-white.border:hover { border-color: rgba(34, 26, 30, .3); background-color: var(--paper-tint); }
button:disabled, button[disabled] { cursor: not-allowed; }

/* Selected filter chips (`bg-emerald-600 border-emerald-600` with no hover of
   their own) are a state, not an action: plum ink, like every other selected chip. */
body :is(a, button).bg-emerald-600.border-emerald-600:not([class*="hover:bg-emerald"]),
body :is(a, button).stage-tab.bg-emerald-600 {
  background-color: var(--ink); border-color: var(--ink); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
html.dark body :is(a, button).bg-emerald-600.border-emerald-600:not([class*="hover:bg-emerald"]),
html.dark body :is(a, button).stage-tab.bg-emerald-600 { background-color: #F1E9EB; border-color: #F1E9EB; color: #1C1519; }

/* A page's one action, marked in markup where the page drew it as secondary. */
body .hs-primary, body .hs-primary.bg-white {
  background-color: var(--garnet) !important; border-color: var(--garnet-deep) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(114, 47, 65, .28);
  font-weight: 600;
}
body .hs-primary:hover { background-color: var(--garnet-deep) !important; }

/* Inputs: ruled fields. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"])),
select, textarea {
  border-radius: 6px;
  border-color: var(--rule-input);
  box-shadow: inset 0 1px 1px rgba(34, 26, 30, .03);
}
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"])):hover,
select:hover, textarea:hover { border-color: #BFB1B5; }
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"])):focus,
select:focus, textarea:focus {
  border-color: var(--garnet); outline: none;
  box-shadow: 0 0 0 3px var(--garnet-ring);
}
::placeholder { color: var(--ink-faint); opacity: 1; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--garnet); }

/* Status pills are approval stamps: square-cornered, ruled in their own ink,
   set in small tracked capitals. */
span.rounded-full:is([class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-amber-"], [class*="bg-yellow-"], [class*="bg-red-"], [class*="bg-blue-"], [class*="bg-gray-1"], [class*="bg-gray-5"], [class*="bg-orange-"], [class*="bg-purple-"], [class*="bg-sky-"], [class*="bg-indigo-"], [class*="bg-brand-"]):not(.text-white) {
  border-radius: 3px; white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 48%, transparent);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.35;
}

/* Links drawn in blue belong to another system; in the tech pack they are garnet. */
a.text-blue-600, a.text-blue-700, a.text-indigo-600, a.text-indigo-700, a.text-emerald-600, a.text-emerald-700, a.text-green-600, a.text-green-700 { color: var(--garnet); }
a.text-blue-600:hover, a.text-blue-700:hover, a.text-indigo-600:hover, a.text-indigo-700:hover, a.text-emerald-600:hover, a.text-emerald-700:hover, a.text-green-600:hover, a.text-green-700:hover { color: var(--garnet-deep); }

/* <details> summaries used as «Чому так» / «Налаштування» folds. */
details > summary { cursor: pointer; }
details[open] > summary { color: var(--ink); }

/* ═══ The «Замовлення» shape (src/tailwind.css) in tech-pack ink ════════════ */
.hs-tile { background-color: var(--paper-tint) !important; --tw-ring-color: rgba(34, 26, 30, .09) !important; }
.hs-tile__label { color: var(--ink-muted) !important; letter-spacing: .09em !important; }
.hs-tile__value { font-family: 'Onest', 'Inter', sans-serif; color: var(--ink) !important; letter-spacing: -0.02em; }
.hs-tile__sub { color: var(--ink-muted) !important; }
.hs-tile--warn { background-color: #FCF6EA !important; --tw-ring-color: #EBD7A8 !important; }
.hs-tile--warn .hs-tile__value { color: #94590B !important; }
.hs-tile--bad  { background-color: #FBEFEF !important; --tw-ring-color: #EEC6C9 !important; }
.hs-tile--bad .hs-tile__value { color: #9F1F2E !important; }
.hs-tile--good { background-color: #EEF5F0 !important; --tw-ring-color: #BFD8C8 !important; }
.hs-tile--good .hs-tile__value { color: #2F6A4B !important; }
.hs-do__title { color: var(--ink) !important; letter-spacing: -0.01em !important; text-transform: none !important; font: 600 15px/1.3 'Onest', 'Inter', sans-serif !important; padding-top: .9rem !important; }
.hs-do__text { color: var(--ink) !important; }
.hs-do__cta { background-color: var(--garnet) !important; border-radius: 6px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(114,47,65,.28); }
.hs-do__cta:hover { background-color: var(--garnet-deep) !important; }
.hs-do__row { transition: background-color .15s ease; }
.hs-do__row:hover { background-color: var(--paper-tint); }
.hs-do__row--hot, .hs-do__row--late { background-color: #FBEFEF !important; }
.hs-do__row--warn { background-color: #FCF6EA !important; }
.hs-switches__cta { border-radius: 6px !important; border-color: var(--rule-input) !important; color: var(--ink-soft) !important; }
.hs-sticky th:first-child, .hs-sticky td:first-child { box-shadow: 1px 0 0 var(--rule) !important; }
.hs-sticky thead th:first-child { background-color: var(--paper-tint) !important; }
@media (max-width: 767px) {
  .hs-cards tr { border-bottom-color: var(--rule) !important; }
  .hs-cards td::before { color: var(--ink-muted) !important; font-size: 12px !important; letter-spacing: .02em; }
}

/* Numbers that count up land in Onest figures. */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ═══ Dark: the night sheet ═══════════════════════════════════════════════
   Plum-black paper, rose-gold metal, the same rules. */
html.dark {
  color-scheme: dark;
  --ink:          #F1E9EB;
  --ink-soft:     #DCCFD3;
  --ink-muted:    #A3949A;
  --ink-faint:    #7C6D73;
  --paper:        #21171D;
  --ground:       #160F13;
  --paper-tint:   #2A1E25;
  --rule:         rgba(236, 196, 212, .12);
  --rule-strong:  rgba(236, 196, 212, .22);
  --rule-input:   #53404A;
  --garnet:       #B2566D;
  --garnet-deep:  #9C465C;
  --garnet-ring:  rgba(217, 143, 160, .25);
  --bar:          #0E080B;
  --rose-gold:    #DDB6A7;
  --sheet-shadow: none;
  --float-shadow: 0 2px 6px -2px rgba(0, 0, 0, .5), 0 24px 56px -20px rgba(0, 0, 0, .7);
}
html.dark body { color: var(--ink); }
html.dark ::selection { background: rgba(201, 161, 146, .35); color: #fff; }
html.dark :focus-visible { outline-color: #D98FA0; }
html.dark .hs-menu__item--danger { color: #F0A3AE; }
html.dark .hs-menu__item--danger:hover { background: rgba(159, 31, 46, .25); color: #FAD0D6; }
html.dark .hs-sheet-head { box-shadow: 0 10px 24px -22px rgba(0, 0, 0, .9); }

/* Surfaces */
html.dark .bg-white            { background-color: var(--paper) !important; }
html.dark .bg-gray-50          { background-color: var(--paper-tint) !important; }
html.dark .bg-gray-100         { background-color: #30232A !important; }
html.dark .bg-gray-200         { background-color: #3B2C34 !important; }
html.dark .hover\:bg-gray-50:hover  { background-color: #2D2128 !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #362830 !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #41313A !important; }
html.dark [class*="bg-gray-50/"]:not([class*="hover"])   { background-color: rgba(40, 29, 35, .7) !important; }
html.dark .bg-gray-200\/70                                { background-color: rgba(59, 44, 52, .7) !important; }
html.dark [class*="bg-emerald-50/"]:not([class*="hover"]) { background-color: rgba(79, 122, 98, .16) !important; }
html.dark .hover\:bg-gray-50\/50:hover,
html.dark .hover\:bg-gray-50\/60:hover,
html.dark .hover\:bg-gray-50\/70:hover     { background-color: #2D2128 !important; }
html.dark .hover\:bg-emerald-50\/50:hover  { background-color: rgba(79, 122, 98, .2) !important; }
html.dark .bg-gray-50.rounded-lg, html.dark .bg-gray-50.rounded-xl, html.dark .bg-gray-50.rounded-2xl { box-shadow: inset 0 0 0 1px var(--rule); }
html.dark .bg-gray-900 { background-color: #F1E9EB !important; color: #1C1519 !important; }
html.dark :is(a, button).bg-gray-900:hover { background-color: #fff !important; }

/* Rules */
html.dark .border-gray-100     { border-color: rgba(236, 196, 212, .08) !important; }
html.dark .border-gray-200     { border-color: var(--rule) !important; }
html.dark .border-gray-300     { border-color: var(--rule-strong) !important; }
html.dark .divide-gray-100 > * + * { border-color: rgba(236, 196, 212, .08) !important; }
html.dark .divide-gray-200 > * + * { border-color: rgba(236, 196, 212, .12) !important; }

/* Ink */
html.dark .text-gray-900       { color: #F1E9EB !important; }
html.dark .text-gray-800       { color: #E6DCDF !important; }
html.dark .text-gray-700       { color: #D2C4C8 !important; }
html.dark .text-gray-600       { color: #BCADB2 !important; }
html.dark .text-gray-500       { color: #A99AA0 !important; }
html.dark .text-gray-400       { color: #9A8B91 !important; }
html.dark .text-gray-300       { color: #B3A4AA !important; }
html.dark .hover\:text-gray-700:hover,
html.dark .hover\:text-gray-800:hover,
html.dark .hover\:text-gray-900:hover { color: #FFF7F9 !important; }
html.dark h1, html.dark h2, html.dark h3, html.dark h4 { color: var(--ink); }

/* Tints keep their hue on the night sheet */
html.dark .bg-blue-50,   html.dark .bg-blue-100   { background-color: rgba(59, 130, 246, .16) !important; }
html.dark .bg-green-50,  html.dark .bg-green-100  { background-color: rgba(79, 122, 98, .22) !important; }
html.dark .bg-emerald-50,html.dark .bg-emerald-100{ background-color: rgba(79, 122, 98, .22) !important; }
html.dark .bg-yellow-50, html.dark .bg-yellow-100 { background-color: rgba(202, 138, 4, .18) !important; }
html.dark .bg-amber-50,  html.dark .bg-amber-100  { background-color: rgba(217, 119, 6, .18) !important; }
html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgba(234, 88, 12, .18) !important; }
html.dark .bg-red-50,    html.dark .bg-red-100    { background-color: rgba(190, 50, 70, .2) !important; }
html.dark .bg-purple-50, html.dark .bg-purple-100 { background-color: rgba(142, 59, 107, .25) !important; }
html.dark .bg-brand-50,  html.dark .bg-brand-100  { background-color: rgba(178, 86, 109, .2) !important; }
html.dark .border-blue-200    { border-color: rgba(96, 165, 250, .3) !important; }
html.dark .border-green-200, html.dark .border-emerald-200 { border-color: rgba(127, 176, 141, .32) !important; }
html.dark .border-yellow-200, html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgba(210, 162, 117, .35) !important; }
html.dark .border-orange-200  { border-color: rgba(251, 146, 60, .3) !important; }
html.dark .border-red-200     { border-color: rgba(217, 139, 127, .35) !important; }
html.dark .border-purple-200  { border-color: rgba(192, 132, 252, .3) !important; }
html.dark .text-blue-700,    html.dark .text-blue-600    { color: #9DC2F7 !important; }
html.dark .text-green-700,   html.dark .text-green-600,
html.dark .text-emerald-700, html.dark .text-emerald-600, html.dark .text-emerald-800 { color: #93C7A3 !important; }
html.dark .text-yellow-700,  html.dark .text-yellow-600,
html.dark .text-amber-700,   html.dark .text-amber-600,  html.dark .text-amber-800, html.dark .text-amber-900 { color: #E4BC8A !important; }
html.dark .text-orange-700,  html.dark .text-orange-600  { color: #F2B083 !important; }
html.dark .text-red-700,     html.dark .text-red-600,    html.dark .text-red-800 { color: #F0A3AE !important; }
html.dark .text-purple-700,  html.dark .text-purple-600  { color: #D9A6CB !important; }
html.dark .text-brand-600, html.dark .text-brand-700, html.dark .text-brand-800 { color: #E3A6B5 !important; }
html.dark a.text-blue-600, html.dark a.text-blue-700, html.dark a.text-indigo-600, html.dark a.text-indigo-700, html.dark a.text-emerald-600, html.dark a.text-emerald-700, html.dark a.text-green-600, html.dark a.text-green-700 { color: #E3A6B5 !important; }

/* Fields */
html.dark input, html.dark select, html.dark textarea {
  background-color: #150F12 !important; color: var(--ink) !important; border-color: var(--rule-input) !important;
}
html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #D98FA0 !important; }
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--ink-faint); }

html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-md { box-shadow: 0 0 0 1px var(--rule); }
html.dark thead th, html.dark thead th a { color: var(--ink-soft) !important; }
html.dark thead th { background-color: var(--paper-tint) !important; }
html.dark .hs-sticky th:first-child, html.dark .hs-sticky td:first-child { background-color: var(--paper) !important; }

/* The «Замовлення» shape on the night sheet */
html.dark .hs-tile { background-color: var(--paper-tint) !important; --tw-ring-color: var(--rule) !important; }
html.dark .hs-tile--warn { background-color: rgba(217, 119, 6, .14) !important; --tw-ring-color: rgba(210, 162, 117, .35) !important; }
html.dark .hs-tile--warn .hs-tile__value { color: #E4BC8A !important; }
html.dark .hs-tile--bad  { background-color: rgba(190, 50, 70, .16) !important; --tw-ring-color: rgba(217, 139, 127, .35) !important; }
html.dark .hs-tile--bad .hs-tile__value { color: #F0A3AE !important; }
html.dark .hs-tile--good { background-color: rgba(79, 122, 98, .18) !important; --tw-ring-color: rgba(127, 176, 141, .32) !important; }
html.dark .hs-tile--good .hs-tile__value { color: #93C7A3 !important; }
html.dark .hs-do { background-color: var(--paper) !important; border-color: var(--rule) !important; }
html.dark .hs-do__row:hover { background-color: var(--paper-tint); }
html.dark .hs-do__row--hot, html.dark .hs-do__row--late { background-color: rgba(190, 50, 70, .16) !important; }
html.dark .hs-do__row--warn { background-color: rgba(217, 119, 6, .14) !important; }
html.dark .hs-switches__cta { background-color: var(--paper) !important; border-color: var(--rule-input) !important; color: var(--ink-soft) !important; }
html.dark .hs-switches__cta:hover { background-color: var(--paper-tint) !important; }

/* ═══ Signature: the dimension line ══════════════════════════════════════
   Under each sheet's title, a spec drawing's dimension mark |——| in the
   area's colourway. It draws itself as the sheet lands: the one authored
   moment of every page. */
.hs-sheet h1::after {
  content: ""; display: block; width: 44px; height: 7px; margin-top: 9px;
  background:
    linear-gradient(var(--cw), var(--cw)) 0 3px / 100% 1.5px no-repeat,
    linear-gradient(var(--cw), var(--cw)) 0 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--cw), var(--cw)) 100% 0 / 1.5px 100% no-repeat;
  animation: hs-dim-draw .6s var(--ease-out) .08s both;
}
@keyframes hs-dim-draw { from { width: 1.5px; opacity: 0; } 30% { opacity: 1; } }

/* ═══ Tables: the grading table ═══════════════════════════════════════════ */
.hs-sheet thead th {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-muted);
}
.hs-sheet thead th a { color: inherit; }
.hs-sheet tbody tr:not([class*="bg-"]):not([class*="hs-row--"]):hover { background-color: color-mix(in srgb, var(--cw) 4%, transparent); }

/* Phone: where you are, in the bar. */
.hs-bar__here { color: var(--bar-text-hi); font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; }
.hs-bar__here .hs-swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }

/* Night sheet: the deeper tint inks some pills use. */
html.dark .text-blue-800, html.dark .text-blue-900, html.dark .text-indigo-700, html.dark .text-indigo-800, html.dark .text-sky-700, html.dark .text-sky-800 { color: #9DC2F7 !important; }
html.dark .text-green-800, html.dark .text-green-900, html.dark .text-emerald-900 { color: #93C7A3 !important; }
html.dark .text-red-900, html.dark .text-orange-800, html.dark .text-orange-900 { color: #F0A3AE !important; }
html.dark .text-yellow-800, html.dark .text-yellow-900 { color: #E4BC8A !important; }
html.dark .text-purple-800, html.dark .text-purple-900, html.dark .text-pink-700, html.dark .text-pink-800 { color: #D9A6CB !important; }
html.dark .bg-sky-50, html.dark .bg-sky-100, html.dark .bg-indigo-50, html.dark .bg-indigo-100 { background-color: rgba(59, 130, 246, .16) !important; }
html.dark .bg-pink-50, html.dark .bg-pink-100 { background-color: rgba(142, 59, 107, .25) !important; }


/* ═══ Review fixes (finish review, 23.09.2026) ════════════════════════════ */

/* Section labels drawn as small uppercase headings are headings: sentence
   case in Onest, not an eyebrow over the content. */
.hs-sheet :is(h2, h3).uppercase {
  text-transform: none; letter-spacing: -0.01em; font-family: 'Onest', 'Inter', sans-serif;
  font-size: 15px; font-weight: 600; color: var(--ink);
}

/* Ruled cells: a grid of cards becomes one sheet divided by shared hairlines. */
.hs-ruled {
  gap: 1px !important; background: var(--rule); border: 1px solid var(--rule);
  border-radius: 8px; overflow: hidden;
}
.hs-ruled > * { border: 0 !important; border-radius: 0 !important; background-color: var(--paper); box-shadow: none !important; }
.hs-ruled > a:hover, .hs-ruled > .hover\:bg-gray-50:hover { background-color: var(--paper-tint) !important; }

/* Numbers that line up: ids, SKUs and TTNs stay on one line in wide tables. */
@media (min-width: 768px) {
  .hs-sheet td :is(.font-mono, [class*="font-mono"]), .hs-sheet td.font-mono { white-space: nowrap; }
}

/* A table whose cells carry only right padding still starts off the band's edge. */
.hs-sheet :is(th, td):first-child:not([class*="px-"]):not([class*="pl-"]):not([class*="p-"]) { padding-left: .75rem; }

/* The colourway at more than swatch size: the title row's top rule and the active tab. */
.hs-sheet-head { border-top: 3px solid var(--cw); }
.hs-tab.is-active { background: color-mix(in srgb, var(--cw) 9%, var(--paper)); }
html.dark .hs-tab.is-active { background: color-mix(in srgb, var(--cw) 18%, var(--paper)); }

/* Returns list: the jump to monobank, in ink. */
.hs-bank-jump { background: var(--ink); color: var(--rose-gold); }
.hs-bank-jump:hover { background: #0F0A0D; color: #fff; }
html.dark .hs-bank-jump { background: #30232A; color: var(--rose-gold); }

/* The marked action keeps its garnet on the night sheet. */
html.dark body .hs-primary, html.dark body .hs-primary.bg-white { background-color: var(--garnet) !important; border-color: var(--garnet-deep) !important; color: #fff !important; }
/* Neighbouring columns that only pad on the right still get air on the left. */
.hs-sheet :is(th, td) + :is(th, td):not([class*="px-"]):not([class*="pl-"]):not([class*="p-"]) { padding-left: .75rem; }

/* «Сьогодні»: the most urgent line's button is the sheet's one action, on phones too. */
.hs-sheet .hs-primary-cta {
  display: inline-flex !important; width: auto !important; min-height: 36px; padding: 0 .85rem; border-radius: 6px;
  background: var(--garnet); color: #fff !important; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(114, 47, 65, .28);
}
.group:hover .hs-primary-cta { background: var(--garnet-deep); }
/* A summary drawn as the action keeps its garnet when opened. */
summary.hs-primary { list-style: none; }
summary.hs-primary::-webkit-details-marker { display: none; }
/* Phone cards: a cell's content is one value on the right, however many spans it holds. */
.hs-card-value { display: inline; }
@media (max-width: 767px) { .hs-cards .hs-card-value { text-align: right; } }

/* ═══ colour ═══════════════════════════════════════════════════════════════
   Colour carries meaning only: garnet is the one action, sage is money that
   is good, red is an error, and the night sheet stays plum. */

/* «Що зробити»: the first line's button is the sheet's action; the rest are
   ordinary buttons, so five identical garnet buttons never compete. */
.hs-do__row:not(:first-child) .hs-do__cta {
  background-color: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--rule-strong); box-shadow: none; min-height: 44px; font-weight: 500;
}
.hs-do__row:not(:first-child) .hs-do__cta:hover { background-color: var(--paper-tint) !important; border-color: var(--rule-input); }
@media (min-width: 640px) { .hs-do__row:not(:first-child) .hs-do__cta { min-height: 36px; } }
html.dark .hs-do__row:first-child .hs-do__cta { color: #fff !important; }

/* Stat cells: a tech-pack spec cell (paper, hairline, Onest figure) instead of a gradient card. */
.hs-statcell { background-color: var(--paper); }
.hs-statcell__label { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); }
.hs-statcell__value { margin-top: .15rem; font: 700 24px/1.2 'Onest', 'Inter', sans-serif; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hs-statcell__sub { margin-top: .25rem; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* Ranking bars: ink for counts, sage for money. */
.hs-meter--ink  { background-color: var(--ink); }
.hs-meter--sage { background-color: var(--cw-money); }
html.dark .hs-meter--sage { background-color: #7FB08D; }

/* Inbox: the open thread is a tinted row in ink, no side stripe. */
.hs-thread--on { background-color: color-mix(in srgb, var(--cw) 11%, var(--paper)); color: var(--ink); }
html.dark .hs-thread--on { background-color: color-mix(in srgb, var(--cw) 24%, var(--paper)); }

/* «Обслуговування даних»: buttons with room for their words. */
.hs-maint-btn { min-height: 44px !important; padding: .5rem 1rem !important; line-height: 1.3; text-align: center; }
@media (min-width: 640px) { .hs-maint-btn { white-space: nowrap; } }

/* Supplier PO totals are a sum, not good news: ink, not green. */
#kpiGrandTotal { color: var(--ink) !important; }
tr:has(> #grandTotalCell) { background-color: var(--paper-tint) !important; box-shadow: inset 0 1px 0 var(--rule-strong); }
tr:has(> #grandTotalCell) > td { color: var(--ink) !important; }

/* Errors read as errors: a true red with a mark and weight. Links read as
   links: garnet, underlined. The two never look alike. */
.hs-err { color: #B42318 !important; font-weight: 600; }
.hs-err::before {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -0.15em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm-.8 3.5h1.6v5H7.2zm0 6.2h1.6v1.6H7.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm-.8 3.5h1.6v5H7.2zm0 6.2h1.6v1.6H7.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.dark .hs-err { color: #FF9C8C !important; }
a.hs-link { color: var(--garnet); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--garnet) 45%, transparent); }
a.hs-link:hover { color: var(--garnet-deep); text-decoration-color: currentColor; }
html.dark a.hs-link { color: #E3A6B5 !important; text-decoration-color: rgba(227, 166, 181, .5); }

/* Night sheet: the tape measure keeps its metal. */
html.dark .hs-tape {
  background:
    repeating-linear-gradient(90deg, rgba(221,182,167,1) 0 1px, transparent 1px 60px) 0 0 / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(221,182,167,.75) 0 1px, transparent 1px 30px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(221,182,167,.45) 0 1px, transparent 1px 6px) 0 0 / 100% 3px no-repeat,
    var(--bar);
  border-bottom-color: rgba(221, 182, 167, .55);
}
/* ═══ harden ═══════════════════════════════════════════════════════════════
   Unknown is not zero. A tile whose source did not load, a «Що зробити» row
   that says a source could not be read, and the one «Чого бракує» block on
   «Прибуток». Unknown is drawn in neutral ink on a dashed rule — never green,
   never red: the words say what is missing, the colour only says «not a
   number». */
.hs-tile--unknown {
  background-color: var(--paper-tint) !important;
  --tw-ring-color: transparent !important;
  outline: 1px dashed var(--rule-strong); outline-offset: -1px;
}
.hs-tile--unknown .hs-tile__value { color: var(--ink-muted) !important; font-size: 1.0625rem !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.hs-tile__fix {
  display: inline-flex; align-items: center; min-height: 32px; margin-top: .35rem;
  font-size: .8125rem; font-weight: 600; color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--rule-strong);
}
.hs-tile__fix:hover { text-decoration-color: currentColor; }

.hs-do__row--failed { background-color: #FCF6EA !important; }
.hs-do__row--failed:hover { background-color: #FCF6EA !important; }
.hs-do__failed-what { font-weight: 600; }
.hs-do__failed-why { color: var(--ink-soft); }
.hs-do__fix {
  display: inline-flex; align-items: center; min-height: 44px; padding: .375rem .875rem;
  border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper);
  color: var(--ink); font-size: .875rem; font-weight: 600; white-space: nowrap;
}
.hs-do__fix:hover { border-color: var(--ink-muted); }
@media (min-width: 640px) { .hs-do__fix { min-height: 36px; } }
.hs-do__unknown { color: var(--ink-muted) !important; padding-top: .75rem !important; border-top: 1px dashed var(--rule); }

.hs-lack { border-color: var(--rule) !important; }
.hs-lack--red { border-color: #EEC6C9 !important; }
.hs-lack__sum {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-height: 44px;
  padding: .5rem 1rem; cursor: pointer; list-style: none; font-size: .875rem; color: var(--ink-muted);
}
.hs-lack__sum::-webkit-details-marker { display: none; }
.hs-lack__sum::before { content: '▸'; font-size: .75rem; color: var(--ink-muted); transition: transform .15s var(--ease-out); }
.hs-lack[open] > .hs-lack__sum::before { transform: rotate(90deg); }
.hs-lack__title { font: 600 15px/1.3 'Onest', 'Inter', sans-serif; color: var(--ink); }
.hs-lack__n {
  display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px;
  font: 700 11px/1.4 'Onest', 'Inter', sans-serif; letter-spacing: .06em;
  background: #FCF6EA; color: #94590B;
}
.hs-lack--red .hs-lack__n { background: #FBEFEF; color: #9F1F2E; }
.hs-lack__list { margin: 0; padding: 0 1rem .75rem 2.1rem; list-style: disc; font-size: .875rem; color: var(--ink-soft); }
.hs-lack__list li { padding: .25rem 0; }
.hs-lack__list li.hs-lack__red { color: #9F1F2E; }

html.dark .hs-tile--unknown { background-color: var(--paper-tint) !important; }
html.dark .hs-do__row--failed, html.dark .hs-do__row--failed:hover { background-color: rgba(217, 119, 6, .14) !important; }
html.dark .hs-do__fix { background: var(--paper); }
html.dark .hs-lack { background-color: var(--paper) !important; }
html.dark .hs-lack--red { border-color: rgba(217, 139, 127, .35) !important; }
html.dark .hs-lack__n { background: rgba(217, 119, 6, .18); color: #E4BC8A; }
html.dark .hs-lack--red .hs-lack__n { background: rgba(190, 50, 70, .2); color: #F0A3AE; }
html.dark .hs-lack__list li.hs-lack__red { color: #F0A3AE; }
/* ═══ phone ═══════════════════════════════════════════════════════════════
   Line rows on /pos/:id and /supplier-pos/:id: a row's «Зберегти» waits
   until something in that row changes (the row gets .is-dirty), then shows
   as the row's one garnet action. Desktop keeps its space (no jump while
   typing); on a phone it takes no room at all until needed. */
.hs-row-save {
  visibility: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--garnet); color: #fff;
  border: 1px solid var(--garnet-deep);
}
.hs-row-save:hover { background-color: var(--garnet-deep); }
tr.is-dirty .hs-row-save { visibility: visible; }
@media (max-width: 767px) {
  .hs-row-save { display: none; }
  tr.is-dirty .hs-row-save { display: inline-flex; }
}
/* Selling out a pre-order is good news: a quiet «good» stamp, never red. */
.hs-soldout-stamp {
  display: inline-block;
  padding: 1px 6px; border-radius: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #2F6B4E; background: rgba(79, 122, 98, .12); border: 1px solid rgba(79, 122, 98, .35);
}
html.dark .hs-soldout-stamp { color: #9BD1B3; background: rgba(79, 122, 98, .18); border-color: rgba(155, 209, 179, .30); }
/* ═══ shape ═══════════════════════════════════════════════════════════════
   One shape inside every sheet (23.09.2026): one heading (views/partials/
   page-head.ejs), one in-page tab row (views/partials/seg-tabs.ejs, .hs-seg),
   one stat-cell family («Зараз» tiles drawn as ruled cells). */

/* The heading: always an h1, one size, actions on the right (below on a phone). */
.hs-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.25rem; margin-bottom: 1.25rem; }
.hs-head__main { min-width: 0; flex: 1 1 18rem; }
.hs-sheet .hs-head__title {
  font: 700 1.5rem/1.2 'Onest', 'Inter', sans-serif; letter-spacing: -0.025em; color: var(--ink); margin: 0;
}
@media (min-width: 640px) { .hs-sheet .hs-head__title { font-size: 1.75rem; } }
.hs-head__sub { margin-top: .6rem; font-size: 14px; line-height: 1.5; color: var(--ink-muted); max-width: 46rem; }
.hs-head__sub a { color: var(--garnet); }
.hs-head__sub a:hover { text-decoration: underline; }
.hs-head__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; min-width: 0; max-width: 100%; }
@media (max-width: 639px) { .hs-head__actions { justify-content: flex-start; width: 100%; } }
.hs-head__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .9rem;
  font-size: 14px; font-weight: 500; color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--rule-input); border-radius: 6px; white-space: nowrap;
}
@media (min-width: 640px) { .hs-head__btn { min-height: 38px; } }
.hs-head__btn:hover { color: var(--ink); background: var(--paper-tint); border-color: rgba(34, 26, 30, .3); }

/* In-page tabs: the title row's ruled cells, inside the sheet. */
.hs-seg {
  display: flex; width: max-content; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule); border-radius: 6px;
  /* A shade at an edge that still has tabs behind it (scrolling shadows). */
  background:
    linear-gradient(90deg, var(--paper) 40%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(270deg, var(--paper) 40%, transparent) right / 28px 100% no-repeat local,
    linear-gradient(90deg, rgba(34, 26, 30, .14), transparent) left / 14px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(34, 26, 30, .14), transparent) right / 14px 100% no-repeat scroll,
    var(--paper);
}
.hs-seg::-webkit-scrollbar { display: none; }
.hs-seg__tab {
  position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: 0 .95rem; font-size: 14px; font-weight: 500; line-height: 1.2;
  color: var(--ink-muted); white-space: nowrap; text-decoration: none;
  border-right: 1px solid var(--rule);
}
.hs-seg__tab:last-child { border-right: 0; }
@media (min-width: 640px) { .hs-seg__tab { min-height: 40px; } }
.hs-seg__tab:hover { color: var(--ink); background: var(--paper-tint); }
.hs-seg__tab.is-active, .hs-seg__tab[aria-current] {
  color: var(--ink); font-weight: 600;
  background: color-mix(in srgb, var(--cw) 9%, var(--paper));
  box-shadow: inset 0 -2px 0 var(--cw);
}
.hs-seg__count {
  font: 600 12px/1 'Onest', 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  min-width: 20px; padding: 3px 6px; border-radius: 3px; text-align: center;
  background: rgba(34, 26, 30, .07); color: var(--ink-soft);
}
/* The small switch beside a heading (period, view). */
.hs-seg--sm .hs-seg__tab { padding: 0 .75rem; font-size: 13.5px; }
@media (min-width: 640px) { .hs-seg--sm .hs-seg__tab { min-height: 36px; } }
/* Payments: the tabs sit in the queue's own bar, which lays them out. */
.pq-bar > .hs-seg { flex: 0 1 auto; }

/* «Зараз»: the tiles become ruled cells — one frame, shared hairlines, like
   .hs-ruled. Tone tints stay inside the grid. */
.hs-sheet .hs-now {
  gap: 0 !important; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
  background: var(--paper);
}
.hs-sheet .hs-now > .hs-tile {
  border-radius: 0 !important; --tw-ring-color: transparent !important; --tw-ring-shadow: 0 0 #0000 !important;
  box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule) !important;
  padding: .75rem .9rem;
}
.hs-sheet .hs-now > .hs-tile--plain { background-color: var(--paper) !important; }
.hs-sheet .hs-now > a.hs-tile:hover { background-color: var(--paper-tint) !important; }
.hs-sheet .hs-now > a.hs-tile--plain:hover { background-color: var(--paper-tint) !important; }

/* Dark: the same, on the night sheet. */
html.dark .hs-seg {
  background:
    linear-gradient(90deg, var(--paper) 40%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(270deg, var(--paper) 40%, transparent) right / 28px 100% no-repeat local,
    linear-gradient(90deg, rgba(0, 0, 0, .55), transparent) left / 14px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(0, 0, 0, .55), transparent) right / 14px 100% no-repeat scroll,
    var(--paper);
}
html.dark .hs-seg__tab.is-active, html.dark .hs-seg__tab[aria-current] { background: color-mix(in srgb, var(--cw) 18%, var(--paper)); }
html.dark .hs-seg__count { background: rgba(241, 233, 235, .10); }
html.dark .hs-sheet .hs-now > .hs-tile--plain { background-color: var(--paper) !important; }
html.dark .hs-head__btn { background: var(--paper); border-color: var(--rule-input); }
html.dark .hs-head__btn:hover { background: var(--paper-tint); }
.hs-head__meta { margin-top: .15rem; }
.hs-head__meta > p { margin-top: .25rem; }
.hs-seg__count--bad { background: #FBEFEF; color: #9F1F2E; }
html.dark .hs-seg__count--bad { background: rgba(190, 50, 70, .22); color: #F0A3AE; }
/* A switch painted by page JS (Креатори «Вже співпрацювали / Кандидатки / Усі»
   toggles bg-emerald-600 on the chosen button): the same tab look. */
.hs-sheet .hs-seg button.hs-seg__tab.stage-tab {
  background: transparent; color: var(--ink-muted); border-color: var(--rule); box-shadow: none; transform: none; font-weight: 500;
}
.hs-sheet .hs-seg button.hs-seg__tab.stage-tab:hover { background: var(--paper-tint); color: var(--ink); }
.hs-sheet .hs-seg button.hs-seg__tab.stage-tab.bg-emerald-600 {
  color: var(--ink); font-weight: 600; border-color: var(--rule);
  background: color-mix(in srgb, var(--cw) 9%, var(--paper)); box-shadow: inset 0 -2px 0 var(--cw);
}
html.dark .hs-sheet .hs-seg button.hs-seg__tab.stage-tab.bg-emerald-600 { background: color-mix(in srgb, var(--cw) 18%, var(--paper)) !important; color: var(--ink) !important; }
html.dark .hs-sheet .hs-seg button.hs-seg__tab.stage-tab:not(.bg-emerald-600) { background: transparent !important; color: var(--ink-muted) !important; }
.hs-seg button.hs-seg__tab .stage-count { opacity: .7; }

/* ═══ integration ══════════════════════════════════════════════════════════ */
/* A ruled grid whose last row is short leaves the rule colour showing; the
   grid's own ground is paper, the rules come from the 1px gaps' shadow. */
.hs-ruled { background: var(--paper); box-shadow: inset 0 0 0 0 transparent; }
.hs-ruled > * { box-shadow: 0 0 0 1px var(--rule) !important; }

/* A tile's «compared with the period before» line (views/partials/now.ejs). */
.hs-tile__delta { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(34, 26, 30, .10); font-size: 12px; line-height: 1.4; color: var(--ink-muted); }
.hs-tile__arrow { font-weight: 700; }
.hs-tile__delta--good { color: #2F6A4B; }
.hs-tile__delta--bad { color: #9F1F2E; }
html.dark .hs-tile__delta { border-top-color: rgba(241, 233, 235, .12); }
html.dark .hs-tile__delta--good { color: #93C7A3; }
html.dark .hs-tile__delta--bad { color: #F0A3AE; }