/* ============================================================
   Madhuban Accounts — design system
   Every visual decision lives here. Edit this file to restyle
   the whole application; nothing else carries colour or type.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root{
  /* Colour — teal appears only on things you have chosen */
  --teal:#009b90;
  --teal-dark:#00776f;
  --teal-tint:#e3f2f0;
  --ink:#1e211d;
  --mut:#6b706a;
  --faint:#9aa09a;
  --page:#f2f3ee;
  --card:#fbfbf9;
  --line:#dfe1da;
  --line2:#c9ccc3;
  --danger:#a8442f;

  /* Shape — softened, not rounded */
  --r:4px;
  --r-card:6px;
  --r-pill:100px;

  --font:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---------- forms ---------- */
select,input[type=text],input[type=search]{padding:9px;border:1px solid var(--line);
   border-radius:var(--r);font-family:var(--font);font-size:13px;
   background:var(--card);color:var(--ink)}
select:focus,input:focus{outline:none;border-color:var(--line2)}

a{color:var(--teal-dark)}

.wrap{max-width:460px;margin:0 auto;padding:0 0 44px}
.wrap-wide{max-width:760px;margin:0 auto;padding:20px 14px 60px}

/* ---------- header ---------- */
.hd{display:flex;align-items:center;justify-content:space-between;
    padding:12px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
       color:var(--ink);letter-spacing:-.01em}
.brand svg{flex:0 0 auto}

/* ---------- date control ---------- */
.datebtn{display:inline-flex;align-items:center;gap:5px;font-family:var(--font);
   font-size:12px;font-weight:500;color:var(--mut);background:var(--card);
   border:1px solid var(--line2);border-radius:var(--r);padding:5px 9px;cursor:pointer}
.datebtn.past{border-color:var(--teal);background:var(--teal-tint);
   color:var(--teal-dark);font-weight:600}

/* ---------- labels ---------- */
.lb{font-size:11px;color:var(--faint);letter-spacing:.06em;
    text-transform:uppercase;font-weight:500;margin-bottom:8px}

/* ---------- amount ---------- */
.amt{padding:24px 14px 4px;text-align:center}
.amt input,#amount{width:100%;border:0;background:none;text-align:center;font-family:var(--font);
   font-size:44px;font-weight:600;letter-spacing:-.035em;line-height:1.05;
   color:var(--ink);padding:0;font-variant-numeric:tabular-nums}
.amt input:focus{outline:none}
.amt input::placeholder{color:var(--line2)}
.backdate{margin-top:11px;font-size:12px;color:var(--teal-dark);font-weight:600;
   min-height:18px;display:none}

/* ---------- mic pill ---------- */
.mic{display:none;margin:11px auto 0;padding:6px 14px;border-radius:var(--r-pill);
   border:1px solid var(--line2);background:var(--card);color:var(--mut);
   font-size:12px;font-family:var(--font);font-weight:500;cursor:pointer;
   align-items:center;gap:6px;max-width:100%;
   transition:background .15s,color .15s,border-color .15s}
