/* Galla — daily cash book. Traditional red-cloth bahi-khata theme: deep wine + gold. */
:root{
  --bg:#1b0a0d; --bg2:#220d11;
  --panel:#2c1318; --panel2:#351820; --field:#190a0d;
  --ink:#f7ecdc; --ink2:#dcc6b2; --ink3:#a78a82;
  --line:#43232c; --line2:#56303a;
  --gold:#e6bb63; --gold2:#c4912f; --goldsoft:rgba(230,187,99,.15);
  --in:#56c08a; --out:#e8746e; --net:#e6bb63;
  --crimson:#b6273f;
  --shadow:0 8px 26px rgba(0,0,0,.42);
  --fb:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fh:'Fraunces',Georgia,serif;
}
body.light{
  --bg:#f5eee4; --bg2:#efe6d8;
  --panel:#fffdf9; --panel2:#fbf5ea; --field:#fff;
  --ink:#2a1418; --ink2:#5e4a44; --ink3:#917b73;
  --line:#e7d8c4; --line2:#dcc8b0;
  --goldsoft:rgba(196,145,47,.12);
  --shadow:0 8px 22px rgba(120,70,40,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}   /* ensure the hidden attribute always wins over .modal/.iconbtn-h display rules */
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 480px at 50% -200px, rgba(182,39,63,.22), transparent 70%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  background-attachment:fixed;color:var(--ink);font-family:var(--fb);font-size:15px;
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:680px;margin:0 auto;padding:0 14px;width:100%}

/* Header */
.top{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,rgba(34,13,17,.97),rgba(27,10,13,.92));
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(230,187,99,.22)}
body.light .top{background:linear-gradient(180deg,rgba(255,253,249,.97),rgba(245,238,228,.9))}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(11px + env(safe-area-inset-top)) 14px 11px}
.logo{display:flex;align-items:center;gap:11px;min-width:0}
.logo .lm{width:40px;height:40px;flex:none;border-radius:12px;overflow:hidden;display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(230,187,99,.5),0 3px 9px rgba(0,0,0,.5)}
.logo .lm img{width:100%;height:100%;object-fit:cover}
.logo .tx{font-family:var(--fh);font-weight:700;font-size:20px;letter-spacing:.01em;display:flex;flex-direction:column;line-height:1}
.logo .tx small{font-family:var(--fb);font-weight:500;font-size:10px;letter-spacing:.06em;color:var(--gold);margin-top:3px;opacity:.85}
.hbtns{display:flex;align-items:center;gap:8px}
.shopbtn{display:flex;align-items:center;gap:6px;max-width:140px;padding:8px 11px;border-radius:10px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--ink2);font-size:12.5px;font-weight:600}
.shopbtn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopbtn:active{border-color:var(--gold)}
.iconbtn-h{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);
  color:var(--ink2);display:grid;place-items:center}
