:root {
  --green-dark: #0a3d2c;
  --green-darker: #072a1e;
  --green: #0d6b47;
  --green-light: #e6f6ee;
  --green-accent: #17a866;
  --green-accent2: #22c67d;
  --blue: #2f6fed;
  --blue-light: #eaf1ff;
  --orange: #e08a1e;
  --orange-light: #fdf1de;
  --red: #e0453f;
  --red-light: #fde9e8;
  --purple: #7b4fd6;
  --purple-light: #f2ecfd;
  --ink: #17231f;
  --muted: #6b7d76;
  --border: #e7ece8;
  --bg: #f2f6f4;
  --card: #ffffff;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(16, 40, 30, .05);
  --shadow-md: 0 6px 20px -6px rgba(12, 40, 28, .12);
  --shadow-lg: 0 20px 45px -18px rgba(10, 40, 28, .28);
  --ease: cubic-bezier(.22, .8, .3, 1);
}

* { box-sizing: border-box; }
/* `hidden` must always hide — flex/grid components (badges, summary rows,
   pill buttons) would otherwise override it with their own display. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1100px 420px at 15% -10%, rgba(23, 168, 102, .07), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, .num { font-family: "Manrope", "Inter", sans-serif; }
a { color: inherit; text-decoration: none; }
a.link { color: var(--green); text-decoration: none; font-weight: 600; }
a.link:hover { text-decoration: underline; }
::selection { background: rgba(23, 168, 102, .22); }

.app { display: grid; grid-template-columns: 236px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }

/* ---------- Topbar ---------- */
.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  position: sticky; top: 0; z-index: 20;
}
.topbar .topbar-top {
  background: var(--green-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 22px;
  font-size: 12px;
  box-shadow: 0 2px 0 rgba(255,255,255,.04) inset, 0 2px 8px -4px rgba(0,0,0,.2);
  gap: 20px;
}
.topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}
.topbar .brand-strap { font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.topbar .tagline { opacity: .85; font-size: 12px; white-space: nowrap; font-weight: 400; }
.topbar .topbar-top .notifications { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.topbar .topbar-top .notification-btn { border: none; background: transparent; color: #fff; cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 6px; transition: background .15s var(--ease), transform .15s var(--ease); display: flex; align-items: center; justify-content: center; }
.topbar .topbar-top .notification-btn:hover { background: rgba(255,255,255,.15); transform: scale(1.05); }
.topbar .topbar-top .user { color: #fff; margin-left: auto; }
.topbar .topbar-top .avatar { background: rgba(255,255,255,.2); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.topbar .topbar-main {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.topbar .logo-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  position: absolute;
  left: 22px;
}
.topbar .logo-img {
  width: auto;
  height: 50px;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  background: #fff;
  display: block;
  border: 1px solid #e7ece8;
  padding: 6px 6px;
}
.topbar form.search { display: flex; position: relative; flex: 0 1 500px; max-width: 500px; }
.topbar form.search::before {
  content: "\f52a"; font-family: "bootstrap-icons"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #9fb8ac; font-size: 14px; pointer-events: none;
}
.topbar form.search input {
  flex: 1; border: 1px solid var(--border); border-radius: 10px 0 0 10px; padding: 10px 14px 10px 36px; font-size: 13.5px;
  background: #f2f6f4; color: var(--ink); transition: background .15s var(--ease), border-color .15s var(--ease);
}
.topbar form.search input::placeholder { color: var(--muted); }
.topbar form.search input:focus { background: #fff; color: var(--ink); outline: none; border-color: var(--green-accent); }
.topbar form.search input:focus::placeholder { color: var(--muted); }
.topbar form.search button {
  border: 1px solid var(--border); background: #fff; color: var(--muted); padding: 0 18px; border-radius: 0 10px 10px 0; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); display: flex; align-items: center; justify-content: center;
}
.topbar form.search button:hover { background: #f2f6f4; color: var(--green-accent); border-color: var(--green-accent); }
.topbar .notification-btn {
  border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; padding: 6px 10px;
  border-radius: 8px; transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.topbar .notification-btn:hover { background: var(--green-light); color: var(--green-accent); transform: scale(1.05); }
.topbar .topbar-main .btn { flex-shrink: 0; }
.topbar .topbar-main .notifications { display: flex; gap: 8px; flex-shrink: 0; position: absolute; right: 120px; }
.topbar .topbar-main .user-menu { position: absolute; right: 22px; }
.topbar .user-menu-btn {
  border: none; background: transparent; cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; white-space: nowrap; flex-shrink: 0; color: #fff;
  font-weight: 600; transition: opacity .15s ease;
}
.topbar .user-menu-btn:hover { opacity: 0.8; }
.topbar .user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; background: #fff; color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px; min-width: 160px; box-shadow: 0 4px 16px rgba(0,0,0,.1);
  display: none; flex-direction: column; z-index: 100;
}
.topbar .user-dropdown.show { display: flex; }
.topbar .user-dropdown a {
  padding: 10px 16px; font-size: 13px; color: var(--ink); text-decoration: none;
  display: flex; align-items: center; gap: 10px; transition: background .15s ease;
  border-bottom: 1px solid transparent;
}
.topbar .user-dropdown a:first-child { border-top-left-radius: 7px; border-top-right-radius: 7px; }
.topbar .user-dropdown a:last-child { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; }
.topbar .user-dropdown a:hover { background: var(--green-light); color: var(--green-accent); }
.topbar .user-dropdown a i { font-size: 14px; }
.topbar .btn { flex-shrink: 0; }
.topbar .btn.ghost-white { border: 1.5px solid #888888; color: #333333; background: #ffffff; }
.topbar .btn.ghost-white:hover { border-color: #555555; background: #f5f5f5; }
.topbar .notifications { flex-shrink: 0; display: flex; gap: 4px; }
.topbar .user { display: flex; align-items: center; gap: 9px; font-size: 12.5px; white-space: nowrap; flex-shrink: 0; color: var(--ink); }
.topbar .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(140deg, var(--green-accent2), var(--green-accent));
  color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
  box-shadow: 0 0 0 2px rgba(23,168,102,.15), var(--shadow-sm);
}

/* ---------- Sidebar ---------- */
.sidebar {
  grid-row: 2;
  grid-column: 1;
  background: linear-gradient(190deg, var(--green-dark), var(--green-darker) 85%);
  color: #d9ece3;
  padding: 16px 12px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; min-height: calc(100vh - 100px); overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.sidebar .logo {
  color: #fff; font-weight: 800; font-size: 17px; padding: 8px 10px 20px; letter-spacing: .3px;
  display: flex; align-items: center; gap: 10px;
}
.sidebar .logo::before {
  content: ""; width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--green-accent2), #0d8a56);
  box-shadow: 0 4px 14px -4px rgba(34, 198, 125, .7), inset 0 0 0 1px rgba(255,255,255,.15);
}
.sidebar .logo small { display: block; font-weight: 400; font-size: 10.5px; opacity: .65; letter-spacing: .2px; }
.sidebar nav { flex: 1; display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-sm); color: #bcd8cb; font-size: 13.5px; font-weight: 500;
  position: relative; transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.sidebar nav a:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(2px); }
.sidebar nav a.active {
  background: linear-gradient(90deg, rgba(34,198,125,.22), rgba(34,198,125,.05));
  color: #fff; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(34,198,125,.35);
}
.sidebar nav a.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 20px; border-radius: 0 4px 4px 0; background: var(--green-accent2);
}
/* Section headings that split the nav into Selling / Buying / Other. */
.sidebar nav .nav-section {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 4px; padding: 0 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.sidebar nav .nav-section::after {
  content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.12);
}
.sidebar nav .nav-section:first-of-type { margin-top: 8px; }
/* Nested entries sit under their parent item. */
.sidebar nav a.nav-sub { padding-left: 40px; font-size: 12px; margin-top: 2px; }

/* Collapsible group: the label still navigates, the chevron toggles. */
.sidebar nav .nav-group { position: relative; display: flex; flex-direction: column; gap: 3px; }
.sidebar nav .nav-group > a { padding-right: 34px; }
.sidebar nav .nav-toggle {
  position: absolute; top: 6px; right: 5px; width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 6px; cursor: pointer;
  color: #bcd8cb; transition: background .15s var(--ease), color .15s var(--ease);
}
.sidebar nav .nav-toggle:hover { background: rgba(255,255,255,.14); color: #fff; }
.sidebar nav .nav-toggle i { font-size: 11px; transition: transform .18s var(--ease); }
.sidebar nav .nav-group.open .nav-toggle i { transform: rotate(90deg); }
.sidebar nav .nav-submenu { display: none; flex-direction: column; gap: 3px; }
.sidebar nav .nav-group.open .nav-submenu { display: flex; }

.sidebar .foot { border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; font-size: 12.5px; }
.sidebar .foot a { display: flex; gap: 9px; padding: 7px 10px; color: #9fc0af; border-radius: var(--radius-sm); transition: background .15s var(--ease); }
.sidebar .foot a:hover { background: rgba(255,255,255,.06); color: #fff; }

/* ---------- Main ---------- */
/* min-width: 0 lets a wide one-line table scroll inside its panel instead of
   stretching the grid column (and the whole page) past the window. */
main { grid-column: 2; grid-row: 2; padding: 20px 22px 44px; min-width: 0; }

/* ---------- Tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 1200px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  background: var(--card); border-radius: var(--radius); padding: 16px 18px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tile::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 70%); opacity: .06; pointer-events: none;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tile a.tile-link { display: block; }
.tile .tile-top { display: flex; align-items: center; gap: 11px; }
.tile .icon {
  width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
.tile.green { color: var(--green-accent); }
.tile.blue { color: var(--blue); }
.tile.orange { color: var(--orange); }
.tile.red { color: var(--red); }
.tile.purple { color: var(--purple); }
.tile.green .icon { background: linear-gradient(140deg, var(--green-light), #d3f0e0); color: var(--green); }
.tile.blue .icon { background: linear-gradient(140deg, var(--blue-light), #d9e6ff); color: var(--blue); }
.tile.orange .icon { background: linear-gradient(140deg, var(--orange-light), #fbe4bd); color: var(--orange); }
.tile.red .icon { background: linear-gradient(140deg, var(--red-light), #fbd3d1); color: var(--red); }
.tile.purple .icon { background: linear-gradient(140deg, var(--purple-light), #e2d3fa); color: var(--purple); }
.tile .label { color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .1px; }
.tile .value { font-size: 25px; font-weight: 800; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.tile .delta { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.tile .delta.up-good { color: var(--green-accent); }
.tile .delta.up-bad { color: var(--red); }
.tile .stores-list { font-size: 12px; color: var(--muted); }

/* ---------- Panels / grid ---------- */
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: 2fr 1fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } }

.panel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s var(--ease);
}
.panel:hover { box-shadow: var(--shadow-md); }
.panel h2 {
  font-size: 15px; margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-weight: 800; letter-spacing: -.1px;
}
.panel h2 .bar { position: relative; padding-left: 13px; }
.panel h2 .bar::before {
  content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--green-accent2), var(--green));
}
.panel h2 .view-all {
  font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-light);
  padding: 5px 10px; border-radius: 999px; transition: background .15s var(--ease);
}
.panel h2 .view-all:hover { background: #d3f0e0; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
.tabs a { padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; transition: color .15s var(--ease), border-color .15s var(--ease); }
.tabs a:hover { color: var(--green); }
.tabs a.active { color: var(--green); border-color: var(--green-accent); }

/* ---------- Chips ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip {
  border: 1px solid var(--border); background: #fafcfb; border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.chip:hover { background: var(--green-light); border-color: var(--green-accent); transform: translateY(-1px); }

/* ---------- Forms ---------- */
.field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.field-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.field-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.field-row.cols-5 { grid-template-columns: repeat(5, 1fr); }
.field-row.cols-6 { grid-template-columns: repeat(6, 1fr); }
/* The pricing fields want one line each; below these widths they wrap rather
   than squeeze the amounts out of view. */
@media (max-width: 1450px) { .field-row.cols-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1250px) { .field-row.cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .field-row.cols-4, .field-row.cols-5, .field-row.cols-6 { grid-template-columns: repeat(2, 1fr); } }

/* Number plus a unit choice, sitting on one line like any other input. */
.input-with-unit { display: flex; gap: 6px; align-items: stretch; }
.input-with-unit input[type="number"] { min-width: 0; }
.unit-toggle { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.unit-toggle label { display: flex; align-items: center; justify-content: center; min-width: 34px; padding: 0 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; user-select: none; transition: background .15s var(--ease), color .15s var(--ease); }
.unit-toggle label + label { border-left: 1px solid var(--border); }
.unit-toggle label.on { background: var(--green); color: #fff; }
/* The radio itself is the state, not the visual — hidden but still focusable. */
.unit-toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.unit-toggle label:focus-within { box-shadow: inset 0 0 0 2px rgba(23,168,102,.5); }
input, select, textarea {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px; font-family: inherit; width: 100%; background: #fff;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green-accent); box-shadow: 0 0 0 3px rgba(23,168,102,.13); }
label.checkbox { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
label.checkbox input { width: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 7px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; border: none; cursor: pointer;
  transition: all .15s ease;
}
.btn.primary { background: #22c67d; color: #fff; box-shadow: 0 2px 8px rgba(34,198,125,.3); }
.btn.primary:hover { background: #1db870; box-shadow: 0 4px 12px rgba(34,198,125,.4); }
.btn.primary:active { box-shadow: 0 1px 4px rgba(34,198,125,.2); }
.btn.secondary { background: #fff; border: 1px solid #d5ddd9; color: var(--ink); }
.btn.secondary:hover { background: #f9fafb; border-color: #c0cac4; }
.btn.blue { background: #2e5dd7; color: #fff; box-shadow: 0 2px 8px rgba(46,93,215,.3); }
.btn.blue:hover { background: #2649c3; box-shadow: 0 4px 12px rgba(46,93,215,.4); }
.btn.blue:active { box-shadow: 0 1px 4px rgba(46,93,215,.2); }
.btn.danger { background: #e0453f; color: #fff; box-shadow: 0 2px 8px rgba(224,69,63,.3); }
/* Pill with an icon disc: white capsule, dark label, coloured circle on the right. */
.btn-pill {
  --c: #2e5dd7; --c-dark: #2649c3; --c-ink: #fff; --c-shadow: rgba(46,93,215,.18);
  display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto; height: 40px;
  padding: 0 4px 0 18px; border: 0; border-radius: 999px; background: #fff; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink);
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(16,40,30,.1), 0 0 0 1px rgba(16,40,30,.04);
  transition: box-shadow .15s var(--ease), transform .15s var(--ease);
}
.btn-pill.green { --c: #17a866; --c-dark: #0d8a56; --c-shadow: rgba(23,168,102,.22); }
.btn-pill.yellow { --c: #f5b301; --c-dark: #e0a200; --c-ink: #3d2e00; --c-shadow: rgba(245,179,1,.25); }
.btn-pill.red { --c: #e0453f; --c-dark: #c9302a; --c-shadow: rgba(224,69,63,.22); }
.btn-pill .icon {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--c); color: var(--c-ink); font-size: 14px;
  transition: background .15s var(--ease);
}
.btn-pill:hover { box-shadow: 0 5px 14px var(--c-shadow), 0 0 0 1px rgba(16,40,30,.04); transform: translateY(-1px); }
.btn-pill:hover .icon { background: var(--c-dark); }
.btn-pill:active { transform: translateY(0) scale(.98); }
.btn-pill:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
/* The pill's display:inline-flex would otherwise beat the hidden attribute. */
.btn-pill[hidden] { display: none; }
.btn-pill:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 0 0 1px rgba(16,40,30,.08); }
.btn-pill:disabled .icon { background: var(--c); }
/* Compact size for table rows, where three sit side by side. */
.btn-pill.sm { height: 34px; gap: 10px; padding-left: 14px; font-size: 13px; }
.btn-pill.sm .icon { width: 26px; height: 26px; font-size: 12.5px; }
.btn.ghost { background: #fff; border: 1px solid #d5ddd9; color: var(--ink); }
.btn.ghost:hover { background: #f9fafb; border-color: var(--green-accent); color: var(--ink); }
.btn.ghost-white { background: #ffffff; border: 1.5px solid #888888; color: #333333; font-weight: 600; }
.btn.ghost-white:hover { background: #f5f5f5; border-color: #555555; }
.btn.small { padding: 8px 16px; font-size: 13px; }
/* Split button: tinted label on the left, solid icon block on the right. */
.btn-split {
  --c: var(--green-accent); --c-dark: #0d8a56; --c-tint: #e8f8f0; --c-shadow: rgba(23,168,102,.28);
  display: inline-flex; align-items: stretch; flex-shrink: 0; height: 40px;
  border-radius: 7px; overflow: hidden; text-decoration: none; white-space: nowrap;
  background: var(--c-tint); box-shadow: 0 2px 8px var(--c-shadow);
  transition: box-shadow .15s var(--ease), transform .15s var(--ease);
}
.btn-split.blue { --c: #2e5dd7; --c-dark: #2649c3; --c-tint: #eaf1ff; --c-shadow: rgba(46,93,215,.28); }
/* Yellow is too light for white-on-colour, so the label goes deep amber and the icon dark. */
.btn-split.yellow { --c: #f5b301; --c-dark: #e0a200; --c-tint: #fff7de; --c-shadow: rgba(245,179,1,.32); }
.btn-split.yellow .label { color: #946200; }
.btn-split.yellow .icon { color: #3d2e00; }
.btn-split .label {
  display: flex; align-items: center; padding: 0 18px;
  color: var(--c); font-size: 13.5px; font-weight: 700; letter-spacing: .1px;
}
.btn-split .icon {
  display: flex; align-items: center; justify-content: center; width: 40px;
  background: var(--c); color: #fff; font-size: 16px;
  transition: background .15s var(--ease);
}
.btn-split:hover { box-shadow: 0 4px 14px var(--c-shadow); transform: translateY(-1px); }
.btn-split:hover .icon { background: var(--c-dark); }
.btn-split:active { transform: translateY(0) scale(.98); }
.btn-split:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn:active { transform: translateY(0) scale(.98); }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table th { text-align: left; color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 9px 10px; border-bottom: 1px solid var(--border); }
table td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table tr:last-child td { border-bottom: none; }
table tr { transition: background .12s var(--ease); }
table tr:hover td { background: #f7faf8; }
.table-wrap { overflow-x: auto; }
.store-photo {
  width: 40px; height: 40px; border-radius: 8px; background: transparent;
  border: 2px solid #22c67d;
  display: inline-flex; align-items: center; justify-content: center; color: #22c67d; font-size: 20px;
  position: relative;
  overflow: hidden;
}

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.badge.ok, .badge.received, .badge.live { background: var(--green-light); color: var(--green); }
.badge.low, .badge.in_transit, .badge.delayed, .badge.ordered { background: var(--orange-light); color: var(--orange); }
.badge.out, .badge.offline, .badge.overdue, .badge.cancelled { background: var(--red-light); color: var(--red); }
.badge.draft { background: #eef0ee; color: var(--muted); }
.badge.blue, .badge.partially_received { background: var(--blue-light); color: var(--blue); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.live { background: var(--green-accent); box-shadow: 0 0 0 3px rgba(23,168,102,.18); }
.dot.delayed { background: var(--orange); box-shadow: 0 0 0 3px rgba(224,138,30,.18); }
.dot.offline { background: var(--red); box-shadow: 0 0 0 3px rgba(224,69,63,.18); }

/* ---------- Misc ---------- */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.right { text-align: right; }
.center { text-align: center; }
.flex { display: flex; align-items: center; }
.flex.between { justify-content: space-between; }
.flex.gap { gap: 10px; }
.mt { margin-top: 12px; }
.mb { margin-bottom: 12px; }
.callout {
  border-radius: var(--radius-sm); padding: 11px 15px; font-size: 13px; margin-bottom: 12px; border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
}
.callout.error { background: var(--red-light); color: #8a2222; border-color: #f2c4c4; }
.callout.warn { background: var(--orange-light); color: #8a5a10; border-color: #f0d6a8; }
.callout.success { background: var(--green-light); color: #12543a; border-color: #b9e4cd; }
/* One row, however many filters a page has. Fields shrink to fit rather than
   wrapping; below a usable width they wrap again. */
.filters { display: flex; gap: 10px; flex-wrap: nowrap; margin-bottom: 14px; align-items: end; }
.filters .field { margin-bottom: 0; flex: 0 1 150px; min-width: 0; }
/* A screen with a filter per column has too many boxes for one row, so the
   fields lay out as a grid that reflows. The buttons are the last cell of it:
   they follow the final field, on the line the input boxes sit on. */
.filters.cols { display: block; }
.filters.cols .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; align-items: end; }
.filters.cols .field { flex: initial; }
.filters.cols .field.wide { grid-column: span 2; }
.filters.cols .filter-actions { grid-column: span 2; display: flex; gap: 10px; align-items: center; align-self: end; }
@media (max-width: 560px) { .filters.cols .field.wide { grid-column: span 1; } }
.filters .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 1100px) {
  .filters { flex-wrap: wrap; }
  .filters .field { flex-basis: 150px; }
}
.stock-cell { display: flex; flex-direction: column; gap: 2px; }
.stock-cell .n { font-weight: 700; }
.stock-outlets { display: flex; gap: 6px; flex-wrap: wrap; }
.stock-pill {
  border-radius: var(--radius-sm); padding: 3px 9px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--border);
}
.stock-pill.ok { background: var(--green-light); color: var(--green); border-color: transparent; }
.stock-pill.low { background: var(--orange-light); color: var(--orange); border-color: transparent; }
.stock-pill.out { background: var(--red-light); color: var(--red); border-color: transparent; }
.margin-preview { font-size: 12.5px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--green-light); color: var(--green); font-weight: 700; }
.margin-preview.bad { background: var(--red-light); color: var(--red); }
.footer-strip {
  margin-top: 8px; padding: 16px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12.5px; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.footer-strip span { display: flex; align-items: center; gap: 7px; }
.footer-strip i { color: var(--green-accent); font-size: 14px; }
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.page-head h1 { font-size: 21px; margin: 0; font-weight: 800; letter-spacing: -.2px; }
/* An action that belongs to the title sits beside it, and the auto margin
   keeps the row's own button out at the right edge. */
.page-head .head-action { margin-right: auto; }
/* A screen whose list is already narrowed says so next to its heading, in the
   same colours the rows themselves use for those two facts. */
.fixed-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-right: auto; }
.fixed-filters .badge { padding: 6px 12px; font-size: 12px; }
.head-total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.head-total b { font-size: 20px; font-family: "Manrope", "Inter", sans-serif; color: var(--green); font-variant-numeric: tabular-nums; }
.staging-row { display: grid; grid-template-columns: 2.2fr .7fr 1fr .7fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.staging-head { display: grid; grid-template-columns: 2.2fr .7fr 1fr .7fr auto; gap: 8px; font-size: 11.5px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.autocomplete-wrap { position: relative; }
.autocomplete-list {
  position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); z-index: 30; max-height: 260px; overflow-y: auto; display: none;
}
.autocomplete-list.show { display: block; }
.autocomplete-item { padding: 9px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border); }
.autocomplete-item:hover { background: var(--green-light); }
.autocomplete-item .sub { color: var(--muted); font-size: 11.5px; }
.tabsheet { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border);}
.tabsheet button { background:none;border:none;padding:10px 15px;font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent; transition: color .15s var(--ease), border-color .15s var(--ease); }
.tabsheet button:hover { color: var(--green); }
.tabsheet button.active { color: var(--green); border-color: var(--green-accent); }
/* Multi-pick checkbox group — wraps into columns instead of one long list. */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; }
.check-grid .checkbox { margin: 0; }
a.stock-pill { text-decoration: none; color: var(--ink); }
a.stock-pill:hover { border-color: var(--green-accent); color: var(--green); }

/* Searchable dropdown (public/js/searchable-select.js) — every <select> in the
   app. The real <select> is still there, laid invisibly under the text box so
   the browser's "Please select" message points at the right place; these
   styles dress the box and the list that stand in for it. */
.ss { position: relative; }
.flex > .ss { flex: 1 1 260px; }
.ss .ss-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; margin: 0;
}
.ss .ss-input { position: relative; padding-right: 34px; text-overflow: ellipsis; cursor: pointer; background: #fff; }
.ss .ss-input:focus { cursor: text; }
.ss .ss-input::placeholder { color: #9aa6a1; }
.ss .ss-caret {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: #4a5752; cursor: pointer;
  transition: transform .18s var(--ease), color .15s var(--ease);
}
.ss.open .ss-caret { transform: translateY(-50%) rotate(180deg); color: var(--green); }
/* Open, the box and the list read as one piece: the list hangs straight off
   the box's bottom edge (or its top edge when it opens upward). */
.ss.open .ss-input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ss.open.up .ss-input { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.ss .ss-list {
  display: none; position: fixed; z-index: 1000;
  margin: 0; padding: 0; list-style: none; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid #cfd8d3; border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 10px 24px -8px rgba(12, 40, 28, .22);
  scrollbar-width: thin; scrollbar-color: #c3cbc7 transparent;
}
.ss.open.up .ss-list {
  border-top: 1px solid #cfd8d3; border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: 0 -10px 24px -8px rgba(12, 40, 28, .22);
}
.ss .ss-list::-webkit-scrollbar { width: 8px; }
.ss .ss-list::-webkit-scrollbar-thumb { background: #c3cbc7; border-radius: 8px; border: 2px solid #fff; }
.ss.open .ss-list { display: block; }
.ss .ss-option {
  position: relative; padding: 10px 34px 10px 14px; font-size: 13.5px; color: var(--ink); cursor: pointer;
  border-bottom: 1px solid #eef1ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss .ss-option:last-child { border-bottom: 0; }
.ss .ss-option.active { background: #f1f4f2; }
.ss .ss-option.selected { font-weight: 600; color: var(--green); }
.ss .ss-option.selected::after {
  content: "\f26e"; font-family: "bootstrap-icons"; position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%); font-size: 15px; color: var(--green-accent);
}
.ss .ss-option.disabled { color: #aab4af; cursor: not-allowed; }
.ss .ss-group {
  padding: 7px 14px 5px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); background: #f7f9f8; border-bottom: 1px solid #eef1ef;
}
.ss .ss-empty { padding: 12px 14px; font-size: 13px; color: var(--muted); }
.ss.disabled .ss-input { background: #f5f7f6; color: #8a9690; cursor: not-allowed; }
.ss.disabled .ss-caret { color: #b5beba; cursor: not-allowed; }
.ss.invalid .ss-input { border-color: var(--red); box-shadow: 0 0 0 3px rgba(224,69,63,.12); }

/* Search suggestions (public/js/search-suggest.js) — the list under every
   Search box. Fixed to the viewport like the dropdown list, so nothing clips it. */
.sg-list {
  display: none; position: fixed; z-index: 1000; max-height: 380px; overflow-y: auto;
  background: #fff; border: 1px solid #cfd8d3; border-radius: var(--radius-sm);
  box-shadow: 0 14px 32px -10px rgba(12, 40, 28, .28);
  scrollbar-width: thin; scrollbar-color: #c3cbc7 transparent;
}
.sg-list.open { display: block; animation: fadeIn .12s var(--ease); }
.sg-list::-webkit-scrollbar { width: 8px; }
.sg-list::-webkit-scrollbar-thumb { background: #c3cbc7; border-radius: 8px; border: 2px solid #fff; }
.sg-group {
  position: sticky; top: 0; z-index: 1; padding: 7px 14px 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
  background: #f7f9f8; border-bottom: 1px solid #eef1ef;
}
.sg-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 14px; cursor: pointer;
  border-bottom: 1px solid #eef1ef;
}
.sg-item:last-child { border-bottom: 0; }
.sg-item.active { background: #f1f4f2; }
.sg-icon {
  flex: 0 0 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--green-light); color: var(--green); font-size: 14px;
}
.sg-body { min-width: 0; flex: 1; }
.sg-title { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sg-list mark { background: #fff1b8; color: inherit; padding: 0 1px; border-radius: 2px; }
.sg-enter { color: #b5beba; font-size: 13px; opacity: 0; }
.sg-item.active .sg-enter { opacity: 1; }
.sg-all .sg-icon { background: var(--blue-light); color: var(--blue); }
.sg-all .sg-title { color: var(--blue); font-weight: 600; }
.sg-empty { padding: 12px 14px; font-size: 13px; color: var(--muted); }

/* The Settings strip navigates rather than switching panes, so its tabs are
   links — same look, no underline. */
.tabsheet a { padding:10px 15px; font-size:13.5px; font-weight:700; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; transition: color .15s var(--ease), border-color .15s var(--ease); }
.tabsheet a:hover { color: var(--green); }
.tabsheet a.active { color: var(--green); border-color: var(--green-accent); }
.tabpane { display:none; animation: fadeIn .2s var(--ease); }
.tabpane.active { display:block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes floatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tiles .tile { animation: floatIn .35s var(--ease) backwards; }
.tiles .tile:nth-child(1) { animation-delay: .02s; }
.tiles .tile:nth-child(2) { animation-delay: .06s; }
.tiles .tile:nth-child(3) { animation-delay: .10s; }
.tiles .tile:nth-child(4) { animation-delay: .14s; }
.tiles .tile:nth-child(5) { animation-delay: .18s; }

/* ---------- Dialog ---------- */
/* Native <dialog>, styled to match a panel. Used by the store screen's stock
   update box; the backdrop dims the table behind it. */
.dialog {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  width: min(380px, calc(100vw - 32px)); background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.dialog::backdrop { background: rgba(10, 40, 28, .38); }
.dialog h2 { font-size: 15px; font-weight: 800; margin: 0 0 4px; }
.dialog h2 .bar { position: relative; padding-left: 13px; }
.dialog h2 .bar::before {
  content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--green-accent2), var(--green));
}
.dialog p { margin: 0 0 14px; }
/* The old figure is stated, not edited — it reads as a value, not a field. */
.dialog .readout {
  font-size: 18px; font-weight: 800; color: var(--ink);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px;
}

/* The Stock figure doubles as the button that opens that dialog. */
.stock-cell {
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 4px 9px; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.stock-cell:hover { background: var(--green-light); border-color: #b9e4cd; color: var(--green); }
.stock-cell:focus-visible { outline: none; border-color: var(--green-accent); box-shadow: 0 0 0 3px rgba(23,168,102,.13); }
/* The running total in the stock dialog — the figure being committed. */
.dialog .readout.total { color: var(--green); border-color: #b9e4cd; background: var(--green-light); }
/* Reduction that would take the shelf below zero — stated before Save, not after. */
.dialog .warn-text { color: #8a2222; margin: 6px 0 0; font-weight: 600; }
.dialog .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---------- Price control (/seller/price) ---------- */
.price-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 0 12px; margin-bottom: 4px; border-top: 1px solid var(--border);
}
.price-bar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.price-table .price-input {
  width: 96px; text-align: right; padding: 6px 9px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.price-table .price-input.total { background: #f7faf8; }
.price-table .price-input:disabled { background: transparent; border-color: transparent; color: var(--ink); }
/* A row whose price moved: left accent, and the box it moved in tinted. */
.price-table tr.changed td { background: #f3fbf7; }
.price-table tr.changed td:first-child { box-shadow: inset 3px 0 0 var(--green-accent); }
.price-table tr.changed .price-input { border-color: var(--green-accent); }
/* Would be refused on save — said here first, not after. */
.price-table tr.warn .price-input { border-color: var(--red); background: var(--red-light); }
.price-table tr.has-error td { background: #fff6f5; }
.price-table tr.has-error td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.price-table .row-error { margin-top: 4px; font-size: 12px; font-weight: 600; color: #8a2222; }
.price-table .margin-cell { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.price-table .margin-cell.bad { color: var(--red); }
.price-table td .badge { margin-left: 4px; }
/* MRP doubles as the link to the price-history page. */
.history-cell {
  display: inline-block; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 4px 8px; color: var(--ink); white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.history-cell i { font-size: 12px; color: var(--muted); margin-left: 2px; }
.history-cell:hover { background: var(--blue-light); border-color: #c9d9ff; color: var(--blue); }
.history-cell:hover i { color: var(--blue); }
.history-cell:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,111,237,.15); }
/* Price history page: where the price stands now, then every change. */
.price-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; }
.price-summary .stat { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.price-summary .stat.small-stat { font-size: 14px; font-weight: 700; }
.price-summary .stat.good { color: var(--green); }
.price-summary .stat.bad { color: var(--red); }
.history-table td { vertical-align: top; font-variant-numeric: tabular-nums; }
.history-table .nowrap { white-space: nowrap; }
.history-table .same { color: var(--muted); }
.history-table .moved { font-weight: 700; color: var(--ink); }
.history-table .was { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.history-table .was.up { color: var(--green); }
.history-table .was.down { color: var(--red); }

/* ---------- Cart, checkout, orders, customers ---------- */
.cart-btn { position: relative; text-decoration: none; }
.cart-badge {
  position: absolute; top: -2px; right: -1px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #f5b301; color: #3d2e00; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.cart-count-pill {
  display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center;
}
tr.in-cart td { background: #f3fbf7; }
/* The list's Cart cell: Add, or the same − qty + stepper as the Cart page. */
.cart-cell { display: inline-flex; justify-content: center; min-width: 120px; }
.cart-cell form { margin: 0; }
.qty-stepper [data-step="1"] { color: var(--blue); }
.qty-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.qty-stepper .is-remove { color: var(--red); }
.qty-stepper .is-remove:hover { background: var(--red-light); color: var(--red); }

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.checkout-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.checkout-main .panel, .checkout-side .panel { margin-bottom: 0; }
/* The summary stays in view below the sticky top bar while the form scrolls. */
.checkout-side { position: sticky; top: 150px; }
@media (max-width: 1100px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout-side { position: static; }
}
.panel h2 .step {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px;
  border-radius: 50%; background: var(--green-accent); color: #fff; font-size: 12px; font-weight: 800;
}
.co-hint { margin: 2px 0 0; color: var(--green); font-weight: 600; }
.error-list { margin: 6px 0 0 18px; padding: 0; }

.cart-table td { vertical-align: middle; }
.stock-warn { color: #9a5b00; font-weight: 600; margin-top: 2px; }
.qty-stepper {
  display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: #fff;
}
.qty-stepper button {
  width: 30px; height: 32px; border: 0; background: #f4f7f5; color: var(--ink); cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center; transition: background .15s var(--ease);
}
.qty-stepper button:hover { background: var(--green-light); color: var(--green); }
.qty-stepper input {
  width: 48px; border: 0; border-radius: 0; text-align: center; padding: 6px 2px; font-weight: 700;
  -moz-appearance: textfield; appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input:focus { box-shadow: none; }
.cart-remove {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--muted);
  cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.cart-remove:hover { background: var(--red-light); color: var(--red); }

.pay-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pay-option { position: relative; cursor: pointer; }
.pay-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pay-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.pay-card i { font-size: 22px; color: var(--muted); }
.pay-card b { display: block; font-size: 13.5px; }
.pay-card small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.pay-option:hover .pay-card { border-color: #b9e4cd; }
.pay-option input:checked + .pay-card { border-color: var(--green-accent); background: #f3fbf7; box-shadow: 0 0 0 3px rgba(23,168,102,.12); }
.pay-option input:checked + .pay-card i { color: var(--green); }
.pay-option input:focus-visible + .pay-card { outline: 2px solid var(--green-accent); outline-offset: 2px; }

.sum-lines { margin: 0; }
.sum-lines > div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.sum-lines dt { color: var(--muted); }
.sum-lines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sum-lines .save-line dt, .sum-lines .save-line dd { color: var(--green); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 4px; }
.sum-total span { font-weight: 700; }
.sum-total b { font-size: 22px; font-family: "Manrope", "Inter", sans-serif; color: var(--green); font-variant-numeric: tabular-nums; }
.place-order { width: 100%; justify-content: space-between; height: 46px; margin-top: 10px; font-size: 15px; }
.place-order .icon { width: 38px; height: 38px; }
.link-btn {
  display: block; width: 100%; margin-top: 8px; padding: 6px; background: none; border: 0; color: var(--muted);
  font: inherit; font-size: 12.5px; cursor: pointer; text-align: center;
}
.link-btn:hover { color: var(--red); }
.sum-note { margin: 10px 0 0; }
/* Payment: one method for the whole bill, or several that add up to it. */
.pay-mode { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: var(--bg); border-radius: 999px; }
.pay-mode label { position: relative; cursor: pointer; }
.pay-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pay-mode span { display: block; padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pay-mode input:checked + span { background: #fff; color: var(--green); box-shadow: var(--shadow-sm); }
.pay-mode input:focus-visible + span { outline: 2px solid var(--green-accent); outline-offset: 2px; }
.split-hint { margin: 0 0 10px; }
.split-rows { display: grid; gap: 8px; }
.split-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #fff;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.split-row.on { border-color: var(--green-accent); background: #f3fbf7; }
.split-pick { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; cursor: pointer; }
.split-pick input { width: 17px; height: 17px; accent-color: var(--green-accent); cursor: pointer; }
.split-pick i { font-size: 20px; color: var(--muted); }
.split-row.on .split-pick i { color: var(--green); }
.split-pick b { display: block; font-size: 13.5px; }
.split-pick small { display: block; color: var(--muted); font-size: 11.5px; }
.split-amt { display: flex; align-items: center; gap: 6px; }
.split-amt .cur { color: var(--muted); font-size: 12.5px; }
.split-amt input { width: 108px; text-align: right; font-variant-numeric: tabular-nums; }
.split-rest { background: none; border: 0; padding: 4px 6px; color: var(--blue); font: inherit; font-size: 12px; cursor: pointer; }
.split-rest:hover { text-decoration: underline; }
.split-tally {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 13.5px;
}
.split-tally b { font-variant-numeric: tabular-nums; }
.split-left { font-weight: 600; }
.split-left.ok { color: var(--green); }
.split-left.bad { color: var(--red); }
.place-order:disabled { opacity: .55; cursor: not-allowed; }

/* Paid / part paid / unpaid: the same colour everywhere it appears. */
.badge.pay-paid { background: var(--green-light); color: var(--green); }
.badge.pay-partial { background: var(--orange-light); color: #9a5b00; }
.badge.pay-unpaid { background: var(--red-light); color: var(--red); }
.pay-lines { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pay-lines td { padding: 8px 0; border-bottom: 1px dashed var(--border); vertical-align: top; }
.pay-lines td.right { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sum-lines .due-line dt, .sum-lines .due-line dd { color: var(--red); }

.cart-empty { text-align: center; padding: 48px 20px; }
.cart-empty > i { font-size: 44px; color: #b5beba; }
.cart-empty h2 { justify-content: center; margin: 10px 0 4px; }
.cart-empty p { margin: 0 0 16px; }

/* Delivery status: the same colour everywhere it appears. */
.badge.st-new { background: var(--blue-light); color: var(--blue); }
.badge.st-processing { background: var(--purple-light); color: var(--purple); }
.badge.st-pending { background: var(--orange-light); color: #9a5b00; }
.badge.st-delivered { background: var(--green-light); color: var(--green); }
.badge.st-cancelled { background: var(--red-light); color: var(--red); }
.page-head h1 .badge { vertical-align: middle; margin-left: 6px; font-family: "Inter", sans-serif; }
.status-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* On the heading line the tabs carry no row of their own, and the auto margin
   holds them beside the title while the action button stays out at the right. */
.page-head .status-tabs { margin: 0 auto 0 6px; }
.status-tabs a {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--ink);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.status-tabs a span { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg); font-size: 11.5px; text-align: center; }
.status-tabs a:hover { border-color: var(--green-accent); }
.status-tabs a.on { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.status-tabs a.on span { background: rgba(255,255,255,.18); color: #fff; }
.orders-table .nowrap, .panel .nowrap { white-space: nowrap; }
/* The column headings read as one solid band above the rows. Cell corners only
   round when the table stops collapsing its borders, so this table does not. */
.orders-table { border-collapse: separate; border-spacing: 0; }
.orders-table thead th { background: #007d45; color: #fff; border-bottom: none; padding-top: 12px; padding-bottom: 12px; }
.orders-table thead th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.orders-table thead th:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
/* A pincode is read digit by digit, so it gets figures of an even width. */
.orders-table .pin-cell { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Money that has gone back out reads in the same red as money still owed. */
.returned-note { color: var(--red); font-weight: 600; }
.returned-note .link { color: var(--red); text-decoration: underline; }

/* ---------- Returning products on an order ---------- */
.return-table .return-col { width: 86px; text-align: center; }
.return-tick { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 4px; }
.return-tick input { width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; }
/* Being returned on Save: red, name struck — the same language the purchase
   picker already uses for a line on its way out. */
.return-table tr.returning td { background: #fff6f5; }
.return-table tr.returning td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.return-table tr.returning td:nth-child(2) b { color: var(--muted); text-decoration: line-through; }
/* Already gone back: greyed, struck, and not offered again. */
.return-table tr.returned-line td { background: #fbfcfb; color: var(--muted); }
.return-table tr.returned-line td:nth-child(2) b { text-decoration: line-through; font-weight: 600; }
.badge.returned-badge { background: var(--red-light); color: var(--red); }
/* The save bar is hidden until something is ticked, so an order nobody is
   returning from reads as a plain bill. */
.return-bar {
  display: flex; align-items: end; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: #fff6f5; border: 1px solid #f3c9c6;
}
.return-bar .return-note { flex: 1 1 260px; }
.return-bar .return-note label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.return-bar .return-note input { width: 100%; }
.return-bar .return-count { font-size: 13px; color: var(--red); white-space: nowrap; padding-bottom: 10px; }
.return-bar .return-count b { font-size: 15px; }
.returned-products div, .invoiced-products div { margin-bottom: 3px; }
.returned-products div:last-child, .invoiced-products div:last-child { margin-bottom: 0; }

/* ---------- Invoice / tax register ---------- */
.tax-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
.tax-tile {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
.tax-tile span { font-size: 12px; font-weight: 600; color: var(--muted); }
.tax-tile b { font-size: 19px; font-family: "Manrope", "Inter", sans-serif; font-variant-numeric: tabular-nums; }
.tax-tile.total { background: var(--green-light); border-color: #b9e4cd; }
.tax-tile.total b { color: var(--green); }
.tax-tile b.neg { color: var(--red); }
/* The totals line of a register is read as often as the rows above it. */
.orders-table tfoot .sum-row td {
  border-top: 2px solid var(--border); border-bottom: none;
  font-weight: 700; background: #f7faf8;
}
.right-text { text-align: right; }
/* Visible to a screen reader, not on screen: the tick boxes name their row. */
.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;
}
.cust-link { font-weight: 600; color: var(--ink); }
.cust-link:hover { color: var(--green); text-decoration: underline; }

/* An order reads left to right: who it is for and where it is going, the bill
   under them, and a right rail holding the money and what has happened. */
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.order-main, .order-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.order-layout .panel { margin-bottom: 0; }
/* Customer and Delivery share the top row and fall into one column as soon as
   that row stops fitting. */
.order-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }
/* Below this the rail cannot hold a payment form, so everything stacks. */
@media (max-width: 1250px) { .order-layout { grid-template-columns: 1fr; } }
/* The rail is too narrow for paired fields — one field per line in there. */
.order-side .field-row { grid-template-columns: 1fr; }
.order-totals { margin-top: 10px; max-width: 360px; margin-left: auto; }
.order-layout .sum-total { max-width: 360px; margin-left: auto; }
/* The icon sits in a fixed gutter and the text hangs beside it, so a wrapped
   address lines up under itself instead of running back under the icon. */
.kv { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; line-height: 1.55; }
.kv > div, .kv-note { padding-left: 26px; text-indent: -26px; }
/* text-indent inherits, and a badge or icon is its own block container — left
   alone each would drag its own text 26px out of its box. */
.kv > div > *, .kv-note > * { text-indent: 0; }
.kv i, .kv-note i { color: var(--muted); width: 18px; margin-right: 8px; display: inline-block; }
/* The delivery pincode is its own fact, not the last line of the address. */
.kv-pin { display: block; margin-top: 9px; font-size: 15px; font-weight: 700; color: var(--red); }
.kv-pin b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pre-line { white-space: pre-line; }
.status-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 14px 12px; }
.timeline li::before {
  content: ""; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--green-accent);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline .badge { margin-bottom: 3px; }
.addr-cell { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customer-form { max-width: 760px; }

/* ---------- Buyer Add Product (/products/new) ---------- */
.pick-table .pick-col { width: 36px; text-align: center; }
.pick-table .pick-col input { width: 17px; height: 17px; accent-color: var(--green-accent); cursor: pointer; }
.pick-table tr.pick-row { cursor: pointer; }
/* Being added on Save: green. Being taken off on Save: red, name struck. */
.pick-table tr.picked td { background: #f3fbf7; }
.pick-table tr.picked td:first-child { box-shadow: inset 3px 0 0 var(--green-accent); }
.pick-table tr.removing td { background: #fff6f5; }
.pick-table tr.removing td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.pick-table tr.removing .pick-name { color: var(--muted); text-decoration: line-through; }
.pick-table .pick-name { font-weight: 600; color: var(--green); }
.pick-table .badge { margin-left: 6px; }

/* ---------- Expiry products (/seller/expiry) ---------- */
.expiry-toggle .count {
  display: inline-block; min-width: 22px; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--bg); font-size: 12px; font-weight: 700; text-align: center;
}
/* The quick view that is switched on reads as pressed: tinted, ringed. */
.expiry-toggle.on { box-shadow: 0 0 0 2px var(--c), 0 4px 12px var(--c-shadow); }
.btn-pill.yellow.expiry-toggle.on { background: #fff7de; }
.btn-pill.red.expiry-toggle.on { background: #fdecea; }
.expiry-toggle.on .count { background: var(--c); color: var(--c-ink); }
.expiry-note { margin: 0 0 10px; }
.expiry-table .nowrap { white-space: nowrap; }
.expiry-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.expiry-pill.expired { background: var(--red-light); color: #b3261e; }
.expiry-pill.soon { background: var(--orange-light); color: #9a5b00; }
.expiry-pill.fresh { background: var(--green-light); color: var(--green); }
.expiry-pill.nodate { background: var(--bg); color: var(--muted); border: 1px dashed #c9d3ce; }
.expiry-table tr.expired td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.expiry-table tr.soon td:first-child { box-shadow: inset 3px 0 0 var(--orange); }

/* ---------- Wide tables ---------- */
/* Tables with enough columns that squeezing them into the viewport breaks
   values across two lines — a supplier name or a timestamp reads worse wrapped
   than scrolled. Cells keep to one line and the wrapper scrolls sideways
   instead. Applied per table, not to every table, since narrow ones are more
   readable wrapping than scrolling. */
.table-wrap.wide { overflow-x: auto; }
table.nowrap th, table.nowrap td { white-space: nowrap; }
/* Tighter gutters buy back roughly a column's width before any scrolling. */
table.nowrap th, table.nowrap td { padding-left: 8px; padding-right: 8px; }
/* The product name is the one cell worth letting run long, so it gets the
   slack rather than being clipped with the rest. */
table.nowrap td .link { white-space: nowrap; }

/* ---------- Compact panel ---------- */
/* A panel holding a small summary rather than a table: it takes the width its
   content needs instead of the whole page. */
.panel.compact { max-width: 400px; }
/* Chart.js sizes a responsive canvas to its container, so the container — not
   the canvas height attribute — is what keeps a doughnut from filling the row. */
.chart-sm { max-width: 220px; margin: 4px auto 10px; }
@media (max-width: 520px) { .panel.compact { max-width: none; } }