/* Daim Traders Bookkeeper — every style in the app. */
/* ============================================================
   Theme tokens
   ============================================================ */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI",
          system-ui, Roboto, "Helvetica Neue", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
             "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;

  --r-lg: 26px; --r-md: 18px; --r-sm: 13px; --r-pill: 999px;
  --ease: cubic-bezier(.22,.9,.28,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
  --blur: 26px;
}

html[data-theme="light"] {
  --bg: #EDF0F4;
  --blob-1: #A9C4FF; --blob-2: #FFD2A8; --blob-3: #B6EFD8; --blob-4: #E2C6FF;
  --blob-alpha: .55;

  --glass: rgba(255,255,255,.52);
  --glass-2: rgba(255,255,255,.72);
  --glass-solid: rgba(255,255,255,.92);
  --stroke: rgba(255,255,255,.75);
  --edge: rgba(16,22,30,.09);
  --shadow: 0 1px 2px rgba(16,22,30,.05), 0 8px 26px rgba(16,22,30,.07);
  --shadow-lg: 0 20px 60px rgba(16,22,30,.20);

  --ink: #12171C;
  --muted: #5A6572;
  --faint: rgba(18,23,28,.07);
  --accent: #8A6524;
  --accent-soft: rgba(138,101,36,.14);
  --green: #16714C;
  --green-soft: rgba(22,113,76,.13);
  --red: #B3392A;
  --red-soft: rgba(179,57,42,.11);
  --field: rgba(255,255,255,.66);

  --ios-blue:#0A7AFF; --ios-green:#20A45C; --ios-red:#E0453A; --ios-orange:#E8820C;
  --ios-purple:#8148D8; --ios-teal:#149EA8; --ios-pink:#D6337A; --ios-indigo:#4A4ACF;
}

html[data-theme="dark"] {
  --bg: #0B0E11;
  --blob-1: #1B3560; --blob-2: #40301A; --blob-3: #123028; --blob-4: #2A1E42;
  --blob-alpha: .85;

  --glass: rgba(255,255,255,.065);
  --glass-2: rgba(255,255,255,.10);
  --glass-solid: rgba(28,32,38,.90);
  --stroke: rgba(255,255,255,.13);
  --edge: rgba(255,255,255,.07);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.42);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.62);

  --ink: #E9EDF1;
  --muted: #98A2AD;
  --faint: rgba(255,255,255,.06);
  --accent: #D5AC66;
  --accent-soft: rgba(213,172,102,.16);
  --green: #4FC08D;
  --green-soft: rgba(79,192,141,.15);
  --red: #FF7A66;
  --red-soft: rgba(255,122,102,.14);
  --field: rgba(255,255,255,.07);

  --ios-blue:#4C9DFF; --ios-green:#48CC85; --ios-red:#FF6F60; --ios-orange:#FFA53D;
  --ios-purple:#B18CF0; --ios-teal:#4FC9D4; --ios-pink:#FF6FA8; --ios-indigo:#8A8AF5;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { width: 100%; max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; }
/* Nothing may be wider than the screen. */
#app, main, section, .panel, .tablewrap, .grid, .dash, .two { max-width: 100%; min-width: 0; }
@supports not (overflow: clip) { html { overflow-x: hidden; } }
img, svg, table, pre { max-width: 100%; }

body {
  margin: 0; min-height: 100dvh;
  background: var(--bg); color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background .5s var(--ease), color .5s var(--ease);
}

/* The colour field the glass refracts. Fixed, blurred, never interactive. */
#field { position: fixed; inset: -25%; z-index: -1; pointer-events: none; opacity: var(--blob-alpha);
         transition: opacity .6s var(--ease); }
#field i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); }
#field i:nth-child(1) { width: 46vmax; height: 46vmax; background: var(--blob-1); top: 2%;  left: 4%;  animation: drift1 34s ease-in-out infinite; }
#field i:nth-child(2) { width: 40vmax; height: 40vmax; background: var(--blob-2); top: 44%; left: 56%; animation: drift2 41s ease-in-out infinite; }
#field i:nth-child(3) { width: 38vmax; height: 38vmax; background: var(--blob-3); top: 62%; left: 10%; animation: drift3 37s ease-in-out infinite; }
#field i:nth-child(4) { width: 34vmax; height: 34vmax; background: var(--blob-4); top: 6%;  left: 58%; animation: drift1 45s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7vmax,5vmax) scale(1.14); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1.08); } 50% { transform: translate(-8vmax,4vmax) scale(.92); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(.95); } 50% { transform: translate(6vmax,-6vmax) scale(1.12); } }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--accent); }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* The glass recipe, used everywhere */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(190%);
  backdrop-filter: blur(var(--blur)) saturate(190%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.30);
  border-radius: var(--r-lg);
}
html[data-theme="dark"] .glass { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06); }

/* ============================================================
   Login
   ============================================================ */
#login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
#login .card { padding: 40px 34px; width: 100%; max-width: 390px; animation: rise .7s var(--ease) both; }
#login h1 { font: 600 32px/1.1 var(--display); margin: 0 0 5px; letter-spacing: -.02em; }
#login p.tag { color: var(--muted); margin: 0 0 30px; font-size: 14.5px; }
#login input { width: 100%; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--edge); background: var(--field); }
#login button { width: 100%; margin-top: 14px; }
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }

/* ============================================================
   Shell
   ============================================================ */
#app { display: none; min-height: 100dvh; }
#app.on { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 18px; padding: 18px; }

aside { position: sticky; top: 18px; align-self: start; height: calc(100dvh - 36px);
        padding: 26px 16px 18px; display: flex; flex-direction: column;
        overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
aside::-webkit-scrollbar { display: none; }
aside .brand { padding: 0 12px 22px; }
aside .brand b { display: block; font: 600 21px/1.15 var(--display); letter-spacing: -.01em; }
aside .brand img.logo { max-width: 165px; max-height: 46px; display: block; margin-bottom: 7px; }
html[data-theme="dark"] aside .brand img.logo,
html[data-theme="dark"] #mobtop img { filter: invert(1) grayscale(1) brightness(1.7); }
aside .brand span { font-size: 12.5px; color: var(--muted); }
nav { display: flex; flex-direction: column; gap: 3px; }
nav button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  color: var(--muted); padding: 12px 14px; border-radius: var(--r-sm); font-size: 15px;
  transition: background .28s var(--ease), color .28s var(--ease); }
nav button:hover { color: var(--ink); background: var(--faint); }
nav button.on { color: var(--ink); background: var(--glass-2); font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.linky { background: none; border: 0; padding: 0 0 0 8px; color: var(--ios-blue);
  font-size: 12.5px; font-weight: 500; }
.findbtn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  color: var(--muted); padding: 11px 14px; border-radius: var(--r-sm); font-size: 14.5px;
  background: var(--faint); border: 1px solid var(--edge); margin-bottom: 9px;
  transition: all .26s var(--ease); }
.findbtn:hover { color: var(--ink); background: var(--glass-2); }
.findbtn span { font-size: 17px; line-height: 1; }
.findbtn kbd { margin-left: auto; font: 11px var(--sans); padding: 2px 7px; border-radius: 6px;
  background: var(--glass-2); border: 1px solid var(--edge); color: var(--muted); }

.tstep { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0;
  border-bottom: 1px solid var(--edge); font-size: 13px; }
.tstep:last-child { border-bottom: 0; }
.tstep .mark { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.tstep .mark.yes { background: color-mix(in srgb, var(--ios-green) 20%, transparent);
  color: var(--ios-green); }
.tstep .mark.no { background: color-mix(in srgb, var(--ios-red) 18%, transparent);
  color: var(--ios-red); }

.stockhits { margin: -6px 0 12px; border: 1px solid var(--edge); border-radius: var(--r-md);
  overflow: hidden; background: var(--glass-2); }
.stockhits button { display: flex; width: 100%; text-align: left; gap: 10px; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid var(--edge); font-size: 13px; }
.stockhits button:last-child { border-bottom: 0; }
.stockhits button:hover { background: var(--faint); }
.stockhits b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stockhits small { color: var(--muted); white-space: nowrap; }
.linkedtag { font-size: 12px; color: var(--ios-green); }

.findgroup { display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 8px; padding-left: 10px;
  border-left: 3px solid var(--accent); }
.findgroup:first-child { margin-top: 4px; }
.findgroup span { font-weight: 500; letter-spacing: 0; opacity: .7; }
.findhit { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: var(--r-md);
  background: var(--faint); border: 1px solid var(--edge); margin-bottom: 10px; cursor: pointer;
  transition: all .2s var(--ease); }
.findhit:hover { background: var(--glass-2); transform: translateY(-1px); }
.findhit .tagno { font: 600 18px var(--display); letter-spacing: -.02em; min-width: 76px; }
.findhit .who { flex: 1; min-width: 0; }
.findhit .who b { display: block; font-size: 14.5px; }
.findhit .who small { color: var(--muted); font-size: 12.5px; }

nav button .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  opacity: 0; transform: scale(.4); transition: all .3s var(--ease-spring); margin-left: auto; }
nav button.on .dot { opacity: 1; transform: scale(1); }
aside .foot { margin-top: auto; padding: 0 6px; }

main { padding: 10px 18px 40px; max-width: none; width: 100%; position: relative; }

/* Glass lettering rather than a glass box: the type itself carries the material. */
#clock { position: absolute; top: 2px; right: 16px; z-index: 20; text-align: right;
  line-height: 1.1; pointer-events: none; user-select: none;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.55)); }