.iconbtn-h:active{border-color:var(--gold);color:var(--gold)}
svg.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Tabs */
.tabs{position:sticky;top:62px;z-index:25;background:rgba(27,10,13,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
body.light .tabs{background:rgba(245,238,228,.85)}
.tabs .wrap{display:flex;gap:4px;overflow-x:auto;padding:8px 10px;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tab{flex:none;display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:10px;font-size:13px;
  font-weight:600;color:var(--ink3);white-space:nowrap;border:1px solid transparent}
.tab .ic{width:16px;height:16px}
.tab.on{color:var(--bg);background:linear-gradient(135deg,var(--gold),var(--gold2));box-shadow:0 3px 10px rgba(196,145,47,.3)}
body.light .tab.on{color:#fff}

main{padding:16px 0 110px}

/* Cards */
.card{position:relative;background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:15px;margin-bottom:13px;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(230,187,99,.5),transparent)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.card-h h2{font-family:var(--fh);font-weight:600;font-size:16px;color:var(--ink)}
.cnt{font-size:11px;font-weight:700;color:var(--gold);background:var(--goldsoft);border:1px solid rgba(230,187,99,.3);padding:2px 9px;border-radius:20px}
.hint{font-size:12.5px;color:var(--ink3);line-height:1.55;margin-bottom:11px}
.muted{color:var(--ink3);font-size:12px}

/* Day bar */
.daybar{display:flex;align-items:center;gap:10px;padding:11px 13px}
.navday{width:40px;height:40px;flex:none;border-radius:11px;border:1px solid var(--line2);background:var(--field);color:var(--gold);display:grid;place-items:center}
.navday:active{transform:scale(.95)}
.dpick{flex:1;text-align:center;position:relative}
.dpick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.dlabel{font-family:var(--fh);font-weight:600;font-size:17px;color:var(--ink)}

/* Balances */
.balgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}
.balcard{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.balcard span{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.balcard b{font-family:var(--fh);font-weight:700;font-size:22px;display:block;margin:5px 0 2px}
.balcard small{font-size:10.5px;color:var(--ink3)}
.balcard.close{border-color:rgba(230,187,99,.4);background:linear-gradient(180deg,rgba(230,187,99,.08),var(--panel2))}
.balcard.close b{color:var(--gold)}

.iorow{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:13px}
.iocard{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:12px 13px}
.iocard .ic{width:30px;height:30px;flex:none;padding:6px;border-radius:9px}
.iocard.in .ic{color:var(--in);background:rgba(86,192,138,.14)}
.iocard.out .ic{color:var(--out);background:rgba(232,116,110,.14)}
.iocard span{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);display:block}
.iocard b{font-family:var(--fh);font-weight:700;font-size:18px}

/* Entries */
.entries{list-style:none}
.entry{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.entry:last-child{border-bottom:none}
.entry .ed{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:15px}
.entry.in .ed{color:var(--in);background:rgba(86,192,138,.13)}
.entry.out .ed{color:var(--out);background:rgba(232,116,110,.13)}
.entry .em{flex:1;min-width:0}
.entry .em b{font-size:14.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry .em small{font-size:11.5px;color:var(--ink3)}
.entry .mtag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);border:1px solid var(--line2);padding:2px 6px;border-radius:6px;margin-left:6px}
.entry .ev{font-family:var(--fh);font-weight:700;font-size:15.5px;white-space:nowrap}
.entry.in .ev{color:var(--in)}.entry.out .ev{color:var(--out)}
.empty{padding:26px 12px;text-align:center;color:var(--ink3);font-size:13.5px;line-height:1.7}

.quickadd{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:13px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;
  padding:12px 15px;font-size:14px;font-weight:700;letter-spacing:.01em;transition:.12s;border:1px solid transparent}
.btn .ic{width:17px;height:17px}
.btn:active{transform:translateY(1px)}
.btn.block{width:100%}
.btn.sm{padding:8px 12px;font-size:12.5px;border-radius:10px}
.btn.big{padding:15px;font-size:15px;margin-top:6px}
.btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#241016;box-shadow:0 4px 15px rgba(196,145,47,.3)}
.btn.in{background:linear-gradient(135deg,#57c790,#37a06f);color:#06210f}
.btn.out{background:linear-gradient(135deg,#ef827c,#d05a55);color:#2a0d0c}
.btn.ghost{background:var(--panel2);border:1px solid var(--line2);color:var(--ink2)}
.btn.ghost:active{border-color:var(--gold);color:var(--gold)}
.btn.danger{color:var(--out)}
.btn.danger.ghost{border-color:rgba(232,116,110,.4)}
.srow{display:flex;gap:9px;flex-wrap:wrap}
.srow .btn{flex:1;min-width:120px}

/* Inputs */
input[type=text],input[type=number],input[type=date],input[type=month],select{
  width:100%;background:var(--field);border:1px solid var(--line2);border-radius:11px;padding:12px 13px;color:var(--ink)}
input::placeholder{color:var(--ink3)}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--goldsoft)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.inline{display:flex;gap:9px}.inline input{flex:1}
.search{max-width:160px;padding:8px 11px;border-radius:9px;font-size:13px}
label{display:block}

/* Denomination counter */
.denoms{display:flex;flex-direction:column;gap:9px}
.den{display:grid;grid-template-columns:74px 1fr 96px;gap:10px;align-items:center}
.den .dv{font-family:var(--fh);font-weight:700;font-size:16px;color:var(--gold)}
.den .dx{font-size:12px;color:var(--ink3);text-align:right}
.den input{text-align:center;padding:10px}
.coinrow{margin-top:12px}
.coinrow label{font-size:12px;color:var(--ink3);margin-bottom:6px}
.countsum .csrow{display:flex;justify-content:space-between;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.countsum .csrow b{font-family:var(--fh);font-size:18px;color:var(--ink)}
.countsum .csrow.diff b{font-size:20px}
.countsum .diff.ok b{color:var(--in)}.countsum .diff.short b{color:var(--out)}.countsum .diff.over b{color:var(--gold)}
.countsum .btn{margin-top:13px}

/* Reports */
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.stat{background:var(--field);border:1px solid var(--line);border-radius:13px;padding:13px 8px;text-align:center}
.stat b{font-family:var(--fh);font-weight:700;font-size:18px;display:block}
.stat span{font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin-top:5px;display:block}
.stat.in b{color:var(--in)}.stat.out b{color:var(--out)}.stat.net b{color:var(--gold)}
canvas{width:100%;display:block}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:middle}
.legend span{font-size:12px;color:var(--ink2)}
.modebars{display:flex;flex-direction:column;gap:10px}
.mb{display:grid;grid-template-columns:74px 1fr 70px;gap:9px;align-items:center;font-size:12.5px}
.mb .bar{height:9px;border-radius:5px;background:var(--field);overflow:hidden}
.mb .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold))}
.mb .mv{text-align:right;color:var(--ink2);font-weight:600}

/* Table */
.scrollx{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th,.tbl td{padding:8px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold)}
.tbl td{color:var(--ink2)}
.tbl .r{text-align:right}
.tbl .in{color:var(--in);font-weight:600}.tbl .out{color:var(--out);font-weight:600}

/* Shops list */
.shoplist,.shopswitch{list-style:none}
.shopitem,.swi{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px;border-bottom:1px solid var(--line)}
.shopitem:last-child,.swi:last-child{border-bottom:none}
.shopitem b,.swi b{font-size:14.5px;font-weight:600}
.shopitem .sa{display:flex;gap:8px}
.swi{cursor:pointer;padding:13px 4px}
.swi.on b{color:var(--gold)}
.swi .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);visibility:hidden}
.swi.on .dot{visibility:visible}
.linkbtn{font-size:12.5px;font-weight:700;color:var(--gold)}
.linkbtn.del{color:var(--out)}

/* Categories chips */
.catwrap{display:flex;flex-direction:column;gap:16px}
.catgrp h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--field);border:1px solid var(--line2);border-radius:18px;padding:6px 7px 6px 12px;font-size:12.5px}
.chip button{width:18px;height:18px;border-radius:50%;background:rgba(232,116,110,.16);color:var(--out);font-size:13px;display:grid;place-items:center}

