/* =========================================================================
   Design tokens
   Palette grounded in the East African chama / table-banking context:
   deep teal (trust, ledger-green), warm gold (the payout, the "pot"),
   terracotta-red reserved ONLY for pending/failed states (never decorative).
   Typography: Sora for numerals & headings (a geometric grotesk with
   confident, slightly technical digits — this app is mostly numbers),
   Inter for body copy/UI text.
   ========================================================================= */
:root{
  --ink:        #14201E;
  --ink-soft:   #4B5A57;
  --paper:      #F6F4EE;
  --paper-raise:#FFFFFF;
  --line:       #DAD6C9;

  --teal-900:   #0F3D3E;
  --teal-700:   #16564F;
  --teal-500:   #1E7A6E;
  --gold-500:   #C99A3A;
  --gold-100:   #F4E7C8;
  --rust-600:   #B14332;
  --rust-100:   #F5DCD6;

  --radius-sm: 6px;
  --radius-md: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--teal-900);
  margin:0 0 var(--space-2);
  line-height:1.15;
}
h1{font-size:1.6rem; font-weight:700;}
h2{font-size:1.25rem; font-weight:700;}
h3{font-size:1.05rem; font-weight:600;}
p{margin:0 0 var(--space-3);}
a{color:var(--teal-700);}
.num{font-family:var(--font-display); font-variant-numeric:tabular-nums;}

/* ---------- Layout shell ---------- */
.app-shell{
  max-width:640px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.topbar{
  background:var(--teal-900);
  color:#fff;
  padding:var(--space-4) var(--space-4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:3px solid var(--gold-500);
}
.topbar .brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.2px;
}
.topbar .who{
  font-size:.8rem;
  color:var(--gold-100);
}
.topbar a.logout{
  color:#fff;
  text-decoration:none;
  font-size:.85rem;
  border:1px solid rgba(255,255,255,.35);
  padding:6px 10px;
  border-radius:var(--radius-sm);
}
main{
  flex:1;
  padding:var(--space-4);
  padding-bottom:var(--space-7);
}
footer.app-footer{
  text-align:center;
  font-size:.75rem;
  color:var(--ink-soft);
  padding:var(--space-4);
}

/* ---------- Cards / sections (deliberately not identical rounded-shadow kit) --------- */
.section{
  background:var(--paper-raise);
  border:1px solid var(--line);
  border-left:4px solid var(--teal-700);
  border-radius:var(--radius-sm);
  padding:var(--space-4);
  margin-bottom:var(--space-4);
}
.section.accent-gold{border-left-color:var(--gold-500);}
.section.accent-rust{border-left-color:var(--rust-600);}

.stat-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-3);
  margin:var(--space-3) 0;
}
.stat{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:var(--space-3);
}
.stat .label{font-size:.72rem; color:var(--ink-soft); text-transform:none;}
.stat .value{font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--teal-900);}

/* ---------- Buttons: large, thumb-friendly, mobile-first ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:1rem;
  padding:14px 20px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  width:100%;
  text-decoration:none;
  transition:transform .05s ease, opacity .15s ease;
}
.btn:active{transform:scale(0.99);}
.btn-primary{background:var(--teal-900); color:#fff;}
.btn-primary:hover{background:var(--teal-700);}
.btn-gold{background:var(--gold-500); color:var(--teal-900);}
.btn-outline{background:transparent; border-color:var(--teal-900); color:var(--teal-900);}
.btn-danger{background:var(--rust-600); color:#fff;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
.btn-sm{padding:8px 14px; font-size:.85rem; width:auto;}

/* ---------- Forms ---------- */
label{display:block; font-size:.85rem; color:var(--ink-soft); margin-bottom:var(--space-1); font-weight:600;}
input[type=text],input[type=password],input[type=tel],input[type=number],select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  font-size:1rem;
  margin-bottom:var(--space-3);
  font-family:var(--font-body);
}
input:focus,select:focus,button:focus,a:focus{
  outline:3px solid var(--gold-500);
  outline-offset:1px;
}
.field-error{color:var(--rust-600); font-size:.8rem; margin-top:-8px; margin-bottom:var(--space-3);}
.alert{
  padding:var(--space-3);
  border-radius:var(--radius-sm);
  margin-bottom:var(--space-4);
  font-size:.92rem;
}
.alert-error{background:var(--rust-100); color:var(--rust-600); border:1px solid var(--rust-600);}
.alert-success{background:var(--gold-100); color:#6B4E12; border:1px solid var(--gold-500);}

/* ---------- Status pills ---------- */
.pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.2px;
}
.pill-paid{background:#DCEFE4; color:#1B6B3F;}
.pill-pending{background:var(--rust-100); color:var(--rust-600);}
.pill-partial{background:var(--gold-100); color:#8A6416;}
.pill-recipient{background:var(--teal-900); color:#fff;}

/* ---------- Simple table (mobile-friendly stacking) ---------- */
table.list{width:100%; border-collapse:collapse; font-size:.9rem;}
table.list th{
  text-align:left; font-size:.72rem; color:var(--ink-soft);
  border-bottom:1px solid var(--line); padding:8px 6px;
}
table.list td{padding:10px 6px; border-bottom:1px solid var(--line); vertical-align:middle;}

@media (max-width: 480px){
  table.list thead{display:none;}
  table.list, table.list tbody, table.list tr, table.list td{display:block; width:100%;}
  table.list tr{border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:var(--space-3); padding:var(--space-2);}
  table.list td{border:none; padding:4px 4px;}
  table.list td::before{
    content:attr(data-label);
    display:block;
    font-size:.68rem;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:.4px;
    margin-bottom:2px;
  }
}

.progress-track{
  background:var(--line);
  border-radius:999px;
  height:10px;
  overflow:hidden;
  margin:var(--space-2) 0;
}
.progress-fill{
  height:100%;
  background:var(--gold-500);
  transition:width .3s ease;
}

.stack{display:flex; flex-direction:column; gap:var(--space-3);}
.row{display:flex; gap:var(--space-3); align-items:center; justify-content:space-between;}
.muted{color:var(--ink-soft); font-size:.85rem;}
.connection-banner{
  display:none;
  background:var(--rust-600); color:#fff; text-align:center;
  padding:8px; font-size:.85rem;
}
.connection-banner.show{display:block;}