html[data-theme="dark"] #clock { filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
#clock b { display: block; font: 700 21px/1 var(--display); letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(170deg, var(--ink) 18%,
              color-mix(in srgb, var(--ink) 46%, transparent) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
#clock span { display: block; font-size: 10.5px; font-weight: 500; margin-top: 3px;
  letter-spacing: .04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 82%, transparent); }
.head { padding-right: 200px; }
.head { margin-bottom: 24px; }
h2 { font: 700 31px/1.15 var(--display); margin: 0 0 3px; letter-spacing: -.02em; }
.sub { color: var(--muted); font-size: 14.5px; margin: 0; }

section { animation: viewIn .5s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Controls
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r-pill); background: var(--ink);
  color: var(--bg); font-weight: 500; font-size: 15px; min-height: 44px;
  transition: transform .2s var(--ease-spring), opacity .2s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.btn:hover { transform: translateY(-1.5px); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.btn:active { transform: scale(.965); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.quiet { background: transparent; color: var(--muted); border: 1px solid var(--edge);
  box-shadow: none; font-weight: 500; }
.btn.quiet:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft); }
.btn.ghost { background: var(--glass-2); color: var(--ink); border: 1px solid var(--stroke);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none; }
.btn.danger { background: var(--red); color: #fff; }
.btn.green { background: var(--ios-green); color: #fff; border-color: transparent; }
.btn.red   { background: var(--ios-red);   color: #fff; border-color: transparent; }
.btn.blue  { background: var(--ios-blue);  color: #fff; border-color: transparent; }
.btn.soft-green { background: color-mix(in srgb, var(--ios-green) 16%, transparent);
  color: var(--ios-green); border: 1px solid color-mix(in srgb, var(--ios-green) 34%, transparent);
  box-shadow: none; }
.btn.soft-red { background: color-mix(in srgb, var(--ios-red) 15%, transparent);
  color: var(--ios-red); border: 1px solid color-mix(in srgb, var(--ios-red) 32%, transparent);
  box-shadow: none; }

/* iOS-style modal header with an action on the right */
.sheethead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.sheethead .grow { flex: 1; min-width: 0; }
.sheethead h3 { margin: 0 0 3px; }
.sheethead .act { flex-shrink: 0; padding: 7px 15px; border-radius: var(--r-pill);
  background: var(--glass-2); border: 1px solid var(--stroke); font-size: 13.5px;
  color: var(--ios-blue); font-weight: 500; }
.badge { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.badge.cust { background: color-mix(in srgb, var(--ios-blue) 15%, transparent); color: var(--ios-blue); }
.badge.supp { background: color-mix(in srgb, var(--ios-purple) 16%, transparent); color: var(--ios-purple); }

/* one-line ledger rows that never scroll sideways */
.led { }

/* The sheet itself never scrolls - only the entry list does, behind a thin
   overlay scrollbar so it does not sit on top of the numbers. */
.modal .box.sheet table { width: 100%; table-layout: auto; }
.modal .box.sheet table.tight td, .modal .box.sheet table.tight th { padding-left: 6px;
  padding-right: 6px; }
.modal .box.sheet table.tight td:first-child, .modal .box.sheet table.tight th:first-child {
  padding-left: 0; }
.modal .box.sheet table.tight td:last-child, .modal .box.sheet table.tight th:last-child {
  padding-right: 0; }
.modal .box.sheet .rowbtn { white-space: nowrap; }

.ledscroll { flex: 1 1 auto; min-height: 180px; max-height: 40dvh; overflow-y: auto;
  overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--edge) transparent;
  padding-right: 4px; border-top: 1px solid var(--edge); }
.ledscroll::-webkit-scrollbar { width: 6px; }
.ledscroll::-webkit-scrollbar-track { background: transparent; }
.ledscroll::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 999px; }
.ledscroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* A sheet is a fixed frame: header, balance, buttons and footer stay put and
   only the middle list moves. Nothing scrolls the container itself. */
/* A wide dialog for forms that should never need scrolling on a desktop. */
.modal .box.wide { max-width: 1040px; width: calc(100vw - 48px); }
.bkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 18px; }
.bkhd { font: 700 11px var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 9px; margin-bottom: 14px;
  border-bottom: 1px solid var(--edge); }
.bkgrid textarea { min-height: 62px; resize: vertical; }
@media (max-width: 820px) { .bkgrid { grid-template-columns: 1fr; gap: 6px; } }
/* A wide popup is only wide where there is room; on a phone it behaves like any other. */
@media (max-width: 700px) { .modal .box.wide { width: 100%; max-width: 100%; } }

/* A sheet must never hide content: if the fixed parts outgrow the cap the box itself
   scrolls, so nothing can end up unreachable. */
.modal .box.sheet { display: flex; flex-direction: column; max-height: 86dvh; overflow-x: hidden; overflow-y: auto; }
.modal .box.sheet > *:not(.ledscroll) { flex: 0 0 auto; }
.modal .box.sheet .actions:last-of-type { margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--edge); }
@media (max-width: 900px) {
  .modal .box.sheet { max-height: 90dvh; }
  .ledscroll { max-height: 34dvh; }
}
.ledrow { display: flex; align-items: center; gap: 11px; padding: 9px 2px;
  border-bottom: 1px solid var(--edge); cursor: pointer; }
.ledrow:hover { background: var(--faint); }
.ledrow .dt { width: 62px; flex-shrink: 0; font-size: 11.5px; color: var(--muted);
  line-height: 1.25; }
.ledrow .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 13.5px; }
.ledrow .amt { flex-shrink: 0; text-align: right; font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; min-width: 92px; }
.ledrow .bal { flex-shrink: 0; text-align: right; width: 92px; font-size: 12px;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.ledrow .amt.up { color: var(--ios-green); }
.ledrow .amt.down { color: var(--ios-red); }
.ledopen { padding: 4px 2px 14px 75px; border-bottom: 1px solid var(--edge); font-size: 13px; }
.ledopen .full { color: var(--muted); margin-bottom: 10px; word-break: break-word;
  white-space: normal; }
@media (max-width: 600px) {
  .ledrow { flex-wrap: wrap; row-gap: 2px; }
  .ledrow .dt { width: 54px; font-size: 11px; }
  .ledrow .amt { min-width: 0; margin-left: auto; font-size: 13px; }
  /* balance drops to its own line rather than disappearing */
  .ledrow .bal { width: 100%; text-align: right; font-size: 11.5px; padding-left: 64px; }
  .ledrow .bal::before { content: 'balance '; opacity: .75; }
  .ledopen { padding-left: 8px; }
}

.chip { padding: 9px 16px; border-radius: var(--r-pill); background: var(--glass);
  border: 1px solid var(--stroke); font-size: 14px; color: var(--muted); min-height: 40px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: all .26s var(--ease); }
.chip:hover { color: var(--ink); }
.chip.on { background: var(--ink); color: var(--bg); border-color: transparent; font-weight: 500; }
.chip.on.accent { background: var(--accent); color: #fff; }

.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.divider { width: 1px; height: 24px; background: var(--edge); margin: 0 4px; }

.search { flex: 1; min-width: 190px; padding: 11px 17px; border-radius: var(--r-pill);
  border: 1px solid var(--stroke); background: var(--glass); min-height: 44px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .25s var(--ease), border-color .25s var(--ease); }
.search:focus { background: var(--glass-2); outline: none; border-color: var(--accent); }
.search::placeholder { color: var(--muted); }

.seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill);
  background: var(--faint); border: 1px solid var(--edge); }
.seg button { flex: 1; padding: 8px 4px; border-radius: var(--r-pill); font-size: 12.5px;
  color: var(--muted); transition: all .3s var(--ease); }
.seg button.on { background: var(--glass-solid); color: var(--ink); font-weight: 500;
  box-shadow: 0 1px 4px rgba(0,0,0,.10); }

/* ============================================================
   Stat cards
   ============================================================ */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr));
  gap: 13px; margin-bottom: 22px; align-items: start; }
.stat { padding: 19px 21px 20px; position: relative; overflow: hidden; align-self: start;
  animation: cardIn .6s var(--ease) both; }
