/* The sidebar and the reports.
 *
 * The sidebar is read at a glance a hundred times a day, so it is quiet: one
 * icon weight, one type size, and the only bright thing on it is where you
 * are. Groups open downward under their own heading, which is why the icon
 * turns rather than the row moving. */

/* Vertical only, and never a visible bar.
 *
 * `overflow: auto` gave the closed rail a HORIZONTAL scrollbar: the rows are
 * 206px of nowrap label sitting in 54px of rail, so the browser offered to
 * scroll sideways — a grey slider across the bottom of the sidebar, over
 * nothing anybody would ever want to scroll to. The labels are meant to be
 * clipped; that is what closed means. */
.side nav {
  padding: 6px 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.side nav::-webkit-scrollbar { width: 0; height: 0; }

.ico {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

/* The shop's own icons, on the six top-level rows.
 *
 * Bigger than the line drawings they replaced, because they are drawings with
 * depth in them — at seventeen pixels a pill bottle and a calculator are the
 * same grey blob. At twenty-two they are two different things across a room,
 * which is the whole reason for having them.
 *
 * They do not take the text colour, so the row's own "you are here" cannot be
 * carried by the icon: it is carried by the stripe and the ground, which it
 * always was. What the colour buys instead is being findable without reading —
 * the rail is closed and wordless most of the day. */
.art {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  object-fit: contain;
  /* Dimmed until wanted, so six colour icons do not all shout at once on a
   * dark rail. The one you are on, and the one under the mouse, come up. */
  opacity: .82;
  transition: opacity .14s ease, filter .14s ease;
  -webkit-user-drag: none;
}
.nav:hover .art { opacity: 1; }
.nav.on .art, .nav.grp.holds .art { opacity: 1; }

/* padding-left is 11px: with the 3px marker stripe and a 13px half-icon it
 * puts the icon's centre at 27px, which is the middle of the 54px closed rail.
 * Off by two and the whole column reads as leaning — and it IS easy to get
 * wrong, because the three numbers live in three different rules, so the test
 * works it out from the CSS rather than trusting any of them. */
.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px 8px 11px;
  font: var(--font);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  color: #cbd5d1;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.nav > span { flex: 1; transition: opacity .14s ease; }
.nav:hover { background: rgba(255, 255, 255, .06); }
.nav.on { color: #fff; background: rgba(94, 234, 212, .12); border-left-color: #5eead4; }

/* A group heading is not a place you can be, so it never lights up like one
 * — but it says when the thing you ARE on is folded away inside it. */
.nav.grp .ico:last-child {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  transition: transform .15s ease, opacity .14s ease;
  opacity: .55;
}
.nav.grp.open .ico:last-child { transform: rotate(90deg); }
.nav.grp.holds {
  color: #fff;
  position: relative;
}
.nav.grp.holds::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -4px;
  background: #5eead4;
  border-radius: 50%;
}
/* Closed, the dot cannot sit after a chevron that has been faded out — it
 * would be off the end of a 54px rail. It moves to the corner of the icon,
 * which is the only place left that says "you are in here". */
.side:not(:hover):not(:focus-within) .nav.grp.holds::after {
  position: absolute;
  top: 7px;
  right: 11px;
  margin: 0;
}

.subs { padding: 2px 0 6px; background: rgba(0, 0, 0, .18); }

.sub {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 12px 7px 26px;
  font: var(--font);
  font-size: 12.5px;
  text-align: left;
  color: #a7bab6;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.sub .ico { width: 15px; height: 15px; flex: 0 0 15px; opacity: .8; }
.sub:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.sub.on {
  color: #fff;
  background: rgba(94, 234, 212, .13);
  border-left-color: #5eead4;
  font-weight: 600;
}

/* ── Reports ────────────────────────────────────────────────────────
 *
 * The same table as everywhere else, under a row of figures. The figures
 * come first because they are the answer; the rows underneath are the
 * working, for whoever wants to check it. */

.ranges { display: flex; gap: 4px; }

.daterange { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.daterange input {
  padding: 5px 7px;
  font: var(--font);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.daterange input:focus { outline: 0; border-color: var(--accent); }

/* Export.
 *
 * The two marks keep the colours an office already knows — green for the
 * sheet, red for the document — so the pair is told apart without reading
 * either label. Everything else about them is the same quiet button. */
.xbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.xbtn:hover { border-color: #c9d2e2; box-shadow: 0 1px 3px rgba(0, 0, 0, .07); }
.xbtn .ico { width: 16px; height: 16px; flex: 0 0 16px; }
.xbtn.xl:hover { background: #f1faf4; }
.xbtn.pf:hover { background: #fdf3f2; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.kpi span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.kpi b { font-size: 17px; font-variant-numeric: tabular-nums; }
.kpi.good b { color: #15803d; }
.kpi.bad b { color: var(--danger); }

/* Not a loss — an unknown.
 *
 * The profit report's "Not costed" figure is money that came in and cannot be
 * accounted for, which is neither good news nor bad. Amber, so it reads as a
 * question rather than as a number to celebrate or to worry about. */
.kpi.warn b { color: #b45309; }

/* The sentence that says how much of the sale is missing from the profit.
 * Same amber, with a rule down its edge, because a shop that skims the big
 * numbers must not be able to skim this one. */
.foot-note.warnline {
  border-left: 3px solid #f59e0b;
  padding-left: 10px;
  color: #92400e;
}

/* The By medicine / By day switch. The range chips already know how to look;
 * this only has to sit under the note instead of up in the toolbar. */
.profit-modes { margin: 10px 0 6px; }

.loading { padding: 40px 16px; color: var(--muted); text-align: center; }

td.empty { padding: 26px 14px; color: var(--muted); text-align: center; }

.foot-note {
  margin: 0;
  padding: 10px 14px;
  font-size: 11.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* How old the money is.
 *
 * Four bands under the totals, and each one is also the way to ask for it.
 * A single "₹80,000 outstanding" reads the same whether it is all last
 * week's or half of it a quarter old, and those are not the same shop. The
 * last band carries the warning colour on its own, because a bill past
 * ninety days is the one that needs a phone call today. */
.ageing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.ageband {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 11px;
  font: var(--font);
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid #cbd5e1;
  border-radius: 7px;
  cursor: pointer;
}
.ageband:hover { border-color: #c9d2e2; box-shadow: 0 1px 3px rgba(0, 0, 0, .07); }
.ageband span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.ageband b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ageband em { font-size: 11px; color: var(--muted); font-style: normal; }
.ageband.hot { border-left-color: var(--danger); }
.ageband.hot b { color: var(--danger); }
.ageband.on {
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border-color: var(--accent);
  border-left-color: var(--accent);
}

.agepick {
  padding: 5px 8px;
  font: var(--font);
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.agepick:focus { outline: 0; border-color: var(--accent); }

@media (max-width: 820px) {
  .ageing { grid-template-columns: repeat(2, 1fr); padding: 0 8px 8px; gap: 6px; }
  .ageband { padding: 7px 9px; }
}

/* Tabs over panes that are all already on the page.
 *
 * The money paid OUT used to sit under the money that came in, and under the
 * day-by-day summary as well — so seeing it meant scrolling past two tables,
 * and comparing the two meant scrolling between them. They are the two halves
 * of one question. Same height, one click apart.
 *
 * The panes are hidden, not rebuilt: switching is instant, and a table that
 * was scrolled stays where it was left. */
.tabbar {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  font: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  /* Sits ON the bar's own rule, so the selected tab joins its pane. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); background: var(--bg); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); background: transparent; }
.tab-n {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.tab.on .tab-n {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.pane[hidden] { display: none; }

@media (max-width: 720px) {
  .tabbar { padding: 0 8px; overflow-x: auto; }
  .tab { padding: 8px 11px; font-size: 12px; }
}