/* MatArc CashBook — sign-in screen, "Split with friends" tab and phone layout */

/* ---------- sign-in ---------- */
body.locked{overflow:hidden}
#authGate{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;padding:16px;overflow:auto}
.authcard{width:min(400px,100%);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 24px;box-shadow:0 20px 50px #0000000f}
.authlogo{display:block;width:120px;margin:0 auto 18px}
.authcard h1{font-size:21px;text-align:center;margin-bottom:6px}
.authcard>p{text-align:center;font-size:13px;margin-bottom:20px}
.authgoogle{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;font-weight:600}
.authgoogle span{font-weight:800;color:#4285f4}
.author{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--muted);font-size:12px}
.author::before,.author::after{content:"";flex:1;height:1px;background:var(--line)}
.authsubmit{width:100%;padding:12px;font-size:15px}
.authlinks{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px;margin-top:12px}
.authlinks .btn{padding:8px 4px;font-size:13px;white-space:normal}

/* ---------- Settings → Account & sync ---------- */
.cloudset{display:grid;gap:14px;padding:12px 0}
.cloudrow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cloudrow input{flex:1;min-width:200px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px}
.chip button{border:0;background:none;color:var(--muted);padding:0 2px}

/* ---------- Split tab ---------- */
body.on-split .projc,body.on-split #balChip,body.on-split #addBtn,body.on-split #fab{display:none!important}
.sp-stats{grid-template-columns:repeat(3,1fr)}
.spgroups{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.spgroup{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0}
.spgroup:hover{border-color:var(--green)}
.spav{flex:0 0 42px;height:42px;border-radius:12px;background:var(--greenSoft);color:var(--green);display:grid;place-items:center;font-weight:800;font-size:18px}
.spgmain{flex:1;min-width:0}
.spgmain b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spgmain small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.spgbal{text-align:right;font-size:13px;font-weight:700;line-height:1.3;white-space:nowrap}
.spgbal.dim{font-weight:500}
.sphead{display:flex;align-items:center;gap:8px;margin:18px 0 4px}
.sphead h2{flex:1;min-width:0;font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sphead .btn.ghost{padding-left:0}
.spsubs{margin:4px 0 14px}
.spnote{font-size:12px;color:var(--muted);margin:-4px 0 12px}
.spmonth{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:16px 2px 8px}
.spmonth:first-child{margin-top:0}
.splist{display:flex;flex-direction:column}
.sprow{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 14px;text-align:left;min-width:0}
.sprow:last-child{border-bottom:0}
button.sprow:hover{background:var(--greenSoft)}
.spdate{flex:0 0 38px;text-align:center;font-size:10px;text-transform:uppercase;color:var(--muted);line-height:1.2}
.spdate b{display:block;font-size:17px;color:var(--ink)}
.spmain{flex:1;min-width:0}
.spmain b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spmain small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.spamt{text-align:right;font-weight:700;white-space:nowrap;font-size:14px}
.spamt small{display:block;font-size:10px;font-weight:500;color:var(--muted)}
.sprow.pay .spdate b{color:var(--muted)}
.sprow.settle{flex-wrap:wrap}
.spbtns{display:flex;gap:6px;flex-wrap:wrap}
.spcols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sptitle{font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line)}
.spfabs{position:sticky;bottom:16px;display:flex;justify-content:flex-end;gap:10px;margin-top:18px;pointer-events:none}
.spfabs .btn{pointer-events:auto;box-shadow:0 8px 24px #0000002a;padding:12px 18px;font-size:14px}

/* expense form */
.spbox{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:4px 12px;margin-top:4px}
.sprowin,.field label.sprowin{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer;min-width:0;
  margin:0;font-size:14px;font-weight:500;color:var(--ink);text-transform:none;letter-spacing:0}
.sprowin:last-child{border-bottom:0}
.sprowin>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sprowin input[type=checkbox]{width:20px;height:20px;flex:0 0 20px;accent-color:var(--brand-gold,#efa923)}
.spinwrap{display:flex;align-items:center;gap:6px;flex:0 0 150px}
.spinwrap input{padding:8px 10px;text-align:right}
.spinwrap em{font-style:normal;font-size:12px;color:var(--muted);width:40px}
.spshare{flex:0 0 76px;text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.spsum{font-size:12px;font-weight:600;color:var(--green);min-height:18px;margin-top:6px}
.spsum.bad{color:var(--red)}
#spPayers{margin-bottom:13px}
.spmember{display:grid;grid-template-columns:1.1fr 1.4fr 1.1fr auto;gap:8px;align-items:center;margin-bottom:8px}
.spmember .tag{justify-self:center}

/* ---------- phones ---------- */
@media(max-width:860px){
  .sp-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .sp-stats .stat{padding:10px 12px}
  .sp-stats .stat b{font-size:16px}
  .spcols{grid-template-columns:1fr}
}
@media(max-width:600px){
  .spgroups{grid-template-columns:1fr}
  .sp-stats .stat small{font-size:9px;letter-spacing:.3px}
  .sp-stats .stat b{font-size:14px}
  .spfabs{bottom:12px}
  .spfabs .btn{flex:1;padding:13px 10px}
  .spinwrap{flex-basis:118px}
  .spshare{flex-basis:64px}
  .spmember{grid-template-columns:1fr auto;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
  .spmember input[name=memail],.spmember input[name=mupi]{grid-column:1/-1}
  .spmember .tag,.spmember [data-sprm]{grid-row:1;grid-column:2}
  /* compact header: [☰ 🧮 🔍 … Backup] / [project ▾ | balance] instead of three tall rows */
  header.top{position:static}
  .topin.topmain{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px 12px}
  .topmain .r{display:contents}
  .topmain .l{grid-column:1;grid-row:1;gap:6px}
  #backupQuick{grid-column:2;grid-row:1;font-size:12px;padding:6px 10px;min-height:36px}
  .topmain .projc{grid-column:1;grid-row:2;justify-content:stretch}
  .topmain .projc select{width:100%;padding:8px 10px}
  #balChip{grid-column:2;grid-row:2;font-size:12px;padding:6px 10px;white-space:normal;text-align:right;line-height:1.25;max-width:170px}
  .topmain .l .btn{min-height:38px;padding:6px 11px}
  #sidebarToggle{font-size:0}
  #sidebarToggle::before{content:"☰";font-size:19px;line-height:1}
  body.on-split .topmain .projc{display:none}
  /* filters: two neat columns, search on its own line */
  .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters input,.filters select{width:100%;min-width:0}
  .filters .grow,.filters>:only-child{grid-column:1/-1}
  /* tables: page scrolls, not a box inside the page; tighter cells so four columns fit */
  .scroll{max-height:none}
  table{font-size:12.5px}
  td,th{padding:9px 6px}
  td:first-child,th:first-child{padding-left:10px}
  td:last-child,th:last-child{padding-right:10px}
  .stats{gap:8px;margin:12px 0}
  .stat{padding:11px 12px}
  .stat b{font-size:17px}
  /* comfortable touch targets and no iOS zoom-on-focus (inputs under 16px zoom the page) */
  input,select,textarea{font-size:16px}
  .btn{min-height:40px}
  .btn.sm{min-height:34px}
  .sidebar nav button{padding:11px 10px;font-size:14px}
  #toast{left:12px;right:12px;transform:none;bottom:calc(16px + env(safe-area-inset-bottom));text-align:center}
}
/* installed app (PWA / APK): keep clear of the phone's notch and gesture bar */
@media(display-mode:standalone){
  header.top{padding-top:env(safe-area-inset-top)}
  .wrap{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .fab{bottom:calc(18px + env(safe-area-inset-bottom))}
}

/* ---------- simple personal cashbook (js/personal.js) ---------- */
.pbbrand{display:flex;align-items:center;justify-content:center;gap:10px;padding:4px 0}
.pbbrand img{width:34px;height:34px;border-radius:9px}
.pbbrand b{font-size:21px;letter-spacing:-.3px;color:#171717}
.pb-stats{grid-template-columns:repeat(3,1fr)}
.pbday{display:flex;justify-content:space-between;align-items:baseline}
.pbday span:last-child{font-size:11px;letter-spacing:0;text-transform:none}
.pbdot{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px}
.pbdot.in{background:var(--greenSoft);color:var(--green)}
.pbdot.out{background:var(--redSoft);color:var(--red)}
.pbbook{padding:0;gap:0}
.pbbookopen{flex:1;display:flex;align-items:center;gap:12px;background:none;border:0;text-align:left;padding:14px;min-width:0}
.pbbook .btn{margin-right:8px}
.pbbook .spgbal small{font-weight:500;font-size:11px}
.track.pbtwo{display:flex;flex-direction:column;gap:2px;height:10px;background:none}
.track.pbtwo i{height:4px;border-radius:3px}
.spav.round{border-radius:50%}
.pbfriendbal{padding:18px;text-align:center;margin:12px 0}
.pbfriendbal small{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.pbfriendbal b{font-size:30px;letter-spacing:-.8px}
.pbfriendbal.in b{color:var(--green)}
.pbfriendbal.out b{color:var(--red)}
.pblend{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.pblend .btn{padding:13px;font-weight:700}
.pblend [data-splend=gave]{color:var(--red)}
.pblend [data-splend=took]{color:var(--green)}
body.simple .sidebar-brand{padding:14px 16px 10px}
@media(max-width:600px){.pb-stats .stat b{font-size:14px}.pb-stats .stat small{font-size:9px}}
.authlogo[src$=".svg"]{width:72px;border-radius:18px;margin-bottom:8px}
.authname{text-align:center;font-weight:800;font-size:24px;letter-spacing:-.4px;margin-bottom:14px}

/* ---------- history, invites ---------- */
.sprow.hist{align-items:flex-start}
.histav{flex:0 0 34px!important;height:34px!important;font-size:14px!important}
.histtext{display:block;font-size:13.5px;line-height:1.4}
.histtext b{display:inline;white-space:normal}
.histchg{display:block;background:var(--bg);border-radius:8px;padding:6px 9px;margin:6px 0 2px;color:var(--ink)!important;line-height:1.5}
.sprow.hist.deleted .histtext{color:var(--muted)}
.sprecent{margin-top:14px}
.sprecentall{width:100%;border-top:1px solid var(--line);border-radius:0;color:var(--blue);font-weight:600;padding:12px}
.spinvlink{display:flex;gap:8px}
.spinvlink input{font-size:13px}
.spmember{grid-template-columns:1fr 1fr 1.2fr 1fr auto}
@media(max-width:600px){.spmember{grid-template-columns:1fr auto}.spmember input[name=mphone]{grid-column:1/-1}}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* ---------- KhatePe: money in = green, money out = red (cashbook, reports, split, udhaar) ---------- */
:root{--credit:#15803d;--creditSoft:#dcfce7;--debit:#dc2626;--debitSoft:#fee2e2}
:root[data-theme=dark]{--credit:#4ade80;--creditSoft:#14331f;--debit:#f87171;--debitSoft:#3a1d1d}
body.simple .in,body.simple .stat.in b,body.simple .spgbal.in,body.simple .spamt.in,body.simple .pbfriendbal.in b,body.simple .spsum:not(.bad){color:var(--credit)}
body.simple .out,body.simple .stat.out b,body.simple .spgbal.out,body.simple .spamt.out,body.simple .pbfriendbal.out b,body.simple .spsum.bad{color:var(--debit)}
body.simple .pbdot.in{background:var(--creditSoft);color:var(--credit)}
body.simple .pbdot.out{background:var(--debitSoft);color:var(--debit)}
body.simple .track i:not(.red){background:var(--credit)}
body.simple .track i.red{background:var(--debit)}
body.simple .pblend [data-splend=gave]{color:var(--debit)}
body.simple .pblend [data-splend=took]{color:var(--credit)}
body.simple .seg button.on.in{border-color:var(--credit);background:var(--creditSoft);color:var(--credit)}
body.simple .seg button.on.out{border-color:var(--debit);background:var(--debitSoft);color:var(--debit)}
body.simple .balchip{background:var(--creditSoft);color:var(--credit);border-color:var(--credit)}
body.simple .balchip.neg{background:var(--debitSoft);color:var(--debit);border-color:var(--debit)}

/* ---------- categories, receipts, Drive backup, business logo ---------- */
.pbcats{display:grid;gap:16px;padding:12px 0}
.pbcatbox{display:grid;gap:8px}
.pbcatname{border:0;background:none;padding:0;font:inherit;color:inherit}
.rcchips{margin-bottom:8px}
.rcchip button:first-child{border:0;background:none;padding:0;font:inherit;color:var(--ink);display:inline-flex;gap:5px;align-items:center}
.rcadd{cursor:pointer}
#rcView{position:fixed;inset:0;z-index:90;background:#000e;display:flex;flex-direction:column}
#rcView[hidden]{display:none}
#rcView .rcbar{display:flex;gap:8px;align-items:center;padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top));color:#fff;background:#000}
#rcView .rcbar b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rcView img{flex:1;min-height:0;object-fit:contain;width:100%}
.drdue{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#e8f1fd;color:#123a6b;border:1px solid #b9d3f5;font-size:13px}
:root[data-theme=dark] .drdue{background:#13253b;color:#cfe2fb;border-color:#2b4a70}
.pbbrand img.pblogo{width:auto;max-width:120px;height:34px;object-fit:contain;border-radius:6px}