.stat::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.30), transparent 46%); opacity: .9; }
html[data-theme="dark"] .stat::after { background: linear-gradient(140deg, rgba(255,255,255,.07), transparent 46%); }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.975); } to { opacity: 1; transform: none; } }
.stat .lab { font-size: 13px; color: var(--muted); margin-bottom: 9px; }
.stat .val { font: 600 30px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.stat .note { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.stat.alert { border-color: color-mix(in srgb, var(--red) 42%, transparent); background: var(--red-soft); }
.stat.clickcard { cursor: pointer; transition: transform .2s var(--ease-spring); }
.stat.clickcard:hover { transform: translateY(-2px); }
.stat.alert .val { color: var(--red); }
.stat.good .val { color: var(--green); }

/* ---- dashboard widget grid ---- */
.dash { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px;
  grid-auto-rows: 156px; grid-auto-flow: dense; margin-bottom: 22px; }
.w { position: relative; overflow: hidden; padding: 18px 20px; display: flex;
  flex-direction: column; animation: cardIn .55s var(--ease) both; }
.w.s  { grid-column: span 1; grid-row: span 1; }
.w.m  { grid-column: span 2; grid-row: span 1; }
.w.l  { grid-column: span 2; grid-row: span 2; }
.w.xl { grid-column: span 4; grid-row: span 2; }
.w .lab { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.w .big { font: 600 29px/1 var(--display); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.w.s .big { font-size: 24px; }
.w .note { font-size: 12px; color: var(--muted); margin-top: 7px; }
.w .body { flex: 1; min-height: 0; margin-top: 12px; overflow: hidden; }
.w.good .big { color: var(--green); }
.w.alert { border-color: color-mix(in srgb, var(--red) 42%, transparent); background: var(--red-soft); }
.w.alert .big { color: var(--red); }

.dash:not(.editing) .w { cursor: pointer; }
.dash.editing .w { cursor: grab; touch-action: none; outline: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -3px; }
.dash.editing .w:active { cursor: grabbing; }
.w.dragging { opacity: .35; }
.w.over { outline: 2.5px solid var(--accent); outline-offset: -3px; }
.wtools { position: absolute; top: 8px; right: 8px; display: none; gap: 4px; z-index: 3; }
.dash.editing .wtools { display: flex; }
.wtools button { width: 26px; height: 24px; border-radius: 8px; font-size: 10.5px; font-weight: 600;
  background: var(--glass-solid); border: 1px solid var(--stroke); color: var(--muted);
  display: grid; place-items: center; }
.wtools button.on { background: var(--accent); color: #fff; border-color: transparent; }
.wtools button.rm { color: var(--red); }

.shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap: 9px; }
.sc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 14px 8px; border-radius: var(--r-md); background: var(--glass-2);
  border: 1px solid var(--stroke); font-size: 12.5px; font-weight: 500; color: var(--ink);
  transition: transform .22s var(--ease-spring), background .22s var(--ease); }
.sc:hover { transform: translateY(-2px); background: var(--glass-solid); }
.sc:active { transform: scale(.96); }
.sc em { font-style: normal; font-size: 20px; line-height: 1; }

.wlist { font-size: 13px; }
.wlist .r { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--edge); }
.wlist .r:last-child { border-bottom: 0; }
.wlist .r span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.wlist .r b { font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {
  .dash { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .w.xl { grid-column: span 2; }
}
@media (max-width: 700px) {
  .dash { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .w { grid-column: span 1 !important; grid-row: auto !important; min-height: 120px; }
  .dash.editing .w { outline: none; cursor: default; }
  .wtools { display: none !important; }
}


.split { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--edge);
  display: flex; flex-direction: column; gap: 13px; }
.srow { display: flex; align-items: center; gap: 11px; }
.srow .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--faint); flex-shrink: 0; color: var(--muted); }
.srow .ico svg { width: 17px; height: 17px; }
.srow .who { flex: 1; min-width: 0; }
.srow .who b { display: block; font-size: 13.5px; font-weight: 600; }
.srow .who small { color: var(--muted); font-size: 11.5px; }
.srow .amt { text-align: right; }
.srow .amt b { display: block; font: 600 15.5px var(--display); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; }
.srow .amt small { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.meter { height: 5px; border-radius: 999px; background: var(--faint); overflow: hidden; margin-top: -4px; }
.meter i { display: block; height: 100%; border-radius: 999px; width: 0;
  transition: width 1s var(--ease); }
.meter i.w { background: var(--ink); }
.meter i.p { background: var(--accent); }

.two { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .two { grid-template-columns: minmax(0,1fr); } }
.two > * { min-width: 0; }

.donutwrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donutwrap svg { width: 160px; height: 160px; flex-shrink: 0; }
.donutwrap .hole { font: 600 19px var(--display); letter-spacing: -.02em; }
.donutwrap .holesub { font-size: 11px; fill: currentColor; opacity: .6; }
.key { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 9px; }
.key div { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
/* Four equal panels, each with its own pager, so nothing runs long or short. */
/* Two panels of matching width and height, side by side. */
.halves { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px;
  align-items: stretch; margin-bottom: 18px; }
.halves > .eqpanel { margin-bottom: 0; display: flex; flex-direction: column; }
.halves > .eqpanel > .chartwrap, .halves > .eqpanel > .donutwrap { flex: 1; min-height: 0;
  align-content: center; }
@media (max-width: 1000px) { .halves { grid-template-columns: minmax(0,1fr); } }

.posgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.panel.eq { display: flex; flex-direction: column; min-height: 420px; margin-bottom: 0; }
.panel.eq .eqbody { flex: 1; min-height: 0; overflow-x: auto; }
.panel.eq .eqpager { margin: 14px 0 0; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--edge); padding-top: 12px; }
.panelhead { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; padding: 0 0 14px; }
.panelhead h3 { flex: 1; margin: 0; }
.panelhead span { font-size: 13px; color: var(--ios-blue); font-weight: 500; flex-shrink: 0; }
.panelhead:hover span { text-decoration: underline; }
@media (max-width: 1080px) { .posgrid { grid-template-columns: 1fr; }
  .panel.eq { min-height: 0; } }

/* POS: one list at a time, picked from tabs */
.posdata { display: flex; flex-direction: column; }
.postabs { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.postabs .tools { flex: 1; min-width: 0; margin: 0; }
.postabs-all { background: none; border: 0; padding: 4px 0; font-size: 13px; font-weight: 500;
  color: var(--ios-blue); flex-shrink: 0; cursor: pointer; }
.postabs-all:hover { text-decoration: underline; }
.posdata .posbody { overflow-x: auto; min-height: 250px; }
.posdata .eqpager { margin: 14px 0 0; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--edge); padding-top: 12px; }
@media (max-width: 700px) { .posdata .posbody { min-height: 0; } }

/* POS: the profit card with earned / moved out / still to move out */
#posCards .stat { align-self: stretch; }
.posprofit .pprows { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.posprofit .pprows div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
  color: var(--muted); }
.posprofit .pprows b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.posprofit .pprows div.due b { color: var(--ios-orange); }
.posprofit .pprows div.ahead b { color: var(--ios-blue); }
.posprofit .pprows div.small { font-size: 11.5px; }
.posprofit .pprows div.small b { color: var(--muted); font-weight: 500; }
.posprofit .ppbtn { margin-top: 12px; width: 100%; }

.spreadrow { display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--edge); font-size: 12.5px; }
.spreadrow:last-child { border-bottom: 0; }
.spreadrow .d { width: 62px; color: var(--muted); flex-shrink: 0; }
.spreadrow .tr { flex: 1; height: 6px; border-radius: 999px; background: var(--faint); overflow: hidden; }
.spreadrow .tr i { display: block; height: 100%; border-radius: 999px; width: 0;
  transition: width .7s var(--ease); }
.spreadrow b { width: 54px; text-align: right; font-variant-numeric: tabular-nums; }

.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 13px; }
.skin { text-align: left; padding: 0; overflow: hidden; border-radius: var(--r-md);
  border: 1.5px solid var(--edge); background: var(--glass-2); cursor: pointer;
  transition: transform .2s var(--ease-spring), border-color .2s var(--ease); }
.skin:hover { transform: translateY(-2px); }
.skin.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.skin .meta { padding: 11px 13px 13px; }
.skin .meta b { display: block; font-size: 14px; margin-bottom: 3px; }
.skin .meta small { color: var(--muted); font-size: 11.5px; line-height: 1.45; display: block; }

/* a miniature of the dashboard, drawn with the theme's own variables */
.prev { height: 116px; position: relative; overflow: hidden; background: var(--bg);
  padding: 11px; display: flex; flex-direction: column; gap: 7px; }
.prev .pblob { position: absolute; border-radius: 50%; filter: blur(26px); opacity: var(--blob-alpha); }
.prev .pcard { position: relative; background: var(--glass); border: 1px solid var(--stroke);
  border-radius: var(--r-md); box-shadow: var(--shadow); padding: 8px 10px; }
.prev .pcard .l { font: 500 8px var(--sans); color: var(--muted); }
.prev .pcard .v { font: 600 15px/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.prev .prow { position: relative; display: flex; gap: 6px; }
.prev .pchip { font: 500 8px var(--sans); padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--bg); }
.prev .pchip.alt { background: var(--glass); color: var(--muted); border: 1px solid var(--stroke); }
.prev .pbars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.prev .pbars i { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; }

.toggles { display: flex; flex-wrap: wrap; gap: 9px; }
.tgl { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 12px;
  border-radius: var(--r-pill); border: 1px solid var(--stroke); background: var(--glass);
  font-size: 13.5px; color: var(--muted); cursor: pointer; user-select: none;
  transition: all .26s var(--ease); }
.tgl:hover { color: var(--ink); }
.tgl .sw { width: 34px; height: 20px; border-radius: 999px; background: var(--faint);
  border: 1px solid var(--edge); position: relative; flex-shrink: 0;
  transition: background .28s var(--ease); }
.tgl .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--muted); transition: all .28s var(--ease-spring); }
.tgl.on { color: var(--ink); background: var(--glass-2); font-weight: 500; }
.tgl.on .sw { background: var(--green); border-color: transparent; }
.tgl.on .sw::after { left: 16px; background: #fff; }

.key i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.key .nm { flex: 1; }
.key .vl { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; }

/* year-by-month heat grid */
.heat { display: grid; gap: 4px; grid-template-columns: 46px repeat(12, minmax(0,1fr));
  min-width: 560px; }
.heat .lab { font-size: 11.5px; color: var(--muted); display: flex; align-items: center;
  font-variant-numeric: tabular-nums; }
.heat .hd { font-size: 10.5px; color: var(--muted); text-align: center; letter-spacing: .03em; }
.heat .cell { aspect-ratio: 1.35; border-radius: 8px; background: var(--faint); cursor: pointer;
  transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease); }
.heat .cell:hover, .heat .cell.hot { transform: scale(1.13);
  box-shadow: 0 4px 14px rgba(0,0,0,.18); z-index: 2; }
.heat .cell.none { background: transparent; border: 1px dashed var(--edge); cursor: default; }
.heatscroll { overflow-x: auto; scrollbar-width: none; }
.heatscroll::-webkit-scrollbar { display: none; }

