/* ==================================================================
   ukweliPOS — design tokens ported from the kenya-pos prototype
   ================================================================== */
:root {
  /* The flag: black, white, red, green. The shop's own colours are drawn
     from it, so the product looks like what it is — Kenyan. */
  --ke-black:   #101613;
  --ke-red:     #C8102E;
  --ke-green:   #046A38;
  --ke-white:   #FFFFFF;

  --ink:        #101613;
  --ink-soft:   #35403A;
  --canvas:     #EEF1EC;
  --surface:    #FFFFFF;
  --line:       #DFE4DC;
  --line-soft:  #ECEFE9;
  --green:      #046A38;
  --green-dark: #03502B;
  --green-soft: #E4F0E9;
  --amber:      #D68A21;
  --amber-soft: #FBF0DA;
  --red:        #C8102E;
  --red-soft:   #FBE6EA;
  --blue:       #2F6DB4;
  --blue-soft:  #E6EEF7;
  --airtel:     #E5322B;
  --airtel-soft:#FBE6E5;
  --muted:      #8A948C;

  /* One elevation scale. A till is read at arm's length under shop lighting,
     so surfaces need enough lift to look pressable without turning the screen
     into a pile of floating cards. */
  --lift-1: 0 1px 2px rgba(20,32,27,.05), 0 1px 1px rgba(20,32,27,.03);
  --lift-2: 0 2px 6px rgba(20,32,27,.07), 0 1px 2px rgba(20,32,27,.04);
  --lift-3: 0 10px 24px rgba(20,32,27,.12), 0 2px 6px rgba(20,32,27,.06);

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --num:  'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; outline: none; color: inherit; }
a { color: inherit; text-decoration: none; }
*:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-radius: 6px; }
.num { font-family: var(--num); }
.muted { color: var(--muted); }
.hidden { display: none !important; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.spin { animation: spin .9s linear infinite; }
.rise { animation: rise .18s ease-out; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #cdd4cb; border-radius: 9px; }

/* ------------------------------------------------------------------
   App shell
   ------------------------------------------------------------------ */
.app { display: flex; width: 100%; min-height: 100vh; }

/* The shell is exactly one screen tall, so the page never scrolls as a whole:
   the product grid and the cart lines scroll inside themselves instead, and
   the cart's total and Charge button stay on screen however long the
   catalogue gets. This is what the flex/overflow rules below were written for
   — without a real height on .app nothing constrains them and every child
   simply grows. Phones keep the document scroll: the cart is a slide-up sheet
   there, and 100vh lies to you when the address bar hides. */
@media (min-width: 721px) {
  .app  { height: 100vh; overflow: hidden; }
  .main { min-height: 0; }
}
@supports (height: 100dvh) {
  @media (min-width: 721px) { .app { height: 100dvh; } }
}

.rail {
  width: 76px; flex-shrink: 0; background: var(--ink);
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 0; gap: 4px;
  /* Stays put while a long report scrolls past it. */
  position: sticky; top: 0; align-self: flex-start; height: 100vh; z-index: 40;
}
.rail-logo {
  width: 42px; height: 42px; border-radius: 13px; background: transparent;
  display: grid; place-items: center; margin-bottom: 16px; color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}
.rail-item {
  width: 60px; padding: 10px 0; border-radius: 12px; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: rgba(255,255,255,.55); transition: background .15s, color .15s;
}
.rail-item:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); }
.rail-item.on { background: rgba(255,255,255,.10); color: #fff; }
.rail-item span { font-size: 11px; font-weight: 500; }
.rail-badge {
  position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--amber); color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center;
}
.rail-spacer { flex: 1; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: 16px;
  padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.2; }
.topbar .sub { font-size: 12px; color: var(--muted); }
.search {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 42px;
  border-radius: 12px; background: var(--canvas); border: 1px solid var(--line);
}
/* min-width:0 or the input keeps its default ~20-character width and pushes the
   whole top bar wider than a phone screen. */
.search input { flex: 1; min-width: 0; background: transparent; border: none; font-size: 14px; }
.topbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.avatar {
  width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-dark); font-weight: 600; font-size: 13px;
}
.avatar-menu { position: relative; }
.menu {
  position: absolute; right: 0; top: 46px; z-index: 40; min-width: 190px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20,32,27,.14);
}
.menu a, .menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500;
}
.menu a:hover, .menu button:hover { background: var(--canvas); }
.menu .sep { height: 1px; background: var(--line-soft); margin: 5px 0; }

/* ------------------------------------------------------------------
   Sell view
   ------------------------------------------------------------------ */
.sell { flex: 1; display: flex; min-height: 0; }
.sell-left { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.chips {
  display: flex; gap: 8px; padding: 14px 20px; overflow-x: auto; flex-shrink: 0;
  scrollbar-width: none;
  /* Softens the right edge so a half-visible chip reads as "more this way"
     rather than as something broken. */
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  padding: 0 16px; height: 38px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line);
  transition: background .15s, color .15s;
}
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }

