/* செலவு and வரவு tables (typed lines) — see income.js. Kept out of style.css (already huge, and its sticky/shrink rules are
   protected). Deliberately NOT table.sheet: that one has fixed column widths for the ledger. */
/* .expense-card is only an invisible footprint: the same centred box (--sheet-w, style.css) #sheet-title and .sheet-table-card use.
   The visible card, .expense-panel, is centred inside it (so centred on the screen); on a phone it fills the width. */
.expense-card { width: var(--sheet-w); max-width: 100%; margin: 0 auto; }
.expense-panel { max-width: 760px; margin: 0 auto; }
@media (max-width: 640px) { .expense-panel { padding: 12px; } }

/* The members sheet is hidden in these views, so its column totals in the bottom banner would float over nothing.
   The buttons in the banner (members, sign out, dashboard) stay. */
body.view-income .totals-track { visibility: hidden; }

/* The typed-lines tables (the வரவு extras and செலவு) — see income.js. Same centred footprint as above (.expense-card);
   the panel is wider because these tables have up to six columns (they scroll sideways on a phone, like the members
   sheet). Columns are styled by class (ic-<field>, set in income.js), so each kind can pick its own columns. */
.income-card .expense-panel { max-width: none; }   /* the whole --sheet-w footprint; long Tamil names need the room */
.income-table { width: 100%; border-collapse: collapse; }
.income-table .ic-sno { width: 48px; text-align: center; }
.income-table .ic-del { width: 44px; text-align: center; }
.income-table td input { width: 100%; }
.income-table .ic-date { min-width: 150px; }
.income-table .ic-name, .income-table .ic-nameEn { min-width: 180px; }
.income-table .ic-note { min-width: 150px; }
.income-table .ic-phone { min-width: 140px; }
.income-table .ic-amount { min-width: 110px; width: 120px; }
.income-table tfoot td { font-weight: 800; border-top: 2px solid var(--border); border-bottom: 0; white-space: nowrap; }
.income-table tr.row-saved td { background: var(--accent-soft); }
button.income-del { background: transparent; box-shadow: none; color: #9a3412; min-height: 0; padding: 4px 10px; font-size: 1.3rem; line-height: 1; border-radius: 8px; }
button.income-del:hover { background: var(--accent-soft); }
.income-add-row { text-align: center; margin: 14px 0 0; }
.income-swipe-hint { display: none; margin: 0 0 6px; text-align: center; font-size: 0.78rem; color: var(--muted); }

@media (max-width: 640px) {
  .income-swipe-hint { display: block; }   /* these tables are wider than a phone: say so */
  .income-table .ic-sno { display: none; }   /* no room for S.No on a phone */
  .income-table .ic-del { width: 36px; }
  .income-table th, .income-table td { padding: 6px 4px; }
  button.income-del { padding: 4px 6px; }
}

/* Bottom banner buttons (members link, sign out, Dashboard).
   - On the ledger page the group is always centred (.totals-banner-two, below).
   - A real <button> picks up the global min-height:44px (the links do not), which made வெளியேறு taller than the bar.
   - Three buttons did not fit a 360-390px phone (Dashboard was clipped), so they shrink a little there. */
.totals-banner button.header-link-btn { min-height: 0; }
@media (max-width: 420px) {
  .totals-banner .header-link-btn { font-size: 0.68rem; padding: 6px 8px; }
  .totals-banner .banner-left-group { gap: 4px; }
}

/* Ledger footer in two rows (index.html's banner carries .totals-banner-two). Top: a slim, darker strip holding the
   Collected / Need line, centred on the screen. Bottom: the buttons row, as before. --row-bottom follows the old
   single-bar heights (46 / 38 / 34px) so the buttons keep their size; style.css's `.totals-banner {height}` rules are
   beaten by the extra class. Both rows are centred on the screen. */
.totals-banner.totals-banner-two { --row-top: 26px; --row-bottom: 46px; height: calc(var(--row-top) + var(--row-bottom)); }
.totals-banner-two .totals-track {
  position: absolute; left: 0; right: 0; top: 0; width: auto; height: var(--row-top);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, #c2410c, #9a3412 55%, #7f1d1d);
}
.totals-banner-two .totals-col { position: static; height: auto; padding: 0; justify-content: center; }
.totals-banner-two .totals-col::before { display: none; }
.totals-banner-two .totals-value { font-size: 0.92rem; line-height: 1.2; }
.totals-banner.totals-banner-two .banner-left-group { left: 50%; top: auto; bottom: 0; height: var(--row-bottom); transform: translateX(-50%); }
body main { padding-bottom: 96px; }   /* clears the taller footer (72px at most) */
@media (max-width: 600px) {
  .totals-banner.totals-banner-two { --row-bottom: 38px; }
  .totals-banner-two .totals-value { font-size: 0.8rem; }
}
@media (max-width: 480px) {
  .totals-banner.totals-banner-two { --row-bottom: 34px; }
}

/* Colour badges on the ledger footer buttons (inline SVG in index.html: a white disc with a coloured symbol, so each
   one reads at a glance on the orange bar). The colours live in the SVG itself. */
.totals-banner-two .header-link-btn { display: inline-flex; align-items: center; gap: 7px; padding-left: 8px; }
.totals-banner-two .btn-icon { width: 24px; height: 24px; flex: none; }
@media (max-width: 420px) {
  .totals-banner-two .header-link-btn { gap: 4px; padding-left: 5px; }
  .totals-banner-two .btn-icon { width: 18px; height: 18px; }
}