.yoyrow { display: flex; align-items: center; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--edge); }
.yoyrow:last-child { border-bottom: 0; }
.yoyrow .nm { flex: 1; font-size: 14px; }
.yoyrow .fig { text-align: right; }
.yoyrow .fig b { display: block; font: 600 17px var(--display); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; }
.yoyrow .fig small { color: var(--muted); font-size: 11.5px; }
.delta { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
  white-space: nowrap; }
.delta.up { background: var(--green-soft); color: var(--green); }
.delta.down { background: var(--red-soft); color: var(--red); }

.vbar { margin-bottom: 9px; }
.vbar:last-child { margin-bottom: 0; }
.vbar .top { font-size: 12.5px; }
.vbar .track { height: 5px; }
.vbar .top { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; }
.vbar .top small { color: var(--muted); font-variant-numeric: tabular-nums; }
.vbar .track { height: 7px; border-radius: 999px; background: var(--faint); overflow: hidden; }
.vbar .track i { display: block; height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent));
  transition: width .9s var(--ease); }

.panel { padding: 22px 24px; margin-bottom: 18px; position: relative; isolation: isolate;
  animation: cardIn .6s var(--ease) both; }
/* Grid containers carry their own bottom gap so the next block never butts up
   against them, and the entrance lift cannot overlap a neighbour. */
.two, .grid, .halves, .posgrid, .tablewrap { margin-bottom: 18px; }
.two > * > .panel:last-child, .two > .panel:last-child { margin-bottom: 0; }
.panel h3 { font: 600 17px/1.25 var(--display); margin: 0 0 16px; letter-spacing: -.01em; }

/* ============================================================
   Chart
   ============================================================ */
.bars { display: flex; align-items: flex-end; gap: 9px; height: 190px; padding-top: 6px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.bars { scrollbar-width: none; cursor: grab; }
.bars::-webkit-scrollbar { display: none; }
.bars.dragging { cursor: grabbing; scroll-behavior: auto; }
.bars.dragging .col { pointer-events: none; }

.chartwrap { position: relative; }
.chartnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-2); border: 1px solid var(--stroke);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 16px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.4);
  color: var(--ink); font-size: 15px; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .25s var(--ease-spring); }
.chartnav.show { opacity: 1; pointer-events: auto; }
.chartnav:hover { transform: translateY(-50%) scale(1.09); }
.chartnav:active { transform: translateY(-50%) scale(.92); }
.chartnav.prev { left: -6px; }
.chartnav.next { right: -6px; }

/* glass rail replacing the browser scrollbar */
.rail { height: 6px; border-radius: 999px; margin-top: 12px; position: relative;
  background: var(--faint); border: 1px solid var(--edge); overflow: hidden; display: none; }
.rail.show { display: block; }
.rail i { position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); }
.bars .col { flex: 1 0 auto; min-width: 34px; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: 8px; cursor: pointer;
  border-radius: 10px; padding: 4px 2px; transition: background .2s var(--ease); }
.bars .col:hover, .bars .col.hot { background: var(--faint); }
.bars[data-mini] { cursor: default; }
.bars .col.idle { opacity: .38; min-width: 20px; }
.bars .col.idle .cap { font-size: 10px; }
.bars .stack { width: 100%; display: flex; align-items: flex-end; justify-content: center;
  gap: 3px; height: 148px; }
.bars .bar { width: 42%; max-width: 20px; border-radius: 6px 6px 3px 3px; height: 0;
  transition: height .95s var(--ease); }
.bars .bar.s { background: linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--ink) 55%, transparent)); }
.bars .bar.p { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent)); }
.bars .cap { font-size: 11px; color: var(--muted); white-space: nowrap; }
.bars .col:hover .bar { filter: brightness(1.15); }
.legend { display: flex; gap: 18px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3.5px; margin-right: 7px;
  vertical-align: -1px; }

/* ============================================================
   Tables
   ============================================================ */
.tablewrap { overflow: hidden; padding: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted);
  padding: 13px 14px; letter-spacing: .03em; text-transform: uppercase; }
td { padding: 14px; border-top: 1px solid var(--edge); vertical-align: middle; }
tbody tr { transition: background .22s var(--ease); }
tbody tr.click:hover { background: var(--faint); cursor: pointer; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.srow .amt b, .yoyrow .fig b, .ledrow .amt, .ledrow .bal { white-space: nowrap; }
.tag { font-weight: 600; font-size: 14.5px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dim { font-size: 12.5px; color: var(--muted); }
.pill { display: inline-block; padding: 4px 11px; border-radius: var(--r-pill); font-size: 12px;
  font-weight: 500; }
.pill.stock { background: var(--green-soft); color: var(--green); }
.pill.sold  { background: var(--accent-soft); color: var(--accent); }
.pill.add   { background: var(--faint); color: var(--muted); }
.warnText { color: var(--red); font-size: 12px; }
.empty { padding: 56px 22px; text-align: center; color: var(--muted); }
.rowbtn { padding: 7px 13px; border-radius: var(--r-pill); background: var(--glass-2);
  border: 1px solid var(--stroke); font-size: 13px; margin-left: 6px; }

/* ============================================================
   Modal
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px;
  background: rgba(10,14,18,.34);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  animation: fadeIn .28s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal .box { background: var(--glass-solid);
  -webkit-backdrop-filter: blur(34px) saturate(190%); backdrop-filter: blur(34px) saturate(190%);
  border: 1px solid var(--stroke); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 540px; max-height: 88dvh; overflow: auto; padding: 28px;
  animation: popIn .45s var(--ease-spring) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
.modal h3 { font: 600 22px/1.25 var(--display); margin: 0 0 4px; letter-spacing: -.02em; }
.modal .hint { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }

.f { margin-bottom: 15px; }
.f label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.f input, .f select, .f textarea { width: 100%; padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--edge); background: var(--field); min-height: 46px;
  transition: border-color .22s var(--ease), background .22s var(--ease); }
.f input:focus, .f select:focus { outline: none; border-color: var(--accent); background: var(--glass-2); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.f input, .f select, .f textarea { min-width: 0; max-width: 100%; }
.modal .box { overflow-x: hidden; }

.readout { margin: 4px 0 6px; }
.readout .rrow { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--edge); font-size: 13.5px; }
.readout .rrow:last-child { border-bottom: 0; }
.readout .rrow span { color: var(--muted); flex-shrink: 0; }
.readout .rrow b { text-align: right; font-weight: 600; word-break: break-word; }
.actions { display: flex; gap: 9px; margin-top: 22px; flex-wrap: wrap; align-items: center; }
.actions .spacer { flex: 1; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }
.check input { width: 21px; height: 21px; min-height: 0; accent-color: var(--accent); }

.callout { border-radius: var(--r-md); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 15px 17px; margin-bottom: 17px; font-size: 13.8px; line-height: 1.55; }
.callout.bad { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 32%, transparent); }
.errText { color: var(--red); font-size: 13.5px; margin: 14px 0 0; }

.toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 200;
  background: var(--glass-solid); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid var(--stroke); box-shadow: var(--shadow-lg);
  color: var(--ink); padding: 13px 24px; border-radius: var(--r-pill); font-size: 14.5px;
  max-width: 90vw; animation: toastIn .5s var(--ease-spring) both; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 26px) scale(.9); }
                     to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

.tip { position: fixed; z-index: 300; pointer-events: none; opacity: 0;
  transform: translate(-50%, -110%); transition: opacity .15s var(--ease);
  background: var(--glass-solid); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border: 1px solid var(--stroke); box-shadow: var(--shadow-lg); border-radius: 14px;
  padding: 11px 14px; font-size: 13px; min-width: 150px; max-width: 240px; }
.tip.on { opacity: 1; }
.tip b { display: block; font-size: 13.5px; margin-bottom: 7px; }
.tip .r { display: flex; justify-content: space-between; gap: 16px; margin-top: 3px; color: var(--muted); }
.tip .r span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; }

.spinner { width: 17px; height: 17px; border: 2px solid var(--edge);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; gap: 11px; padding: 44px; justify-content: center;
  color: var(--muted); font-size: 14px; }

/* ============================================================
   Mobile
   ============================================================ */
#mobbar { display: none; }
#mobtop { display: none; }

@media (max-width: 900px) {
  #app.on { grid-template-columns: 1fr; padding: 0; gap: 0; }
  aside { display: none; }

  #mobtop { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 40; padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
    background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--edge); }
  #mobtop b { font: 600 18px/1 var(--display); }
  #mobtop .p { font-size: 12px; color: var(--muted); display: block; margin-top: 3px; }
  #mobtop button { width: 42px; height: 42px; border-radius: 50%; background: var(--glass-2);
    border: 1px solid var(--stroke); display: grid; place-items: center; font-size: 17px; }

  main { padding: 20px 16px calc(120px + env(safe-area-inset-bottom)); }
  #clock { position: static; margin: 0 0 14px; text-align: left; display: flex;
    align-items: baseline; gap: 10px; }
  #clock b { font-size: 17px; }
  #clock span { margin-top: 0; font-size: 9.5px; }
  .head { padding-right: 0; }
  h2 { font-size: 27px; }
  .head { margin-bottom: 20px; }

  /* Floating glass tab bar, App Store style */
  #mobbar { display: grid; grid-template-columns: repeat(5,1fr);
    position: fixed; bottom: calc(10px + env(safe-area-inset-bottom)); left: 12px; right: 12px;
    z-index: 50; padding: 7px 6px; border-radius: 26px;
    background: var(--glass-2);
    -webkit-backdrop-filter: blur(34px) saturate(200%);
    backdrop-filter: blur(34px) saturate(200%);
    border: 1px solid var(--stroke);
    box-shadow: 0 10px 34px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.34); }
  html[data-theme="dark"] #mobbar { box-shadow: 0 12px 40px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07); }
  #mobbar button { color: var(--muted); padding: 8px 2px 6px; font-size: 10.5px;
    border-radius: 19px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-height: 50px; position: relative;
    transition: color .26s var(--ease), transform .3s var(--ease-spring); }
  #mobbar button em { font-style: normal; font-size: 19px; line-height: 1;
    transition: transform .34s var(--ease-spring); }
  #mobbar button:active { transform: scale(.9); }
  #mobbar button.on { color: var(--accent); font-weight: 600; }
  #mobbar button.on em { transform: translateY(-1px) scale(1.14); }
  #mobbar button.on::before { content: ''; position: absolute; inset: 2px;
    border-radius: 19px; background: var(--accent-soft); z-index: -1; }

  /* Filter rows scroll sideways rather than wrapping into a wall of buttons. */
  .tools.scrollrow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    max-width: 100%; padding-bottom: 2px; }
  .tools.scrollrow::-webkit-scrollbar { display: none; }
  .tools.scrollrow .chip { flex: 0 0 auto; padding: 6px 12px; font-size: 12.5px;
    min-height: 32px; }
  .tools.scrollrow .divider { height: 18px; margin: 0 2px; }
  .grid { grid-template-columns: repeat(2,1fr); gap: 11px; }
  .stat { padding: 16px 17px; }
  .stat .val { font-size: 25px; }
  .f2 { grid-template-columns: 1fr; }
  .panel { padding: 19px 18px; }
  .modal { padding: 0; place-items: end center; }
  .modal .box { max-width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92dvh;
    padding: 26px 20px calc(26px + env(safe-area-inset-bottom));
    animation: sheetIn .46s var(--ease-spring) both; }
  @keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }

  /* Tables become stacked cards - a phone should never scroll sideways */
  .tablewrap { padding: 0; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr { border-top: 1px solid var(--edge); padding: 14px 16px; }
  tbody tr:first-child { border-top: 0; }
  td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 14px;
    align-items: baseline; }
  td::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; flex-shrink: 0; }
  td.r { text-align: right; }
  td[data-label=""]::before { display: none; }
  .bars { height: 165px; gap: 5px; }
  .bars .stack { height: 125px; }
  .bars .cap { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
  #field i { animation: none !important; }
}