.grid-wrap { flex: 1; overflow-y: auto; padding: 0 20px 20px; }
.product-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
/* A category marker across the full width of the grid. */
.grid-head {
  grid-column: 1 / -1; margin: 10px 0 0; font-size: 11px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 10px;
}
/* A rule in the category's own colour, so the eye can find a section while
   scrolling without reading a word of it. */
.grid-head::before {
  content: ''; width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0;
  background: var(--head-colour, var(--muted));
}
.grid-head::after {
  content: ''; flex: 1; height: 1px; background: var(--line-soft);
}
.grid-head:first-child { margin-top: 0; }
.product {
  text-align: left; padding: 14px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--lift-1);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease;
}
.product:hover { box-shadow: var(--lift-3); border-color: #CBD4C9; transform: translateY(-2px); }
.product:active { transform: translateY(0) scale(.985); box-shadow: var(--lift-1); }
/* Out of stock reads as unavailable, not as a rendering fault: the colour
   drains out but the name and price stay legible enough to reorder from. */
.product[disabled] { cursor: not-allowed; box-shadow: none; background: #FAFBF9; }
.product[disabled] .product-shot { filter: grayscale(1); opacity: .45; }
.product[disabled] .product-name,
.product[disabled] .product-price { color: var(--muted); }
/* The picture, or the category's icon standing in for one. Same box either way,
   so a shop that has photographed half its shelves still has a tidy grid. */
.product-shot {
  position: relative; height: 78px; margin: -4px -4px 2px; border-radius: 12px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--canvas); box-shadow: inset 0 0 0 1px rgba(20,32,27,.04);
}
/* contain, not cover: a bottle photographed upright would lose its neck and its
   base to a crop, and an unrecognisable product defeats the point of the photo. */
.product-shot img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; }
/* No photograph: the category's colour carries the tile instead. A flat 8%
   wash looked like a loading state, so it gets a little depth and a glyph big
   enough to recognise across a counter. */
.product-shot-icon {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--tint) 16%, #fff),
    color-mix(in srgb, var(--tint) 7%, #fff));
  color: var(--tint);
}
.product-shot-icon svg { width: 32px; height: 32px; opacity: .9; }
@supports not (color: color-mix(in srgb, red 50%, #fff)) {
  .product-shot-icon { background: var(--canvas); }
}
.product-shot .tag-zero { position: absolute; top: 6px; right: 6px; }
.product-shot img + .tag-zero { box-shadow: 0 1px 4px rgba(20,32,27,.25); }
.tag-zero {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px;
  background: var(--green-soft); color: var(--green-dark);
}
/* Exactly two lines, always. Letting a long name run to three made the tiles
   in a row different heights and the prices stopped lining up. */
.product-name {
  font-weight: 600; font-size: 13.5px; line-height: 1.35; height: 37px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; }
.product-price { font-family: var(--num); font-weight: 700; font-size: 17px; letter-spacing: -.2px; }
.product-stock { font-size: 11px; font-weight: 500; color: var(--muted); }
.product-stock.low { color: var(--amber); }
.product-stock.out { color: var(--red); }

/* Cart -------------------------------------------------------------- */
.cart {
  width: 380px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line);
}
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 58px; flex-shrink: 0; border-bottom: 1px solid var(--line-soft);
}
.cart-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.link-danger { color: var(--red); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.cart-lines { flex: 1; overflow-y: auto; padding: 8px 12px; }
.cart-line {
  display: flex; align-items: center; gap: 8px; padding: 9px 8px;
  border-radius: 10px; transition: background .12s;
}
/* A hairline between rows rather than a full border on each: the list reads
   as one block instead of a stack of boxes. */
.cart-line + .cart-line { box-shadow: inset 0 1px 0 var(--line-soft); }
.cart-line:hover { background: #FAFBF9; }
.cart-line-main { flex: 1; min-width: 0; }
.cart-line-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-line-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper { display: flex; align-items: center; gap: 4px; }
.step-btn { width: 26px; height: 26px; border-radius: 8px; background: var(--canvas); display: grid; place-items: center; }
.step-btn:hover { background: var(--line); }
.qty { width: 24px; text-align: center; font-weight: 600; font-family: var(--num); }
/* Narrower than it was: "Maize Flour (U..." helps nobody, and the widest
   line total a duka rings up still fits in 64px. */
.cart-line-total { width: 64px; text-align: right; font-weight: 700; font-size: 13.5px; font-family: var(--num); }
.cart-empty {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 0 24px; text-align: center;
}
.cart-empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--canvas); display: grid; place-items: center; }
.cart-foot {
  padding: 14px 18px 16px; flex-shrink: 0; background: var(--canvas);
  border-top: 1px solid var(--line);
}
.trow { display: flex; justify-content: space-between; padding: 2px 0; font-size: 13.5px; }
.trow span:first-child { color: var(--ink-soft); }
.trow span:last-child { font-weight: 600; font-family: var(--num); }
.trow.muted span:first-child, .trow.muted span:last-child { color: var(--muted); }
.total-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 0 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); box-shadow: var(--lift-1);
}
.total-row .label { font-weight: 700; font-size: 14px; letter-spacing: .2px; }
.total-row .value {
  font-family: var(--num); font-weight: 700; font-size: 28px; line-height: 1;
  color: var(--green-dark); letter-spacing: -.5px;
}
.cart-actions { display: flex; gap: 10px; }
.cart-actions .btn { height: 56px; border-radius: 16px; }
.discount-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.discount-row input {
  width: 96px; height: 32px; padding: 0 8px; border-radius: 9px; font-family: var(--num);
  background: var(--canvas); border: 1px solid var(--line); font-size: 13px;
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.btn {
  height: 44px; padding: 0 18px; border-radius: 14px; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--canvas); color: var(--ink); transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(.97); }
