/* ============================================================================
   Rent & Electricity Tracker — styles
   Tokens, colors, card styles, tabs, status dots and approval-chain timeline
   are lifted verbatim from docs/design.html, then extended into a real
   responsive app shell (login, FAB, modal/bottom-sheet, meter management).
   ============================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --rent:  #fb923c;
  --elec:  #818cf8;
  --water: #22d3ee;
  --own:   #c084fc;
  --green: #4ade80;
  --red:   #f87171;
  --amber: #fbbf24;
  --bg:    #111;
  --ink:   #e0e0e0;
}

html { background: #0e0e11; }
html, body { background: #0e0e11; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background:
    radial-gradient(1100px 560px at 50% -10%, #1d1d26 0%, rgba(14,14,17,0) 60%),
    #0e0e11;
  background-attachment: fixed;
}

/* color helpers (from design.html) */
.c-rent { color:#fb923c; } .bg-rent { background:#fb923c; }
.c-elec { color:#818cf8; } .bg-elec { background:#818cf8; }
.c-water{ color:#22d3ee; } .bg-water{ background:#22d3ee; }
.c-own  { color:#c084fc; } .bg-own  { background:#c084fc; }
.c-green{ color:#4ade80; } .bg-green{ background:#4ade80; }
.c-red  { color:#f87171; } .bg-red  { background:#f87171; }
.c-amber{ color:#fbbf24; } .bg-amber{ background:#fbbf24; }
.sw { width:10px; height:10px; border-radius:3px; display:inline-block; }
.muted { color:#555; }
.hidden { display:none !important; }

/* ---- app shell ---------------------------------------------------------- */
.app {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  background: #1a1a1c;
  border-left: 1px solid #232323;
  border-right: 1px solid #232323;
  position: relative;
  box-shadow: 0 0 50px rgba(0, 0, 0, .55);
}

/* two summary blocks: stacked on mobile, side-by-side on desktop */
.summaries { display: grid; gap: 8px; }
.summaries .sumblock { margin-bottom: 0; }
.appbar {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #252525;
  background: #141416;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
}
.appbar .back { font-size: 20px; color:#777; cursor:pointer; line-height:1; padding:2px 4px; margin-left:-4px; }
.appbar .titles { flex:1; min-width:0; }
.apptitle { font-size: 16px; font-weight: 600; color: #f0f0f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appsub { font-size: 11px; color: #666; margin-top: 1px; }
.appbar .iconbtn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid #2e2e2e; background:#1f1f1f; color:#888;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px;
}
.appbar .iconbtn:hover { color:#ddd; border-color:#3a3a3a; }
.monthnav { display:flex; align-items:center; gap:8px; }
.monthnav button {
  background:#1f1f1f; border:1px solid #2e2e2e; color:#999; border-radius:7px;
  width:26px; height:24px; cursor:pointer; font-size:12px;
}
.monthnav button:hover { color:#ddd; }
.monthnav .ml { font-size:11px; color:#666; min-width:74px; text-align:center; }

.body { padding: 13px 13px 96px; }

/* ---- dashboard summary blocks ------------------------------------------- */
.sumblock { background:#1e1e1e; border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.sumhead { font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.sumstats { display:flex; gap:8px; }
.ss { flex:1; }
.ss-v { font-size:15px; font-weight:600; line-height:1; }
.ss-l { font-size:9.5px; color:#555; margin-top:3px; }

/* ---- tabs --------------------------------------------------------------- */
.tabbar { display:flex; gap:0; border-bottom:1px solid #252525; margin:6px -13px 12px; padding:0 13px; overflow-x:auto; }
.tab { font-size:11.5px; padding:9px 11px 8px; color:#555; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; cursor:pointer; }
.tab:hover { color:#888; }
.tab.on-elec { color:#818cf8; border-bottom-color:#818cf8; }
.tab.on-rent { color:#fb923c; border-bottom-color:#fb923c; }
.tab.on-neutral { color:#ccc; border-bottom-color:#888; }

/* ---- chips -------------------------------------------------------------- */
.chips { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.chip { font-size:11px; padding:5px 11px; border-radius:20px; border:1px solid #2a2a2a; color:#666; white-space:nowrap; cursor:pointer; user-select:none; }
.chip.act-elec { background:#1e1e3a; border-color:#4444aa; color:#818cf8; }
.chip.act-rent { background:#2a1e10; border-color:#aa6622; color:#fb923c; }

/* ---- office list -------------------------------------------------------- */
.olist { display:flex; flex-direction:column; gap:6px; }
.orow { display:flex; align-items:center; background:#1f1f1f; border-radius:9px; padding:10px 11px; gap:9px; cursor:pointer; border:1px solid transparent; }
.orow:hover { border-color:#333; }
.orow.own { border:1px dashed #3a2a4a; background:#1c1722; }
.orow.flat { cursor:default; }
.odot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.oinfo { flex:1; min-width:0; }
.oname { font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.otag { font-size:10px; color:#555; margin-top:1px; }
.oamt { font-size:11px; color:#777; text-align:right; }
.oamt b { display:block; font-size:12.5px; font-weight:500; color:#e0e0e0; }
.chev { font-size:13px; color:#444; }

/* ---- bill boxes --------------------------------------------------------- */
.billbox { background:#1e1e1e; border-radius:10px; padding:11px 12px; margin-bottom:8px; }
.billbox.elec { border-left:3px solid #818cf8; }
.billbox.rent { border-left:3px solid #fb923c; }
.bhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.btitle { font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.bstatus { font-size:10px; padding:2px 7px; border-radius:4px; }
.st-unpaid { background:#2a1414; color:#f87171; }
.st-paid   { background:#0f2a1a; color:#4ade80; }
.st-partial{ background:#2a2410; color:#fbbf24; }
.lrow { display:flex; justify-content:space-between; font-size:12px; color:#999; padding:3px 0; gap:10px; }
.lrow .sub { font-size:10px; color:#555; }
.lrow.tot { color:#e0e0e0; font-weight:600; border-top:1px solid #2a2a2a; margin-top:5px; padding-top:7px; }
.waterline { display:flex; justify-content:space-between; font-size:12px; padding:3px 0; }

/* ---- approval chain ----------------------------------------------------- */
.chain { margin-top:8px; padding-top:8px; border-top:1px solid #252525; }
.cstep { display:flex; gap:9px; }
.cstep.clickable .cc { cursor:pointer; }
.cstep.clickable:hover .ct { color:#fff; }
.cline { display:flex; flex-direction:column; align-items:center; }
.cdot { width:11px; height:11px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.cdot.done { background:#4ade80; }
.cdot.now  { background:#fbbf24; border:2px solid #6a5a20; }
.cdot.wait { background:#222; border:2px solid #333; }
.cconn { width:1.5px; background:#252525; flex:1; min-height:14px; margin:2px 0; }
.cc { padding-bottom:11px; }
.ct { font-size:11.5px; color:#ccc; }
.cd { font-size:10px; color:#555; margin-top:1px; }

/* ---- generation screen -------------------------------------------------- */
.inpbox { display:flex; align-items:center; gap:8px; border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.inp-rate { background:#1e1e14; border:1px solid #3a3a1a; }
.inp-bldg { background:#1a1e22; border:1px solid #1e3344; }
.inplbl { font-size:11.5px; flex:1; }
.inpfield { background:#111; border:1px solid #333; border-radius:6px; padding:5px 8px; font-size:14px; font-weight:600; width:96px; text-align:right; color:inherit; }
.genoffice { background:#1e1e1e; border-radius:10px; padding:10px 12px; margin-bottom:7px; }
.genoffice.missing { border:1px solid #5a2a2a; }
.gohead { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.goname { font-size:12.5px; font-weight:600; }
.meterline { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.mlbl { font-size:10.5px; color:#666; width:62px; flex-shrink:0; }
.mprev { font-size:11px; color:#555; white-space:nowrap; }
.minp { background:#161616; border:1px solid #333; border-radius:6px; padding:4px 7px; font-size:12px; color:#818cf8; width:72px; text-align:center; }
.minp.flag { border-color:#883333; }
.munit { font-size:10px; color:#818cf8; margin-left:auto; white-space:nowrap; }
.munit.opening { color:#666; }
.gobills { display:flex; gap:7px; margin-top:8px; }
.gobill { flex:1; border-radius:7px; padding:6px 8px; font-size:11px; }
.gobill.e { background:#191930; }
.gobill.r { background:#2a1e12; }
.gobill .gv { font-size:13px; font-weight:600; margin-top:2px; }
.gobill .gl { font-size:9px; color:#666; }

.ownbox { background:#1f1a26; border:1px solid #3a2a4a; border-radius:10px; padding:11px 12px; margin-top:4px; }
.owncalc { display:flex; justify-content:space-between; font-size:11.5px; color:#999; padding:2px 0; }
.owncalc.res { color:#c084fc; font-weight:600; border-top:1px solid #3a2a4a; margin-top:5px; padding-top:6px; }

.note-strip { background:#181818; border-radius:8px; padding:8px 11px; font-size:11px; color:#777; margin-top:9px; }
.note-strip.warn { background:#1f1410; color:#fbbf24; }

/* ---- buttons ------------------------------------------------------------ */
.btn { width:100%; padding:12px; border-radius:10px; font-size:13px; font-weight:600; text-align:center; margin-top:11px; border:none; cursor:pointer; }
.btn-pri { background:#4444cc; color:#fff; }
.btn-pri:hover { background:#4a4ad6; }
.btn-pri.elec { background:#4444cc; }
.btn-pri.rent { background:#b5571a; }
.btn-out { background:transparent; border:1px solid #303030; color:#888; margin-top:6px; }
.btn-out:hover { color:#bbb; border-color:#444; }
.btn-danger { background:transparent; border:1px solid #5a2a2a; color:#f87171; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.link { font-size:11.5px; color:#818cf8; cursor:pointer; display:inline-block; padding:6px 0; }
.link:hover { text-decoration:underline; }
.link.rent { color:#fb923c; }

/* ---- payment form ------------------------------------------------------- */
.ff { margin-bottom:10px; }
.fl { font-size:11px; color:#555; margin-bottom:4px; }
.fi { background:#161616; border:1px solid #2a2a2a; border-radius:8px; padding:9px 12px; font-size:13px; color:#e0e0e0; width:100%; }
.fi:focus { outline:none; border-color:#444; }
.fi.big { font-size:19px; font-weight:600; }
.fi.big.elec { color:#818cf8; }
.fi.big.rent { color:#fb923c; }
select.fi { appearance:none; }
textarea.fi { resize:vertical; min-height:90px; font-family:inherit; }
.mchecks { display:flex; flex-direction:column; gap:6px; }
.mcheck { display:flex; align-items:center; gap:10px; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:9px 12px; cursor:pointer; }
.mcheck.ck { background:#16161e; border-color:#3a3a6a; }
.cb { width:16px; height:16px; border-radius:4px; border:1.5px solid #333; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.cb.on { background:#818cf8; border-color:#818cf8; }
.cb.on::after { content:'✓'; font-size:10px; color:#000; font-weight:700; }
.cm { font-size:12.5px; color:#ccc; flex:1; }
.ca { font-size:12px; color:#818cf8; }
.validate { border-radius:8px; padding:9px 12px; font-size:11.5px; margin-top:4px; }
.validate.ok  { background:#0f1e10; border:1px solid #1a3a1a; color:#4ade80; }
.validate.bad { background:#1e1010; border:1px solid #3a1a1a; color:#f87171; }

/* ---- FAB ---------------------------------------------------------------- */
.fab {
  position: fixed;
  bottom: 24px;
  right: max(16px, calc(50% - 300px + 16px));
  width: 52px; height: 52px; border-radius: 50%;
  background:#4444cc; color:#fff; border:none;
  font-size:26px; line-height:1; cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  z-index: 30;
  display:flex; align-items:center; justify-content:center;
}
.fab:hover { background:#4a4ad6; }

/* ---- modal / bottom sheet ----------------------------------------------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 40; display:flex; align-items:flex-end; justify-content:center;
}
.sheet {
  background:#1a1a1c; width:100%; max-width:600px;
  border-radius:18px 18px 0 0; border:1px solid #2e2e2e; border-bottom:none;
  max-height:92vh; overflow-y:auto; padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  animation: sheetup .18s ease-out;
}
@keyframes sheetup { from { transform: translateY(24px); opacity:.6; } to { transform:none; opacity:1; } }
.sheet h2 { font-size:15px; font-weight:600; margin-bottom:2px; }
.sheet .sheetsub { font-size:11px; color:#666; margin-bottom:14px; }
.sheet .closex { float:right; font-size:18px; color:#666; cursor:pointer; line-height:1; }
.seg { display:flex; gap:6px; }
.seg .chip { flex:1; text-align:center; }
.lvlrow { display:flex; gap:7px; align-items:center; margin-bottom:6px; }
.lvlrow .lvlnum { font-size:11px; color:#666; width:18px; }
.lvlrow .fi { flex:1; }
.lvlrow .rm { color:#f87171; cursor:pointer; font-size:14px; padding:0 4px; }

/* ---- login / states ----------------------------------------------------- */
.center-screen {
  min-height: 100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:32px 24px; gap:6px;
}
.center-screen .brand { font-size:20px; font-weight:700; color:#f0f0f0; }
.center-screen .tagline { font-size:12.5px; color:#666; margin-bottom:22px; max-width:300px; line-height:1.5; }
.gbtn {
  display:flex; align-items:center; gap:10px; background:#fff; color:#1f1f1f;
  border:none; border-radius:10px; padding:12px 20px; font-size:14px; font-weight:600; cursor:pointer;
}
.gbtn:hover { background:#f1f1f1; }
.gbtn .g { font-weight:700; }
.state-icon { font-size:34px; margin-bottom:6px; }
.empty { text-align:center; color:#555; font-size:12px; padding:26px 12px; }

/* ---- payment history row ------------------------------------------------ */
.payrow { background:#181818; border-radius:9px; padding:9px 11px; margin-bottom:6px; }
.payrow .pa { font-size:12px; color:#ddd; }
.payrow .pm { font-size:10px; color:#666; margin-top:2px; }

/* ---- past bills cards --------------------------------------------------- */
.pbcard { background:#1e1e1e; border-radius:10px; padding:11px 12px; margin-bottom:8px; }
.pbhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.pbmonth { font-size:12.5px; font-weight:600; }
.ratebadge { font-size:10.5px; color:#fbbf24; background:#1e1e14; border:1px solid #3a3a1a; border-radius:5px; padding:2px 7px; font-weight:600; }
.pbsub { font-size:10px; color:#555; margin:-1px 0 4px; }
.lumpnote { font-size:10px; color:#22d3ee; background:#12222a; border-radius:5px; padding:4px 8px; margin-top:6px; }

/* ---- toast -------------------------------------------------------------- */
#toast {
  position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
  background:#262630; color:#eee; border:1px solid #3a3a44; border-radius:9px;
  padding:10px 16px; font-size:12.5px; z-index:60; max-width:90vw; text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
#toast.err { background:#2a1414; border-color:#5a2a2a; color:#f8a0a0; }

/* ---- responsive: wider columns on desktop (spec) ------------------------ */
@media (min-width: 720px) {
  .app { max-width: 840px; border-radius: 0; }
  .body { padding: 18px 20px 110px; }
  .appbar { padding: 16px 20px 14px; }
  .sumstats .ss-v { font-size: 17px; }

  /* use the width: rent + electricity side by side */
  .summaries { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sumblock { padding: 13px 15px; }

  /* office list in two columns instead of one stranded column */
  .olist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  /* FAB hugs the right edge of the wider panel */
  .fab { right: max(20px, calc(50% - 420px + 20px)); }

  /* bottom-sheets become centered modal cards on desktop */
  .sheet-backdrop { align-items: center; padding: 24px; }
  .sheet {
    max-width: 480px;
    border-radius: 16px;
    border-bottom: 1px solid #2e2e2e;
    animation: sheetpop .16s ease-out;
  }
}
@keyframes sheetpop { from { transform: translateY(10px) scale(.99); opacity:.5; } to { transform:none; opacity:1; } }