/* ================= Courier: TCS connection light, menu, overview ================= */
.tcs-led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--muted); opacity: .45; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.tcs-led.big { width: 11px; height: 11px; }
.tcs-led.green  { background: var(--ios-green);  opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-green) 22%, transparent); }
.tcs-led.orange { background: var(--ios-orange); opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-orange) 24%, transparent); }
.tcs-led.red    { background: var(--ios-red);    opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-red) 24%, transparent);
  animation: tcsPulse 1.6s ease-in-out infinite; }
@keyframes tcsPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ios-red) 8%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tcs-led.red { animation: none; } }
#mobtop #tcsLedM { display: grid; place-items: center; }
#mobtop #tcsLedM.hidden { display: none; }
#mobtop #tcsLedM .tcs-led { width: 10px; height: 10px; }

nav .subnav { display: none; flex-direction: column; gap: 1px; margin: 1px 0 5px 22px;
  padding-left: 9px; border-left: 1px solid var(--edge); }
nav button[data-view="cod"].on + .subnav { display: flex; }
nav .subnav button { padding: 8px 12px; font-size: 13.5px; }
nav .subnav button.on { background: transparent; box-shadow: none; font-weight: 400; color: var(--muted); }
nav .subnav button.on:hover { color: var(--ink); background: var(--faint); }
nav .subnav button.on.cur, nav .subnav button.cur { color: var(--ink); background: var(--faint); font-weight: 500; }

.tcsbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px;
  border-radius: var(--r-md); margin-bottom: 16px; }
.tcsbar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.tcsbar-text .dim { font-size: 12.5px; }
.tcsbar-sync { font-size: 12.5px; }
.tcsbar.red { border-color: color-mix(in srgb, var(--ios-red) 38%, transparent); }
.tcsbar.orange { border-color: color-mix(in srgb, var(--ios-orange) 38%, transparent); }

.pill.tg-booked, .pill.tg-unknown { background: var(--faint); color: var(--muted); }
.pill.tg-transit   { background: color-mix(in srgb, var(--ios-blue) 14%, transparent);   color: var(--ios-blue); }
.pill.tg-out       { background: color-mix(in srgb, var(--ios-indigo) 15%, transparent); color: var(--ios-indigo); }
.pill.tg-delivered { background: var(--green-soft); color: var(--green); }
.pill.tg-problem   { background: var(--red-soft); color: var(--red); }
.pill.tg-returned  { background: color-mix(in srgb, var(--ios-orange) 16%, transparent); color: var(--ios-orange); }

.cnlink { background: none; border: 0; padding: 0; font: inherit; color: var(--ios-blue);
  cursor: pointer; text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color .2s var(--ease); font-variant-numeric: tabular-nums; }
.cnlink:hover { text-decoration-color: currentColor; }
.tline { font-size: 12px; color: var(--ios-blue); }

.attn { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--edge); }
.attn:last-child { border-bottom: 0; }
.attn-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font-weight: 700; font-size: 14px; background: var(--faint); color: var(--muted); }
.attn.problem .attn-ico, .attn.mismatch .attn-ico, .attn.late .attn-ico { background: var(--red-soft); color: var(--red); }
.attn.returned .attn-ico, .attn.stuck .attn-ico {
  background: color-mix(in srgb, var(--ios-orange) 16%, transparent); color: var(--ios-orange); }
.attn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.attn-body .dim { font-size: 12.5px; }
.attn-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.trackhead { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0 12px; }
.timeline { margin: 4px 0 8px; }
.tl { position: relative; display: flex; gap: 12px; padding: 0 0 14px 2px; font-size: 13px; }
.tl::before { content: ''; position: absolute; left: 6px; top: 12px; bottom: 0; width: 1px; background: var(--edge); }
.tl:last-child::before { display: none; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); opacity: .5;
  margin-top: 4px; flex-shrink: 0; }
.tl.now .tl-dot { background: var(--ios-blue); opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-blue) 20%, transparent); }
.tk-h { font: 600 14px var(--display); margin: 18px 0 6px; }

.legend { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 10px; }
.cronpath, .rawbox { display: block; padding: 10px 12px; border-radius: var(--r-sm); background: var(--faint);
  border: 1px solid var(--edge); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-x: auto; white-space: pre; margin: 0; }
.rawbox { max-height: 280px; }
@media (max-width: 700px) {
  .trackbox { width: 100%; }
  .attn { align-items: flex-start; flex-wrap: wrap; }
  .attn-act { width: 100%; justify-content: flex-start; padding-left: 42px; }
}

/* Track-a-CN search: one glass pill holding the field and its button. */
.trackbox { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; min-height: 44px;
  border-radius: var(--r-pill); width: 300px; max-width: 100%;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease); }
.trackbox:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 4px var(--accent-soft); }
.trackbox-ico { font-size: 17px; color: var(--muted); line-height: 1; }
.trackbox input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 6px;
  font-size: 14.5px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.trackbox input:focus { outline: none; }
.trackbox input::placeholder { color: var(--muted); letter-spacing: 0; }
.trackbox button { padding: 9px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg);
  font-size: 13.5px; font-weight: 500; transition: transform .2s var(--ease-spring), opacity .2s; }
.trackbox button:hover { transform: scale(1.03); }
.trackbox button:active { transform: scale(.97); }

/* Search-as-you-type picker (booking city and area). */
.f.combo { position: relative; }
.f.combo input.picked { border-color: color-mix(in srgb, var(--ios-green) 45%, transparent); }
.f.combo input:disabled { opacity: .6; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% - 2px); z-index: 30; max-height: 260px;
  overflow-y: auto; border-radius: var(--r-md); border: 1px solid var(--edge); background: var(--glass-solid);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: var(--shadow-lg); padding: 5px; }
.combo-list button { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left;
  padding: 9px 11px; border-radius: 10px; font-size: 13.5px; }
.combo-list button b { flex: 1; min-width: 0; font-weight: 500; }
.combo-list button small { color: var(--muted); font-size: 11.5px; letter-spacing: .05em; }
.combo-list button:hover, .combo-list button.hi { background: var(--faint); }
.combo-empty { padding: 10px 12px; font-size: 13px; color: var(--muted); }

/* Bookings: tick boxes, cancelled rows, date range. */
.tickcol { width: 34px; }
.tickcol input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
tr.rowoff td { opacity: .55; }
tr.rowoff .cnlink { text-decoration: line-through; color: var(--muted); }
.rowbtn.warn { color: var(--red); border-color: color-mix(in srgb, var(--ios-red) 35%, transparent); }
.rangerow { margin-top: -4px; font-size: 13px; }
.datein { min-height: 40px; padding: 8px 12px; color-scheme: light dark; }
@media (max-width: 700px) { .tickcol { width: auto; } }