.btn:active { transform: scale(.98); }
.btn[disabled] { background: var(--line); color: #fff; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--green); color: #fff; }
.btn-dark    { background: var(--ink); color: #fff; }
.btn-amber   { background: var(--amber-soft); color: var(--amber); }
.btn-danger  { background: var(--red-soft); color: var(--red); }
.btn-blue    { background: var(--blue); color: #fff; }
.btn-ghost   { background: transparent; border: 1px solid var(--line); }
.btn-lg      { height: 52px; border-radius: 16px; font-size: 15px; font-weight: 700; }
.btn-block   { width: 100%; }
.btn-charge  {
  flex: 1; height: 56px; border-radius: 16px; font-size: 15.5px; font-weight: 700;
  background: var(--green); color: #fff; box-shadow: 0 4px 12px rgba(4,106,56,.28);
}
.btn-charge:hover:not([disabled]) { background: var(--green-dark); box-shadow: 0 6px 16px rgba(4,106,56,.34); }
.btn-charge[disabled] { box-shadow: none; }
.btn-sm      { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; }

/* ------------------------------------------------------------------
   Pages, cards, tables, forms
   ------------------------------------------------------------------ */
.page { flex: 1; overflow-y: auto; padding: 24px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.page-head h2 { font-size: 17px; font-weight: 700; margin: 0; }
.page-head .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat { padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lift-1); }
.stat-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; }
.stat-value { font-family: var(--num); font-weight: 700; font-size: 20px; }
.stat-label { font-size: 12.5px; color: var(--muted); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--lift-1); }
.card-pad { padding: 20px; }
.card-head { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); font-weight: 700; font-size: 14.5px; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl thead tr { background: var(--canvas); color: var(--ink-soft); }
table.tbl th { text-align: left; font-weight: 600; padding: 12px 16px; }
table.tbl td { padding: 10px 16px; border-top: 1px solid var(--line-soft); }
table.tbl tbody tr:hover { background: #FAFBF9; }
td.r, th.r { text-align: right; }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.input {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 12px;
  background: var(--canvas); border: 1px solid var(--line); font-size: 14px; color: var(--ink);
}
.input.num { font-family: var(--num); font-size: 16px; }
.input:focus { border-color: var(--green); background: var(--surface); }
select.input { appearance: none; background-image: none; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.pill-green { background: var(--green-soft); color: var(--green-dark); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-red   { background: var(--red-soft);   color: var(--red); }
.pill-blue  { background: var(--blue-soft);  color: var(--blue); }
.pill-grey  { background: var(--canvas);     color: var(--ink-soft); }

.empty { text-align: center; padding: 72px 20px; color: var(--muted); }

.flash {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  margin-bottom: 16px; font-weight: 600; font-size: 13.5px;
}
.flash-ok  { background: var(--green-soft); color: var(--green-dark); }
.flash-err { background: var(--red-soft);   color: var(--red); }

.list-row {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 12px 16px;
  text-align: left; border-top: 1px solid var(--line-soft);
}
.list-row:hover { background: #FAFBF9; }
.list-row:first-child { border-top: none; }
.row-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--green-soft); }

.held-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.held-card { padding: 16px; border-radius: 16px; text-align: left; background: var(--surface); border: 1px solid var(--line); }
.held-card:active { transform: scale(.98); }

/* ------------------------------------------------------------------
   Modals
   ------------------------------------------------------------------ */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(16,22,19,.45); backdrop-filter: blur(2px);
}
.modal { width: 460px; max-width: 94vw; border-radius: 24px; overflow: hidden; background: var(--surface); }
.modal-sm { width: 400px; }
.modal-lg { width: 560px; }
.modal-head-dark { padding: 20px 24px 16px; background: var(--ink); color: #fff; }
.modal-head-dark .row { display: flex; justify-content: space-between; align-items: center; }
.modal-head-dark .title { font-weight: 700; font-size: 16px; }
.modal-head-dark .due-label { font-size: 12px; color: rgba(255,255,255,.6); }
.modal-head-dark .due-value { font-family: var(--num); font-weight: 700; font-size: 32px; line-height: 1; }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--line); font-weight: 700;
}
.modal-body { padding: 20px; }
.modal-foot { display: flex; gap: 10px; padding: 16px; border-top: 1px solid var(--line); }

.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.method {
  height: 72px; border-radius: 16px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; font-weight: 600; font-size: 13.5px;
}
.method:active { transform: scale(.97); }
.m-mpesa  { background: var(--green-soft);  color: var(--green);  border: 1px solid rgba(4,106,56,.14); }
.m-cash   { background: var(--canvas);      color: var(--ink);    border: 1px solid rgba(16,22,19,.10); }
.m-card   { background: var(--blue-soft);   color: var(--blue);   border: 1px solid rgba(47,109,180,.14); }
.m-airtel { background: var(--airtel-soft); color: var(--airtel); border: 1px solid rgba(229,50,43,.14); }

.tender { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 12px; border-radius: 12px; background: var(--green-soft); }
.tender .name { font-weight: 600; font-size: 13.5px; }
.tender .ref { font-size: 12px; color: var(--ink-soft); }
.tender .amt { font-weight: 700; font-family: var(--num); }

.wait { padding: 32px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.spinner { width: 40px; height: 40px; border-radius: 999px; border: 3px solid var(--green-soft); border-top-color: var(--green); }
.tick { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; background: var(--green-soft); }
.back-btn { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; display: inline-flex; gap: 4px; }
.quick-notes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.note-btn { padding: 0 12px; height: 36px; border-radius: 10px; font-size: 13px; font-weight: 600; background: var(--canvas); font-family: var(--num); }
.note-btn.exact { background: var(--green-soft); color: var(--green-dark); font-family: var(--font); }
.change-box { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-radius: 12px; background: var(--canvas); margin-bottom: 12px; }
.change-box .value { font-family: var(--num); font-weight: 700; font-size: 18px; color: var(--green-dark); }

/* ------------------------------------------------------------------
   Receipt
   ------------------------------------------------------------------ */
.receipt { padding: 20px 24px; overflow-y: auto; max-height: 68vh; }
.receipt-head { text-align: center; margin-bottom: 12px; }
.receipt-head .biz { font-weight: 700; font-size: 17px; }
.receipt-head .line { font-size: 12px; color: var(--ink-soft); }
.receipt-badge {
  text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 6px 0;
  border-radius: 9px; background: var(--green-soft); color: var(--green-dark); margin-bottom: 12px;
}
.receipt-badge.void { background: var(--red-soft); color: var(--red); }
.meta { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.meta .k { color: var(--ink-soft); }
.meta .v { font-weight: 600; }
.meta .v.num { font-family: var(--num); }
.dash { border-top: 1px dashed var(--line); margin: 12px 0; }
.r-item { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; }
.r-item .qty-line { color: var(--muted); }
.r-total { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 4px; }
.r-total .label { font-weight: 700; font-size: 15px; }
.r-total .value { font-weight: 700; font-size: 19px; font-family: var(--num); }
.qr { width: 96px; height: 96px; margin: 16px auto; display: grid; place-items: center; border-radius: 9px; background: #111; color: #fff; font-size: 9px; text-align: center; }
.receipt-foot { text-align: center; font-size: 11px; color: var(--muted); line-height: 1.6; }

/* ------------------------------------------------------------------
   Auth / install pages
   ------------------------------------------------------------------ */
.auth-body {
  display: grid; place-items: center; min-height: 100vh; padding: 20px;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(4,106,56,.10), transparent 60%),
    radial-gradient(900px 460px at 50% 110%, rgba(200,16,46,.06), transparent 60%),
    var(--canvas);
}
.auth-card {
  width: 100%; max-width: 380px; padding: 32px; border-radius: 24px; background: var(--surface);
  box-shadow: 0 18px 48px rgba(16,22,19,.13), 0 2px 6px rgba(16,22,19,.06);
}
.auth-logo {
  width: 52px; height: 52px; border-radius: 15px; background: var(--green); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 17px; margin-bottom: 18px;
}
.auth-stack { width: 100%; max-width: 380px; }
/* The shop's own logo, which may be a wide wordmark rather than a square mark. */
.auth-brand {
  display: flex; justify-content: center; align-items: center;
  min-height: 64px; margin-bottom: 18px;
}
.auth-brand img { max-width: 200px; max-height: 64px; display: block; }
.auth-copy {
  text-align: center; font-size: 12px; color: var(--muted);
  margin: 18px 0 0; line-height: 1.6;
}
.auth-card h1 { font-size: 20px; margin: 0 0 6px; }
.auth-sub { font-size: 13.5px; color: var(--muted); margin: 0 0 20px; line-height: 1.6; }
.auth-err { background: var(--red-soft); color: var(--red); padding: 11px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; }
.install-list { font-size: 13.5px; line-height: 2; padding-left: 18px; margin: 0 0 18px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 14px; text-align: center; }

/* ------------------------------------------------------------------
   Print — thermal receipt only
   ------------------------------------------------------------------ */
@media print {
  /* Hide the furniture, never the content — printing the app shell used to
     blank the page because .page itself was hidden. */
  .no-print, .rail, .topbar, .sidenav, .cart, .toolbar, .datebar, .chips { display: none !important; }
  html, body { background: #fff; height: auto; }
  .app { display: block; min-height: 0; }
  .main { display: block; }
  .page { display: block !important; padding: 0 !important; overflow: visible !important; }
  .card, .panel { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
  .overlay { position: static; background: none; padding: 0; backdrop-filter: none; display: block; }
  .modal { width: auto; max-width: 100%; border-radius: 0; box-shadow: none; }
  .receipt { max-height: none; overflow: visible; padding: 0; }
  .qr { background: #111 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a[href]::after { content: none !important; }
}

/* Phone and tablet layouts live at the end of this file. */

/* ==================================================================
   Back office — sub-nav, filters, dashboard, charts
   ================================================================== */
/* Everything right of the rail and under the header. */
.work { flex: 1; display: flex; min-width: 0; min-height: 0; }
/* Flex items default to min-width:auto, which would let the till's product grid
   and cart push the page wider than the screen. */
.work > * { min-width: 0; }

.sidenav {
  width: 208px; flex-shrink: 0; padding: 14px 10px 24px;
  background: var(--surface); border-right: 1px solid var(--line);
  position: sticky; top: 64px; align-self: flex-start;
  /* Full height whatever the page below it does, so the column reads as a wall
     rather than a floating card. */
  height: calc(100vh - 64px); overflow-y: auto;
}
.sidenav-group {
  font-size: 10.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--muted); padding: 14px 10px 6px;
}
.sidenav-group:first-child { padding-top: 2px; }
.sidenav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 1px;
}
.sidenav-item svg { flex-shrink: 0; opacity: .65; }
.sidenav-item:hover { background: var(--canvas); color: var(--ink); }
.sidenav-item.on { background: var(--green-soft); color: var(--green-dark); }
.sidenav-item.on svg { opacity: 1; }

.datebar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.datebar-form { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.input-sm { height: 36px; width: auto; padding: 0 10px; font-size: 13px; border-radius: 10px; }

/* KPI row ----------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi {
  padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.kpi-label { font-size: 12.5px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi-value { font-family: var(--num); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.4px; }
.kpi-foot { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
a.topbar-today { color: inherit; text-decoration: none; }
a.topbar-today:hover { opacity: .85; }
.kpi-up   { color: var(--green-dark); font-weight: 600; }
.kpi-down { color: var(--red); font-weight: 600; }
.kpi-accent { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 4px; }

/* Panels ------------------------------------------------------------ */
.panels { display: grid; gap: 18px; margin-bottom: 18px; align-items: start; }
.panels-2 { grid-template-columns: 2fr 1fr; }
.panels-3 { grid-template-columns: repeat(3, 1fr); }
.panels-half { grid-template-columns: 1fr 1fr; }
@media (max-width: 1180px) { .panels-2, .panels-3, .panels-half { grid-template-columns: 1fr; } }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--lift-1);
  display: flex; flex-direction: column;      /* so a foot sits on the card, not below it */
}
.panel-body { flex: 1; min-height: 0; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
}
.panel-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.panel-head .sub { font-size: 12px; color: var(--muted); font-weight: 500; }
.panel-body { padding: 18px; }
.panel-body.tight { padding: 10px 18px 16px; }
/* A plain-language reading of the chart above it, for owners who do not read charts. */
.panel-foot {
  padding: 12px 18px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--muted); line-height: 1.6;
}

/* Charts ------------------------------------------------------------ */
.chart { width: 100%; display: block; overflow: visible; }
.chart-axis { font-size: 10px; fill: var(--muted); font-family: var(--num); }
.chart-grid { stroke: var(--line-soft); stroke-width: 1; }
/* Break-even. Without it a profit chart with a bad day in it reads as nonsense. */
.chart-zero { stroke: var(--ink-soft); stroke-width: 1.5; }
.chart-bar-loss { fill: var(--red); }
.chart-bar-loss:hover { fill: var(--red); opacity: .85; }
.chart-bar { fill: var(--green); transition: fill .15s; }
.chart-bar:hover { fill: var(--green-dark); }
.chart-bar-soft { fill: var(--green-soft); }
.chart-line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: rgba(4,106,56,.10); }
.chart-dot { fill: var(--surface); stroke: var(--green); stroke-width: 2; }
.chart-empty { display: grid; place-items: center; height: 180px; color: var(--muted); font-size: 13px; }

.legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; min-width: 150px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-value { font-family: var(--num); font-weight: 600; margin-left: auto; }

/* Ranked list (top products, staff, etc.) --------------------------- */
.rank { display: flex; flex-direction: column; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.rank-row:first-child { border-top: none; }
.rank-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-sub { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.rank-value { font-family: var(--num); font-weight: 700; font-size: 13.5px; }
.rank-bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-top: 5px; }
.rank-bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.rank-index {
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  background: var(--canvas); font-family: var(--num); font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
}

/* Module hub -------------------------------------------------------- */
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hub-card {
  display: block; padding: 18px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); transition: box-shadow .15s, transform .08s;
}
.hub-card:hover { box-shadow: 0 6px 18px rgba(20,32,27,.08); }
.hub-card:active { transform: scale(.99); }
.hub-title { font-weight: 700; font-size: 14.5px; margin: 10px 0 4px; }
.hub-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* Two-column detail layout ------------------------------------------ */
.split { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
/* The same split the other way round, for pages whose list is the main event
   and whose controls sit beside it. */
.split.split-rev { grid-template-columns: 1fr 340px; }
@media (max-width: 980px) { .split, .split.split-rev { grid-template-columns: 1fr; } }

/* Misc --------------------------------------------------------------- */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .grow { flex: 1; }
.search-inline {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; min-width: 220px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
}
.search-inline input { flex: 1; border: none; background: transparent; font-size: 13.5px; }

.money-pos { color: var(--green-dark); }
.money-neg { color: var(--red); }
.tbl-sm td, .tbl-sm th { padding: 8px 12px; font-size: 13px; }
tfoot td { font-weight: 700; border-top: 2px solid var(--line) !important; background: var(--canvas); }

.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
}
.tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.report-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.report-card {
  display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.report-card:hover { box-shadow: 0 5px 16px rgba(20,32,27,.07); }
/* Inline spans ignored the margin and ran the title into its description. */
.report-card .t { display: block; font-weight: 650; font-size: 13.5px; }
.report-card .d { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }

/* Choosing a product picture: what it looks like now, beside the file input. */
.img-pick { display: flex; gap: 14px; align-items: flex-start; }
.img-pick-shot {
  width: 72px; height: 72px; flex-shrink: 0; border-radius: 16px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--canvas); border: 1px solid var(--line);
}
.img-pick-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.line-input {
  width: 78px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--canvas); font-family: var(--num); font-size: 13.5px; text-align: right;
}
.pick-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.pick-row:first-child { border-top: none; }
.pick-row:hover { background: var(--canvas); }