.mic.live{background:var(--teal);color:#fff;border-color:var(--teal)}
.mic span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- tiles ---------- */
section{padding:14px 14px 0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tile{padding:13px 8px;border:1px solid var(--line);background:var(--card);
   border-radius:var(--r);font-size:13px;font-weight:500;font-family:var(--font);
   color:var(--ink);text-align:center;cursor:pointer}
.tile.on{border-color:var(--teal);background:var(--teal-tint);
   color:var(--teal-dark);font-weight:600}
.more{margin-top:7px;width:100%;padding:10px;border:1px dashed var(--line2);
   background:none;border-radius:var(--r);font-size:12px;color:var(--mut);
   font-family:var(--font);cursor:pointer}

/* ---------- fields ---------- */
.field{position:relative;display:flex}
.field input{flex:1;padding:11px 40px 11px 12px;border:1px solid var(--line);
   border-radius:var(--r);font-size:13px;font-family:var(--font);
   background:var(--card);color:var(--ink)}
.field input::placeholder{color:var(--faint)}
.field input:focus{outline:none;border-color:var(--line2)}
.fmic{position:absolute;right:5px;top:50%;transform:translateY(-50%);
   width:30px;height:30px;border-radius:3px;border:0;background:none;
   color:var(--faint);cursor:pointer;display:none;
   align-items:center;justify-content:center;padding:0}
.fmic.live{background:var(--teal);color:#fff}

/* ---------- buttons ---------- */
.btn{padding:9px 14px;border:1px solid var(--line2);background:var(--card);
   color:var(--ink);border-radius:var(--r);font-size:13px;font-weight:500;
   font-family:var(--font);cursor:pointer}
.btn:disabled{opacity:.4;cursor:default}
.btn-primary{background:var(--teal);color:#fff;border-color:var(--teal);font-weight:600}
.btn-block{display:block;width:100%;margin-top:14px;padding:14px;font-size:14px}

/* ---------- ruled rows ---------- */
.rows{padding:22px 14px 0}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
   padding:10px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .c{font-size:13px;font-weight:500}
.row .m{font-size:11px;color:var(--faint);margin-top:1px}
.row .v{font-size:14px;font-weight:600;white-space:nowrap}
.row .x{background:none;border:0;color:var(--faint);font-size:16px;
   padding:0 2px;cursor:pointer;font-family:var(--font)}
.empty{color:var(--faint);font-size:13px;padding:16px 0}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);
   border-radius:var(--r-card);padding:13px 15px;margin-bottom:8px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:60;
   background:var(--ink);color:#fff;padding:11px 16px;border-radius:var(--r);
   font-size:13px;font-weight:500;display:none;align-items:center;gap:14px}
.toast button{background:none;border:0;color:#6fd3c6;font-size:13px;
   font-family:var(--font);font-weight:600;padding:0;cursor:pointer}

/* ---------- sheet ---------- */
.sheet{position:fixed;inset:0;background:rgba(30,33,29,.32);z-index:70;display:none}
.sheet .panel{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;
   background:var(--page);border-radius:12px 12px 0 0;padding:14px 14px 30px}
.sheet input[type=search]{width:100%;padding:11px;border:1px solid var(--line);
   border-radius:var(--r);font-size:16px;font-family:var(--font);
   background:var(--card);margin-bottom:10px}
.grp{font-size:10px;color:var(--faint);text-transform:uppercase;
   letter-spacing:.07em;font-weight:600;margin:14px 0 6px}
.opt{width:100%;text-align:left;padding:11px 12px;border:1px solid var(--line);
   background:var(--card);border-radius:var(--r);margin-bottom:5px;
   font-family:var(--font);font-size:14px;color:var(--ink);cursor:pointer}
.opt small{display:block;color:var(--faint);font-size:11px;margin-top:1px}


/* ---------- misc ---------- */
h1{font-size:18px;font-weight:600;margin:0 0 3px;letter-spacing:-.015em}
h2{font-size:11px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;
   font-weight:600;margin:26px 0 9px}
.foot{margin-top:26px;text-align:center;font-size:11px;color:var(--faint)}
.foot a{color:var(--faint)}
.hint{margin:12px 14px 0;padding:10px 12px;background:var(--teal-tint);
   color:var(--teal-dark);border-radius:var(--r);font-size:12px;font-weight:500;
   display:flex;justify-content:space-between;gap:10px}
.hint button{background:none;border:0;color:inherit;font-size:15px;
   line-height:1;padding:0;cursor:pointer}
.meta{font-size:11px;color:var(--faint)}
.pill-tag{background:var(--teal-tint);color:var(--teal-dark);font-size:10px;
   font-weight:600;padding:2px 7px;border-radius:var(--r-pill);margin-left:6px}

/* ---------- review queue ---------- */
.item .top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.item .ctl{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap;align-items:center}
.item .ctl select{flex:1;min-width:170px}
.notewrap{position:relative;flex:1;min-width:150px;display:flex}
.notewrap input{flex:1;padding-right:34px;width:100%}
.nmic{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;
   border:0;background:none;color:var(--faint);padding:0;display:none;cursor:pointer;
   align-items:center;justify-content:center;border-radius:3px}
.nmic.live{background:var(--teal);color:#fff}
label.rem{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:5px;flex-basis:100%}
label.rem b{font-weight:600;color:var(--teal-dark)}
.savebar{position:fixed;left:0;right:0;bottom:0;background:var(--card);
   border-top:1px solid var(--line);padding:11px 14px;display:flex;justify-content:center;gap:10px}
.msg{font-size:12px;color:var(--mut);align-self:center}

/* ---------- login ---------- */
body.centre{display:grid;place-items:center;min-height:100vh;padding:24px}
.loginbox{max-width:330px;width:100%;background:var(--card);border:1px solid var(--line);
   border-radius:var(--r-card);padding:30px 24px;text-align:center}
.loginbox h1{font-size:17px;margin:12px 0 7px}
.loginbox p{font-size:13px;color:var(--mut);margin:0;line-height:1.65}
.err{margin-top:13px;font-size:13px;color:var(--danger)}

/* ---------- diagnostics ---------- */
table{width:100%;border-collapse:collapse;background:var(--card);
      border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
td,th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;
      font-size:12px;vertical-align:top}
th{background:var(--page);font-size:10px;text-transform:uppercase;
   letter-spacing:.06em;color:var(--faint);font-weight:600}
tr.b td{background:var(--teal-tint)}
pre{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
    padding:13px;white-space:pre-wrap;word-break:break-word;font-size:11px;
    line-height:1.6;max-height:420px;overflow:auto;font-family:ui-monospace,monospace}