/* The tag on a booking row is a button, so it can be changed after printing. */
.reftag { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.reftag:hover .pill { filter: brightness(1.12); }
.reftag:hover .dim { color: var(--ink); text-decoration: underline; }

/* Anything this account was not given (see applyPerms in 01-core.js). */
.noperm { display: none !important; }

/* Settings → people: the access editor */
.permlist { display: flex; flex-direction: column; gap: 8px; }
.permrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 10px 12px; border: 1px solid var(--stroke); border-radius: 14px; background: var(--glass); }
.permrow .tgl { min-width: 170px; }
.permrow .pnote { flex: 1; min-width: 180px; font-size: 12.5px; color: var(--muted); }
.permrow .pparts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 4px 0 2px 22px; border-left: 2px solid var(--stroke); margin-left: 16px; }
.permrow .pparts .tgl { min-width: 0; font-size: 12.5px; padding: 7px 12px 7px 10px; }
.tgl.part .sw { background: var(--green); opacity: .5; border-color: transparent; }
.tgl.part .sw::after { left: 9px; background: #fff; }
.permquick { display: flex; gap: 8px; margin: 0 0 10px; }

/* POS charge form: a worked-out field, and a phone layout that fits one screen */
.autotag { display: none; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px;
  background: var(--accent-soft); color: var(--accent); font-weight: 500; vertical-align: 1px; }
.autotag.on { display: inline-block; }
.f input.auto { border-style: dashed; }
.chargebox input[type="date"] { -webkit-appearance: none; appearance: none; display: block;
  min-width: 0; width: 100%; text-align: left; }
.chargebox input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.chargebox #t_calc { font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) {
  .modal .box.chargebox { padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); }
  .chargebox h3 { font-size: 19px; }
  .chargebox .hint { font-size: 12.5px; margin: 0 0 10px; }
  .chargebox .f2 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .chargebox .f { margin-bottom: 9px; }
  .chargebox .f label { font-size: 12px; margin-bottom: 4px; }
  .chargebox .f input, .chargebox .f select { min-height: 40px; padding: 8px 12px; font-size: 16px; }
  .chargebox .callout { padding: 9px 12px; margin: 4px 0 0; font-size: 12.5px; }
  .chargebox .actions { margin-top: 12px; }
  .chargebox .errText:empty { display: none; }
}

/* ================= Reports (Sep 2026 rework) ================= */
.rphead { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rpactions { display: flex; gap: 8px; align-items: center; }
.rprange { padding: 12px 14px; border-radius: var(--r-lg); margin-bottom: 18px; display: flex;
  flex-direction: column; gap: 10px; }
.rprange .tools { margin: 0; }
.rprange .tools:empty { display: none; }
.rpcustom { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rpcustom.hidden { display: none; }
.rpbyrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rpbyrow .sub { margin: 0; font-size: 12.5px; }
.rpseg { min-width: 340px; }
#v-reports.rploading .rpcards, #v-reports.rploading .panel { opacity: .55; transition: opacity .2s; }

.rpcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .rpcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rpstat { align-self: stretch; }
.rpstat .val { font-size: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpdeltas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.rpdeltas .delta { font-size: 11.5px; padding: 3px 8px; }
.delta small { font-weight: 500; opacity: .8; margin-left: 2px; }
.delta.flat { background: var(--faint); color: var(--muted); }

.rptitle { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; }
.rptitle h3 { margin: 0; }
.rpsmall { font-size: 12.5px; margin: 0; }
.legend.rplegend { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 12.5px; }
.legend.rplegend span { gap: 6px; }
.legend i { flex-shrink: 0; }
.legend i.dash { width: 16px; height: 0; margin: 0; align-self: center; border-top: 2px dashed var(--ink); opacity: .55; border-radius: 0;
  background: none !important; }

.rpnotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 22px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rpnotes li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.45; align-items: flex-start; }
.rpnotes li i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--ios-blue); }
.rpnotes li.good i { background: var(--ios-green); }
.rpnotes li.bad i { background: var(--ios-orange); }

.rpscroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
/* Wide charts scroll sideways inside .rpscroll; the general svg max-width rule would squash them. */
.rpsvg { display: block; overflow: visible; max-width: none; }
.rpax { font-size: 10.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.rpbar { transform-box: fill-box; transform-origin: bottom; animation: rpgrow .7s var(--ease) both; }
@keyframes rpgrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.rphit { cursor: pointer; }
.rphit:hover, .rphit.hot { fill: var(--faint); }

.rprow { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--edge); }
.rprow:last-child { border-bottom: 0; }
.rprow.tight { padding: 8px 0; }
.rprow .rk { width: 22px; height: 22px; border-radius: 50%; background: var(--faint); color: var(--muted);
  font-size: 11.5px; display: grid; place-items: center; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.rpmain { flex: 1; min-width: 0; }
.rpline { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 14px; }
.rpline b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpfig { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; margin-left: auto; }
.rpmeta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.rpmeta .up { color: var(--green); font-weight: 600; }
.rpmeta .down { color: var(--red); font-weight: 600; }
.rpmeter { height: 6px; border-radius: 99px; background: var(--faint); margin-top: 6px; overflow: hidden; }
.rpmeter i { display: block; height: 100%; border-radius: 99px; background: var(--accent);
  animation: rpwide .8s var(--ease) both; transform-origin: left; }
.rpmeter.alt i { background: var(--ios-indigo); }
@keyframes rpwide { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rppager { justify-content: space-between; align-items: center; margin: 12px 0 0; }
.rppager:empty { display: none; }

.rpband { padding: 9px 0; border-bottom: 1px solid var(--edge); }
.rpband:last-child { border-bottom: 0; }
.rppair { display: grid; gap: 3px; margin-top: 6px; }
.rppair div { display: flex; align-items: center; gap: 8px; height: 10px; }
.rppair i { display: block; height: 8px; border-radius: 99px; min-width: 2px; animation: rpwide .8s var(--ease) both;
  transform-origin: left; }
.rppair em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
.rppair i.sold, .rpkey i.sold { background: var(--ios-blue); }
.rppair i.held, .rpkey i.held { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.rptag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 99px; margin-left: 8px; }
.rptag.good { background: var(--green-soft); color: var(--green); }
.rptag.bad { background: var(--red-soft); color: var(--red); }
.rpkey { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; white-space: nowrap; }
.rpkey i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.rpstack { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--faint); margin-bottom: 12px; }
.rpstack i { display: block; height: 100%; }
.rpkv { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 48px; gap: 12px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--edge); font-size: 13px; }
.rpkv:last-child { border-bottom: 0; }
.rpkv span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rpkv span i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.rpkv b { font-variant-numeric: tabular-nums; text-align: right; }
.rpkv em { font-style: normal; color: var(--muted); text-align: right; font-size: 12px; }
.rpkv.slim { font-size: 12.5px; }
.rpsubhead { font: 600 13px var(--display); margin: 16px 0 4px; }

.rpmix { margin-bottom: 14px; }
.rpsplit { display: flex; height: 12px; border-radius: 99px; overflow: hidden; margin-top: 6px; background: var(--faint); }
.rpsplit i:first-child { background: var(--ios-indigo); }
.rpsplit i:last-child { background: var(--ios-pink); }

.rptable tr.rpclick { cursor: pointer; }
.rptable tr.rpclick:hover td { background: var(--faint); }

.heat.rpheat { grid-template-columns: 40px repeat(12, minmax(0, 1fr)) 84px; gap: 3px; min-width: 620px; }
.heat.rpheat .cell { aspect-ratio: auto; height: 22px; border-radius: 5px; }
.heat.rpheat .tot { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; padding-left: 8px;
  display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.heat.rpheat .tot small { font-weight: 400; color: var(--muted); font-size: 10px; }
.rpheatpanel { padding-top: 18px; padding-bottom: 18px; }

.rppick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; margin: 6px 0 14px; }
.rppick .check { font-size: 13.5px; }
.rpshlist { max-height: 300px; overflow-y: auto; margin: 6px 0 12px; }
.rpshimport { border-top: 1px solid var(--edge); margin-top: 14px; padding-top: 14px; }
.rpshimport h4 { margin: 0 0 6px; font: 600 14px var(--display); }
.rpshimport code { font-size: 11.5px; background: var(--faint); padding: 1px 5px; border-radius: 5px; }

@media (max-width: 700px) {
  .rpseg { min-width: 0; width: 100%; }
  .rpnotes { grid-template-columns: 1fr; }
  .rpkv { grid-template-columns: minmax(0, 1fr) auto 44px; }
  .rpkv > span:nth-child(2) { display: none; }
  .rpstat .val { font-size: 17px; white-space: normal; overflow: visible; }
  .rpdeltas .delta small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rpbar, .rpmeter i, .rppair i { animation: none; } }

/* A row action that is no longer possible reads as a label, not a button. */
.rowbtn.off { opacity: .5; cursor: default; background: transparent; }

/* Latest from TCS: ten at a time. */
.pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 14px;
  font-size: 12.5px; }
.pager .chip:disabled { opacity: .4; cursor: default; }
.pager .chip:disabled:hover { transform: none; }