.cust-strip {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft); background: var(--green-soft);
}
.cust-strip .who { font-weight: 650; font-size: 13.5px; color: var(--green-dark); }
.cust-strip .meta { font-size: 12px; color: var(--ink-soft); }

@media print {
  .panel, .card { border-color: #ddd; box-shadow: none; break-inside: avoid; }
  table.tbl { font-size: 10.5px; }
  table.tbl thead { display: table-header-group; }
}

/* Alert bell -------------------------------------------------------- */
.bell { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; }
.bell:hover { background: var(--canvas); }
.bell-count {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 9.5px; font-weight: 700;
  font-style: normal; display: grid; place-items: center;
}

/* Offline banner ----------------------------------------------------- */
.offline-bar {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 12px; max-width: 92vw;
  padding: 10px 16px; border-radius: 14px 14px 0 0; font-size: 13px; font-weight: 600;
  background: var(--ink); color: #fff; box-shadow: 0 -4px 18px rgba(20,32,27,.18);
}
.offline-bar.is-offline { background: var(--amber); color: #fff; }
.offline-bar.has-error  { background: var(--red); color: #fff; }
.offline-bar button {
  font: inherit; font-weight: 700; padding: 5px 12px; border-radius: 9px;
  background: rgba(255,255,255,.18); color: #fff;
}

/* Colour swatches (categories) --------------------------------------- */
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  position: relative; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch span { width: 12px; height: 12px; border-radius: 999px; background: transparent; }
.swatch input:checked + span { background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }

/* Choosing the icon a category's unphotographed products wear. */
.icon-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-pick { position: relative; cursor: pointer; }
.icon-pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.icon-pick span {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--canvas); border: 1px solid var(--line); color: var(--muted);
}
.icon-pick:hover span { color: var(--ink); }
.icon-pick input:checked + span {
  background: var(--green-soft); border-color: var(--green); color: var(--green-dark);
}

/* Scanned item feedback ---------------------------------------------- */
.product.scanned {
  box-shadow: 0 0 0 2px var(--green), 0 6px 18px rgba(4,106,56,.22);
  transform: scale(1.02);
}

/* ==================================================================
   Kenyan identity
   The flag's bands — black, white, red, white, green — as a hairline the
   app wears along its top edge, on the sign-in card and under the mark.
   ================================================================== */
.ke-edge {
  height: 3px; flex-shrink: 0;
  background: linear-gradient(to right,
    var(--ke-black) 0 32.5%, var(--ke-white) 32.5% 34%,
    var(--ke-red) 34% 66%, var(--ke-white) 66% 67.5%,
    var(--ke-green) 67.5% 100%);
}
.ke-edge-tall { height: 6px; }

/* The flag proper, for the sign-in card and the "made in Kenya" chip. */
.ke-bands {
  background: linear-gradient(to bottom,
    var(--ke-black) 0 33.33%, var(--ke-white) 33.33% 38%, var(--ke-red) 38% 62%,
    var(--ke-white) 62% 66.66%, var(--ke-green) 66.66% 100%);
}
.ke-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); font-weight: 500;
}
.ke-chip i {
  width: 18px; height: 12px; border-radius: 2px; display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* The mark: a Maasai-shield tile with the flag under it. */
.rail-logo { position: relative; overflow: hidden; }

/* No position here: the sticky rule above already makes the header a containing
   block, and `relative` used to quietly cancel it. */
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
  background: linear-gradient(to right,
    var(--ke-black) 0 32.5%, var(--ke-white) 32.5% 34%,
    var(--ke-red) 34% 66%, var(--ke-white) 66% 67.5%,
    var(--ke-green) 67.5% 100%);
}
.auth-card { position: relative; overflow: hidden; }
.auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(to right,
    var(--ke-black) 0 32.5%, var(--ke-white) 32.5% 34%,
    var(--ke-red) 34% 66%, var(--ke-white) 66% 67.5%,
    var(--ke-green) 67.5% 100%);
}

