/* SchoolSync additions on top of the Light Slate app.css. Keep it small. */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.toolbar .field { margin-bottom: 0; }
.table-wrap { overflow-x: auto; position: relative; }

/* A table wider than the screen swipes sideways — but only if the user knows. Without a
   cue the right-hand column (usually the action button) just looks chopped off. The inset
   shadow is pinned to the element's own box, so it stays at the edge while content scrolls,
   and the hint text disappears once the table has been scrolled to the end. */
.table-wrap.is-scrollable:not(.at-end) { box-shadow: inset -16px 0 14px -14px rgba(15, 23, 42, .38); }
.swipe-hint { font-size: 12px; color: var(--muted); margin: -4px 0 8px; }
@media (max-width: 520px) { .col-sm-hide { display: none; } }

.tbl tfoot td { border-top: 2px solid var(--border); font-weight: 700; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.rtl .num { text-align: left; }
.pos-val { color: var(--red); font-weight: 600; }
.zero-val { color: var(--muted); }
.cred-val { color: var(--green); font-weight: 600; }
/* auto-fit, not a fixed repeat(4): the band draws its hairlines from a 1px grid gap, so
   an empty track shows as a grey slab. auto-fit collapses the unused tracks, letting any
   count of stats (2, 3 or 4) fill the row cleanly. */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: var(--pad); }
.kpi .stat-value { font-size: 22px; }
/* "Rs" alone on one line and the amount on the next reads badly — shrink the figure on a
   phone so a full amount like Rs 286,900.00 stays on one line, and never break a number. */
@media (max-width: 520px) { .kpi .stat-value { font-size: 16px; white-space: nowrap; } }
.section-title { margin: 18px 0 8px; font-size: 15px; font-weight: 700; }
.hint { color: var(--muted); font-size: 12.5px; margin: -6px 0 10px; }
.sheet { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; max-width: 720px; }
.receipt-head { text-align: center; border-bottom: 1px dashed var(--border); padding-bottom: 10px; margin-bottom: 10px; }
.receipt-head h2 { margin: 0; }
.mono-big { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px; letter-spacing: 1px; }
@media print {
  .appbar, .btn, .btn-row, .toolbar, .flash-list { display: none !important; }
  .wrap { max-width: 100%; padding: 0; }
  body.app { background: #fff; }
}