@media (max-width: 700px) {
  /* Courier rows on a phone: tight, readable, and never wrapping a status in half. */
  #bookTable tbody tr, #ovRecent tbody tr, #codTable tbody tr, #tpTable tbody tr { padding: 13px 15px; }
  #bookTable td, #ovRecent td, #codTable td, #tpTable td { padding: 2px 0; gap: 10px;
    font-size: 13.5px; align-items: center; }
  #bookTable td::before, #ovRecent td::before, #codTable td::before, #tpTable td::before {
    font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase; }
  #bookTable td b, #ovRecent td b { font-weight: 600; }
  #bookTable td .dim, #ovRecent td .dim { font-size: 12px; }
  /* A status tag stays on one line, with its wording beside it rather than under. */
  #bookTable td[data-label="TCS status"], #ovRecent td[data-label="Status"] {
    flex-wrap: wrap; justify-content: flex-end; text-align: right; }
  #bookTable td[data-label="TCS status"] .pill, #ovRecent td[data-label="Status"] .pill {
    white-space: nowrap; }
  #bookTable td[data-label="TCS status"] br, #ovRecent td[data-label="Status"] br { display: none; }
  #bookTable td[data-label="TCS status"] .dim, #ovRecent td[data-label="Status"] .dim {
    flex-basis: 100%; }
  #bookTable td[data-label="Consignee"], #ovRecent td[data-label="Customer"] { text-align: right; }
  /* The row's buttons sit on their own line, evenly spread, not squeezed off the edge. */
  #bookTable td[data-label=""]:last-child { display: flex; flex-wrap: wrap; gap: 7px;
    justify-content: flex-start; padding-top: 10px; }
  #bookTable td[data-label=""]:last-child .rowbtn { flex: 1 1 auto; text-align: center; }
  .tickcol { padding-bottom: 6px; }
}

/* ================= POS (Oct 2026) ================= */
.termpick { display: flex; flex-wrap: wrap; gap: 6px; }
.termpick .chip { min-height: 36px; }
.termpick .chip small { opacity: .7; margin-left: 4px; font-size: 11px; }
.termpick .chip.on { background: var(--ink); color: var(--bg, #fff); border-color: transparent; }
.posalertlist { display: grid; gap: 6px; margin-top: 10px; }
.posalertrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit;
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--edge); background: var(--faint);
  color: inherit; cursor: pointer; min-height: 40px; }
.posalertrow span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.posalertrow b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.posalertrow i { font-style: normal; opacity: .5; }
.posmonthend .pprows { margin: 10px 0 4px; }
.posmonthend .pprows > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0;
  font-size: 13.5px; }