/* Modal / bottom sheet */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(8,3,4,.6);backdrop-filter:blur(3px);animation:fade .15s}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;max-width:520px;background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-bottom:none;border-radius:20px 20px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.5);animation:slideup .2s}
@keyframes slideup{from{transform:translateY(40px)}}
.sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sheet-h b{font-family:var(--fh);font-weight:600;font-size:18px}
.sheet .x{width:32px;height:32px;border-radius:50%;background:var(--field);color:var(--ink2);font-size:20px;line-height:1;display:grid;place-items:center}
.field{margin-bottom:13px}
.field label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin-bottom:6px}
.amtbig{display:flex;align-items:center;justify-content:center;gap:4px;margin:6px 0 18px}
.amtbig #amtSign{font-family:var(--fh);font-size:26px;color:var(--gold)}
.amtbig .cur{font-family:var(--fh);font-size:26px;color:var(--ink3)}
.amtbig input{border:none;background:none;text-align:center;font-family:var(--fh);font-weight:700;font-size:40px;width:auto;max-width:60%;padding:0}
.amtbig input:focus{box-shadow:none}
.modes{display:flex;gap:7px;flex-wrap:wrap}
.modebtn{flex:1;min-width:64px;padding:10px 6px;border-radius:10px;border:1px solid var(--line2);background:var(--field);color:var(--ink2);font-size:12.5px;font-weight:600}
.modebtn.on{background:var(--goldsoft);border-color:var(--gold);color:var(--gold)}

/* Toast */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:80;
  background:#0e0507;color:var(--ink);border:1px solid var(--gold);border-radius:12px;padding:11px 18px;
  font-size:13.5px;font-weight:600;box-shadow:0 8px 26px rgba(0,0,0,.5);max-width:88%}
body.light .toast{background:#fff;color:var(--ink)}

.view{display:none}.view.on{display:block}

/* Print */
@media print{
  .top,.tabs,.quickadd,.sharecard,.btn,.daybar .navday,.modal,.toast,ins,.adsbygoogle{display:none !important}
  body{background:#fff;color:#000}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  #printArea{display:block !important}
}
#printArea{display:none}