/* Mobile-first. Base rules are the phone layout; the min-width blocks add tablet and desktop. */

:root {
  --maroon: #7A1F2B;
  --maroon-deep: #541320;
  --maroon-tint: #F6E7DF;
  --cream: #FFF8E7;
  --ivory: #FFFDF6;
  --gold: #C8982E;
  --gold-soft: #EAD9AE;
  --ink: #3A2418;
  --ink-soft: #6F5A4B;
  --danger: #A32A1E;
  --success: #2F6B3C;
  --radius: 14px;
  --tap: 48px;
  --tabbar: 64px;
  --font-body: "Noto Sans", "Noto Sans Devanagari", system-ui, sans-serif;
  --font-head: "Noto Serif", "Noto Serif Devanagari", Georgia, serif;

  --bs-body-bg: var(--cream);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-border-color: var(--gold-soft);
  --bs-link-color-rgb: 122, 31, 43;
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--cream); color: var(--ink); min-height: 100dvh; }
h1, h2, h3, .brand-title { font-family: var(--font-head); color: var(--maroon-deep); }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.boot-spinner {
  width: 40px; height: 40px; margin: 40vh auto 0; border-radius: 50%;
  border: 4px solid var(--gold-soft); border-top-color: var(--maroon);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Buttons and fields. 16px text stops iOS zooming into inputs. */
.btn-app, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: .5rem 1.25rem; border-radius: 12px;
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, transform .05s;
}
.btn-app { background: var(--maroon); color: var(--cream); }
.btn-app:hover { background: var(--maroon-deep); color: var(--cream); }
.btn-app:active, .btn-ghost:active { transform: translateY(1px); }
.btn-app:disabled { opacity: .6; cursor: progress; }
.btn-ghost { background: transparent; color: var(--maroon); border-color: var(--gold); }
.btn-ghost:hover { background: var(--maroon-tint); color: var(--maroon-deep); }
.btn-danger-soft { color: var(--danger); border-color: var(--danger); }
.btn-whatsapp { background: #1B7F4B; color: #fff; }
.btn-whatsapp:hover { background: #14653B; color: #fff; }
.btn-block { width: 100%; }

.form-control, .form-select {
  min-height: var(--tap); font-size: 16px; border-radius: 10px;
  border-color: var(--gold-soft); background-color: var(--ivory); color: var(--ink);
}
textarea.form-control { min-height: 7rem; }
.form-control:focus, .form-select:focus { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(122, 31, 43, .15); }
.form-label { font-weight: 600; margin-bottom: .35rem; }
.field { margin-bottom: 1rem; }
.field-error { color: var(--danger); font-size: .875rem; margin-top: .3rem; }
.field-hint { color: var(--ink-soft); font-size: .875rem; margin-top: .3rem; }
.optional { color: var(--ink-soft); font-weight: 400; font-size: .875rem; }
.is-bad { border-color: var(--danger) !important; }

.card-app {
  background: var(--ivory); border: 1px solid var(--gold-soft);
  border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem;
}
.card-app > h2 { margin-bottom: .75rem; }

/* App shell: maroon header and bottom tabs on phones. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--maroon); color: var(--cream);
  padding: calc(.7rem + env(safe-area-inset-top)) 1rem .7rem;
  border-bottom: 3px solid var(--gold);
}
.topbar .brand-title { color: var(--cream); font-size: 1.05rem; line-height: 1.2; }
.page { padding: 1rem 1rem calc(var(--tabbar) + 1.5rem + env(safe-area-inset-bottom)); }
.page-inner { max-width: 640px; margin: 0 auto; }
.page-title { margin-bottom: 1rem; }

.nav-rail {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--maroon-deep);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-rail-brand, .nav-rail-user { display: none; }
.nav-links { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-links li { flex: 1; min-width: 0; }
.nav-link-app {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--tabbar); color: var(--gold-soft); font-size: .7rem; line-height: 1.1; text-align: center; text-decoration: none;
}
.nav-link-app svg { width: 24px; height: 24px; }
.nav-link-app[aria-current="page"] { color: #fff; font-weight: 600; box-shadow: inset 0 3px 0 var(--gold); }

/* Toggles */
.seg { display: flex; background: var(--maroon-tint); border-radius: 12px; padding: 4px; }
.seg label {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 44px; border-radius: 9px; font-weight: 600; color: var(--maroon); cursor: pointer; margin: 0;
}
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg input:checked + span { color: var(--cream); }
.seg label:has(input:checked) { background: var(--maroon); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 1px; }
.seg-stack { display: grid; gap: .6rem; margin-bottom: 1rem; }

/* Book tiles: 4 across on a phone so one thumb reaches all of them. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.tile {
  position: relative; display: block; margin: 0; cursor: pointer; text-align: center;
  background: var(--ivory); border: 2px solid var(--gold-soft); border-radius: 12px; padding: .4rem .3rem;
}
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; display: block; }
.tile-code { display: block; font-weight: 700; color: var(--maroon-deep); margin-top: .25rem; }
.tile-name { display: block; font-size: .7rem; line-height: 1.2; color: var(--ink-soft); min-height: 1.7rem; }
.tile:has(input:checked) { border-color: var(--maroon); background: var(--maroon-tint); }
.tile:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 1px; }
.tile:has(input:checked)::after {
  content: "✓"; position: absolute; top: -8px; right: -6px; width: 24px; height: 24px; line-height: 24px;
  border-radius: 50%; background: var(--maroon); color: var(--cream); font-size: .85rem; font-weight: 700;
}
.tiles.tiles-carton { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }

/* Quantity */
.qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pill {
  min-width: var(--tap); height: var(--tap); border-radius: 999px; font-weight: 600; font-size: 1rem;
  border: 1px solid var(--gold); background: var(--ivory); color: var(--maroon); cursor: pointer;
}
.pill.active { background: var(--maroon); color: var(--cream); border-color: var(--maroon); }
.stepper { display: flex; align-items: center; gap: .25rem; width: 100%; }
.stepper input { flex: 1; min-width: 0; text-align: center; font-weight: 700; }
.step-btn {
  width: var(--tap); height: var(--tap); border-radius: 12px; font-size: 1.4rem; line-height: 1;
  border: 1px solid var(--maroon); background: var(--ivory); color: var(--maroon); cursor: pointer;
}

/* Amount */
.input-money { position: relative; }
.input-money span { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--maroon); }
.input-money input { padding-left: 2rem; font-size: 1.25rem; font-weight: 700; }
.amount-words { min-height: 1.5rem; margin-top: .4rem; color: var(--maroon); font-weight: 600; }

/* Screenshot picker */
.shot-picker {
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 72px;
  border: 2px dashed var(--gold); border-radius: 12px; color: var(--maroon); font-weight: 600; cursor: pointer; margin: 0;
  background: var(--ivory); padding: .5rem;
}
.shot-picker:has(input:focus-visible) { outline: 3px solid var(--gold); }
.shot-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.shot-preview { max-height: 96px; max-width: 72px; border-radius: 6px; object-fit: cover; }

/* UPI QR code shown when UPI is chosen */
.upi-qr { text-align: center; margin: 0 0 .75rem; }
.upi-qr img { width: 280px; height: auto; max-width: 100%; background: #fff; border-radius: 8px; border: 1px solid var(--gold); }
.upi-qr figcaption { margin-top: .4rem; font-size: .9rem; }

/* Checkout header band */
.checkout-band {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin-bottom: .9rem;
  padding: .85rem 1rem; border-radius: 18px; color: var(--cream);
  background: linear-gradient(135deg, var(--maroon-deep), var(--maroon) 60%, #A8434F);
  box-shadow: 0 8px 20px rgba(84, 19, 32, .22);
}
.checkout-band h1 { margin: 0; color: var(--cream); font-size: 1.6rem; text-align: center; letter-spacing: .02em; }
.band-back {
  justify-self: start; background: rgba(255, 248, 231, .16); color: var(--cream); border: 1px solid rgba(255, 248, 231, .45);
  border-radius: 999px; padding: .35rem .85rem; font-weight: 600; font-size: .9rem; min-height: 36px;
}
.band-back:hover { background: rgba(255, 248, 231, .28); }
@media (max-width: 420px) { .band-spacer { display: none; } .checkout-band { grid-template-columns: auto 1fr; } .checkout-band h1 { font-size: 1.35rem; } }

/* Generate-QR button, spinner and the QR shown inline */
.btn-green { background: #1F8A4C; border-color: #1F8A4C; color: #fff; }
.btn-green:hover:not([disabled]) { background: #187A41; border-color: #187A41; color: #fff; }
.qr-area { margin-top: .75rem; }
.qr-area:empty { margin: 0; }
.mini-spinner {
  width: 44px; height: 44px; margin: 1.5rem auto; border-radius: 50%;
  border: 4px solid var(--gold-soft); border-top-color: #1F8A4C; animation: spin .9s linear infinite;
}
.qr-inline { text-align: center; border: 2px dashed #A9DBBE; background: #F6FCF8; border-radius: 16px; padding: 1rem; }
.success-bank { color: var(--success); font-weight: 600; margin: .25rem 0 0; }

/* Thank-you part of the success page */
.thank-box { text-align: left; border: 2px solid #A9DBBE; background: #F6FCF8; border-radius: 16px; padding: .9rem 1rem; margin: 1rem 0; }
.thank-box h2 { font-size: 1.05rem; margin-bottom: .6rem; color: #22603D; }
.thank-name { color: var(--ink-soft); margin-bottom: .4rem; }
.thank-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding: .55rem 0; border-top: 1px solid #DCEFE3; }
.thank-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.thank-row .btn-whatsapp { flex: 1 1 100%; }
.thank-add { border-top: 1px solid #DCEFE3; padding-top: .6rem; margin-top: .3rem; }
.num-badge {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--maroon); color: var(--cream); font-size: .78rem; font-weight: 700;
}

/* Compact name and WhatsApp fields */
.compact-fields .form-control { min-height: 38px; padding: .3rem .7rem; font-size: .95rem; }
.compact-fields .form-label { margin-bottom: .15rem; font-size: .85rem; }

/* Errors listed at the top of the Add and Checkout pages */
.error-box {
  border: 2px solid var(--danger); background: #FCEDEA; color: var(--danger); border-radius: 12px;
  padding: .75rem 1rem; margin-bottom: .75rem; font-weight: 600;
}
.error-box ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.error-box:focus { outline: none; }

/* Cart */
.cart-count {
  display: inline-block; min-width: 1.6rem; padding: 0 .45rem; border-radius: 999px; text-align: center;
  background: var(--maroon); color: #fff; font-family: var(--font-body); font-size: .85rem; vertical-align: middle;
}
.cart-empty { color: var(--ink-soft); margin: 0; }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--gold-soft); }
.cart-line-label { flex: 1; min-width: 0; font-weight: 600; }
.cart-line-amount { width: 7.5rem; flex: none; }
.cart-line-amount input { font-size: 1rem; padding-left: 1.8rem; }
.cart-line-sum { font-weight: 700; }
.cart-remove {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--danger);
  background: transparent; color: var(--danger); font-size: 1.3rem; line-height: 1;
}
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: .6rem; font-size: 1.15rem; color: var(--maroon-deep); }

/* Checkout */
.checkout-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.btn-link-app { background: none; border: 0; padding: .4rem 0 0; color: var(--maroon); font-weight: 600; text-decoration: underline; text-align: left; }
.success-lines { list-style: none; padding: 0; margin: .75rem 0 0; text-align: left; }
.success-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--gold-soft); }

.add-save { margin-top: .25rem; }
.save-error { color: var(--danger); font-weight: 600; margin-bottom: .75rem; }

/* Saved confirmation */
.success-panel { text-align: center; padding: 2rem 1rem; }
.success-mark {
  width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; background: var(--success); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 2.25rem;
}
.success-summary { color: var(--ink-soft); margin: .5rem 0 1.5rem; }
.success-actions { display: grid; gap: .75rem; max-width: 360px; margin: 0 auto; }

/* Records */
.totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.total {
  background: var(--ivory); border: 1px solid var(--gold-soft); border-radius: 12px; padding: .65rem .8rem;
}
.total-primary { background: var(--maroon); border-color: var(--maroon); }
.total-primary .total-label, .total-primary .total-value { color: var(--cream); }
.total-label { font-size: .8rem; color: var(--ink-soft); }
.total-value { font-size: 1.25rem; font-weight: 700; color: var(--maroon-deep); font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.chip {
  flex: none; min-height: 40px; padding: 0 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
  border: 1px solid var(--gold); background: var(--ivory); color: var(--maroon); cursor: pointer;
}
.chip.active { background: var(--maroon); border-color: var(--maroon); color: var(--cream); }
.filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.filter-grid .span-all { grid-column: 1 / -1; }

.record-cards { display: grid; gap: .6rem; }
.record-card {
  display: block; width: 100%; text-align: left; cursor: pointer; color: inherit;
  background: var(--ivory); border: 1px solid var(--gold-soft); border-radius: 12px; padding: .75rem .9rem;
}
.record-top { display: flex; justify-content: space-between; gap: .75rem; font-weight: 700; color: var(--maroon-deep); }
.record-meta { color: var(--ink-soft); font-size: .875rem; margin-top: .15rem; }
.badge-pay { font-size: .75rem; font-weight: 600; border-radius: 6px; padding: .05rem .4rem; background: var(--maroon-tint); color: var(--maroon); }
/* Date and time pills (pastel) */
.pill-date, .pill-time {
  display: inline-block; font-size: .75rem; font-weight: 600; border-radius: 999px; padding: .1rem .55rem;
  margin: .1rem .25rem .1rem 0; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pill-date { background: #DCEBFA; color: #24507A; }
.pill-time { background: #E3F4E1; color: #2D6331; }
.when-cell { white-space: nowrap; }
.edit-col { width: 1%; text-align: center; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid #D9CCF0; background: #F3EEFB; color: #5B3F99; transition: background .15s, transform .15s;
}
.icon-btn:hover { background: #E6DCF7; transform: scale(1.06); }
.by-edit { margin-top: .1rem; }
/* Deleted entries stay listed, crossed out, with Restore */
.is-deleted td:not(.edit-col), .record-card.is-deleted .record-top, .record-card.is-deleted .record-meta {
  text-decoration: line-through; text-decoration-color: #B3261E; text-decoration-thickness: 2px; opacity: .6;
}
.record-card.is-deleted { background: #FBF3F2; }
.record-deleted { font-size: .8rem; font-weight: 600; color: var(--danger); margin-bottom: .25rem; }
.badge-deleted { display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .08rem .5rem; background: #FADCD9; color: #8C1D18; }
.edit-col { white-space: nowrap; }
.icon-restore { border-color: #BFE3C6; background: #E6F5E9; color: #2D6331; }
.icon-restore:hover { background: #D3EDD8; }
.by-edit .form-select { flex: 1; min-width: 0; }

/* My target tiles */
.total-target { background: #FFF4D9; border-color: #EAD9AE; }
.total-target .link-btn { padding: 0; margin-top: .15rem; font-size: .85rem; }
.target-bar { height: 8px; border-radius: 999px; background: #F2E6C9; margin-top: .4rem; overflow: hidden; }
.target-bar span { display: block; height: 100%; background: var(--success); border-radius: 999px; }
.target-edit { grid-column: 1 / -1; background: var(--ivory); border: 1px solid var(--gold-soft); border-radius: 12px; padding: .75rem .9rem; }
/* Leader dashboard: devotees, family members and targets per Bhakti Vriksha */
/* Each Bhakti Vriksha is its own card: a coloured header band with the name centred, then a white table. */
.bv-team {
  --tone-band: #EDE6FA; --tone-line: #CDBEF0; --tone-ink: #4A2F86; --tone-soft: #F8F5FE;
  margin-top: 1.25rem; background: #fff; border: 2px solid var(--tone-line); border-radius: 18px;
  overflow: hidden; box-shadow: 0 6px 18px rgba(84, 19, 32, .08);
}
.bv-tone-1 { --tone-band: #DFF3E8; --tone-line: #A9DBBE; --tone-ink: #22603D; --tone-soft: #F3FBF6; }
.bv-tone-2 { --tone-band: #FDE8DA; --tone-line: #F2C2A2; --tone-ink: #8A3F12; --tone-soft: #FEF6F0; }
.bv-tone-3 { --tone-band: #DCEBFA; --tone-line: #A9CBEE; --tone-ink: #1F4E7A; --tone-soft: #F2F8FE; }
.bv-tone-4 { --tone-band: #FBE0EA; --tone-line: #EEB2C7; --tone-ink: #8C2350; --tone-soft: #FEF4F8; }
.bv-tone-5 { --tone-band: #FBF1CF; --tone-line: #E9D28A; --tone-ink: #6E5310; --tone-soft: #FEFAEC; }
.bv-band {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem;
  background: var(--tone-band); border-bottom: 2px solid var(--tone-line); padding: .9rem 1rem;
}
.bv-band-title { text-align: center; }
.bv-band h2 { margin: 0; color: var(--tone-ink); font-size: 1.3rem; }
.bv-sum { margin-top: .2rem; font-size: .85rem; font-weight: 600; color: var(--tone-ink); opacity: .85; }
.bv-band-actions { display: flex; justify-content: flex-end; gap: .4rem; }
.icon-on-band { background: #fff; border-color: var(--tone-line); color: var(--tone-ink); }
.icon-on-band:hover { background: var(--tone-soft); }
.icon-delete { color: #A32A1E; border-color: #EDB8B2; }
.icon-delete:hover { background: #FCEDEA; }
.bv-body { padding: .75rem 1rem 1rem; }
.bv-team .team-table th { color: var(--tone-ink); border-bottom-color: var(--tone-line); }
.bv-team .team-table td { border-bottom-color: #EFEAE0; }
.bv-team .family-row { background: var(--tone-soft); }
.bv-team .team-table tfoot td { color: var(--tone-ink); border-top: 2px solid var(--tone-line); }
.rename-form { margin-bottom: .75rem; }
.props-form { background: var(--tone-soft, #FFFDF6); border: 1px dashed var(--tone-line, #EAD9AE); border-radius: 12px; padding: .9rem 1rem; }
.props-title { font-size: 1rem; margin: 0 0 .6rem; color: var(--tone-ink, var(--maroon-deep)); }
.props-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .props-grid { grid-template-columns: 1fr 1fr; } }
.props-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }
.team-table .num-left { padding-left: .9rem; font-variant-numeric: tabular-nums; }
.family-card { margin: 0 0 1.25rem; }
.family-table { min-width: 460px; }
@media (max-width: 575px) {
  .bv-band { grid-template-columns: 1fr auto; }
  .bv-band > .bv-band-side:first-child { display: none; }
  .bv-band-title { text-align: left; }
}
.team-wrap { overflow-x: auto; }
.team-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.team-table th { font-size: .8rem; color: var(--ink-soft); font-weight: 600; text-align: left; padding: .4rem .5rem; border-bottom: 2px solid var(--gold-soft); }
.team-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--gold-soft); vertical-align: middle; }
.team-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.team-table tfoot td { font-weight: 700; color: var(--maroon-deep); border-bottom: 0; }
.t-name { display: flex; align-items: center; gap: .35rem; min-width: 12rem; }
.t-family { color: var(--ink-soft); padding-left: 1rem; }
.family-row { background: #F7F3FC; }
.family-count { color: #5B3F99; font-weight: 600; }
.expand-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #D9CCF0; background: #F3EEFB; color: #5B3F99; line-height: 1; flex: none; }
.expand-space { display: inline-block; width: 28px; flex: none; }
.target-input { width: 6.5rem; text-align: right; }
.t-progress { display: flex; align-items: center; gap: .5rem; min-width: 8rem; }
.t-progress .target-bar { flex: 1; margin: 0; }
.stats-picker { max-width: 22rem; margin-bottom: .75rem; }

/* Stats */
.tips { background: #F3EEFB; border-color: #DCD0F0; }
.tip-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.split-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--gold-soft); }
.split-cash { background: #E8B4A8; }
.split-upi { background: #9CC9B4; }
.split-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .5rem; font-size: .875rem; }
.split-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: middle; }
.record-table-wrap { display: none; }
.empty { text-align: center; color: var(--ink-soft); padding: 2.5rem 1rem; }
.load-more { display: block; margin: 1rem auto 0; }

.detail-list { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
.detail-list dt { font-weight: 500; color: var(--ink-soft); }
.detail-list dd { margin: 0; font-weight: 600; }
.detail-shot { display: block; width: 100%; border-radius: 10px; margin-top: 1rem; border: 1px solid var(--gold-soft); }
.modal-content { background: var(--ivory); border-radius: var(--radius); }

/* Sign-in and onboarding */
.auth-wrap { min-height: 100dvh; display: flex; flex-direction: column; }
.auth-hero {
  background: var(--maroon); color: var(--cream); text-align: center; border-bottom: 4px solid var(--gold);
  padding: calc(2.5rem + env(safe-area-inset-top)) 1.5rem 2rem;
}
.auth-hero .brand-title { color: var(--cream); font-size: 1.6rem; margin: .75rem 0 .25rem; }
.auth-hero p { margin: 0; color: var(--gold-soft); }
.auth-mark { width: 72px; height: 72px; }
.auth-body { flex: 1; padding: 1.5rem 1rem 2rem; width: 100%; max-width: 480px; margin: 0 auto; }
.signin-note { background: var(--maroon-tint); border-radius: 10px; padding: .75rem; margin-bottom: 1rem; }

/* Message settings */
.chips-insert .chip { min-height: 36px; font-size: .8rem; font-family: ui-monospace, Consolas, monospace; }
.template-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%;
  background: var(--ivory); border: 1px solid var(--gold-soft); border-radius: 12px;
  padding: .75rem .9rem; margin-bottom: .5rem; text-align: left; cursor: pointer; color: inherit;
}
.template-row.active { border-color: var(--maroon); box-shadow: inset 0 0 0 1px var(--maroon); }
.preview-bubble {
  background: #DCF8C6; color: #1d2b1d; border-radius: 10px; padding: .75rem .9rem;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem;
}
.form-check-input:checked { background-color: var(--maroon); border-color: var(--maroon); }
.check-row { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); }
.check-row input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; }
.check-row label { margin: 0; }

.app-toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 2000;
  bottom: calc(var(--tabbar) + 1rem + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--cream); padding: .65rem 1.1rem; border-radius: 10px;
  max-width: calc(100vw - 2rem);
}

/* Pictures */
.camera-btn { min-height: 64px; font-size: 1.1rem; }
.camera-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.camera-btn.is-busy { opacity: .7; cursor: progress; }
.camera-btn:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.pic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.pic-empty { grid-column: 1 / -1; }
.pic { margin: 0; background: var(--ivory); border: 1px solid var(--gold-soft); border-radius: 12px; overflow: hidden; }
.pic img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pic figcaption { padding: .4rem .6rem .6rem; font-size: .8rem; color: var(--ink-soft); }

/* Dashboard */
.chip-soft { min-height: 36px; font-size: .85rem; border-color: var(--gold-soft); }
.bv-grid { display: grid; gap: .6rem; }
.filter-row { display: grid; gap: .5rem; margin-bottom: .75rem; }
.link-row { display: flex; gap: .5rem; }
.link-row .form-control { flex: 1; min-width: 0; }
.num-links { display: inline-flex; flex-wrap: wrap; gap: .3rem .35rem; }

/* Pills: phone and WhatsApp, payment, book */
.pill-call, .pill-wa, .pill-pay, .pill-book {
  display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .15rem .6rem;
  font-size: .78rem; font-weight: 600; white-space: nowrap; text-decoration: none; line-height: 1.5;
}
.pill-call { background: #EEF0F5; color: #3C4660; border: 1px solid #D7DCE8; }
.pill-wa { background: #DDF6E4; color: #12703A; border: 1px solid #A8E2BC; }
.pill-call:hover { background: #E2E6EF; }
.pill-wa:hover { background: #C9F0D5; }
.pill-cash { background: #FFF1CC; color: #7A5600; border: 1px solid #F0D98C; }
.pill-upi { background: #DCEBFA; color: #1F4E7A; border: 1px solid #A9CBEE; }
.pill-none { background: #F3E9E7; color: #8C4A3F; border: 1px solid #E5CBC5; }
.pill-book { background: #F6EAFB; color: #6A2C80; border: 1px solid #E1C6EC; }
.amount-cell { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.row-actions { display: inline-flex; gap: .35rem; }
.pill-books { display: inline-block; min-width: 2.4rem; text-align: center; background: #7A1F2B; color: #FFF8E7; border-radius: 999px; padding: .1rem .6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pill-leader { background: #F6EAFB; color: #6A2C80; border: 1px solid #E1C6EC; }
.rank-pill { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #F3EEE4; color: var(--ink-soft); font-weight: 700; font-size: .85rem; }
.rank-1 { background: #F7E2A6; color: #6E5310; }
.rank-2 { background: #E6E9EF; color: #3C4660; }
.rank-3 { background: #F2D3BF; color: #7A3E1B; }
.link-strong { background: none; border: 0; padding: 0; font-weight: 700; color: var(--maroon-deep); text-align: left; text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 3px; }
.link-strong:hover { text-decoration-color: var(--maroon); }
.section-title { margin: 2rem 0 .75rem; font-size: 1.15rem; }
.move-bar { background: #FFF4D9; border: 2px solid #E9D28A; border-radius: 14px; padding: .85rem 1rem; margin-bottom: .9rem; box-shadow: 0 4px 12px rgba(84, 19, 32, .07); }
.move-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Super Admin: payment method choice */
.pay-modes { display: grid; gap: .6rem; margin-bottom: .6rem; }
.pay-mode { display: flex; gap: .75rem; align-items: flex-start; border: 2px solid var(--gold-soft); border-radius: 14px; padding: .8rem 1rem; background: #fff; cursor: pointer; }
.pay-mode input { margin-top: .3rem; flex: none; }
.pay-mode-body { display: grid; gap: .15rem; }
.pay-mode-body small { color: var(--ink-soft); }
.pay-mode-body .pill-pay { justify-self: start; }
.pay-mode.is-on { border-color: #5FA97F; background: #F2FAF5; }
.pay-mode.is-live.is-on { border-color: #C0392B; background: #FEF4F2; }
.pay-mode.is-off { opacity: .6; cursor: not-allowed; }
.edit-panel { margin-top: .9rem; background: #FEF6F0; border-color: #F2C2A2; }
.icon-sm { width: 34px; height: 34px; }
.icon-shot { border-color: #A9CBEE; background: #DCEBFA; color: #1F4E7A; }
.icon-ok { border-color: #A9DBBE; background: #DFF3E8; color: #22603D; }
.icon-ok:hover { background: #CDEBD9; }
.icon-sm.icon-restore { border-color: #BFE3C6; background: #E6F5E9; color: #2D6331; }
.pill-alert { background: #FADCD9; color: #8C1D18; border: 1px solid #F0B8B2; white-space: normal; }
.pill-action { background: #EDE6FA; color: #4A2F86; border: 1px solid #CDBEF0; text-transform: capitalize; }
.hist-btn { cursor: pointer; }

/* Payment status pills and the check-status button */
.pay-status {
  display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .15rem .6rem; font-size: .78rem;
  font-weight: 700; white-space: nowrap; line-height: 1.5; border: 1px solid transparent;
}
.st-success { background: #DDF6E4; color: #12703A; border-color: #A8E2BC; }
.st-pending { background: #FFF1CC; color: #7A5600; border-color: #F0D98C; }
.st-user_dropped { background: #F1E7F6; color: #6A2C80; border-color: #DCC3E8; }
.st-failed { background: #FADCD9; color: #8C1D18; border-color: #F0B8B2; }
.st-deemed_failed { background: #ECEAE6; color: #5A5750; border-color: #D3CFC7; }
.st-queried { background: #E3EAFB; color: #2E4A9A; border-color: #BCCBF1; }
.icon-check { border-color: #F0D98C; background: #FFF1CC; color: #7A5600; }
.icon-check:hover:not([disabled]) { background: #FBE6A8; }
.icon-check[disabled] { opacity: .45; cursor: not-allowed; }
.icon-check.is-spinning svg { animation: check-pulse .8s ease-in-out infinite; }
@keyframes check-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .55; } }
.pay-hint { background: #FFF4D9; border: 1px dashed var(--gold); border-radius: 10px; padding: .5rem .8rem; }
tr.gateway-row td { background: #FFFBEF; }
.record-card.is-gateway { cursor: default; background: #FFFBEF; border-color: #F0D98C; }
.card-check { margin-left: auto; float: right; }
a.icon-btn { text-decoration: none; }
.icon-shot:hover { background: #C8DEF5; }

/* Bordered pastel tables with alternating rows (Dashboard lists) */
.rtable-fancy { --t-band: #EDE6FA; --t-line: #CDBEF0; --t-edge: #8E78C9; --t-ink: #4A2F86; --t-alt: #F8F5FE; }
.rtable-fancy.tone-mint { --t-band: #DFF3E8; --t-line: #A9DBBE; --t-edge: #5FA97F; --t-ink: #22603D; --t-alt: #F2FAF5; }
.rtable-fancy.tone-peach { --t-band: #FDE8DA; --t-line: #F2C2A2; --t-edge: #D08454; --t-ink: #8A3F12; --t-alt: #FEF6F0; }
.rtable-fancy.tone-rose { --t-band: #FBE0EA; --t-line: #EEB2C7; --t-edge: #C96C91; --t-ink: #8C2350; --t-alt: #FEF4F8; }
.rtable-fancy .rtable tr { background: #fff; border: 2px solid var(--t-edge); }
.rtable-fancy .rtable tr:nth-child(even) { background: var(--t-alt); }
.rtable-fancy .rtable td::before { color: var(--t-ink); font-weight: 600; }

/* One table: stacked cards on phones, a real table on desktop. */
.rtable { display: block; width: 100%; }
.rtable thead { display: none; }
.rtable tbody { display: grid; gap: .6rem; }
.rtable tr { display: block; background: var(--ivory); border: 1px solid var(--gold-soft); border-radius: 12px; padding: .5rem .9rem; }
.rtable td { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; text-align: right; overflow-wrap: anywhere; }
.rtable td::before { content: attr(data-label); color: var(--ink-soft); font-size: .875rem; flex: none; text-align: left; }
.rtable .num-links { justify-content: flex-end; }

/* Administration */
.link-btn {
  background: none; border: 0; padding: .25rem 0; min-height: 32px; color: var(--maroon);
  font-weight: 600; text-decoration: underline; cursor: pointer; text-align: inherit;
}
.crumbs { margin-bottom: .75rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.export-link { width: fit-content; }
.review-grid { display: grid; gap: .75rem; }
.review-card { display: flex; gap: .75rem; margin: 0; align-items: flex-start; }
.review-card > a { flex: none; width: 96px; }
.review-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 1px solid var(--gold-soft); }
.review-body { flex: 1; min-width: 0; }
.review-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.org-row { margin-bottom: .75rem; }
.org-heading { font-size: 1rem; margin: 1rem 0 .5rem; }
.org-meta { display: flex; justify-content: space-between; align-items: center; gap: .75rem; color: var(--ink-soft); font-size: .875rem; margin-top: .25rem; }
.admin-row { padding: .4rem 0; border-bottom: 1px solid var(--gold-soft); }
.cat-list { display: grid; gap: 0 1rem; }
.cat-head { display: flex; gap: .75rem; margin-bottom: .75rem; }
.cat-fields { flex: 1; min-width: 0; }
.cat-thumb { flex: none; width: 72px; margin: 0; cursor: pointer; text-align: center; color: var(--maroon); font-size: .8rem; font-weight: 600; }
.cat-thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; border: 1px solid var(--gold-soft); }
.cat-thumb input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cat-thumb:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: .6rem; }

/* Tablet */
@media (min-width: 576px) {
  .totals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile-name { font-size: .8rem; }
  .pic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stepper { width: auto; margin-left: auto; }
  .stepper input { flex: none; width: 4.5rem; }
}

/* Desktop: sidebar replaces the bottom tabs, and pages use the width. */
@media (min-width: 992px) {
  .topbar { display: none; }
  .nav-rail {
    top: 0; right: auto; bottom: 0; width: 240px; display: flex; flex-direction: column;
    border-right: 3px solid var(--gold); padding: 1.25rem .75rem;
  }
  .nav-rail-brand { display: block; padding: 0 .5rem 1.25rem; }
  .nav-rail-brand .brand-title { color: var(--cream); font-size: 1.15rem; line-height: 1.25; }
  .nav-rail-brand small { color: var(--gold-soft); }
  .nav-links { flex-direction: column; gap: .25rem; flex: 1; }
  .nav-links li { flex: none; }
  .nav-link-app {
    flex-direction: row; justify-content: flex-start; gap: .75rem; height: 48px; padding: 0 .75rem;
    border-radius: 10px; font-size: 1rem;
  }
  .nav-link-app:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .nav-link-app[aria-current="page"] { background: var(--maroon); box-shadow: inset 3px 0 0 var(--gold); }
  .nav-rail-user { display: block; color: var(--gold-soft); font-size: .875rem; padding: .75rem .5rem 0; border-top: 1px solid rgba(255, 255, 255, .15); overflow-wrap: anywhere; }
  .nav-rail-user strong { display: block; color: var(--cream); }

  .page { margin-left: 240px; padding: 2rem 2.5rem; }
  .page-inner { max-width: 1120px; }
  .page-inner.narrow { max-width: 620px; margin-left: 0; }
  h1 { font-size: 1.75rem; }

  .add-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .add-side { position: sticky; top: 2rem; }

  .tiles { grid-template-columns: repeat(4, minmax(0, 150px)); gap: .75rem; }
  .tiles.tiles-carton { grid-template-columns: repeat(2, minmax(0, 150px)); }
  .tile-name { font-size: .85rem; }

  .camera-btn { width: auto; min-width: 280px; }
  .pic-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-grid, .cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rtable-wrap { background: var(--ivory); border: 1px solid var(--gold-soft); border-radius: var(--radius); overflow: auto; }
  .rtable-wrap.rtable-fancy { background: #fff; border: 2px solid var(--t-edge); border-radius: 18px; box-shadow: 0 6px 18px rgba(84, 19, 32, .08); }
  .rtable-fancy .rtable tr, .rtable-fancy .rtable tr:nth-child(even) { border: 0; }
  .rtable-fancy .rtable th { background: var(--t-band); color: var(--t-ink); border-bottom: 2px solid var(--t-line); font-size: .85rem; letter-spacing: .01em; }
  .rtable-fancy .rtable td { border-top: 1px solid #EFEAE0; vertical-align: middle; }
  .rtable-fancy .rtable tbody tr:nth-child(odd) td { background: #fff; }
  .rtable-fancy .rtable tbody tr:nth-child(even) td { background: var(--t-alt); }
  .rtable-fancy .rtable tbody tr:hover td { background: #FFF6DD; }
  .rtable-fancy .rtable td.num { text-align: right; }
  .rtable-fancy .actions-cell { text-align: right; }
  .rtable { display: table; border-collapse: collapse; }
  .rtable thead { display: table-header-group; }
  .rtable tbody { display: table-row-group; }
  .rtable tr { display: table-row; background: none; border: 0; border-radius: 0; padding: 0; }
  .rtable th { background: var(--maroon-tint); color: var(--maroon-deep); font-weight: 600; padding: .7rem .8rem; text-align: left; white-space: nowrap; }
  .rtable td { display: table-cell; padding: .65rem .8rem; border-top: 1px solid var(--gold-soft); text-align: left; overflow-wrap: normal; vertical-align: top; }
  .rtable td::before { content: none; }
  .rtable .num-links { justify-content: flex-start; }

  .record-cards { display: none; }
  .record-table-wrap { display: block; background: #fff; border: 2px solid #8E78C9; border-radius: 18px; overflow: auto; box-shadow: 0 6px 18px rgba(84, 19, 32, .08); }
  .record-table { width: 100%; margin: 0; border-collapse: collapse; }
  .record-table th { background: #EDE6FA; color: #4A2F86; font-weight: 600; font-size: .85rem; padding: .7rem 1rem; text-align: left; border-bottom: 2px solid #CDBEF0; }
  .record-table td { padding: .7rem 1rem; border-top: 1px solid #EFEAE0; vertical-align: middle; }
  .record-table tbody tr { cursor: pointer; }
  .record-table tbody tr:nth-child(even) td { background: #F8F5FE; }
  .record-table tbody tr:hover td { background: #FFF6DD; }
  /* Wide tables scroll sideways inside their frame (the bar sits at the bottom of the frame, always in view), headings stay put */
  .record-table-wrap, .rtable-wrap { max-height: 72vh; }
  .record-table, .rtable { width: max-content; min-width: 100%; }
  .record-table th, .rtable th { position: sticky; top: 0; z-index: 2; white-space: nowrap; }
  .record-table td, .rtable td { white-space: nowrap; }
  .num { text-align: right !important; font-variant-numeric: tabular-nums; }

  .filter-grid { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); }
  .filter-grid .span-all { grid-column: auto; }

  .messages-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
  .messages-preview { position: sticky; top: 2rem; }

  .auth-wrap { flex-direction: row; }
  .auth-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 0; border-right: 4px solid var(--gold); }
  .auth-hero .brand-title { font-size: 2.25rem; }
  .auth-mark { width: 104px; height: 104px; }
  .auth-body { flex: 1; align-self: center; padding: 2rem; }

  .app-toast { bottom: 2rem; left: calc(50% + 120px); }
}

/* Phases 4 and 5: charts, live statistics, map, offline */
:root { --maroon-tint-faint: #F8F1E2; }
.card-app + .card-app, .insight-grid + .card-app, .card-app + .insight-grid { margin-top: .75rem; }
.total-value small { font-size: .75rem; font-weight: 500; color: var(--ink-soft); }
.total-primary .total-value small { color: var(--cream); }
.chart-tip {
  position: fixed; z-index: 2000; pointer-events: none; max-width: 240px; padding: .3rem .55rem;
  border-radius: 8px; background: var(--ink); color: var(--cream); font-size: .8rem;
}
[data-plot] { display: block; touch-action: pan-y; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .4rem; font-size: .85rem; color: var(--ink-soft); }
.chart-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.key-line, .key-dash { display: inline-block; width: 18px; border-top: 2px solid var(--maroon); }
.key-dash { border-top: 2px dashed #9A8C7F; }
.bar-list { display: grid; gap: .5rem; margin-top: .5rem; }
.bar-row { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; align-items: center; gap: .5rem; font-size: .875rem; }
.bar-label { overflow-wrap: anywhere; }
.bar-track { height: 10px; }
.bar-fill { display: block; height: 100%; min-width: 2px; background: var(--maroon); border-radius: 0 4px 4px 0; }
.bar-value { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
.heat { display: grid; grid-template-columns: 2.2rem repeat(var(--hours), minmax(0, 1fr)); gap: 2px; margin-top: .5rem; }
.heat-hour { font-size: .65rem; color: var(--ink-soft); white-space: nowrap; height: 1rem; }
.heat-day { font-size: .75rem; color: var(--ink-soft); align-self: center; }
.heat-cell { aspect-ratio: 1; border-radius: 3px; min-height: 12px; }
.heat-key { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: .5rem; font-size: .75rem; color: var(--ink-soft); }
.heat-key i { width: 16px; height: 12px; border-radius: 2px; }
.insight-grid { display: grid; gap: .75rem; }
.insight-grid .card-app { margin: 0; }
.meter-head { margin-top: .4rem; font-variant-numeric: tabular-nums; }
.meter-head strong { font-size: 1.5rem; color: var(--maroon-deep); margin-right: .3rem; }
.meter { height: 12px; margin: .4rem 0; border-radius: 6px; background: var(--maroon-tint); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--maroon); }
.day-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .15rem 1rem; margin-top: .5rem; font-size: .85rem; max-height: 220px; overflow-y: auto; }
.day-table div { display: flex; justify-content: space-between; }
.map-box { height: 340px; border-radius: 10px; overflow: hidden; z-index: 0; }
.map-photo { display: block; width: 160px; height: 110px; object-fit: cover; border-radius: 6px; margin-bottom: .3rem; }
.person-line { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-top: 1px solid var(--gold-soft); font-size: .9rem; }
.log-detail { overflow-wrap: anywhere; }
.net-banner { max-width: 640px; margin: 0 auto .75rem; padding: .5rem .75rem; border-radius: 10px; background: var(--maroon-tint); color: var(--maroon-deep); font-size: .875rem; font-weight: 600; }
.queue-panel { display: grid; gap: .75rem; }
.queue-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.queue-row > div:first-child { flex: 1 1 200px; min-width: 0; }
.queue-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (min-width: 768px) {
  .insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .net-banner { max-width: 1120px; }
  .map-box { height: 460px; }
}

/* Role picker and the "switch role" button. */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.switch-role {
  background: transparent; color: var(--cream); border: 1px solid var(--gold); border-radius: 999px;
  min-height: 36px; padding: 0 .85rem; font-size: .8rem; white-space: nowrap;
}
.nav-rail-user .switch-role { display: block; width: 100%; margin-top: .6rem; }
.mode-list { display: grid; gap: .85rem; margin-top: 1.25rem; }
.mode-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; width: 100%;
  padding: 1rem 2.75rem 1rem 1.25rem; text-align: left; cursor: pointer;
  background: var(--ivory); border: 1px solid var(--gold-soft); border-left: 4px solid var(--maroon);
  border-radius: var(--radius); box-shadow: 0 1px 2px rgba(84, 19, 32, .06);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mode-card::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--gold); border-top: 2px solid var(--gold); transform: rotate(45deg); transition: transform .15s;
}
.mode-card:hover { border-color: var(--gold); box-shadow: 0 4px 14px rgba(84, 19, 32, .12); transform: translateY(-1px); }
.mode-card:hover::after { transform: translateX(3px) rotate(45deg); }
.mode-card:active { transform: translateY(0); }
.mode-name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--maroon-deep); line-height: 1.2; }
.mode-pill {
  display: inline-block; max-width: 100%; padding: .2rem .8rem; border-radius: 999px;
  background: var(--maroon-tint); color: var(--maroon); border: 1px solid var(--gold-soft);
  font-size: .8rem; font-weight: 500; line-height: 1.35;
}

/* Group Leaders and Bhakti Vriksha groups: a form, then a table of what was entered. */
.org-form { display: grid; gap: .6rem; }
.org-form .field-error { margin-top: .2rem; }
.table-card { padding: 0; overflow: hidden; }
.table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1rem; }
.table-head h2 { margin: 0; }
.table-count { color: var(--ink-soft); font-weight: 400; font-size: .9rem; }
.table-card .rtable tbody { padding: 0 .75rem .75rem; }
.status-pill { display: inline-block; padding: .1rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.status-pill.on { background: #E3F0E5; color: var(--success); }
.status-pill.off { background: #EFEAE0; color: var(--ink-soft); }
.status-pill.wait { background: var(--maroon-tint); color: var(--maroon); }
.row-actions { display: flex; flex-wrap: wrap; gap: .1rem 1rem; justify-content: flex-end; }
.link-btn.danger { color: var(--danger); }
.link-btn[disabled] { color: var(--ink-soft); opacity: .55; text-decoration: none; cursor: not-allowed; }
.cell-sub { display: block; color: var(--ink-soft); font-size: .8rem; }
.rtable tr.is-editing { border-color: var(--gold); box-shadow: 0 2px 10px rgba(84, 19, 32, .1); }
.rtable tr.is-editing td { display: block; text-align: left; }
.rtable tr.is-editing td::before { display: block; margin-bottom: .15rem; }
.confirm-box { background: #FBEDEA; border: 1px solid #E9C3BC; border-radius: 10px; padding: .7rem .8rem; color: var(--ink); }
.confirm-box .row-actions { justify-content: flex-start; margin-top: .4rem; }
@media (min-width: 768px) {
  .org-form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: start; }
  .table-card .rtable tbody { padding: 0; }
  .table-card .rtable-wrap { border: 0; border-top: 1px solid var(--gold-soft); border-radius: 0; }
  .row-actions { justify-content: flex-start; flex-wrap: nowrap; }
  .rtable tr.is-editing td { display: table-cell; }
  .rtable tr.is-editing td::before { display: none; }
  .rtable tr.confirm-tr td { background: #FBEDEA; }
}

/* The Group Leaders table: the add row sits at the top of the table itself, and cells edit in place. */
.add-row { background: var(--maroon-tint-faint); }
.rtable tr.add-row { border-color: var(--gold); border-style: dashed; }
.add-row .form-control { min-width: 9rem; }
.cell-edit { cursor: text; border-bottom: 1px dashed var(--gold); }
.cell-edit:hover { background: var(--maroon-tint); }
.rtable tr.inactive-row td { color: var(--ink-soft); }
.state-link { font-weight: 600; text-decoration: underline; cursor: pointer; background: none; border: 0; padding: .25rem 0; min-height: 32px; }
.state-link.on { color: var(--success); }
.state-link.off { color: var(--ink-soft); }
@media (min-width: 768px) {
  .rtable tr.add-row td { background: var(--maroon-tint-faint); border-top: 0; vertical-align: middle; }
}

/* Targets */
.t-search { margin: .75rem 0; }
.t-edit { display: flex; gap: .4rem; align-items: center; }
.t-edit input { width: 7rem; min-height: 40px; }
.t-edit .btn-ghost { min-height: 40px; padding: 0 .9rem; }
.hist { position: relative; display: inline-block; }
.hist-pop { display: none; position: absolute; z-index: 20; right: 0; top: 1.6rem; min-width: 17rem; max-width: 85vw;
  background: var(--ivory); border: 1px solid var(--gold-soft); border-radius: 10px; padding: .6rem .8rem;
  box-shadow: 0 8px 24px rgba(43, 26, 20, .18); text-align: left; }
.hist:hover .hist-pop, .hist:focus-within .hist-pop { display: block; }
.hist-line { display: block; padding: .25rem 0; font-size: .85rem; }
.hist-line span { display: block; color: var(--muted, #7a6a5d); font-size: .78rem; }
.hist-all { max-height: 18rem; overflow: auto; border-top: 1px solid var(--gold-soft); margin-top: .5rem; padding-top: .4rem; }
@media (max-width: 767px) { .hist-pop { left: 0; right: auto; } }

/* Desktop: the title bar sits beside the sidebar, not underneath it. */
@media (min-width: 992px) {
  .topbar { display: flex; margin-left: 240px; padding-left: 2.5rem; padding-right: 2.5rem; }
  .topbar .brand-title { font-size: 1.2rem; }
  .topbar .switch-role { display: none; }
  .nav-rail-brand { display: none; }
}

/* Family members: who an entry is recorded for. */
.people-chips { margin-bottom: .75rem; }
.people-add { margin-bottom: .4rem; }

/* Book tiles: every picture the same size (3:4); names above, hidden by default. */
.tile img { aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: .1rem; }
.tile-name { margin-bottom: .3rem; }
.tiles-plain .tile { padding: .9rem .3rem; }
.tiles-plain .tile-code { margin-top: 0; font-size: 1.15rem; }

/* UPI by dynamic QR (Cashfree): the checkout hint, the QR screen and the review label. */
.gateway-hint { margin: 0 0 .25rem; }
.qr-panel { text-align: center; padding: 1.5rem 1rem; }
.qr-amount { font-family: var(--font-head); font-size: 2.2rem; font-weight: 700; color: var(--maroon); line-height: 1.1; }
.qr-summary { color: var(--ink-soft); font-size: .92rem; margin: .25rem 0 .75rem; }
.qr-image { display: block; width: 260px; height: 260px; max-width: 100%; margin: 0 auto .75rem; background: #fff; padding: 8px;
  border: 2px solid var(--gold); border-radius: 10px; image-rendering: pixelated; }
.qr-missing { color: var(--danger); }
.qr-status { display: inline-block; margin: .25rem 0 .5rem; padding: .45rem 1rem; border-radius: 999px; font-weight: 700;
  background: var(--maroon-tint); color: var(--maroon-deep); }
.qr-status.qr-bad { background: #FBE3E0; color: var(--danger); }
.qr-sandbox { margin: .75rem 0; padding: .6rem .75rem; border: 1px dashed var(--gold); border-radius: 10px; background: var(--ivory); font-size: .88rem; text-align: left; }
.qr-sandbox code { overflow-wrap: anywhere; }
.qr-actions { display: flex; flex-direction: column; gap: .5rem; margin: .75rem 0; }
.review-online { flex: none; width: 96px; aspect-ratio: 3 / 4; display: grid; place-items: center; text-align: center; padding: .4rem;
  font-size: .78rem; font-weight: 600; color: var(--success); background: #E6F2E8; border: 1px solid var(--gold-soft); border-radius: 8px; }

/* Checkout: cash given; the "check all pending" line */
.cash-row { display: flex; align-items: center; gap: .4rem; max-width: 12rem; }
.cash-sign { font-weight: 700; color: var(--maroon); }
.pay-hint-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-bottom: .6rem; }
.pay-hint-row .pay-hint { flex: 1 1 18rem; margin: 0; }
.pay-hint-row [data-check-all] { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }

/* Payment details (the (i) icon beside a status) */
.icon-info { border-color: #BCCBF1; background: #E3EAFB; color: #2E4A9A; margin-left: .3rem; cursor: pointer; }
.icon-info:hover { background: #D2DDF8; }
.details-col { text-align: center; }
.edit-col { text-align: center; }
.pd-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-bottom: .6rem; }
.pd-amount { font-size: 1.5rem; font-weight: 700; color: var(--maroon); }
.pd-test { font-size: .72rem; font-weight: 700; background: #FFF1CC; color: #7A5600; border-radius: 999px; padding: .1rem .5rem; }
.pd-list { display: grid; grid-template-columns: minmax(7.5rem, 38%) 1fr; gap: .3rem .8rem; margin: 0 0 .6rem; font-size: .92rem; }
.pd-list dt { color: var(--ink-soft); font-weight: 600; }
.pd-list dd { margin: 0; overflow-wrap: anywhere; }
.pd-mono { font-family: ui-monospace, Consolas, monospace; font-size: .86rem; }
.pd-attempt { border: 2px solid #DCC3E8; background: #FBF7FD; border-radius: 14px; padding: .7rem .9rem; margin-top: .7rem; }
.pd-attempt h3 { font-size: 1rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.pd-all summary { cursor: pointer; color: var(--ink-soft); font-size: .86rem; margin-bottom: .4rem; }
.pd-foot { margin-top: .8rem; }

/* One row per sale: received against due, and the books inside the sale pop-up */
.recv { display: inline-flex; align-items: center; gap: .4rem; }
.recv-ok { color: #12703A; font-weight: 700; }
.recv-short { background: #FADCD9; color: #8C1D18; border: 1px solid #F0B8B2; border-radius: 999px; padding: .1rem .55rem; font-size: .76rem; font-weight: 700; }
.recv-extra { background: #FFF1CC; color: #7A5600; border: 1px solid #F0D98C; border-radius: 999px; padding: .1rem .55rem; font-size: .76rem; font-weight: 700; }
.total-short { background: #FEF0EE; border-color: #F0B8B2; }
.total-short .total-value { color: #8C1D18; }
.sale-lines { width: 100%; border-collapse: collapse; margin-bottom: .6rem; font-size: .93rem; }
.sale-lines th { background: #EDE6FA; color: #4A2F86; text-align: left; padding: .4rem .6rem; font-size: .82rem; }
.sale-lines td { padding: .4rem .6rem; border-top: 1px solid #EFEAE0; }
.sale-lines .num { text-align: right; }
.sale-lines tfoot td { font-weight: 700; border-top: 2px solid #CDBEF0; }
.sale-lines tfoot tr + tr td { border-top: 1px solid #EFEAE0; }
.sale-lines .sale-short td { color: #8C1D18; background: #FEF0EE; }
.sale-lines .sale-ok td { color: #12703A; }