.posmonthend .pprows > div span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posmonthend .pprows b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.posmonthend .pprows .due b { color: var(--ios-orange); }
.posmonthend .ppbtn { margin-top: 8px; }
.posbar { flex-wrap: wrap; row-gap: 10px; }
.posranges { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.posranges::-webkit-scrollbar { display: none; }
.mlist { display: none; }
.mrow { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none;
  border: 0; border-bottom: 1px solid var(--edge); padding: 11px 2px; cursor: pointer; }
.mrow:last-child { border-bottom: 0; }
.mrow .m1, .mrow .m2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mrow .m1 span, .mrow .m2 span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .m1 { font-size: 14.5px; }
.mrow .m1 b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mrow .m2 { font-size: 12px; color: var(--muted); margin-top: 3px; }
.mrow .m2 span:last-child { flex-shrink: 0; }
.mrow .pill { font-size: 11px; padding: 2px 8px; }
@media (max-width: 700px) {
  .mlist { display: block; }
  #posList table, #pf_body table, #pd_body table { display: none; }
  .posbar .spacer { display: none; }
  .posranges { width: 100%; }
  .posranges .chip { flex: 1 0 auto; }
  #posCards .stat .val { font-size: 19px; white-space: nowrap; }
  #posCards .stat.posprofit { grid-column: 1 / -1; }
  #posCards .pprows > div { flex-wrap: nowrap; }
  #posCards .pprows > div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #posCards .pprows > div b { white-space: nowrap; }
  #posCards .stat .note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.legend i.s { background: var(--ink); }
.legend i.p { background: var(--accent); }
@media (max-width: 700px) {
  .posranges .chip { padding: 0 10px; font-size: 12.5px; min-height: 34px; }
  .modal .stat .val { font-size: 20px; white-space: nowrap; }
  .modal .stat .note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 1100px) {
  #posCards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #posCards .stat .val { font-size: clamp(18px, 1.6vw, 26px); white-space: nowrap; }
}

/* ================= Courier (Oct 2026) ================= */
.cohead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cohead .cotabs { flex: 1; min-width: 0; margin: 0; }
.tcsbar.compact { flex-wrap: nowrap; padding: 6px 8px 6px 14px; gap: 10px; margin: 0;
  border-radius: 999px; flex-shrink: 0; max-width: 420px; }
.tcsbar.compact .tcsbar-text { gap: 0; font-size: 13px; line-height: 1.25; }
.tcsbar.compact .tcsbar-text b, .tcsbar.compact .tcsbar-text .dim {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcsbar.compact #tcsBarMsg { display: none; }
.tcsbar.compact .tcsbar-sync { font-size: 11.5px; }
.tcsbar.compact .chip { min-height: 32px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; }

.ovstrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 6px;
  border-radius: var(--r-lg); margin-bottom: 16px; }
.ovseg { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 14px;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: calc(var(--r-lg) - 6px); min-width: 0; }
.ovseg + .ovseg { box-shadow: -1px 0 0 var(--edge); }
.ovseg b { font: 600 24px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.ovseg span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ovseg small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; }
.ovseg.good b { color: var(--ios-green); }
.ovseg.bad b { color: var(--ios-red); }
.ovseg:hover { background: var(--faint); }
.ovseg.on { background: var(--ink); color: var(--bg, #fff); box-shadow: none; }
.ovseg.on small { color: inherit; opacity: .7; }
.ovseg.on b { color: inherit; }
.ovattnshow { margin: 0 0 16px; }
#ovRecentTitle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 700px) {
  .cohead { flex-direction: column; align-items: stretch; gap: 8px; }
  .tcsbar.compact { max-width: none; border-radius: 16px; }
  .ovstrip { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px; }
  .ovseg { padding: 8px 4px; align-items: center; text-align: center; }
  .ovseg b { font-size: 19px; }
  .ovseg span { font-size: 10.5px; }
  .ovseg small { display: none; }
  #ovRecent table { display: none; }
  .mrow .tcspill, .mrow .pill { flex-shrink: 0; }
}
#bookTable { overflow-x: auto; }
.cohead .cotabs { flex-wrap: nowrap; }
.tcsbar.compact { cursor: default; }
@media (max-width: 700px) {
  [data-copane="overview"] > .tools:first-child { flex-wrap: nowrap; gap: 8px; }
  [data-copane="overview"] .trackbox { flex: 1; min-width: 0; }
  [data-copane="overview"] .trackbox input { min-width: 0; width: 100%; }
  #ovMoney .stat .val, #codCards .stat .val { font-size: 19px; white-space: nowrap; }
  #ovMoney .stat .note, #codCards .stat .note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 700px) {
  .ovseg span { font-size: 0; }
  .ovseg span::after { content: attr(data-short); font-size: 10.5px; }
}
#bookTable td.bkacts > div { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 260px; margin-left: auto; }
@media (max-width: 700px) { #bookTable td.bkacts > div { max-width: none; justify-content: flex-start; } }
@media (max-width: 700px) { #tlTable table { display: none; } }

/* ================= Orders (Oct 2026) ================= */
.odbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 8px; border-radius: 99px; background: var(--ios-red); color: #fff;
  font: 600 11px/1 var(--sans, system-ui); font-variant-numeric: tabular-nums; vertical-align: 2px; }
.odbadge.hidden { display: none; }
#mobbar button { position: relative; }
#mobbar .odbadge { position: absolute; top: 2px; left: 50%; margin-left: 6px; height: 16px; min-width: 16px; font-size: 10px; }

.odpaste { padding: 14px; }
.odpaste textarea { width: 100%; min-height: 96px; resize: vertical; font-size: 15px; line-height: 1.45;
  box-sizing: border-box; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--edge);
  background: var(--field); transition: border-color .22s var(--ease), background .22s var(--ease); }
.odpaste textarea:focus { outline: none; border-color: var(--accent); background: var(--glass-2); }
.odpastebar .btn, .odpastebar .chip { white-space: nowrap; }
.odpastebar { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.odbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.odbar .odfilters { flex: 1; min-width: 0; margin: 0; }
.odfilters .chip small { opacity: .65; margin-left: 4px; font-variant-numeric: tabular-nums; }
.odsearch { width: 260px; flex-shrink: 0; }
.odsearch input { min-width: 0; width: 100%; }
.odlistpanel { padding: 6px 14px; }
.odcallout { margin-bottom: 14px; }

.odcard { display: flex; gap: 14px; align-items: flex-start; padding: 13px 2px; border-bottom: 1px solid var(--edge);
  cursor: pointer; }
.odcard:last-child { border-bottom: 0; }
.odcard.done, .odcard.cancelled { opacity: .62; }
.odmain { flex: 1; min-width: 0; }
.odmain .m1, .odmain .m2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.odmain .m1 { font-size: 15px; }
.odmain .m1 span, .odmain .m2 span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odmain .m1 > b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.odmain .m2 { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.odmain .m2 .pill { flex-shrink: 0; font-size: 11px; padding: 2px 8px; }
.odmain .m3 { font-size: 13px; margin-top: 5px; color: var(--ink); opacity: .85; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.odmain .m3.odnote { color: var(--ios-orange); opacity: 1; }
.odmain .m4 { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.odpaid { color: var(--ios-green); }
.odacts { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.odacts .chip { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.odacts .odbook { min-height: 36px; padding: 0 18px; }
.odseen { font-size: 12.5px; color: var(--muted); margin-top: 6px; display: grid; gap: 3px; }
.odseen .oddup { color: var(--ios-red); }
.odraw summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.odraw pre { white-space: pre-wrap; font: 13px/1.45 var(--sans, system-ui); background: var(--faint);
  padding: 10px 12px; border-radius: 10px; margin: 8px 0 0; max-height: 180px; overflow: auto; }
.odmenu { display: flex; flex-direction: column; gap: 8px; }
.odmenu .odred { color: var(--ios-red); }
.odbatch { display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; margin: 8px 0; }
.odbrow { display: flex; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--edge); cursor: pointer; }
.odbrow > span { min-width: 0; display: flex; flex-direction: column; }
.odbrow > span > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odbrow small { color: var(--muted); font-size: 12px; }
.dashod { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer; }

@media (max-width: 700px) {
  .odbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .odsearch { width: auto; }
  .odcard { flex-direction: column; gap: 10px; }
  .odacts { width: 100%; }
  .odacts .odbook { flex: 1; }
  .odacts .chip { flex: 0 0 auto; }
  .odpastebar .btn { flex: 1; }
  .odpastebar .chip { padding: 0 12px; }
  .odpastebar .spacer { display: none; }
}
.odcard > * { min-width: 0; max-width: 100%; }
.odlistpanel { overflow: hidden; }
@media (max-width: 700px) { .odmain { width: 100%; } }

/* ================= Investments (Oct 2026) ================= */
.invdue { display: grid; gap: 2px; }
.invduerow { padding: 8px 0; border-bottom: 1px solid var(--edge); }
.invduerow:last-child { border-bottom: 0; }
.invduerow .m1, .invduerow .m2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.invduerow .m1 span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.invduerow .m1 b { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; }
.invduerow .m2 { font-size: 12px; color: var(--muted); margin-top: 3px; }
.invduerow .m2 .chip { min-height: 30px; padding: 0 12px; font-size: 12px; }
.invduerow.late .m2 span { color: var(--ios-red); }
.invfig { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 4px 0 12px; font-size: 13px; }
.invfig > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--edge); min-width: 0; }
.invfig span { color: var(--muted); white-space: nowrap; }
.invfig b { text-align: right; font-variant-numeric: tabular-nums; }
.invfig .warn b { color: var(--ios-orange); }
.invpchart { margin: 0 0 12px; }
@media (max-width: 700px) { .invfig { grid-template-columns: 1fr; } }

/* ================= Phone pass (Oct 2026) =================
   1. A figure in a card always stays on one line: its size follows the card's own width
      (container units), so "Rs 13,240,000" shrinks a little instead of breaking after "Rs".
   2. Lists: each row's fields sit two to a line instead of one, so a list is half as long.
      The first field (the tag, name or month) spans the row; buttons get a row of their own. */
@media (max-width: 700px) {
  .stat { container-type: inline-size; }
  .stat .val { white-space: nowrap; font-size: clamp(14px, 12.5cqi, 28px); letter-spacing: -.025em; }

  tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 16px; padding: 12px 14px; }
  td { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 0; min-width: 0;
    overflow-wrap: anywhere; }
  td::before { font-size: 11px; letter-spacing: .01em; }
  td.r { text-align: left; }
  tbody tr > td:first-child { grid-column: 1 / -1; }
  td[data-label=""] { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  td input[type=checkbox] { margin: 0; }
}

/* ================= Dashboard stock chart (Oct 2026) ================= */
.stkchart { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge); }
.stkseg { display: inline-flex; margin-bottom: 8px; }
.stkseg button { padding: 5px 12px; font-size: 12px; }
.stkseg button[disabled] { opacity: .4; cursor: default; }
.stkhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.stkhead .stkseg { margin: 0; }
.stkcmp { display: flex; gap: 14px; flex-wrap: wrap; }
.stkcmp span { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.stkcmp small { font-size: 11px; color: var(--muted); }
.stkcmp b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stkseg button { white-space: nowrap; }
.stkmix { margin-top: 2px; }
.stkmeter { display: flex; gap: 2px; margin: 0 0 7px; }
.stkmeter i { display: block; height: 100%; border-radius: 99px; }
.stkmeter i.sw, .stkmixl i.sw { background: var(--ink); }
.stkmeter i.sp, .stkmixl i.sp { background: var(--accent); }
.stkmixl { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.stkmixl span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.stkmixl i { width: 8px; height: 8px; border-radius: 50%; }
.stkmixl b { color: var(--ink); font-variant-numeric: tabular-nums; }
.stkchart { margin-top: 10px; padding-top: 10px; }

/* ================= TCS reports, advice and returns ================= */

/* A row the owner should look at twice — an overcharged parcel, say. */
tbody tr.warnrow { background: color-mix(in srgb, var(--ios-orange) 7%, transparent); }
.over { color: var(--red); }

/* One pickup's load sheet, with its consignments beneath it. */
.lsheet { padding: 12px 0; border-bottom: 1px solid var(--edge); }
.lsheet:last-child { border-bottom: 0; }
.lsheet-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.lsheet-head .dim { font-size: 12.5px; }
.lsheet-cns { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.lsheet-cns .cnlink { font-size: 12.5px; }

/* A customer's delivery history, as a figure with its explanation beside it. */
.csbox { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--faint); border: 1px solid var(--edge); font-size: 13.5px; flex-wrap: wrap; }
.csbox.good { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.csbox.warn { background: color-mix(in srgb, var(--ios-orange) 12%, transparent);
  border-color: color-mix(in srgb, var(--ios-orange) 32%, transparent); }
.csbox.bad { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 32%, transparent); }
.csnum { display: flex; flex-direction: column; gap: 2px; min-width: 104px; }
.csnum b { font: 600 27px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.csnum span { font-size: 11.5px; color: var(--muted); }
.csbody { flex: 1; min-width: 200px; }

/* The delivery-history line under the mobile in the booking form. */
.bkrisk { margin-top: 8px; padding: 9px 12px; border-radius: var(--r-sm); font-size: 12.5px;
  background: var(--faint); border: 1px solid var(--edge); }
.bkrisk.good { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 28%, transparent); }
.bkrisk.bad { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, transparent); }

@media (max-width: 700px) {
  .csbox { gap: 10px; }
  .csnum { min-width: 0; flex-direction: row; align-items: baseline; gap: 8px; }
  .lsheet-cns { gap: 5px 10px; }
}

/* Popup tables: let the long product name take the slack and keep the short
   columns on one line, so a name is never squeezed into a few characters. */
.modal .box table td[data-label="Item"], .modal .box table th:nth-child(3) { min-width: 240px; }
.modal .box table td.tag, .modal .box table td.dim,
.modal .box table td.r, .modal .box table th.r { white-space: nowrap; }


/* ================= Rows that open up on a phone ================= */
.xsub { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.xsub.over { color: var(--red); }

@media (max-width: 760px) {
  /* The essentials stay; the rest waits behind a tap, so a long table still
     fits on a phone screen. Nothing is hidden on a desktop. */
  /* Secondary cells step aside on a phone. A row that opens a popup gets its
     detail there; a row that does not gets .xrow and opens in place on a tap. */
  .xtable tbody tr td.xhide { display: none; }
  .xtable tbody tr.xrow { position: relative; padding-right: 32px; cursor: pointer; }
  .xtable tbody tr.xrow.open td.xhide { display: flex; }
  .xtable tbody tr.xrow::after { content: '\203A'; position: absolute; right: 14px; top: 13px;
    color: var(--muted); font-size: 17px; line-height: 1; transition: transform .18s ease; }
  .xtable tbody tr.xrow.open::after { transform: rotate(90deg); }
}

/* ================= COD money board ================= */
.mnpill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px;
  font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.mnpill.wait { background: var(--chip); color: var(--muted); border-color: var(--edge); }
.mnpill.due  { background: color-mix(in srgb, var(--ios-orange) 14%, transparent);
  color: var(--ios-orange); border-color: color-mix(in srgb, var(--ios-orange) 32%, transparent); }
.mnpill.sent { background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.mnpill.good { background: var(--green-soft); color: var(--green);
  border-color: color-mix(in srgb, var(--green) 30%, transparent); }

.mninv { border: 1px solid var(--edge); border-radius: var(--r-md); margin-bottom: 10px;
  overflow: hidden; background: var(--chip); }
.mninv.done { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 22%, transparent); }
.mninv-h { display: flex; align-items: center; gap: 16px; padding: 13px 16px; cursor: pointer;
  flex-wrap: wrap; }
.mninv-h:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.mninv-h .grow { flex: 1; min-width: 150px; }
.mninv-n { display: flex; gap: 20px; flex-wrap: wrap; }
.mninv-n div { display: flex; flex-direction: column; gap: 1px; }
.mninv-n span { color: var(--muted); font-size: 11.5px; }
.mninv-n b { font-size: 14px; }
.mninv-n .over b { color: var(--red); }
.mnchev { color: var(--muted); font-size: 13px; }
.mninv-b { padding: 4px 16px 16px; border-top: 1px solid var(--edge); }

@media (max-width: 760px) {
  .mninv-h { gap: 10px; padding: 12px 14px; }
  .mninv-n { gap: 14px; width: 100%; }
  .mninv-n b { font-size: 13px; }
}


/* ================= Ledger attachments ================= */
.lfbox { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--edge); }
.lfbox > label { display: block; font-weight: 600; margin-bottom: 4px; }
.lfgrid { display: flex; flex-wrap: wrap; gap: 10px; }
.lfile { position: relative; width: 104px; }
.lfile a { display: block; height: 78px; border: 1px solid var(--edge); border-radius: var(--r-sm);
  overflow: hidden; background: var(--chip); display: flex; align-items: center; justify-content: center; }
.lfile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lfpdf { font-weight: 700; font-size: 13px; color: var(--muted); letter-spacing: .08em; }
.lfname { font-size: 11.5px; color: var(--muted); margin-top: 4px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.lfdel { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--edge); background: var(--bg); color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.lfdel:hover { color: var(--red); border-color: var(--red); }
.lclip { color: var(--muted); font-size: 12px; margin-left: 6px; }