/* ==================================================================
   The phone till
   A duka is often run from the owner's phone. Below 720px the rail
   becomes a thumb-reachable tab bar, the cart becomes a sheet that
   slides up over the products, and every dialog goes full width.
   ================================================================== */

/* Pieces that only exist on a phone, hidden by default. */
.tabbar,
.cartbar,
.cart-handle,
.cart-backdrop { display: none; }

@media (max-width: 720px) {

  /* ---- shell ---- */
  .app { flex-direction: column; }
  html, body { overflow-x: hidden; }
  .main, .sell, .sell-left { min-width: 0; max-width: 100%; }
  .rail { display: none; }
  .main { min-height: 100vh; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* Two rows: who and where on top, the search under it at full width,
     because a phone has no room for both on one line. */
  .topbar {
    height: auto; min-height: 54px; padding: 8px 12px; gap: 10px; flex-wrap: wrap;
  }
  .topbar-brand { flex: 1 1 auto; min-width: 0; }
  .topbar h1 {
    font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar .sub {
    font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-right { flex: 0 0 auto; }
  .topbar-search {
    flex: 0 0 100%; order: 3; margin: 2px 0 4px !important; max-width: none !important; min-width: 0;
  }
  .topbar-right { gap: 8px; min-width: 0; }
  .topbar { flex-wrap: wrap; padding: 0 12px; height: auto; min-height: 64px; }
  /* On a phone only today's profit survives: an owner running the till from
     their hand still wants to know how the day is going, and the sale count is
     the part they can do without. */
  .topbar-today > div:first-child, .topbar-today .today-count { display: none; }
  .topbar-today { font-size: 12px; }
  /* No room for a column beside the page, so the menu goes back to a strip that
     scrolls sideways directly under the header. */
  .work { display: block; }
  .sidenav {
    display: flex; gap: 4px; width: auto; height: auto; overflow-x: auto; overflow-y: hidden;
    padding: 0 10px; border-right: none; border-bottom: 1px solid var(--line);
    position: sticky; top: 64px; z-index: 20;
  }
  .sidenav-group { display: none; }
  .sidenav-item {
    white-space: nowrap; padding: 11px 10px 9px; font-size: 12.5px; border-radius: 0;
    border-bottom: 2px solid transparent; margin: 0;
  }
  .sidenav-item.on { background: none; border-bottom-color: var(--green); }

  /* ---- the tab bar, where a thumb can reach it ---- */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 14px rgba(16,22,19,.06);
  }
  .tabbar a, .tabbar button {
    flex: 1; min-height: 58px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    font-size: 10.5px; font-weight: 600; color: var(--muted);
    background: none; border: none; position: relative;
  }
  .tabbar .on { color: var(--green-dark); }
  .tabbar .on svg { stroke: var(--green); }
  .tabbar .tab-badge {
    position: absolute; top: 6px; left: 50%; margin-left: 4px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--amber); color: #fff; font-size: 9.5px; font-weight: 700;
    font-style: normal; display: grid; place-items: center;
  }
  .tabbar .tab-badge.urgent { background: var(--red); }

  /* ---- products ---- */
  .sell { flex-direction: column; }
  .chips { padding: 10px 12px; gap: 7px; }
  .chip { height: 36px; padding: 0 14px; }
  .grid-wrap { padding: 0 12px 12px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product { padding: 12px; border-radius: 14px; min-height: 112px; }
  .product-name { font-size: 13px; min-height: 34px; line-height: 1.3; }
  .product-price { font-size: 15px; }
  /* Two tiles across on a phone, so the picture can be a little shorter. */
  .product-shot { height: 68px; margin: -2px -2px 2px; }

  /* Bigger type in fields stops the phone zooming in on focus. */
  .input, .search input, .line-input, input, select, textarea { font-size: 16px; }
  .input { height: 48px; }
  .search { height: 46px; }
  .btn { min-height: 46px; }
  .btn-sm { min-height: 38px; }

  /* ---- the cart, as a sheet over the products ---- */
  .cart-backdrop {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(16,22,19,.45); opacity: 0; pointer-events: none;
    transition: opacity .2s ease-out;
  }
  .cart-backdrop.on { opacity: 1; pointer-events: auto; }

  .cart {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 66;
    width: 100%; max-height: 86vh; border: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -14px 44px rgba(16,22,19,.26);
    transform: translateY(105%);
    transition: transform .24s cubic-bezier(.22,.8,.3,1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cart.open { transform: none; }
  .cart-lines { max-height: 40vh; }

  .cart-handle {
    display: block; width: 100%; padding: 10px 0 4px; background: none; border: none;
  }
  .cart-handle i {
    display: block; width: 40px; height: 4px; border-radius: 999px;
    background: var(--line); margin: 0 auto;
  }
  .cart-line { padding: 12px 8px; }
  .step-btn { width: 34px; height: 34px; }
  .cart-line-total { width: 82px; }

  /* ---- the bar that is always in reach ---- */
  .cartbar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 0; right: 0; z-index: 64;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    padding: 8px 12px; background: var(--surface);
    border-top: 1px solid var(--line);
    transform: translateY(130%); transition: transform .2s ease-out;
  }
  .cartbar.on { transform: none; }

  /* A sale in progress owns the screen: the tab bar and the running-total
     bar step aside so the sheet's own buttons are never covered. */
  body.cart-open .tabbar,
  body.cart-open .cartbar,
  body.sheet-open .tabbar,
  body.sheet-open .cartbar { display: none; }
  .cartbar-open {
    flex: 1; display: flex; flex-direction: column; align-items: flex-start;
    background: none; border: none; padding: 4px 2px; text-align: left;
  }
  .cartbar-open .n { font-size: 11.5px; color: var(--muted); font-weight: 600; }
  .cartbar-open .amt { font-family: var(--num); font-size: 19px; font-weight: 700; color: var(--green-dark); }
  .cartbar .btn { flex: 0 0 auto; padding: 0 20px; }

  /* ---- dialogs become sheets ---- */
  .overlay { align-items: flex-end; padding: 0; }
  .modal, .modal-lg, .modal-sm {
    width: 100%; max-width: 100%; border-radius: 20px 20px 0 0;
    max-height: 94vh; overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .method-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .method { height: 78px; }
  .note-btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .quick-notes { gap: 8px; }

  /* ---- back office on a small screen ---- */
  .page { padding: 14px 12px 20px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px; }
  .kpi-value { font-size: 20px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .panels { gap: 12px; }
  .toolbar { gap: 8px; }
  .toolbar .grow { flex-basis: 100%; height: 0; }
  .card { overflow-x: auto; }          /* wide tables scroll rather than squash */
  .tbl { min-width: 560px; }
  .tbl-sm { min-width: 480px; }
  .split { grid-template-columns: 1fr; }
  .datebar-form { margin-left: 0; width: 100%; }
  .datebar-form .input { flex: 1; }
  .receipt { max-height: none; }
}

/* Between a phone and a desktop: keep the side cart, just narrower. */
@media (min-width: 721px) and (max-width: 1100px) {
  .cart { width: 320px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(134px, 1fr)); }
}

/* A phone held sideways is short: let the sheet use the height it has. */
@media (max-width: 900px) and (orientation: landscape) {
  .cart { max-height: 92vh; }
  .cart-lines { max-height: 34vh; }
}